Nikolas Banspach of InnoGames provides a how-to of graphics and animation loading in Flash games, using the developer’s Forge of Empires as a case in point for what can be done with a few tidy tricks
PLAYERS EXPECT modern browser games to have increasingly complex game mechanics and high quality graphics. Thus, at InnoGames we created well over 200
partially-animated buildings for the Forge of Empires’ city view. Even with these, however, the loading time for those with slower DSL lines or poor quality connections has to remain on a bearable level. Creating a smooth gaming experience was one of the most important requirements for the development team. Long waiting times at the start or during the game should always be avoided. At the same time, however, the sophisticated optics require a number of bandwidth-hungry bitmap graphics. So how do developers bring this all under one roof?
If a team is like us and has several
hundred graphics for GUI elements, it is important to look early for ways to reduce their weight.
Nikolas Banspach, InnoGames
We did this by making Forge of Empires a modular design. First, only a relatively small main application is started. This in turn signals for the first resource package that includes graphics for the interface and dialogs, which are essential for the game. All other images are retrieved only when needed by the servers, and are mostly stored in resource bundles together. By doing this, one can effectively reduce the number of requests to the server and use the LZMA compression, introduced in Flash Player 11.2. But also entire parts of the program – for example the campaign map and battle are each being put into separate modules – which will only get requested after a corresponding user action. Despite the abandonment of some features in
Forge of Empires, such as the rotation of buildings – because of the shadow, buildings cannot be mirrored in the memory that easily –we had to use some trickery to reduce the amount of data. Over the next two pages I’ve provided some tips that could be useful for similar projects.
BUILDING ANIMATIONS The production buildings in Forge of Empires are not initially animated. Only when production is started do the little structures come to life: the printer's press jumps into motion and a butcher goes to work. This obviously invites one to simply separate graphics and animations of the buildings. In the first step, we loaded a static graphic for each building. As an animation format, we used sprite sheets instead of the timeline animation, which is generally more common in the flash world. These included the juxtaposed frames of animation. The advantage of this solution is a higher flexibility of animation speeds, which would not be possible with a frame-synchronised animation. The building itself, however, is no longer included in the sprite sheets, but only the deviation of the pixels to the graphics. In front of the tavern, two very happy visitors were rendered and in the post-processing automatically cropped. When the buildings and the sprite sheet were
loaded, the individual sprites were cut from the sheet. They were then placed over the building and this produced the animation.
SPRITE SHEETS FOR GUI ELEMENTS If a team is like us and has several hundred graphics for GUI elements, it’s important to look early for ways to reduce their weight and still keep track of the respective images. The individual components for us were therefore also combined to sprite sheets, and our asset management was expanded to include methods to trim them and make the sprites to be available in a definite name. Figure 1 (next page, right) shows a sprite sheet for a button. It contains all the relevant states: ‘up’, ‘hover’ and ‘down’. Within the asset packages, definite names are being distributed with the use of XML and the cutting is defined: