Thursday 2 February 2012

Resources : Image Sizes

Ok to save you guys a lot of hassle at the beginning these are some simple rules to follow when creating your artwork for GameSalad. The main reason is to keep memory resources as lean as possible - you dont want a slow sluggish performing game. Game Salad has an option checkbox called Resolution Independence which allows for the games to look better on high res devices or to look lower res so that older devices can still run the game. However there are 3 rules to follow for art assets in your game that you should follow from the beginning.


1st
So firstly all of your images must be 72dpi - this can be set in Photoshop before you create your file and its better to begin like this rather than alter the dpi before you export. This rule is a must.

2nd.
File format is important. GameSalad can import .png files .jpg files and actually photoshop .psd files. If you choose these then gamesalad converts your images to work within gamesalad. I prefer to ensure consistency and to use the sample file format for all of your images and then import them into your game.

I personally think that .png is the best format to use (game salad converts to PNG internally so you may as well use these to start with) - making sure they have transparent backgrounds and adhere to the size specs below and they are 72dpi as mentioned above. If you are creating an animation it goes without saying to ensure your images are aligned correctly for each frame. Use Photoshop layers and just build up each frame of animation as a layer. Then hide all and only show which frame you want to export - this will ensure consistency.


3rd.
Finally file dimensions (pixel width and height) are important for both memory streamlining but also to ensure showing up lovely on devices - especially newer devices with Retina Display. As a rule of thumb i suggest making your images twice the dimensions you need them to be on screen and use the internal sizing of the actor to make it half (i.e the actual size you want it) . Your dimensions must be even numbers and be exactly divisible by 2 and still be an even whole number.

File dimensions sizes are allocated as follows based on square graphics.

2*2
4*4
8*8
16*16
32*32
64*64
128*128
256*256
512*512


If your image is slightly over one of these (for example 280*280) then it rounds up the memory and handles the image as if it was the bigger size. On a game with lots of graphics then this can eat up the memory and slow down your game so if possible make your image smaller to fit the dimensions suggested. Obviously lots of the games are likely to have different shapes other than square however all you do is ensure if its a rectangle it follows dimensions i.e 256 by 512 or 64 by 8 - that way you can really be sure the images are not using more memory than required. Also take a look at games on the AppStore and look at the screen shots - you will see that most games adhere to these rules - especially for Photoshop/Vector drawn games like Anrgy Birds and Fruit Ninja and Cut the Rope and Doodle Jump



// TIP //

I would suggest that you design your game using a photoshop image of the iOS screen. A nice set of iOS screens etc are available from this download link http://www.teehanlax.com/downloads/ios-5-gui-psd-iphone-4s/ Open up in Photoshop and make a new image using the iPhone Screen as a layer and then one anew layer try out some of your assets.

This way you can position characters and see how they would look on the screen - are they too big, too small and cant see the detail etc and then you can adjust sizes accordingly.

No comments:

Post a Comment