How to determine the vertices for display.newPolygon().
For example If I want to draw a an equilateral triangle like below,how should I start?
I tried starting with (0,0) and gave the (x,y) value of next vertex and so on…
But output was different
Please explain in detailed manner.Thank you!
From what I recall you pass in an x and y for the centre of the polygon, and then a table of alternating x/y vertices which are offsets from that center point:
local polygon = display.newPolygon( 300, 300, {0, -100, 100, 0, 0, 100, -100, 0 } )
The above would draw a diamond centred at 300, 300 with corners 100 pixels from the centre pointing directly up (0, -100), right (100, 0), down (0, 100) and then left (-100, 0).
It’s also worth mentioning that if something isn’t working as expected, you should post a snippet of your code so people can see where you may be going wrong.
There are a few things I’d like to add to Alan’s reply:
When defining the vertices, you should add them in clockwise order. Defining the vertices in counter clockwise order might not break standard polygons, but if you add physics to such shapes, they should break.
While on the subject of physics, when adding physics to polygons, you must define the physics body using vertices that are relative to the centre of the vertices, for instance,
vertices = { 0, 0, 100, 0, 100, 100, 0, 100 } and vertices = { -50, -50, 50, -50, 50, 50, -50, 50 } will result in the exact same shape, but if you add physics using the former vertices, then the physics body will be misaligned.
it isn’t clear if your problem is: 1) calculating the initial x,y values, or 2) dealing with the offset that will result.
i’ll assume you can google for the first, so i’ll address the second…
be aware that display.newPolygon() will alter the values of the coordinate list such that the resulting shape’s bounding box is centered at 0,0.
an equilateral triangle oriented roughly as you’ve shown (ie pointing “up”, w vertices at pi/6, 5pi/6 and 9pi/6 from origin) will have a bounding box that IS NOT centered at 0,0 and so vertices WILL BE moved. (by 0,-radius/4 for this specific shape. iow: if triangle itself is centered at 0,0 then it’s bounding box is centered at 0,-radius/4. left as an exercise for the curious reader to draw and prove,)
the “fix” is to calculate the bounds of the original vertices, then calculate the center of those bounds. if it happens to be 0,0 then you’re done, but in this case it won’t be, so… knowing that display.newPolygon() will subtract that point from your vertices, you correct for it by adding that point to the polygon’s x,y. now everything should line up where expected.
hth
From what I recall you pass in an x and y for the centre of the polygon, and then a table of alternating x/y vertices which are offsets from that center point:
local polygon = display.newPolygon( 300, 300, {0, -100, 100, 0, 0, 100, -100, 0 } )
The above would draw a diamond centred at 300, 300 with corners 100 pixels from the centre pointing directly up (0, -100), right (100, 0), down (0, 100) and then left (-100, 0).
It’s also worth mentioning that if something isn’t working as expected, you should post a snippet of your code so people can see where you may be going wrong.
There are a few things I’d like to add to Alan’s reply:
When defining the vertices, you should add them in clockwise order. Defining the vertices in counter clockwise order might not break standard polygons, but if you add physics to such shapes, they should break.
While on the subject of physics, when adding physics to polygons, you must define the physics body using vertices that are relative to the centre of the vertices, for instance,
vertices = { 0, 0, 100, 0, 100, 100, 0, 100 } and vertices = { -50, -50, 50, -50, 50, 50, -50, 50 } will result in the exact same shape, but if you add physics using the former vertices, then the physics body will be misaligned.
it isn’t clear if your problem is: 1) calculating the initial x,y values, or 2) dealing with the offset that will result.
i’ll assume you can google for the first, so i’ll address the second…
be aware that display.newPolygon() will alter the values of the coordinate list such that the resulting shape’s bounding box is centered at 0,0.
an equilateral triangle oriented roughly as you’ve shown (ie pointing “up”, w vertices at pi/6, 5pi/6 and 9pi/6 from origin) will have a bounding box that IS NOT centered at 0,0 and so vertices WILL BE moved. (by 0,-radius/4 for this specific shape. iow: if triangle itself is centered at 0,0 then it’s bounding box is centered at 0,-radius/4. left as an exercise for the curious reader to draw and prove,)
the “fix” is to calculate the bounds of the original vertices, then calculate the center of those bounds. if it happens to be 0,0 then you’re done, but in this case it won’t be, so… knowing that display.newPolygon() will subtract that point from your vertices, you correct for it by adding that point to the polygon’s x,y. now everything should line up where expected.
hth