Newbie Graphics Questions

grimtoothgrimtooth Member Posts: 69
in Working with GS (Mac)
As promised, the first of many batches of questions from a GS Newbie...

1. I spent last night learning the finer points of Inkscape and making a skeleton, and while it looks (IMHO) Fabulous on the page in Inkscape, it seems to not look nearly as good in Gamesalad. I found that it was easier for me to size up all the parts (arms legs ribs etc) as i built them, and then shrink them when done. I was wondering if this was one of the reasons for bad transition? Should I be working in the sprites "native resolution" and zooming in instead of scaling objects?

2. Sprites "Native Resolution"... I thought i read somewhere that not only do retina displays require quadruple pixel count for images (256x256 to correctly display @ 128x128) but that they will scale sprites to preset sizes (32x32, 64x64 etc.) if they are odd sizes? in which case it would appear to always be in my best interest to work with canvases of nice even 2^x denominations?

3. PNG: I also read somewhere here (I think) that PNG was the preferred graphic file-type, but Inkscape seems to hate PNGs. Texture Filters do not export correctly, Alpha channel is not included or incorrect. Only way to get workable PNGs that I have found so far is to export a BMP or similar from Inkscape and then use GiMP to fix the alpha, but that also leaves alot of unclean edges that can appear as white lines etc.

Thank You!!
Grim

Comments

  • jamie_cjamie_c ImagineLabs.rocks Member, PRO Posts: 5,772
    edited May 2013
    I'm afraid I don't know anything about Inkscape so I can't answer those questions but you should create your images at twice the size you want them in Gamesalad (if you are using Resolution Independence) so for example if you want your sprite in game to be 64 x 64 pixels you would create it at 128 x 128 pixels.

    Also when using Resolution Independence you should always make sure your graphics pixel dimensions are divisible by 4. Keeping your images evenly divisible like that will let them always display the best they can on screen and it's helps the engine run smoother if you have a lot of images in use.

    http://jamie-cross.net/posts/   ✮   Udemy: Introduction to Mobile Games Development   ✮   Learn Mobile Game Development in One Day Using Gamesalad   ✮   My Patreon Page

  • BoomshackBarryBoomshackBarry Member Posts: 712
    About point 1, I don't use inkscape myself but I do use illustrator which is very similar. As long as you're doing all of the scaling within inkscape before exporting as a png then that shouldn't affect the quality. Inkscape uses vectors to generate images, which means scaling won't affect quality at all.

    If you have odd line widths though that may affect the perceived quality. Say perhaps you draw a part with a line width of 1 pixel, then scale the part a few times up and down, and when you're finally happy with the part's size it may have an odd line width (0.67px, 2.32px etc) if the line width has also been scaled. This may look odd on a output png because it will create blurred edges, because the decimal numbered line width won't fit nicely in to an integer number of pixels.

    This is all based on things I've learned from illustrator but the theory should be the same.
    Warning There was an error rendering this rich post.
  • SocksSocks London, UK.Member Posts: 12,822
    Should I be working in the sprites "native resolution" and zooming in instead of scaling objects?
    It's best to avoid scaling or 'zooming' (enlarging?) - just make your images at the size you want to use them.
    retina displays require quadruple pixel count for images (256x256 to correctly display @ 128x128)
    Yes.
    . . . but that they will scale sprites to preset sizes (32x32, 64x64 etc.)
    Not sure what or who this 'they' might be you refer to who is meant to be doing the scaling, but GameSalad doesn't scale your images, if you import a 237 x 1183 pixel image it will be displayed at 237 x 1183 pixels (or half that size if you are using resolution independence).
    . . it would appear to always be in my best interest to work with canvases of nice even 2^x denominations?
    Yep, 8, 16, 32, 64, 128 . . . . etc etc

  • grimtoothgrimtooth Member Posts: 69
    Thank you all for the comments!

    @BoomshackBarry I think you hit the nail on the head... I'll try to zoom in for finer work rather than work with large objects and scale down at the end.
  • grimtoothgrimtooth Member Posts: 69
    just wanted to toss out an update...
    This might sound like an ugly process, but its "free"

    To work around Inkscapes seeming inability to export PNG with alpha.
    1. draw in inkscape
    2. File > Export Bitmap
    3. Open BMP in GiMP
    4. Export to PNG (uncheck preserve transparent pixel color info)
    (5.) Drop PNG into TinyPNG.org

    Yay, my (10kb!) skeleton is ready to import into Gamesalad

    image
    Uploaded with ImageShack.us
    http://img855.imageshack.us/img855/9328/s256.png
  • SpriteAttackSpriteAttack Member Posts: 524
    @Grimtooth - Inkscape works with pngs... Not 100% the way one would want to... but with one stop in gimp to fix the dpi setting and scale it to the right size.

    http://2dgameartforprogrammers.blogspot.com/2012/02/working-with-bitmap-output-in-mind.html

    As for you skeleton - my advice would be to cut down on the gradients to get cleaner ingame art. The gradient loses the crispness you can achieve in vectors and the shapes tend to lose their shapes - eg. your joints look like balls and are disconnected from the bones or the hips look like bumps when they really should be behind the spine and the leg joints.

    This is a quick mock with outlines and a 2 colour shading using copies of the vector shape and the 'path/intersection' command and clips 'object/clip/set':

    image

    There is also a problem when scaling down to the small size e.g. 64x64. The gradient gets lost on small objects and you end up with an undefined mess that lacks contrast.

    image image



  • jamie_cjamie_c ImagineLabs.rocks Member, PRO Posts: 5,772
    @SpriteAttack, great advice and nice sample!

    http://jamie-cross.net/posts/   ✮   Udemy: Introduction to Mobile Games Development   ✮   Learn Mobile Game Development in One Day Using Gamesalad   ✮   My Patreon Page

  • grimtoothgrimtooth Member Posts: 69
    @SpriteAttack First of all, you rock. Second, I totally see what you mean about the 64x64 muddling...it really does lose a lot of the cartoony look that i wanted on the body and I can see that I would be better off just doing my own 2-3 shade gradient than letting Inkscape do it. Luckily, that's not too hard and I can use the same model, and also luckily I hadn't done any animation work on him :)

    My analytical brain gets in its own way quite often... I was trying to make a quick and dirty 128x256 skelly (and it probably took me longer to make mine than you yours hehe), but I forgot that that is only the pixel information and that my actual target display size would be 64x128.

    So far I am truly impressed with the helpfulness of this community

    Grim
  • Asobu_GamesAsobu_Games PRO Posts: 261
    A general rule for graphics is that you can always scale down, but not enlarge your images without losing quality. So if you don't know what size to make something you are better sticking to vector graphics or making them at a size larger than you would possibly need. That way you are also 'future proofing' in case higher res screens are used in the future. I learned this lesson with a game I made before Apple introduced the retina display. To update my app I needed to redraw a lot of graphics.
  • SpriteAttackSpriteAttack Member Posts: 524
    @Asobu_Games - that's the wonderful thing about vector art - it's size independant. You create the art once and after that it's a matter of exporting and scaling to the size you need. It's one of the main reasons I love doing most of my art in vectors - it's quick, it's scalable and it's easy to modify.
Sign In or Register to comment.

© Vanilla Keystone Theme 2025