Gideros + Illustrator - Work at every Resolution


When Apple released the iPhone4 or rather the new Retina display, they upped the resolution from the measly 320x480 to 640x960. This was great as it looked very nice, but for the developers this was a bit of a nightmare, assets now needed to be made in three sizes, 320x480, 1024x768 and 640x960. This was not enough, Apple introduced the new iPad and a new resolution 2048x1536.

The maximum size in any project is taken up by two things, Graphics and Music/Sound. Unfortunately there is still no library that can play MIDI files or sound that is created on the fly like it used to be on earlier home computers in the late 80's. We could have amazing sound loops (instrumental) but at a very small filesize. There's a gap if anyone wants to fill that (though I am working on that one as and when I get some time) The second issue is graphics, now if you are a developer, you already know the size a png file takes, each pixel is composed of 4 bytes, the Red, Green, Blue and Alpha which is in the range of 0-255. So a simple graphic of 100x100 pixels would be about 100*100*4 = 40,000 bytes, plus a header to hold all the relevant data, though there is some compression algorithm that attempts to reduce the file size. Some might argue that a good compression format like JPG would help reduce this problem, try to have some crisp artwork and see how it reproduces when saved to JPG, you will know what I mean.

Now that is not all, the 100x100 graphic was fine for an iPhone game on a 320x480 resolution, on the iPad (1024x768) that might need to be doubled up just like on the iPhone4 @2x style graphic. This would mean there will be atleast two set of graphics, one with the 100x100 size and one with the 200x200 @2x size, now with the new iPad that has been upped and a new format is introduced, @4x, so there needs to be a new size 400x400 that will be used for the new iPad retina display. Apple is known for it's rejection policy and they want that the new retina display be supported, and with over 3-4 million units sold in the first week of introduction, there is a huge market with these devices, so developers want to upgrade their apps with graphics for these devices.


Now let's just step back and have a look at what's wrong with this picture? Nothing?
A game is made up of not one but several images, so the 100x100 graphic that we were discussing is only one of the images, let's say your app/game needs three background images, and we need at least three versions for each resolution but in this case, we will have 4, so we have 320x480, 1024x768, 640x960 and 2048x1536 times 3, Just creating a blank image for the new iPad resolution, Photoshop displays the size as 9MB, iPad 2.25 MB, iPhone4 1.76MB and iPhone3G 450KB. Now if we add them all up and triple it, we are looking at about 13.46MBx3 = 40.38 MB (uncompressed) if we do some kind of optimizations, we might get that down but that's not the point, the point is, is there a better way to deal with this resolution madness?

Just like the Sound files even in MP3 format are quite large and we could do with some thing like a MIDI format, similarly the only way to go forward to be able to scale to any size would be to look at Vector Graphics, we have been using raster (Bitmaps) for a long time and ended up with this size dilemma. For those that do not know what the difference between Vector and Rater is, Google is your friend. In short raster graphics are bitmaps that are rendered onto the file as bit by bit data, so the file contains the information for every bit in the image like in an array. In vector graphics, the graphic is saved as a series of commands involving graphic primitives like lines, rectangles, circles that make up the graphic. The vector graphics are not pre-rendered, these need to be read and rendered. Where as raster graphics are already rendered and can be displayed on screen. However when you scale the raster graphics, they start to pixellate as the software does not know what to do, so it just starts to duplicate the pixels to display them in a larger size. Where as in a vector graphic the commands are re-rendered relative to a new size, so even when the vector graphics are scaled they look equally crisp as they did smaller.

If this is so good, why do we not use it?
That is an excellent question, if that came to your mind. MIDI files are a wonderful format, why do we not use them? The answer is simple, there is no native support for these so it is not used. In many other frameworks, there are still issues with custom rendering of primitives, so vector formats are not possible.

There are a variety of vector formats, The one that is best suited (being open source) is SVG, Scalable Vector Graphics format. If you have used Illustrator or Inkscape, both of these use this format (however there are still inconsistencies between the SVG saved by either format).

Now, introducing the Gideros Illustrator Software, the brain child of a brilliant developer from Germany, Alex who goes by the Handle of Jack0088. It is a set of classes that work with GiderosStudio and parse and display the SVG file in your Gideros project. Here is a sneak preview video of what's on offer



At this point of time, the tool is in alpha stage, but works perfectly fine. If you head over to the website at http://owltwins.ow.funpic.de/gideros-illustrator/ and navigate to the TRY section, you can download the files for FREE, yes free. The developer is wanting to share with the community his skills and if it helps you, making a donation (actually I prefer calling it pay if you like it/use it) towards the same. There are other ideas like putting it on Kickstarter to have the community back this wonderful project.

So how was my experience?
I have Lion and CS4, CS4 worked well with SnowLeopard and has issues with Lion, I cannot afford to upgrade it as I had the CS4 Master Suite (unless Adobe offers me a free upgrade to CS6, which is not likely to happen). I had difficulties exporting my AI file to SVG format. SO i had to work with the sample SVG that came with the sample project. The entire size of the SVG document and linked graphics is about 70KB, remember the above sizes for the different devices? 40 odd MB? The SVG format that will render to all devices and sizes is just 70KB.

On resolutions that are smaller or a different aspect ratio, portions of the image get rendered outside of the display area (not visible) but the graphic remains as crisp as ever. OK, there is still a bit of an issue with Anti-Aliasing so it can look a bit jagged, but still when you compare that to what the alternatives are... there is really no comparison. Each element of the SVG file can be used as an object and manipulated. In fact an alternative software that uses Inkscape for creating Levels uses a similar technique.

The Gideros Illustrator is a package of 5 lua files and takes advantage of the extensibility that GiderosStudio offers and renders the SVG file in a flash (a reference to a unit of time, not the Adobe software). This is the start, the developer has via email shared his plans for the growth of this package. So, if you are a Gideros developer, you need to have this in your utility belt and if you are a lua framework developer, you need to look at this and maybe jump on to the Gideros Bandwagon, if you use other frameworks, well... there was one for JavaScript at http://raphaeljs.com/


Head over to the website and download it, give it a try, if you like it, please help the developer to keep this project running full steam.

For those curious, the SVG file with it's assets was 70KB the screenshot in PNG format taken at 1024x768 was about 220KB, the current version of GiderosStudio does not have the new iPad resolution to test with as yet, so cannot suggest the savings but definitely that would be quite significant.

Comments