Mmm... zesty salad! Don't you prefer a salad that has some kind of dressing on it as opposed to just lettuce? Yeah, me too. It adds a kick to a normally plain food. Essentially, that is what we are going to do in our game; we are going to add a zesty dressing, mmm... yummy!
In the previous chapter, we created a prototype game - nothing special, just a quick little "engine test" you could say. In this chapter, we are going to add magic to that prototype. We will learn to design some sprites in Photoshop and even some 3D sprite tips for better looking graphics. We are then going to import our images, some music, and sound effects into our game. We will trigger audio in the level, and add some cool particle effects, all to make our game look even better! We are going to be looking at some very important stuff here; the better your graphics, music, and sound effects are, the more appealing your game will be. When someone sees some really cool or realistic graphics, they will be more inclined to purchase your game, as opposed to some ugly looking graphics that are complete eyesores, then no one will want to buy it, or if they do, it's just because it's so horrible.
Let's take a look at what we are going to cover in this chapter:
- Tips on designing sprites
- Importing your images, sound effects, and music into your game
- Triggering music and sound effects in your game
- Working with particles
Sounds exciting, doesn't it? Well then, what are we waiting for? Let's get into it!
As mentioned in the introduction of this chapter, images or sprites are very important for your game. There are a plethora of tools available for sprite design; my favorites are Adobe Photoshop CS5 and Adobe Flash CS5. Both do different image styles; Flash, in my opinion, gives a great hand-drawn look to the images you create.
An image with a nice hand-drawn look, created with Adobe Flash is as follows:
I think that it looks fantastic, not exactly the image itself but the style of the brush, it's nice and smooth, and everything seems to flow together and looks great. Now, let's take a look at an image drawn with Photoshop.
With Photoshop, the edges are sharp and everything looks crisp. Whichever art style you prefer is up to you; each of these programs have their advantage, but what if you cannot afford them? After all, Photoshop and Flash are worth over $600 each. Well, there are many free tools out there, Gimp, Inkscape, or even MS Paint if you have access to it, and they can draw sprites just as well as Photoshop.
Usually, sprites are put onto a sprite sheet, which is exactly what it sounds like, a page of sprites. These are useful when creating a game with Xcode, OpenGL ES, or Cocos2D. These engines allow you to import a single sprite sheet and display different sections of the sheet programmatically. GameSalad eliminates the need for this, however, so we are going to be creating single images instead of a whole sheet.
Sprites are normally 32x32 pixels, and are saved as a PNG (Portable Network Graphics) image. PNGs are the best for quality, plus they have an alpha channel for transparency, so when you import your image into GameSalad, there isn't a white background surrounding your sprite.
In the following screenshot, the image with the white background is a JPEG and the image with no white background is saved as a PNG:
If you have a drawing tablet, grab it now. If you don't have one, it's a great idea to get one, it's way more accurate and if you draw well you can skillfully create your images with no problem. If you don't want one, that's ok too because you can use a lot of shapes to create your character, which is what we are going to do in this chapter. We are going to create a character for the game we created in our last chapter. Then we will import it into our game, along with an image for our platforms. I'm going to be using Photoshop, but again, you can use whatever tool you like.