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

Post reply
0 favourites
From the Asset Store
8-Bit Voice Blips!
$2.49 USD
23 retro 8-bit Voice Blip Noises for RPG or story based games.
haypers's avatar
haypers

  • 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 (:

    Properties:

    • Collision: Enabled|Disabled
    • Debug Mode: Enabled|Disabled

    Condition:

    • 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

    Actions

    • 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

    Expression

    • 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:

    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:

    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?)

    Scaling

    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)

    Area

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

    Origin

    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.

    Debug

    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)

    Demo

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

    Creation/Edition

    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>

    Download

    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 (:)

    polygon.zip

    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

  • 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?)

    https://dl.dropbox.com/u/23551572/C2-Games/Physics%20Test/index.html

    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?

  • Good one! I'm learning how to use your plugin right now :)

  • I'm going to make a game based on this plugin, ITS JUST AMAZING! Great work.

  • You can change different instances. So who will make Yansteroids?

  • wow nice showing off o_o

    I think I'll use this thing

  • Looks nice. Lots of possibilities :)

  • Yann

    Could this plugin run at cocoonJS?

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads

  • rexrainbow

    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 (:

  • This looks brilliant, great job!

  • I made a slight little change on the plugin.

    The clear action was clearing the vertex list and its canvas but the texture wasn't updated.

    Now it works as expected (:

  • Wow, fantastic! This will be very useful!

  • rexrainbow Yann Data being stored in JSON format, we don't see anything that would make this fail on CocoonJS. Also, unless it's doing "software-rendering" by drawing pixels manually one by one to the canvas, it should also get quite a nice speed boost from our rendering system :)

  • ludei thanks for the info (:

    And yeah as far as drawing goes, I use the canvas context fill/stroke javascript functions and in webgl mode I copy the texture to the webgl context.

  • If you can add physics to the vertices then you could make soft body dynamics like in the game Gish.

Post reply
Return to board index
Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)