Gideros Basics - Part 2

In the last post which can be found here We discussed the basics of Gideros and discussed the structure of how Gideros Studio works. We also learned about how everything works with the stage object. In this article we shall look at Vector Graphics

What is a Vector graphic?

This might have been a terms that must have been heard quite commonly, so first of all what is a vector graphic and what is the other type if there is one?

There are two kinds of graphics, Raster and Vector. The ones that we are mostly used to are the raster graphics which we also know commonly know as Bitmaps. The other type that we are looking at in this article is Vector graphics. The basic difference between Raster and vector graphics is that raster graphics are as they are called bitmapped, which in other terms mean that if an image is 10x10, it is a matrix of 100 colour dots that make up the image. Each of the dots could be made up of the RGB quads. With vector graphics, it is not defined as a matrix of dots, but instead is composed of shapes like lines, circles, squares, polygons and each of these can have a different outline and a different fill colour. Images are made up of a composition of any of these shapes. Another difference between these two formats is the size of the image, where the size of a bitmap image is entirely dependent on the dimensions of the image and an estimated size of the image can be determined using the formula, Width x Height x 4. Lastly the most important difference is that the bitmap image when scaled can pixellate where as the vector graphics can scale and retain the crispness at larger resolutions.

How can I use them with Gideros?

With Gideros we have the option to use the generic shape object offered via Shape object. The way to work with the shape object is

local shp1 = Shape.new()
 stage:addChild(shp1)

If any developer has worked with another Lua based framework, namely CoronaSDK which has fixed shapes like line, circle, rectangle where as with Gideros there is no such object but a generic shape object. The good part of this shape object is that this is a canvas on which one can draw any image using a series of commands. The commands that can be used are moveTo, lineTo these are used to draw a line between two points. An example of drawing a square is

local shp = Shape.new()
 stage:addChild(shp)

 shp:clear()        -- Clear the canvas of any previous drawing it may have
 shp:beginPath()    -- Start all drawing 

 shp:setFillStyle(Shape.SOLID, 0xff0000)
 shp:setLineStyle(1, 0x000000)

 shp:moveTo(0,0)
 shp:lineTo(0,50)
 shp:lineTo(50,50)
 shp:lineTo(50,0)
 shp:lineTo(0,0)

 shp:endPath()      -- Finish drawing

When this code is run it displays a red square with a black border on the top left corner of the screen. This shape can then be relocated using the setPosition function.

shp:setPosition(100,100)

This will reposition the red square at 100, 100 on the screen.

Useful Functions

:clear()
This is the function that one might use often at the start of the painting of the shape canvas, this clears the canvas for all subsequent drawing to be performed on this.

:beginPath()
This is the function that signals the start of the drawing code, every beginPath should finish with endPath. All of the drawing code in-between the start and the end have their own set of line (stroke) and fill colors.

:endPath()
This is the function that signals the end of the drawing set.

:setLineStyle()
This is the function that can help set the line drawing color. The last color set is the color used for rendering in the code between the beginPath and the endPath

This function accepts three parameters,

• line width
• line color
• alpha property

:setFillStyle()
This function helps set the fill color, this can be solid color or an image.

This function accepts three parameters,

• fill style
Shape.SOLID, Shape.NONE, Shape.TEXTURE
• fill color
• alpha property

The fill styles of Shape.TEXTURE allows for filling the shape with an image.

:moveTo()
This function positions the location from where the drawing starts. If one wanted to start drawing a line from the middle of the screen, the command would be shp:moveTo(240, 160) (assuming that the screen is 480x320)

:lineTo()
This function draws a line from the last position to the position specified co-ordinates passed to this function. As seen in the sample above, to draw the square.

:closePath()
This function is used to close any path that is left open, this draws a line from the last point ot the first point in an attempt to close the path. All paths that are open would not be filled where as the closed paths are the ones that are filled.


More complex shapes can be created by adding more lineTo and moveTo statements to the mix.

Extending Vector Graphics

Applications like Illustraor or Inkscape help generate vector graphics and are saved in a file format called the SVG. A Gideros user Jack0088 has developed a library called the Gideros Illustrator that takes a SVG created from Illustraor and converts it into a series of shape objects that can be run using Gideros. There is a review of this product that can be found here. The Gideros Illustrator can be download from the site http://owltwins.ow.funpic.de/gideros-illustrator.

Sidenote

There are a couple of other such apps that help create vector graphics in native code.

One very popular product is PaintCode which retails for about $99 USD ($119 AUD). It allows the user to draw the shapes and it generates the corresponding objective-c code that can be copy/pasted into the xcode project to draw that shape.



The other utility is called FlashCode and this retails for about USD $3.99 (AUD $4.49) which converts the Flash SWF files into Objective-C code which can perform animation it does not convert the actionscript but converts the rest of the animation.

Next time...

In the next installment of this Gideros Basic tutorials, we shall examine some other concepts like groups and transformations of the child objects.