[PLUGIN] Polygon (update 2013-04-23)

Post your completed addons to share with the community

Post » Thu Jan 17, 2013 10:07 pm

Hi! guys

Last-Edit 2013-04-23:
bug fix: ctx.drawImage() didn't like textures of size (0,0)

Edit 2013-03-03:
bug fix: wrong bounding box expressions.

I made a plugin to draw polygons (:

- Collision: Enabled|Disabled
- Debug Mode: Enabled|Disabled

- Is overlapping another object
Same as Sprite is overlapping
- Is overlapping at offset
Same as Sprite is overlapping at offset
- Collisions enabled
Same as Sprite collision enabled (return true if collision is enabled)
- On Drawn
Trigger when the Draw action is executed
- Compare area
Compare the area of the drawn polygon

- Add Vertex(x,y,local or world-space)
add a vertex to the vertex list
- Remove Vertex(index)
remove a vertex from the vertex list
- Insert Vertex(index,x,y,local or world-space)
insert a vertex in the vertex list
- Move Vertex(index,x,y,local or world-space)
move a vertex of the vertex list
- SetOrigin(x,y,local or world-space)
change the origin of the polygon
- Log Vertex List
print vertex list in the console log
- Draw Polygon(fillColor,lineWidth,lineColor)
draw the polygon using the vertex list, filling the shape with fillColor and stroking the outline with a line of thickness lineWidth and color lineColor
- Clear Polygon
clear the vertex list and erase the polygon
- Load(JSON)
load a vertex list in JSON format
- Download
open a window with a download link of a JSON file containing the a vertex list

- Area: area in px� of the shape. gives a wrong results for invalid polygons (when edges cross each other)
- asJSON: return the vertex list as a JSON string (to use in the load action)
- OriginalWidth: width of the original polygon texture
- OriginalHeight: height of the original polygon texture
- LocalVertexX(index): the original values entered in Add Vertex (local-space)
- LocalVertexY(index): the original values entered in Add Vertex (local-space)
- VertexX(index): X position of the vertex (by index) in world space
- VertexY(index): Y position of the vertex (by index) in world space
- VertexCount: total number of vertices in the vertex list (usefull to loop through them)
- Left: X position of left of unrotated bounding box
- Right: X position of right of unrotated bounding box
- Top: Y position of top of unrotated bounding box
- Bottom: Y position of bottom of unrotated bounding box
- CenterX: X position of center of unrotated bounding box
- CenterY: Y position of center of unrotated bounding box
- BarycenterX: X position of barycenter (average of vertices position)
- BarycenterY: Y position of barycenter (average of vertices position)

How does it work?
A polygon is defined by an ordered list of vertices.
To create this list you use the action Add Vertex.
The order in which you add vertices is important. The plugin will draw the polygon starting from the first vertex you added until the last one and close the shape back to the first.

Another thing to keep in mind, when you Add vertices, you add them relatively to the position/orientation/scale of the object (local space) or directly in the world position (world-space)
So if you want to make a square around the origin of the object you will have something like that:
Code: Select all
global number sideLength = 100
Polygon: Add vertex -sideLength/2, -sideLength/2 (local-space)
Polygon: Add vertex  sideLength/2, -sideLength/2 (local-space)
Polygon: Add vertex  sideLength/2,  sideLength/2 (local-space)
Polygon: Add vertex -sideLength/2,  sideLength/2 (local-space)
But if you do only that, nothing will happen. Once you've built your vertex list, you have to tell C2 to draw the polygon (it's not done after each Add for obvious reasons (:)

To draw the polygon, it looks like that:
Code: Select all
Polygon: draw with outline (1.0 px, "rgb(255,0,0)") and fill with ("hsl(180,50%,50%)")
(you have to specify color with a string (in "") and you can use either rgb(r,g,b), hsl(hue,saturation,lightness) or "#rrggbb" or special recognized values like "black" "red" "green" etc)

You can move, or remove vertices via their indexes (0-based)
If the index you specify is negative or greater than the index of the current last vertex, it won't do anything and will write a warning message in the javascript consol (only in debug mode and preview).

You can insert a vertex inside the list by giving an index.
If the index you specify is negative or greater than the index of the current last vertex, it will be respectively clamped to 0 or [index of the last vertex] + 1

Clear polygon will do two things at the same time:
empty the vertex list and delete the current polygon texture.

JSON support
I basically copied the piece of code from the Array plugin. So you can load and save a vertex list in JSON format.
It can be usefull if you want to copy a polygon shape or save some shape for later uses (polygon editor?)

When you use the draw polygon action, you basically create a texture. This texture can then be scaled using width/height, and rotated using angle.
But remember that since it became a texture, you will see stretching artefacts.

Another thing to be aware of, if you stretch your polygon, you basically modify the relation between originalWidth (which is the distance between the left most and the right most vertex in local space) and current Width of the object.
The draw polygon action will keep this relation.
If your width is twice your originalWidth, and you modify your vertex list and draw, the ratio will be kept.

Local-Space vs World-Space

Add, Insersion and move can be either done in local space or world space.

Local-space means relative to the space of the polygon object. So if you add vertices and then change the angle of the object, you'll have the same result the other way around.

Via expression, you have access to the local coordinate (LocalVertexX,LocalVertexY) or the world-space coordinate, their real position in the world (VertexX,VertexY)

The value you get from the Area expression or evaluated with the Compare area condition will be right for convex and concave polygon but wrong for invalid polygons (when two edge cross each other).

You can set the Origin of the polygon wherever you want to, even after your vertex list is built.
The vertex list will be recalculated accordingly, and the position will be changed so the origin is moved but nothing is changed visually.
It may be usefull to set a new rotating point or anything you want to do in runtime.
You can test it in the demo.capx in the zip or Creation/Edition demo below.

To help you during development, you can enable the debug mode property.
When this property is enabled, and ONLY in preview (this way if you forget to disable it for export it won't be a problem) each action will throw a message in the javascript consol.
This way you can see what vertex are added, inserted or removed, when polygon are drawn and when JSON's are loaded

But sometimes you don't need that much, or you would prefer triggering debug information yourself via event.
For that, you have the log vertex list action. It will write the list of vertices in the console (only in preview)

You can test everything about scaling, rotating, vertex creation here:

Just to fool around
Creating random graphs

One possible application of it:
Split poly

<show off>
One crazy really unusable and "you shouldn't do that" application:
3D rendering
</show off>

Here is the plugin with the capx of the demo in it.
(I didn't provide the 3D one because I don't want to encourage anyone to use that method (:)

I made some video to show you how I to use it

Polygon Plugin:RamblingActionsExpressionsPolygon Splitting:Starting ShapeCutting NodesNode SelectionSplit FunctionLine EquationGroupingChildren CreationPolygon SelectionHelper FunctionsFeedbacksNode FilteringLittle BugFinal Rambling

Do remember that drawing a polygon is an expensive computation, avoid as much as possible to do that every tick.

I hope you like it and don't hesitate to report bug and tell me how you used it (:Yann2013-04-23 00:21:22
Last edited by Yann on Sun Sep 14, 2014 8:21 pm, edited 1 time in total.
Posts: 1,481
Reputation: 16,400

Post » Thu Jan 17, 2013 10:46 pm

I just tested with physics, and although I get a scary error message on preview, it seems to work super fine (some one said Crayon Physics Deluxe?)


Maybe @Ashley can shed some lights on it:
is it a bad idea to used physics with my plugin? or can the error message be disabled somehow?
Posts: 1,481
Reputation: 16,400

Post » Thu Jan 17, 2013 10:56 pm

Good one! I'm learning how to use your plugin right now :)
Posts: 3,102
Reputation: 27,380

Post » Thu Jan 17, 2013 11:02 pm

I'm going to make a game based on this plugin, ITS JUST AMAZING! Great work.
Posts: 249
Reputation: 6,922

Post » Thu Jan 17, 2013 11:22 pm

You can change different instances. So who will make Yansteroids?
Image Image
Posts: 7,672
Reputation: 79,543

Post » Thu Jan 17, 2013 11:31 pm

wow nice showing off o_o
I think I'll use this thing
Posts: 327
Reputation: 6,602

Post » Thu Jan 17, 2013 11:33 pm

Looks nice. Lots of possibilities :)
Posts: 1,520
Reputation: 25,170

Post » Thu Jan 17, 2013 11:59 pm


Could this plugin run at cocoonJS?
Posts: 4,216
Reputation: 114,422

Post » Fri Jan 18, 2013 12:03 am

I have no idea, I don't have anything to test that, if you have time to try I'd be intersted to know the answer (although I don't know if I would be able to do anything about it if it doesn't work)

What I can tell you is that it runs with webgl on and off (:
Posts: 1,481
Reputation: 16,400

Post » Fri Jan 18, 2013 12:34 am

This looks brilliant, great job!
Posts: 900
Reputation: 11,810


Return to Completed Addons

Who is online

Users browsing this forum: No registered users and 0 guests