Chapter 7: Graphics and Artwork

In This Chapter You Will Learn:

•What file types Gamesalad supports for images

•How to create artwork at the correct size

•What resolution independence is

•What color spaces are

•How to create images with a transparent background

This chapter is all about images and how to get the most out of them. First, you’ll learn what file format Gamesalad uses for images. Then you will learn what pixel dimensions are and how they influence the look of your images and the performance of your games. Next, you will learn about resolution independence and why this is important when creating games for Apple iOS devices. You will also learn about image color space and transparency. Finally, you’ll learn a few ways to get images for your projects if you are not an artist.

Graphics

Nothing brings more life to a video game than the graphics and images used to create the sprites, backgrounds, and special effects in the game. The graphics can set the mood of the game from a lighthearted cartoon to a dark and frightening nightmare. The style of the graphics used in your games is, of course, entirely up to you as the designer, but there are some graphical specifications that you should be aware of while you are creating or commissioning the artwork.

File Type

Gamesalad supports the PNG file format for images. Images can be created as any file format in an image editor, but Gamesalad will convert them to PNG files while importing them. During the conversion process, it is possible that colors may shift or other unexpected results might occur. For this reason, you should always export your own PNG files from the image editor. When you export the PNG files, you will have complete control over things like compression, color space, image quality, etc.

NOTE–Image Editors: While the image editor pictured in this section is Adobe Photoshop, there are many other image editors available that can perform the same functions. Many indie developers use GIMP since it is very capable and, best of all, it’s free!

Only the file you are going to import into Gamesalad needs to be a PNG file. While you are creating images, you can work in any file format you prefer. A typical workflow for creating an image for use in Gamesalad is outlined below:

1Sketch the image on paper or on a tablet.

2Import that sketch into Adobe Illustrator and use it as a guide to create the image.

3Open the Adobe Illustrator vector file in Adobe Photoshop and add any special effects or tweaks that can’t be created in Illustrator.

4Export the final file as a PNG file for use in Gamesalad.

Note–Vector Files: I like to start all of my artwork in Adobe Illustrator. Since it is a vector art program, the artwork can be resized as needed, large or small, without losing any image quality. The vector files can even be used for print, marketing and video graphics.

Pixel Dimensions

Individual graphics and frames of animation should be created in even-numbered pixel ratios that are divisible by 4. If graphic elements are kept within these dimensions, they will always look good on-screen and be optimized for use in Gamesalad:

8 x 8 pixels

16 x 16 pixels

32 x 32 pixels

64 x 64 pixels

128 x 128 pixels

256 x 256 pixels

512 x 512 pixels

1024 x 1024 pixels

2048 x 2048 pixels

Note–Pixels: A pixel, or picture element, is the smallest unit of color information that makes up an image on a digital screen and is typically a square. The number of pixels in an image is known as the image’s resolution.

Following the above ratios, you can also safely create images that are rectangles, as well as squares, by combining different heights and widths of pixels like 32 x 64 pixels, 8 x 256 pixels, 1024 x 512 pixels, etc. (see Figure 7.1A-B).

Figure 7.1a: A square (16x16 pixel) image in Photoshop.

Figure 7.1b: A rectangular (128x64 pixel) image in Photoshop.

There are two reasons you should keep images sized to these dimensions. The images will be optimized for viewing on-screen and not pixelate or look blurry. They will also be optimized for the device’s memory usage. When viewed on a screen, images that meet these requirements will look sharp and crisp. However, if you were to create an image that is 16 x 17 pixels (instead of 16 x 16), the image may be blurry and pixelated when displayed in a game.

Each image used in a game uses up a portion of the device’s memory it is displayed on. As games increase in size and complexity, it is very possible that they may slow the device down and cause the game to run slow or even crash. As the developer, it is your responsibility to manage your use of memory as much as possible. Images take up a “block” of memory equal to their size; an image that is 8x8 pixels takes up half the memory of an image that is 16x16 pixels. But if you create an image that is 16x17 pixels, it will take up as much memory as an image that is 16x32 pixels because of the single extra pixel. Since the image has an extra pixel, it is forced to fill up the next largest “block” of memory. For this reason, you should try to minimize the pixel dimensions of your images without sacrificing image or game quality.

Resolution Independence

If you plan on publishing games for Apple devices (iPhone, iPad, Macintosh), images should be created
so they can be viewed at their best quality on retina (high resolution) and non-retina (normal resolution) screens. Since a retina screen has a much higher pixel density than standard screens, images appear much smoother and the individual pixels can’t be seen at a normal viewing distance.

When creating images for display on Apple devices, you should create the pixel image, the PNG file, at twice the pixel size you’ll want the actor to display in the game. For example, if you want a ball actor in a game to be 32x32 pixels, you’ll need to create the PNG file for this actor at a size of 64x64 pixels.

––––––––––––––––––––––––––––––––––––––––––

Exercise 4: Creating and Importing a Resolution Independent Image

In this exercise, you will create a resolution independent image for use on an Apple device. You’ll first create the image in an image editor and then import it and apply it to an actor in Gamesalad.

