Help Creating Smooth Graphics

SledheadSledhead Member Posts: 34
edited November -1 in Art, Graphics, Music and Sound
I currently use Photoshop CS5 to creat most of the artwork in my games. The issue I am having is after I put the image into gamesalad the edges of the shapes become jagged, chopy. This is most noticable when I creat shapes with the pen tool, if there is any advice someone could give me it would be appreciated.

Comments

  • DreamLabDreamLab Member Posts: 2,127
    ok, what you need to do is have your actors be divisible by four(it think) and your art HAS to be the same size as the actor. doesnt have to fill up the whole frame but make sure its the same size as the actor.
  • DizkoDizko Member Posts: 498
    Show us? Hard to determine exactly what's wrong with out a screenshot.
  • spliketspliket Member Posts: 93
    I don't remember which thread this came from, but a guy named Joe posted this a while back. I saved it for later reference.

    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.
  • SledheadSledhead Member Posts: 34
    I`ve tried some of your suggestion but I still can`t figure out how to get it to work. It`s like the edges of the images are pixelated but I want them to appear smooth.
  • SledheadSledhead Member Posts: 34


    I don`t know if you can tell from this video but the edges aren`t very smooth
  • SledheadSledhead Member Posts: 34
    The problem is solved, just started using Photoshop Illustrator :)
Sign In or Register to comment.

© Vanilla Keystone Theme 2024