In the previous installment of the technical series, we discussed about why friGame was the chosen technology for developing Frank the Dillo; today we will be talking about the concepts behind friGame and the basic structure of a game based on it.
The first important concept behind any HTML5 game, but especially of a game built with friGame, is that the game is simply a web page, so the basic web technologies like HTML, CSS, and popular JavaScript libraries like jQuery and Modernizr are used whenever possible, and only when something is not possible, or difficult using those technologies, is done using friGame.
To summarize, here's the intended purpose of each technology:
| HTML: | The basic structure of the web page. Inside of it there will be a <div> element that will contain the game (called playground in friGame terms). |
|---|---|
| CSS: | The style of the entire web page, including the width and height of the playground, the style and position of the texts inside the game and the style of the game menus. It is also used to declare custom fonts. |
| Modernizr: | It is a hard requirement only when using the DOM backend of friGame, but it can also help writing the CSS and testing whether the browser supports some web technologies, for example to test if the localStorage is enabled in the browser or not. |
| jQuery: | Handling of input events and rendering of text and menus of the game. In order to have a cleaner code base, it is recommended to use a templating engine such as Dustjs for rendering the game text and menus, and then attach the rendered template to the DOM using jQuery. |
| friGame: | Everything else in the game, including defining animations and sounds, sprite handling, collision detection, and game logic. |
I won't be talking about the other technologies here, as their respective websites have enough documentation. By the way, if you want to know more about HTML and CSS, I recommend you to take a look at the Mozilla Developer Network.
Now let's take a look at the structure of a friGame based game.
Any game does the following steps:
- Resource loading (sometimes called asset loading), making animations and sounds avaliable to the game.
- Set up the scene, display the background and the sprites in their initial state and position.
- Start a game loop that listens to input and/or network events, and adjusts the various sprite states and positions accordingly.
Now, depending on the game size, step 1 can be done only once for the entire game, or before every level, or anything in between, whereas steps 2 and 3 are done on every game level. Also, for games running in a web browser environment, the game loop described in step 3 isn't really a loop, but it is a callback function, or a series of callback functions, that get called periodically instead.
In the same way that there are 3 steps involved in the creation of a game, friGame can be divided into 3 big blocks:
- The resource manager, that takes care of the loading and unloading of the various resources, such as animations and sounds.
- The playground, that contains all the sprites and sprite groups of the game.
- The game control that takes care of starting and stopping the game, and handling of game callback functions.
The next blog post will show how these 3 blocks are used in a game, stay tuned.
Comments !