- Learning AndEngine
- Martin Varga
- 2244字
- 2025-02-27 05:55:30
Getting the assets
Assets are all resources used in a game including graphics, sound, and music. Maps, levels, 3D models, skeleton animations, or any other kind of content in an external file is an asset too.
When making a game, the best approach is, of course, to create a set of original assets made exclusively for your game. However, this might not be possible for different reasons, such as budget. Fortunately, there are plenty of free assets available online for game developers to use.
You can find a sample list of completely free assets at http://android.kul.is/p/list-of-free-resources.html.
We are going to search for all assets in this list. There is one asset pack that is very useful for making a proof of concept game. It is called Open Game Art Bundle, and you will find it at http://open.commonly.cc/.
This asset pack is licensed as Creative Commons Zero (CC-0), which basically means you can use it for any purpose. You can also modify any part of it and redistribute it.
Note
For more information about Creative Commons licenses, visit http://creativecommons.org/licenses/.
Graphics
For our character, enemy, clouds, and platform, we will utilize a set of sprites from Open Game Art Bundle. A sprite is a piece of graphic that can be moved on the screen. The graphic is usually saved in an image file. If there is more than one sprite in the same picture, we call it a sprite sheet. Sprite sheets are very useful, especially when creating animations.
You can see a preview of the sprite sheet, which has been used in several platform games already, in the following screenshot. You might see some parts of it that we are going to use.
You will find all the following assets in the code bundle.
AndEngine can load images of any raster format that is supported by Android. The raster format means the pixels are stored one by one. When you scale the raster format, you have to compute each new pixel in the scaled version from the existing information. While this is usually not a problem when scaling down the picture, it can produce blurring or unwanted artifacts when scaling up.
The second option is the vector graphics format, where lines, curves, rectangles, and so on are stored separately and the image is drawn when needed. The biggest advantage of the vector file format is that it can be scaled indefinitely while keeping the same quality. On the other hand, working with vectors needs more performance; therefore, the vectors are usually rasterized before they are used in games. Rasterization is a process in which the vector graphics described as shapes are converted to pixels, usually by rendering them in a selected resolution.
The file size of different formats varies. In the end, all images will be stored in the graphics memory as textures, and it doesn't matter which format is used. However, the file formats influence the storage space needed, quality of the final texture, and load times.
The supported raster formats are the following:
- JPEG
- GIF
- PNG
- BMP
- WebP (Android 4.0 and above)
AndEngine has one extension that allows us to use the SVG vector file format. It rasterizes the SVG file. Vectors are drawn onto a canvas first and then saved into memory as any other raster image.
Each format has its use, advantages, and disadvantages. For an updated list of supported file formats, visit the official Android SDK page at http://developer.android.com/guide/appendix/media-formats.html. The formats are described as follows:
- Joint Photographic Experts Group (JPEG): This is the most common lossy compression image file format used today. Lossy means it compresses the image by discarding some information. It is important to understand how JPEG works to make full use of it and to know when to avoid it.
JPEG exploits the imperfections of human vision. First, it reduces the number of colors that are available. Instead of the red, green, and blue components, JPEG stores pixels in YCbCr space, which means one intensity channel and two color components. You can imagine the intensity channel as a black and white representation of the image and the two chroma components as coordinates in a two-dimensional color palette. As the human eye is more sensitive to intensity than to color, the color palette space is shrunk usually by a factor of 2. This is the first loss of information.
In the next step, the image is cut into 8 x 8 pixel blocks. These are transformed using Discrete Cosine Transformation (DCT), which gives us a different representation of the blocks. Instead of 64 pixels, we represent all the blocks as a linear combination of 64 patterns and then reduce the number of possible values of the coefficients of the combination. This is the second loss of information, and it is called quantization. The quality setting of JPEG influences how much the coefficients will be quantized, and therefore how much information will be lost.
Finally, the blocks are losslessly compressed using a compression method similar to the file compression format ZIP.
The JPEG file format doesn't use transparency. It is most useful to represent real-world images and photographs. In a game, you would typically want JPEG to store, for example, a real sky image. JPEG offers the smallest file size for real-world images, but there is always a trade-off with quality. It is not recommended for cartoon graphics.
In the next figure, compare the original cartoon graphic (left) and the result saved as JPEG with very low compression (right). The quantization introduces block artifacts. This example uses extremely strong quantization, but with today's high quality displays, even higher quality compression can be noticeable.
- Graphics Interchange Format (GIF): This used to be a very popular format, and it is going through a renaissance thanks to its animation capability. The format, however, has its limitations. It can only use a 256-color palette with one color reserved for the alpha channel (transparency). It uses lossless compression as well. The file size can be very small but it is not used in games due to the color limitations and also because there is a better file format available. However, it is still supported by Android because it is very popular on the Internet.
- Bitmap(BMP): BMP is losslessly compressed using the run-length encoding image file format. This means that same pixels in a row are saved as a color and the length of the series. BMP files tend to be big and they don't have any advantage over PNG.
- Portable Network Graphics (PNG): We will be using the PNG file format for our sprites, and it is also the recommended raster graphics format for cartoon graphics. It uses lossless compression and has an alpha channel (transparency). There are different types of PNG: 8-bit (useful for black and white images) and 24-bit, which can support any number of colors displayable by current screens. The alpha channel in PNG can be missing (saves space), 1-bit (on/off), or 8-bit (256 levels of transparency).
PNG offers a good size to quality ratio. The file size grows with the increasing complexity of the image. PNG doesn't handle photos or cartoon graphics with gradients very well.
- WebP: This is a new file format from Google. It offers both lossy and lossless compression and claims to produce smaller file sizes. Its limitation is that it is not as widespread as the other file formats. You might run into compatibility problems on older Android versions. This file format is not recommended to be used with AndEngine.
- Scalable Vector Graphics (SVG): This is a textual file format. It is very verbose and describes how the image should be drawn. AndEngine has an extension to convert the SVG files to textures. However, it can take quite a lot of time at the start of the game. SVG can be useful for supporting a wide range of devices. However, that is an advanced topic.
The main character will have the following three animation frames:
- Flying up (jumping)
- Falling on a platform
- Falling below a platform (game over)
In platform games, it is very common to have several frames for animations of walking, running, and so on. Our game is much simpler. We can find all the necessary frames in the existing sprite sheet in the pack. For our purposes, we will cut the needed frames and create our own sheet. Have a look at the following figure:
player.png
The three frames, starting from the left, are:
- Jump
- Fall
- Game over fall
All frames have the same dimensions. While this is not always necessary, it makes things easier. Unless you need memory size optimizations, simply use the same size frames.
Notice that our character is facing only to the right. This is fine because it's very simple to draw the same sprite flipped horizontally, effectively doubling the number of animation frames. This is a common trick in animation.
The background is transparent. Color has been used for illustration purposes only.
The enemy will be static, staying in one place. However, we will make it animated; it will flap its wings, which will create an illusion that it is actually hovering. We only need two frames to create such an animation, which are shown in the following figure:
enemy.png
It doesn't matter whether we are creating the sprite sheet horizontally or vertically. You can also have a grid with many frames in one image. Later, we will specify the number of columns and rows for each sprite sheet.
We will have two different types of clouds and one platform. The easiest way to save them is to use one file for each sprite. See the following figure:
platform.png
The platform is created from the tiles available in Open Game Art Bundle. Two different tiles are used (the left and right halves). We call these images tiles because they are mostly static and make up the floor or walls in a game. You will encounter tiles and tilesets very often in 2D games. Mostly, you will only need a few tiles to create a whole world. Now, have a look at the following figure; it shows our first cloud:
cloud1.png
The following figure shows our second cloud:
cloud2.png
Now, let's try to recreate the initial concept with the graphic assets that we have found. The following screenshot shows how it should look on a phone screen. We are going to create a game that will look pretty much the same.
Notice that we have added a score counter to the top-left corner to complete the design of our game screen.
Sounds and music
Audio effects add more depth to every game. A right sound at the right time makes everything feel more real. Imagine shooting a gun. Without the sound, it will never feel right.
Music in games is used to set the mood, similar to music in movies. A good choice of music can make a game better and vice versa. Usually, we want to use a music track that loops well.
You will find the music and sounds in the code bundle as well.
There are many audio file formats available for use. For a full list, refer to the official list again at http://developer.android.com/guide/appendix/media-formats.html.
The most popular formats are WAV, MP3, and OGG for both sounds and music. While the WAV format supports many types of both lossy and lossless compression, the MP3 and OGG formats are lossy only. Lossy compression in audio works in a similar way to the one in graphics. The sound wave is transformed and some parts are cut off. This is why a highly compressed audio file can sound like speaking from a bad phone.
The OGG file format is recommended because it has easily adjustable quality settings and produces slightly smaller files than the MP3 format.
For our game, we only need the jumping sound and the sound of falling when the game is over. We could, of course, add more sounds, but this will be enough to illustrate the sound handling in AndEngine.
There are a few good websites that allow users to search for sounds by name, tags, and licenses. We are going to use CC-0 licensed audio files. The sounds used in the game can be found at http://www.freesound.org/.
For the jumping sound, you can use almost anything. A short tap or a bottle being opened will do. The falling sound in our game is the same sound they use in cartoons, made by a whistle.