This page contains a Flash digital edition of a book.
BETA | GAMES DESIGN // GRAPHICS AND ANIMATION


For performance reasons, the cut Bitmap Data is cached, so the same operations for cutting don’t always have to be carried out.


CAMPAIGN MAP The campaign map turned out to be a particular challenge for us due to its size. Loading the campaign map at full resolution was out of the question, because otherwise a significant break would occur in which players could not interact with the game. A high quality of graphics on one hand and fast loading times on the other seemed to be near impossible. However, to ensure both, we chose a multi-step approach. First, a highly compressed image is loaded, which is additionally scaled down by a factor of five. After loading, it is scaled up again to its original size, with smoothing activated and displayed to the user. From this moment on, the user may interact with the game. Now the high-resolution campaign map is


loaded. It was previously cut into 110 pieces, however, and to quickly proceed to a higher quality of representation, the tiles visible on the screen are loaded first. In the excerpt shown in Figure 2 (left), these


are only 25 of the 110 tiles, which are initially loaded with a high priority from the server. Once the graphics are available, they are displayed on the client. Only in the last step, the remaining parts


An example of a button sprite sheet (‘Figure 1’, top- right), Forge of Empires in action, (top), and the division of the map with the high priority tiles highlighted in green (‘Figure 2’, bottom)


The central asset manager interprets the XML files and makes the assets available under the name defined by the function getImage.


public function getImage (image: String): BitmapData { var src: BitmapData = resource.getBitmapData (image name); var: int = parseInt (img. @ cropwidth, 10) | | src.width; var height: int = parseInt (img. @ cropheight, 10) | | src.height; if (@ img cropx.toString () |!. |!. img cropy.toString @ ()) { return src; }


76 | AUGUST 2012


var cropped: BitmapData = new BitmapData (width, height, src.transparent); _tmpRect.x = parseInt (img. @ cropx); _tmpRect.y = parseInt (img. @ cropy); _tmpRect.width = width; _tmpRect.height = height; _tmpPoint.x = _tmpPoint.y = 0; cropped.copyPixels (src, _tmpRect, _tmpPoint); return cropped; }


are loaded, so that the user receives high- resolution graphics even when scrolling the campaign map. Many of these techniques only have a small effect if taken individually. With combining them, however, one succeeds in offering a smoother gaming experience to players. Through skillful management of the graphics to be loaded, developers also lay the foundations for further development of the game.


Nikolas Banspach has developed computer games full-time since 2007; first, at kr3m Media in Karlsruhe, Germany, and since early 2011, at InnoGames in Hamburg. He has been working with the Forge of Empires team from the start of the project and focuses on frontend development. www.innogames.com


DEVELOP-ONLINE.NET


Page 1  |  Page 2  |  Page 3  |  Page 4  |  Page 5  |  Page 6  |  Page 7  |  Page 8  |  Page 9  |  Page 10  |  Page 11  |  Page 12  |  Page 13  |  Page 14  |  Page 15  |  Page 16  |  Page 17  |  Page 18  |  Page 19  |  Page 20  |  Page 21  |  Page 22  |  Page 23  |  Page 24  |  Page 25  |  Page 26  |  Page 27  |  Page 28  |  Page 29  |  Page 30  |  Page 31  |  Page 32  |  Page 33  |  Page 34  |  Page 35  |  Page 36  |  Page 37  |  Page 38  |  Page 39  |  Page 40  |  Page 41  |  Page 42  |  Page 43  |  Page 44  |  Page 45  |  Page 46  |  Page 47  |  Page 48  |  Page 49  |  Page 50  |  Page 51  |  Page 52  |  Page 53  |  Page 54  |  Page 55  |  Page 56  |  Page 57  |  Page 58  |  Page 59  |  Page 60  |  Page 61  |  Page 62  |  Page 63  |  Page 64  |  Page 65  |  Page 66  |  Page 67  |  Page 68  |  Page 69  |  Page 70  |  Page 71  |  Page 72  |  Page 73  |  Page 74  |  Page 75  |  Page 76  |  Page 77  |  Page 78  |  Page 79  |  Page 80  |  Page 81  |  Page 82  |  Page 83  |  Page 84  |  Page 85  |  Page 86  |  Page 87  |  Page 88  |  Page 89  |  Page 90  |  Page 91  |  Page 92  |  Page 93  |  Page 94  |  Page 95  |  Page 96  |  Page 97  |  Page 98  |  Page 99  |  Page 100