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,...")
 
 
(4 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
== Displaying Images ==
 
== Displaying Images ==
 +
Gideros Studio has a simple way of creating graphics in the way of Shapes.
  
Gideros Studio has a simple way of creating graphics in the way of Shapes.<br>
+
To create a shape, you draw it using line commands. Once created, the shape can be rotated, scaled, ...
 
 
To create a shape, you use draw it using line commands. Once created, the shape can be altered by rotating, changing transparency and scaling.<br>
 
 
 
 
<syntaxhighlight lang="lua">
 
<syntaxhighlight lang="lua">
 
local myShape = Shape.new()
 
local myShape = Shape.new()
Line 17: Line 15:
 
myShape:endPath()
 
myShape:endPath()
 
stage:addChild(myShape)
 
stage:addChild(myShape)
</syntaxhighlight><br><br>
+
</syntaxhighlight>
  
This will draw a purple rectangle.<br>
+
This will draw a purple rectangle:
  
 
[[File:PurpleRectangle.png|thumb|center]]<br>
 
[[File:PurpleRectangle.png|thumb|center]]<br>
  
Manipulating your shape:<br>
+
== Manipulating your shape ==
 
 
 
<syntaxhighlight lang="lua">
 
<syntaxhighlight lang="lua">
 
myShape:setPosition(75,0)
 
myShape:setPosition(75,0)
 
myShape:setRotation(45)
 
myShape:setRotation(45)
 
myShape:setAlpha(0.5)
 
myShape:setAlpha(0.5)
</syntaxhighlight><br><br>
+
</syntaxhighlight>
  
[[File:Rotated-Rectangle.png|thumb|center]]<br>
+
[[File:Rotated-Rectangle.png|thumb|center]]
  
There are a few options with setFillStyle:<br>
+
== 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''
  
''Shape.NONE = No fill''<br>
+
This will set the shape as solid with a blue color filling and a transparency of 0.25:
 
+
<syntaxhighlight lang="lua">
''Shape.SOLID = Solid colour fill''<br>
+
setFillStyle(Shape.SOLID, 0x0000ff, 0.25)
 +
</syntaxhighlight>
  
''Shape.TEXTURE = Fill your shape with the contents of a PNG for the texture''<br>
+
There are also a few options for setLineStyle:
 +
*''width''
 +
*''color''
 +
*''alpha''
  
Also, there’s a few options for setLineStyle. The width, colour and alpha values.<br>
 
  
''setFillStyle(Shape.SOLID, 0x0000ff, 0.25)''<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/'''
  
This will set the shape as solid with a blue colour filling and a transparency of 0.25.<br><br><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/.
+
'''[[Written Tutorials]]'''
 +
{{GIDEROS IMPORTANT LINKS}}

Latest revision as of 10:29, 26 August 2024

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:

PurpleRectangle.png


Manipulating your shape

myShape:setPosition(75,0)
myShape:setRotation(45)
myShape:setAlpha(0.5)
Rotated-Rectangle.png

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/


Written Tutorials