Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Images in GS

gyroscopegyroscope I am here.Posts: 6,577Member, Sous Chef, PRO
OK, should have got all this this in my head by now concerning graphics. Just in case I haven't, here's a list of what I think is correct. If you could correct me if I'm wrong on any points that'd be great, so that I've got it once and for all, thanks.

All images saved with Save for Web, PNG-24.

Maximum image size is 1024 x 1024 pxls

All dimensions should be power of 8, i.e 8, 16, 24, 32, 40, 48, 80, 168, etc (not just 8, 16, 32, 64, 128, etc.)

When resizing the imported images in GS, this new actor size on screen must be power of 8 still.

If you have an image, lets say 128 x 64 pxls, the iOS treats this in memory as 128 x 128 BUT you will save file size by bringing it in as 128 x 64 in Gamesalad itself.

Any image can be enlarged well beyond the 1024 x 1024 pxls limit, providing that's what has been imported.

""You are in a maze of twisty passages, all alike." - Zork        temp domain


  • gyroscopegyroscope I am here.Posts: 6,577Member, Sous Chef, PRO
    Any teachers wanna check my homework please? ;-)

    ""You are in a maze of twisty passages, all alike." - Zork        temp domain

  • PhoticsPhotics Posts: 4,172Member
    Where are you getting power of 8?
    I don't think that's correct.
  • gyroscopegyroscope I am here.Posts: 6,577Member, Sous Chef, PRO
    Hi Photics, I used to think it was power of 2, then I was corrected by a member here on the forum a while back. I think it's in the Support files as power of 8 somewhere as well.

    Or......I made that same mistake last time.....could be, i've a vague memory now of this. I thought it was 8 but it's just to make sure all image dimensions are even. Is that correct? (That's the trouble with trying to think at quarter to 2 am here in the UK ;-)

    ""You are in a maze of twisty passages, all alike." - Zork        temp domain

  • magic101himagic101hi Posts: 713Member
    It's power of 2.

  • gyroscopegyroscope I am here.Posts: 6,577Member, Sous Chef, PRO
    Thank you Josh, I've had a brain bug when it comes to 8 for some reason. So make sure all images are even numbers; thanks.

    ""You are in a maze of twisty passages, all alike." - Zork        temp domain

  • gyroscopegyroscope I am here.Posts: 6,577Member, Sous Chef, PRO
    Sorry to keep harping on about this basic aspect of GS; so power of 2 it is then, understood.

    Could someone confirm please, does this mean I could have dimensions such as 2, 10, 22, 38, 580, etc; i.e any dimension providing it's divisible by 2 (up to 1024)?

    I suspect not, that being power of two, this actually means your graphics dimensions can only be: 2, 4, 8, 16, 32, 64, 128, 256, 512 and 1024.

    Is that correct? (I'll take the answer and staple it to my head, promise!)

    ""You are in a maze of twisty passages, all alike." - Zork        temp domain

  • gyroscopegyroscope I am here.Posts: 6,577Member, Sous Chef, PRO
    Bumper sticker.

    Anyone answer please? (OK, I know I should know this by now...)

    ""You are in a maze of twisty passages, all alike." - Zork        temp domain

  • StormtrixStormtrix Posts: 256Member
    As a rule of thumb i'd always make my graphics an even number of pixels... so 16x16, 20x40, etc.. not
    21x32 or 57x43... now for the sizing thing.

    GS and the os treats images like this ... it's great to have the images exact 16x16, 32x32, 64x64, 128x128, 256x256, 512x512, 1024x1024... but that obviously isn't the case always so..

    16x8 is treated as 16x16
    24x32 is treated as 32x32
    64x48 is treated as 64x64
    46x128 is treated as 64x128
    100x100 is treated as 128x128
    192x256 is treated as 256x256
    540x512 is treated as 1024x512

    correct me if i'm wrong :)
    happy thanksgiving..
  • firemaplegamesfiremaplegames Posts: 3,206Member
    There are a few rules of thumb that I would consider when making graphics for GameSalad:

    1. The pixel dimensions of your graphics should be even. i.e 244x66 instead of 245x66. The reason for this is because GameSalad centers everything. Since all Actors are centered,
    any odd pixel will get split - causing the image to blur.

    So, Rule #1, make all dimensions even to avoid blurry images.

    2. This expands on Rule #1...
    If you are making Retina Display graphics using the Resolution Independence feature in GameSalad, not only do your graphic dimensions need to be even, but they need to be multiples of 4.
    So 72x36 instead of 70x36. For the same exact reason mentioned above, when GameSalad takes your larger,
    beautifully designed Retina Display graphics and makes 25% versions of them for the smaller screens - any odd dimension will cause an image blur. A 70x70 pixel graphic will now become 35x35, and will blur on the older devices.

    So, Rule #2, if you are using Resolution Independence, make all dimensions evenly divisible by 4.

    3. Save all your images at 72dpi. DPI refers to dots per inch. It is a printing term and gets ignored by the iPhone. However, for your own sanity, make all of your images 72dpi. This is the default standard for monitors and screens. If your image is not saved at 72dpi, GameSalad will automatically convert it to 72dpi and resize it when you import it. In Photoshop, you can change an image's dpi without changing its pixel dimensions. GameSalad does not do this and will resize the image as well. This will cause all sorts of visual problems.

    So Rule #3, save all graphics at 72dpi to avoid headaches when importing your graphics into GameSalad.

    4. Save all graphics as PNG files. There are two common PNG formats that GameSalad uses: PNG-24 and PNG-8. PNG-24 means that there are 8 bits per color channel. 256 reds, 256 blues, and 256 greens. For a total of ~1.6 million colors per image. PNG-24 also allows an 8 bit alpha transparency mask. So 256 levels of transparency as well. This is what you will most often use for your game graphics.

    If file size is a concern, you can also save your images in the PNG-8 format. Instead of 1.6 million colors, the software will select a 256 color palette for your image. You can also choose one single color to be transparent. This will greatly reduce file size at the cost of color choices.

    So Rule #4, save all images as PNG-24 or PNG-8

    5. A quick note on color depths. High-end image editing software like Photoshop can handle 16 bits per channel and even 32 bits per channel. You DO NOT want to work at these color depths. iOS only supports 8 bits per channel - 1.6 million colors. The higher bit depths are for advanced image editing, allowing you to edit an image many more times without degrading it.

    So Rule #5, make sure your image editing software is set to 8-bits/channel.

    6. Texture memory. When you import your graphics into GameSalad and place them on an Actor, GameSalad turns the images into textures. Textures are stored in "containers" in memory to save space and increase performance. The dimensions of these "containers" are in powers of 2: 2,4,8,16,32,64,128,256,512,1024. They do not have to be square. 32x1024 is valid.

    When you import your graphics, they are placed into the appropriate containers. A 64x50 graphic will be placed into a 64x64 container. A 42x980 graphic will be placed into a 64x1024 sized container.

    These containers do not need to dictate your image sizes or the design of your game, but you should be aware of them. A graphic that is 514x514 will need to be placed in a 1024x1024 container. So when you think you are moving around an image that is only 514x514, you are actually moving around an image that is 1024x1024. This will greatly impact performance, as well as waste precious memory on these devices. A better choice would have been to design the graphic to be 512x512. A player Actor that is 66x34 will need to be placed into a 128x64 container. This gets even worse when the player is animated. A player that is 64x32 would be much more efficient. But if your player absolutely needs to be 66x34 or it ruins the whole aesthetic of your game - that's fine - just understand what the performance costs are. Especially when performance really counts. Don't needlessly make the bullets in your space shooter 18x10 when they would look fine at 16x8, and would save half the memory used.

    So Rule #6, be aware of the texture memory you use and design your graphics accordingly.

    Hope that helps!
  • simo103simo103 Posts: 1,331Member, PRO
    Wow .. thanks for taking the time to lay that all out Joe .... extremely helpful and appreciated.

  • mzxmzx Posts: 151Member
    Joe, you're absolutely AMAZING! Thanks for the info! :D
  • gyroscopegyroscope I am here.Posts: 6,577Member, Sous Chef, PRO
    Sure does help, Joe; thank you very much! (I've saved this thread as a favourite so I can refer to it again).

    ""You are in a maze of twisty passages, all alike." - Zork        temp domain

  • spliketspliket Posts: 93Member
    Thanks Joe!
  • pjnolenpjnolen Posts: 152Member
    Yea, thanks Joe, you shed light in quite a few dark places.

    Can you do one for sounds as well Oh Awesome One?
  • imGuaimGua Posts: 1,089Member
    Can someone tell me how to change dpi without changing its pixel dimensions in Photoshop?
  • JohnPapiomitisJohnPapiomitis Posts: 6,256Member
    imGua said:
    Can someone tell me how to change dpi without changing its pixel dimensions in Photoshop?

    if your saving for web and devices as png 24 it should set the dpi correctly
  • firemaplegamesfiremaplegames Posts: 3,206Member
    @imGua: In the Image Size dialog in Photoshop, uncheck the 3 checkboxes in the lower left corner. Then you can change the dpi and the image will stay the same size.
This discussion has been closed.