Make Graphics Interesting...

It was about time that this feature was added to the CoronaSDK repertoire. Till now, for most demo apps, one could create solid filled shapes which served the purpose but did not look pretty, now with the new API addition, which was quite a surprise, specially when Carlos was mentioning that there will be no new additions till all bugs are cleared. So what does this mean to a developer?

There are two additions to the API,

1. Gradients
2. Tints

What can these do for a developer, this means no more creating gradient images to use for backgrounds or for status bars, etc. These can now be created using the primitive vector graphics, which make it lighter in terms of the final product size.

How do I use a gradient?
The API which is found at here and unfortunately *not* on the API page as yet states that the way to use the gradient is to create a gradient and then pass that as the fill color to the setFillColorMethod.

local rect = display.newRect(10,100,200,50)
 local g = graphics.newGradient(
   {255,255,255}, -- Start Color
   {255,0  ,200}, --   End Color
   "down"         -- direction
  )
 rect:setFillColor(g)

that's it and we get a nice vignetted magenta gradient filled rect.

Now that we have gradients, the next thing would be how about stop points, where we can have multiple colours and stop points in the gradients... :)

How do I use Tinting
Tints is a very useful feature, this can provide the developers an added advantage in apps that have simmilar graphics only distinguished by the colours, say like the ones where you have multiple coloured balls, or bitzens (like in the new games where different characters are distinguished by the color of their shirt/pants) So no more sweating on creating hundreds of small little graphics with those variances, it is all now just a simple line to change those colours.

Advantage :
1. The final app is light, it does not contain multiple graphic assets.
2. Since the image is the same, it is loaded into memory only once, so even in memory, it is texture space saving.

How to use it?

local image = display.newImage("image.png")
   image:setFillColor(255,0,0)
  -- This will tint the image red

There is a small gotcha in this API, based on the number of parameters passed, it provided different results and the tinting works best on a B&W image, where the White is tinted best and the Black remains black. So be wary of this when trying to tint the images.

So those two can provide you as a developer with a lot of hours saved over unnecessary banter and sweat. so enjoy, let's see you use that and produce some more gems.

NOTE: Almost forgot, this is available in the latest daily build, so if you are a subscriber, you get this for FREE otherwise, you are *not* supposed to have it as yet.