Difference between revisions of "Article Tutorials/Drawing Shapes (filled polygons)"

From GiderosMobile
(update?)
m (Text replacement - "<source" to "<syntaxhighlight")
Line 3: Line 3:
  
 
To create a shape, you draw it using line commands. Once created, the shape can be rotated, scaled, ...
 
To create a shape, you draw it using line commands. Once created, the shape can be rotated, scaled, ...
<source lang="lua">
+
<syntaxhighlight lang="lua">
 
local myShape = Shape.new()
 
local myShape = Shape.new()
 
myShape:setLineStyle(2)
 
myShape:setLineStyle(2)
Line 22: Line 22:
  
 
== Manipulating your shape ==
 
== Manipulating your shape ==
<source lang="lua">
+
<syntaxhighlight lang="lua">
 
myShape:setPosition(75,0)
 
myShape:setPosition(75,0)
 
myShape:setRotation(45)
 
myShape:setRotation(45)
Line 37: Line 37:
  
 
This will set the shape as solid with a blue color filling and a transparency of 0.25:
 
This will set the shape as solid with a blue color filling and a transparency of 0.25:
<source lang="lua">
+
<syntaxhighlight lang="lua">
 
setFillStyle(Shape.SOLID, 0x0000ff, 0.25)
 
setFillStyle(Shape.SOLID, 0x0000ff, 0.25)
 
</source>
 
</source>

Revision as of 17:35, 12 July 2023

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, ... <syntaxhighlight lang="lua"> 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) </source>

This will draw a purple rectangle:

PurpleRectangle.png


Manipulating your shape

<syntaxhighlight lang="lua"> myShape:setPosition(75,0) myShape:setRotation(45) myShape:setAlpha(0.5) </source>

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: <syntaxhighlight lang="lua"> setFillStyle(Shape.SOLID, 0x0000ff, 0.25) </source>

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/.