Difference between revisions of "Article Tutorials/Drawing Shapes (filled polygons)"
From GiderosMobile
(Created page with "== Displaying Images == Gideros Studio has a simple way of creating graphics in the way of Shapes.<br> To create a shape, you use draw it using line commands. Once created,...") |
(update?) |
||
| Line 1: | Line 1: | ||
== Displaying Images == | == Displaying Images == | ||
| + | Gideros Studio has a simple way of creating graphics in the way of Shapes. | ||
| − | + | To create a shape, you draw it using line commands. Once created, the shape can be rotated, scaled, ... | |
| − | + | <source lang="lua"> | |
| − | To create a shape, you | ||
| − | |||
| − | < | ||
local myShape = Shape.new() | local myShape = Shape.new() | ||
myShape:setLineStyle(2) | myShape:setLineStyle(2) | ||
| Line 17: | Line 15: | ||
myShape:endPath() | myShape:endPath() | ||
stage:addChild(myShape) | stage:addChild(myShape) | ||
| − | </ | + | </source> |
| − | This will draw a purple rectangle | + | This will draw a purple rectangle: |
[[File:PurpleRectangle.png|thumb|center]]<br> | [[File:PurpleRectangle.png|thumb|center]]<br> | ||
| − | Manipulating your shape | + | == Manipulating your shape == |
| − | + | <source lang="lua"> | |
| − | < | ||
myShape:setPosition(75,0) | myShape:setPosition(75,0) | ||
myShape:setRotation(45) | myShape:setRotation(45) | ||
myShape:setAlpha(0.5) | myShape:setAlpha(0.5) | ||
| − | </ | + | </source> |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | [[File:Rotated-Rectangle.png|thumb|center]] | |
| − | ''Shape.TEXTURE = Fill your shape with the | + | == Style == |
| + | There are a few options for setFillStyle:<br/> | ||
| + | ''Shape.NONE = No fill''<br/> | ||
| + | ''Shape.SOLID = Solid color fill''<br/> | ||
| + | ''Shape.TEXTURE = Fill your shape with the content of a PNG''<br> | ||
| − | + | This will set the shape as solid with a blue color filling and a transparency of 0.25: | |
| + | <source lang="lua"> | ||
| + | setFillStyle(Shape.SOLID, 0x0000ff, 0.25) | ||
| + | </source> | ||
| − | '' | + | There are also a few options for setLineStyle:<br/> |
| + | ''width''<br> | ||
| + | ''color''<br> | ||
| + | ''alpha''<br> | ||
| − | |||
'''Note:''' This tutorial was written by [http://bluebilby.com/author/waulokadmin/ Jason Oakley] and was originally available here: http://bluebilby.com/2013/04/10/gideros-mobile-tutorial-displaying-graphics/. | '''Note:''' This tutorial was written by [http://bluebilby.com/author/waulokadmin/ Jason Oakley] and was originally available here: http://bluebilby.com/2013/04/10/gideros-mobile-tutorial-displaying-graphics/. | ||
Revision as of 20:56, 10 May 2020
Displaying Images
Gideros Studio has a simple way of creating graphics in the way of Shapes.
To create a shape, you draw it using line commands. Once created, the shape can be rotated, scaled, ...
local myShape = Shape.new()
myShape:setLineStyle(2)
myShape:setFillStyle(Shape.SOLID, 0x9900ff)
myShape:beginPath()
myShape:moveTo(1,1)
myShape:lineTo(100,1)
myShape:lineTo(100,100)
myShape:lineTo(1,100)
myShape:lineTo(1,1)
myShape:endPath()
stage:addChild(myShape)
This will draw a purple rectangle:
Manipulating your shape
myShape:setPosition(75,0)
myShape:setRotation(45)
myShape:setAlpha(0.5)
Style
There are a few options for setFillStyle:
Shape.NONE = No fill
Shape.SOLID = Solid color fill
Shape.TEXTURE = Fill your shape with the content of a PNG
This will set the shape as solid with a blue color filling and a transparency of 0.25:
setFillStyle(Shape.SOLID, 0x0000ff, 0.25)
There are also a few options for setLineStyle:
width
color
alpha
Note: This tutorial was written by Jason Oakley and was originally available here: http://bluebilby.com/2013/04/10/gideros-mobile-tutorial-displaying-graphics/.
