Creating the Assets

We have two types of assets in Mr. Nom: audio assets and graphical assets. I recorded the audio assets via a nice open source application called Audacity and a bad netbook microphone. I created a sound effect for when a button is pressed or a menu item is chosen, one for when Mr. Nom eats a stain, and one for when he eats himself. I saved them as OGGs to the assets/ folder, under the names click.ogg, eat.ogg, and bitten.ogg, respectively.

Earlier, I mentioned that we'll want to reuse those paper cutouts from the design phase as our real game graphics. For this, we have to first make them fit with our target resolution.

I chose a fixed target resolution of 320! 480 (portrait mode) for which we'll design all our graphical assets. I scanned in all the paper cutouts and resized them a little. I saved most of the assets in separate files and merged some of them into a single file. All images are saved in PNG format. The background is the only image that is RGB888; all others are ARGB8888. Figure 6-1 shows you what I ended up with.

Figure 6-1. All the graphical assets of Mr. Nom, with their respective filenames and sizes in pixels

Let's break down those images a little:

Let's break down those images a little:

background. png: This is our background image, which will be the first thing we'll draw to the framebuffer. It has the same size as our target resolution for obvious reasons.

buttons. png: This contains all the buttons we'll need in our game. I put them into a single file, as we can easily draw them via the Graphics.drawPixmap() method, which allows drawing portions of an image. We'll use that technique more often when we start drawing with OpenGL ES, so we better get used to it now. Merging several images into a single image is often called atlasing, and the image itself is called an image atlas (or texture atlas, or sprite sheet). Each button has a size of 64! 64 pixels, which will come in handy when we have to decide whether a touch event has hit a button on the screen.

helpl. png, help2. png, help3. png: These are the images we'll display on the three help screens of Mr. Nom. They all have the same size, which makes placing them on the screen easier.

logo.png: This is the logo we'll display on the main menu screen.

mainmenu.png: This contains the three options that we'll present to the player on the main menu. Selecting one of these will trigger a transition to the respective screen. Each option has a height of roughly 42 pixels, something we can use to easily detect which option was touched.

ready.png, pause.png, gameover.png: We'll draw these when the game is about to be started, when it is paused, and when it is over, respectively.

numbers. png: This holds all the digits we need to render our high scores later on. What's to remember about this image is that each digit has the same width and height, 20! 32 pixels, except for the dot at the end, which is 10! 32 pixels in size. We can later use this fact to easily render any number that is thrown at us.

tail.png: This is the tail of Mr. Nom, or rather one part of his tail. It's 32! 32 pixels in size, which has some implications we'll discuss in a minute.

headdown.png, headleft.png, headright.png, headup.png: These images are for the head of Mr. Nom; there's one for each direction he can be moving in. Because of his hat, we have to make these images a little bigger than the tail image. Each head image is 42! 42 pixels in size.

stainl.png, stain2.png, stain3.png: These are the three types of stains we can render. Having three types will make the game screen a little more diverse. They are 32! 32 pixels in size, just like the tail image.

Great, now let's start implementing the screens!

0 0

Post a comment