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

This looks pretty cool, but do you think it's possible to fill the polygon with a sprite which would then get 'stretched' up nicely? <img src="smileys/smiley1.gif" border="0" align="middle" />

Ethan

yeah I dunno how hard it would be, and to me it would make more sense to be a behavior on top of this plugin than a feature inside the plugin.

And also remember that drawing polygons is expensive. By looking at the "you shouldn't do that" 3D demo where there's like 30 polygons it's already quite slow (:.

Jasper

Heheheheheh asking for new features are you? :D

I was thinking about that. I left that aside since I didn't need it and I wanted to make it work nicely without worrying about textures (tiling/not tiling/... etc).

But we'll see if I can do something about it. I'm starting to get the hang of C2's SDK.

Don't expect it too soon though, but if you see that in one month I still didn't try you are allowed to ask again :D

This looks awesome! I suppose it could be used to "fake" dynamic collision polygons. :) Thanks!

—

Yeah in theory, but I have yet to see a concrete application of "dynamic collision" you can't achieve with a few sprites.

Cool, that will be definitively useful.

Here's just a feature suggestion: draw curved surfaces by interpolating between polygon vertices, e.g. cubic curves. I think technically it should be something like subdividing a polygon into curved surface.

Update:

Action:

• Add Vertex
• Move Vertex
• Insert Vertex
-> A new combobox parameter has been added to choose between local and world-space for add/move/insert vertex
• Set Origin
-> You can define a new origin for the object (this well automagically change the local position of the vertices and the position of the object so the origin is changed but the polygon itself doesn't bulge one bit)

Expression:

• Right: X coordinate of the right edge of the unrotated bounding box
• Bottom: Y coordinate of the bottom edge of the unrotated bounding box
• Left: X coordinate of the left edge of the unrotated bounding box
• Top: Y coordinate of the top edge of the unrotated bounding box
• CenterX: X coordinate of the center off the bounding box
• CenterY: Y coordinate of the center of the bounding box
• BarycenterX: X coordinate of the barycenter (average of the vertices position)
• BarycenterY: Y coordinate of the barycenter (average of the vertices position)

Here are some example of the uses of these new features.

The bouding box brackets are a 9-patch object placed using the bouding box expressions.

The blue cross is the bounding box center, the yellow cross is the origin and the gree cross is the barycenter.

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

Great!

Is it possible to use a tillable texture as the fill? Or could that be achieved using two layers and setting the poly layer to mask the textured layer?

labithiotis

Yeah you can probably use masking, I still didn't work on texturing, don't know yet how and if I should handle that since there's easy work around like masking as you suggested.

And with containers it shouldn't be too hard to work with while allowing you to use either tiledbg or sprites.

I might try some stuff at some point just for testing but I don't promise anything (:

Hey Yann

Is possible to convert from SVG lines to JSON and recreate the lines?

Joannesalfa

Not without some effort on your side (:

If you're interested the JSON format of the polygon plugin is:

{
    'c2polygon':true,
    'vertexCount' : numberOfVertex,
    'vertices': [
                    [x0,y0],
                    [x1,y1],
                    [x2,y2],
                    ...
                ]
}

Yann - <img src="smileys/smiley32.gif" border="0" align="middle"> on your plugin, it 's cool!

do you think, that bezier curvers will be an option?

Aaand have a look at this awesome flash-engine-demo. Which ingredients do we need to replicate that into a plugin?

edit: well, it seems like i asked a similar question to labithiotis's. such an editor would be soooo awesome ;)

Joannesalfa

Not without some effort on your side (:

If you're interested the JSON format of the polygon plugin is:

{
    'c2polygon':true,
    'vertexCount' : numberOfVertex,
    'vertices': [
>                     [x0,y0],
                    [x1,y1],
                    [x2,y2],
                    ...
                ]
}

As long as you can create a JSON in such format, the plugin will gladly accept it and you'll be able to draw any polygon.

I'm trying to recreate this with Polygon plugin

http://openclipart.org/people/zeimusu/zeimusu_Swash_ornament.svg

I doubt if is required to work with JSON or standard SVG path. Would you explain how do it or provide an example? If you can when you get change.

Thanks!

oppenheimer

Thanks, and I don't think you can make a plugin for that. I mean, it's a whole tool by itself. Plugins just add some simple functionnalities you can operate through action/condition/expression.

Now, even if this hypothetical plugin were to only read some data this tool output and draw the corresponding graphics. I think you would need some kind of mesh distorsion capabilities as well as some smart tiling effects. Like an enhanced 9-patch.

For distorsion, it might be achievable with WebGL (meaning, this wouldn't be compatible with devices that doesn't implement it).

The polygon plugin only uses the html5 Canvas 2D functionnalities. When WebGL is activated, it merely copy the canvas2D texture into the webGL context.

Joannesalfa

a polygon (pron.: /'p?l?g?n/) is a flat shape consisting of straight lines that are joined to form a closed chain or circuit

Joannesalfa

> a polygon (pron.: /'p?l?g?n/) is a flat shape consisting of straight lines that are joined to form a closed chain or circuit

I know what means polygon, sorry my mistake for saying "Path" which doesn't make sense.

However, it would have more than 50 vertex to create a complex shape.

Take a look:

http://www.w3schools.com/svg/svg_polygon.asp

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">

<polygon points="100,10 40,180 190,60 10,60 160,180"

style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />

</svg>

Isn't possible to recreate this shape according to this code via JSON or something with your Polygon plugin?

Joannesalfa

My remark was more because you were showing me a curviline shape. I wanted to make sure you didn't want to make coffee with the plugin :D

Now, I won't write an svg to JSON converter.

But what I can tell you is that you just need to retrieve the value of the points attribute and recreate a json string by grouping the number by pairs

You can probably write something in C2 directly with 2 text boxes for input/output, and maybe using the xml plugin to retrieve the points attribute and then parsing it using some token function.

The example you posted should become something like:

{
    'c2polygon':true,
    'vertexCount' : 5,
    'vertices': [
                    [100,10],
                    [40,180],
                    [190,60],
                    [10,60],
                    [160,180]
                ]
}