Let’s create the ball image I mention above. The actor will be 32x32 pixels in Gamesalad so you’ll want the image file to be 64x64 pixels.

1Open your favorite image editor; I’ll be using Adobe Photoshop for this exercise.

2Start a new image project and set the Width and Height to 64 pixels and the Resolution to 72 pixels per inch. If you’re able, choose RGB for the color mode and Transparent for the background (see Figure 7.2)

3Create a ball image in the window provided. The ball does not need to be fancy, just create something to test it with.

4Export the image as a PNG file. If you are using Photoshop, go to the File Menu and choose Save for Web. In the dialog box that appears (see Figure 7.3), chose PNG-24 as the file type and make sure the pixel dimensions are 64x64.

5Next, open Gamesalad and start a new project. Make sure to choose one of the iPad or iPhone project types and check Resolution Independence.

6Navigate to the Stage and activate the Images tab in the Library palette.

7Click the Plus (+) button and import the ball image you just created.

8To create the Actor, drag this image into the Actor tab of the Inspector palette above and release it.

9Double-Click the Actor and check its size in the Attribute Window. You’ll see it is 32x32 pixels, half the pixel dimensions of the image file (see Figure 7.4).

––––––––––––––––––––––––––––––––––––––––––

Figure 7.2: Adobe Photoshops project creation dialog box.

Figure 7.3: Adobe Photoshops “Save for Web” dialog box.

Figure 7.4: The resolution independent image applied to an actor in Gamesalad.

When you publish a game using resolution independence, Gamesalad will use the high-resolution image to create a low-resolution image for use on non-retina devices so the game will look its best on whatever device it is played on.

Color Space

Color space, also known as color model, is a mathematical description of how colors are represented. There are many different color models; RGB, CMYK, hexadecimal, all of which have their specific uses, like printing and displaying colors on web pages. While images can be created using any color space that the image editor supports, it is best to create art as an RGB file from the start. That way, when the final image is exported as a PNG file, there will not be any color shifts or other surprises. Gamesalad requires images to be in the RGB color space. If the image being imported is saved using a color space other than RGB, Gamesalad will convert the image to RGB during the import process.

NOTE–Color Shift: A color shift can occur when an image is transformed between different color spaces. Each color space uses a different calculation, or mix of numbers, to represent colors. It is possible that one color space will represent a given color differently than another color space. For example, bright blues in the RGB color space typically appear very dull when viewed in the CMYK color space.

Transparency

Every image created in an image editor is going to be a rectangle. There are a specific number of pixels for the image’s height and width (32x32, 256x8, etc.)—this is called the image’s “canvas.” While every canvas must be a rectangle, you can use image transparency to make images appear to be other shapes in Gamesalad. The ball image you’ve used several times so far uses image transparency to make the ball look like a circle, even though the image imported into Gamesalad is actually a square.

––––––––––––––––––––––––––––––––––––––––––

Exercise 5: Image Transparency

In this exercise, you’ll learn how image transparency works.

1Open the image named “LargeBall.png” in an image editor. The file can be found in the
book asset files for Chapter 7 folder.

2The image size is a square, 256x256 pixels, but the ball image is a circle. In Photoshop, you can check an image’s size by choosing Image Size… from the Image menu.

3The gray and white checkerboard at the four corners of the ball indicates that area is transparent; this is common in most image editors (see Figure 7.5).

4When exporting a PNG image with transparency, it must be saved as a 32-bit file. In Photoshop, choosing PNG-24 as the file format will do this (see Figure 7.6).

5When this image with transparency is imported into Gamesalad, it will look like a circle even though the actual image is a square.

––––––––––––––––––––––––––––––––––––––––––

Figure 7.5: Adobe Photoshops transparent background ‘checker board pattern’.

Figure 7.6: Exporting an image with a transparent background from Adobe Photoshop as a PNG-24 file.

Not an Artist?

If you’re not an artist, and you don’t have any members of your team who are, you’re probably wondering how to get image files for your games. Don’t worry; there are lots of options:

•Gamesalad Marketplace: As mentioned earlier in the book, Gamesalad has their own marketplace that you are able to purchase images from.

•Stock Image Sites: There are many stock image sites on the Internet that have art and other assets available for sale, or even for free.

•Hire an Artist: Many great artists work for hire and will be happy to work with you on your game projects.

•Become an Artist: Creating simple 2D artwork does not have to be difficult. If you are interested in learning to create your own art, there are a lot of great tutorials available on the Internet as well.

Note–How NOT to Source Images: Do not do a Google search for images and just pull them off of the Internet. Most of the artwork you will find by doing a Google search is copyrighted by its creator. It is illegal and un-ethical to use such art in games (or any project) without first asking the author for permission.

Summary

In this chapter, you learned all about images. You learned what file type, color space, and pixel dimension to use when creating images. You also learned about resolution independence and how Gamesalad uses one image to create a high and low-resolution version for use on Apple devices. Then you learned about how to create an image with a transparent background so not all of your images have to look like rectangles. Finally, you learned about various ways to get artwork for your games if you are not artistically inclined.