Beginner's Art Creation Guide (2D Games)

Apprentice
Posts: 10
Joined: 2012.01
Post: #1
Hi guys,

I want to thank everyone on this forum for being so helpful in answering questions I have had. One thing that I started researching a couple days ago is how to create art for an iPhone game. I actually was doing the research for my cousin because he is the artist who will be doing the art for our game. I wanted to post my findings here in case they might be of help to anyone.

*Note: If you find anything in here is not accurate, in your opinion, please let me know. I actually don't have any experience creating iPhone games and all this research is from secondary sources.

Also, if you have any further tips, please share!

---------------------------------------------------------------------------------

Most people use Photoshop or Illustrator to create their Graphics

Backgrounds

Unfortunately, you need different sizes for the iPhone 3/GS, the iPhone 4 (retina display), the iPad and the iPad 3 Gen (retina display). So you need to decide which devices your game is going to target. The sizes are as follows (in pixels):

iPhone3 320x480 163 ppi
iPhone4 640×960 326 ppi
iPhone4S 640×960 326 ppi
iPad 1024x768 132 ppi
iPad2 1024x768 132 ppi
iPad (3gen) 2048x1536 264 ppi


The ppi/dpi setting is only relevant for printing so it doesn't really matter if you set this in photoshop, but you may as well. The recommended file type for saving all images is PNG-24. You will almost always need some transparency in your images, however if you don't you can get a smaller file size by using PNG-8.

Retina Display

The iPhone 4 and the 3rd Gen iPad have retina display. This means they have twice the resolution and therefore show twice as many pixels. This means much more detail will be visible and it is a great opportunity to make more impressive graphics. It also means that your images need to be twice as large for retina display devices (eg. iPhone with retina display needs to be 640x960 instead of regular 320x480). If you are making a game to be compatible with both retina display and regular display devices you save the retina display (bigger) version with a 2x~iphone.png extension. Example:

iPhone 2G/3G/GS 480x320 background.png
iPhone 4 960x480 background@2x~iphone.png


If also making compatible with iPad (non-retina) use:

iPhone 2G/3G/GS 480x320 background.png
iPhone 4 960x480 background@2x~iphone.png
iPad 1024x768 background~ipad.png


NOTE: because the iPhone 3 and the iPhone 4 with retina display have the same screen size but different resolutions, Apple uses the term "points" to refer to size on screen instead of pixels. For example, the recommended minimum size of a clickable image is 44x44 points. On a non-retina display iPhone this is simply 44x44 pixels. However, on an iPhone with retina display this would be 88x88pixels.

Scrolling Backgrounds

The simplest method of creating a scrolling background would be to create a wider background image. For example, for a level which is twice the size (on an iPhone with retina display) you would use a background which is 1920 pixels wide (960 pixels x2) by 640 pixels high. However, if you're going to create a scrolling background any larger than this you will need to use tiles for performance's sake.

Scrolling Backgrounds with Parallax Layers

Almost all 2D games use parallax layers in their backgrounds to create an illusion of some 3D depth. Parallax layers are separate background layers which scroll at different speeds to create the illusion. Layers which are "closer" scroll faster and layers which are "further away" scroll slower. Just as if you were in a train speeding along, nearby things such as telephone poles would be "flying" by while the mountains in the distance would be moving by much slower.

A common number of parallax layers I have seen in games is about 3 including the layer on which the game is played. One game I looked at had the layer which you play on, then one for trees in the background, and then another for the landscape in the distance. Angry Birds Rio did a cool thing where they actually had a layer that is closer then the layer which the game is played on (some hanging chains and a crate). Open almost and iPhone game and scroll- you will clearly see the parallax layers.

If there were 3 parallax layers and your level was 2 screens wide (on iPhone with retina display), you would essentially have 3 background images which are PNG-24s and 1920x480. You would use the transparency of PNG-24s and stack these on top of each other and then have them scroll at different rates.

Characters and Other Non-Background Images

Obviously, the same rules apply here in terms of needing your images in different sizes for the different iOS devices.

Your images start out as PNGs but they become decompressed and loaded into the RAM before they can be used. At this point they are referred to as textures. Textures need to be in power-of-two sizes for length and width (for maximum compatibility and performance). This means that if you had an image that was just 129x120 pixels in size it would be converted into a texture that is the nearest power-of-two size which is 256x256 pixels. This is a huge waste of memory.

To remedy this, all you images should be loaded into Texture Atlases (think sprite) which are large power-of-two sizes. The maximum sizes you can use for textures are as follows:

iPhone 2G/3G/GS 1024x1024 pixels
iPhone 3GS/4 iPad 2048x2048 pixels


Using Texture Atlases will also dramatically improve performance by greatly reducing the number of calls made to OpenGL ES.

There are two tools which can help you easily amass your images into a Texture Atlas:

1) Zwoptex
2) TexturePacker

Random Tips

1) This one is from Apple in regards to resizing your images for the different iOS devices:

When appropriate, create high-resolution artwork. In most cases, scaling up your artwork is not recommended as a long-term solution. Instead, try creating your artwork in a dimension that is larger than you need, so you can add depth and details before scaling it down. This works especially well when the dimension of the original art file is a multiple of the dimension you need. Then, if you also use an appropriate grid size in your image-editing application, you’ll be able to keep the scaled-down art file crisp and reduce the amount of retouching and sharpening you need to do.

2) Use vector art where ever possible to allow easier resizing of art for the different iOS devices.

3) Resizing of vector art to make it very small can be challenging just like making raster art bigger. Leaving details on separate layers that can be turned off is very helpful. Also, adjusting line width, or ideally, not using line colors at all, makes resizing much easier.

4) If you are using photoshop with a PC you should adjust your color settings to better reflect what your colors will look like on an iOS device. In photoshop set “Proof Setup” in “View” menu to “Macintosh RGB.”
Quote this message in a reply
Post Reply 

Possibly Related Threads...
Thread: Author Replies: Views: Last Post
  Another beginner's question about displaying an animated object superlemonster 2 4,950 Jan 28, 2011 08:03 AM
Last Post: OptimisticMonkey
  Errors With NeHe OpenGL Guide SamGray 1 2,832 Sep 6, 2009 02:36 PM
Last Post: AnotherJake
  New to Music Creation. ceddo 25 8,796 Aug 3, 2007 08:05 AM
Last Post: macnib
  best online or dl'able reference guide to OpenGL? sealfin 6 5,583 Jun 29, 2002 04:29 AM
Last Post: inio