Saturday, October 9, 2010

Scalable Graphics Revisited (Retina edition)

Does this title seems familiar, well it's as I wrote a blog post title "Scalable Graphics" a month ago to cover this topic.  So then why are we gonna talk about it again? Well as some of you may know I've been quite busy in the past few weeks to work on Mythlound : Maurlack Tower our upcoming iPhone game.  And would like to share some hints/tips that could be useful in helping you making your graphics so you can easily target both Retina based iDevices and the old low-res iDevices, as I found they are a few thing to consider (which may vary on the tools that you use,  but which have impact me since I am using Inkscape).

But before going further I like to point the very good tips blog post from Karnak Games about GIMP as one of the important tips also apply to Inkscape which is to to enable the OSX CMD key under X11 (as both GIMP and Inkscape are using it to run).

In my "Scalable Graphics" blog post I explained how to make a simple stone tile and what would be the result of scaling up and down which make them look all great.  So for Mythlound : Maurlack Tower I use the same process to go from my working size to both destination size which was either a higher resolution for Retina iDevice or to a  lower resolution for previous generation iDevices.  As I was most of time inside Inkscape working in zoom mode (typically in the 2:1 zoom mode), which look really great btw, I then failed to notice some of the limitation in the very small scale.

In the above picture if you look at the small mercury symbols at the far most right (the one in red) it look great and clean while viewing in the 2:1 zoom mode.  Now let re-see the same picture above again, but now in the 1:1 zoom mode, which will be actual pixel size.

If you look carefully the same small mercury symbols at the far most right (the one in red), it is clear that some of the details has been lost.  Especially you can see that the black outline from the previous version was more clear, now its almost entirely gone from the left side.  I knew that by scaling down an image I will loose some of details, they are no way around it as they are definitely less pixels to represent the same image.  But then I remember to have seen my image in higher resolution rendered in smaller scale on my iPod touch via Safari and did look better.

Even while I was pinching to zoom in and out in the thumbnails on Twitpic I can still see the mercury symbols to be better rendered than my Inkscape scale down version.  This is when it hit me, since I knew my Retina version of the graphics was still looking great after the export, I decided to conduct a little experiment.

Above is the results that I was getting from using the scale + export function from inside Inkscape as you can see we have lost a lot of the black outline and it doesn't look as nice.  Now let start again from the Retina version of the graphics and then scale it down in GIMP using the Sinc (Lanczos3) quality interpolation.

Much more  better don't you think?  So the moral of the story, never thrust just what your seeing while in higher resolution zoom mode.  If it look bad while zooming to the 1:1 ratio, then it mean it probably gonna look like this after you export it.  Solution for this problem?  Export it in a higher resolution then rescale it down the the lower resolution via a pixels graphics editor such as GIMP.

Additional note, the above graphics are 90x90 pixels for the Retina version and 45x45 for the low resolution, so as you can see the 90 pixels wide image still look sharp and clean so even if your working in higher resolution in Inkscape the results can still look good in small scale, but it have its limits so its definitely a YMMV.
Here is a few more tips to help you use Inkscape more efficiently.  The first one that I will mention might help to have less pain while working in high resolution, as if you're like me applying a lot of filters this can be quickly made your machine to crawl to a halt.  I previously recommend to something change the view mode so that it disable filters, but they are another way that will still maintain the filters but should make thing snappier but less pretty.

By going into Inkscape preferences you can adjust the Gaussian blur and filter effect quality for display, as you can see the default is usually set to high which make it look really nice but it can slow down any manipulations done afterward.  So by lowering the quality setting the rendering is very quick.  And if you have multi-core CPU then you can experiment and raise the number of threads for the Gaussian rendering (I still have to experiment with this to see what result I can get).

Another tips that was referred to me by one of the Inkscape developer (hi @joncruz) was to enable Auto-Save, I am not too much a big fan of this as currently I am doing a lot of experimentations and I don't always want to save all what I just did as I sometime prefer to simply close everything and re-open my file.  But it might save your life so you might still want to set it.

 Now let me go back to my graphics as I still have many to do for Mythlound : Maurlack Tower and I will leave you with some of my current work in progress (which some of you might already have seen if you follow me on Twitter).

This post is part of iDevBlogADay, a group of indie iPhone development blogs featuring two posts per day. You can keep up with iDevBlogADay through the web site, RSS feed, or Twitter.

No comments:

Post a Comment