Polygon shifted in the app tablet compared to the emulator

[laurent.mesguen.exte]

Hi everybody,

I have built an app for an android tablet and have a problem with displaying a polygon at the correct position. Indeed, on my emulator it’s correctly displayed but on the tablet a shift appears on the y axis.

Here are the screenshot so that you see how it looks : (the polygon built is the blue shape)

Emulator app

Tablet app

Here’s the code that builds the ellipse (which is a 512 vertices polygon) :

-- local variable that describes the ellipse local ellipse = { polygon = nil, n = 512, rx = 90.0, ry = 74.0, xRelativeToImage = 1155, yRelativeToImage = 585, vertices = {} } -- function that builds the ellipse function efSceneConfigMenu:BuildEllipse(parent) print("efSceneConfigMenu:BuildEllipse") -- Coordinates (x,y) table of the polygon vertices local i = nil local j = 1 local a = nil local percent = nil if(ellipse.polygon ~= nil) then display.remove(ellipse.polygon) ellipse.polygon = nil ellipse.vertices = {} end -- we show the first no empty compartment from rear to front if(selectedPercentLiquidRight ~= 0) then percent = selectedPercentLiquidRight elseif(selectedPercentLiquidMiddle ~= 0 and selectedPercentLiquidRight == 0) then percent = selectedPercentLiquidMiddle elseif(selectedPercentLiquidLeft ~= 0 and selectedPercentLiquidMiddle == 0 and selectedPercentLiquidRight == 0) then percent = selectedPercentLiquidLeft end if(percent ~= nil) then local ymax = ellipse.ry - 2\*percent\*ellipse.ry/100 -- used to shift the polygon because its origin is the center of gravity -- and not its bottom local deltaY = (ellipse.ry - percent\*ellipse.ry/100) for i = 1, ellipse.n, 1 do a = 2\*math.pi\*(i-1)/ellipse.n if(ellipse.ry\*math.sin(a) \>= ymax) then ellipse.vertices[2\*j-1] = ellipse.rx\*math.cos(a) ellipse.vertices[2\*j] = ellipse.ry\*math.sin(a) --print(ellipse.vertices[2\*j-1] .. " ; " .. ellipse.vertices[2\*j]) j = j + 1 end end ellipse.polygon = display.newPolygon( parent, ellipse.xRelativeToImage, ellipse.yRelativeToImage + deltaY, ellipse.vertices ) ellipse.polygon:setFillColor(0, 0, 255) self.loadMenuGroupLiquid:insert(ellipse.polygon) ellipse.polygon:toBack( ) end end

Anyone would have an idea of why I have this problem so that I know where to investigate ?

Thank you

[redninjacat]

Did you try using various resolutions in the emulator? View > View As > [Device name]. Perhaps the problem has to do with the difference in screen resolution and how y is calculated.

[bjsorrentino]

Hi @laurent.mesguen.external,

Also, please post the code for how you’re generating the polygon, so readers will have context to assist you.

Best regards,

Brent

[laurent.mesguen.exte]

Hi !

@jerejigga : I’ve tried all the resolutions as you said but the ellipse is always well displayed.

@Brent Sorrentino : Yes, I will edit my post with the code.

Thank you for your replies

[davebollinger]

btw, your images don’t “prove” the ellipse is wrongly positioned - it could just as easily be the truck that’s wrongly positioned.  but let’s assume the problem is as you’ve stated…

corona’s polygon re-centering is non-intuitive:   corona recalculates the center of polygons based on the center of their content bounds.  for shapes with symmetric content bounds (like a circle, square, etc) there is no change, but for non-symmetric bounds (like your cropped ellipse) the vertices will be shifted to center the shape’s bounds at 0,0 (local relative).  so in order for you to position it correctly you must “reverse” corona’s math and position the shape at

  “y - the_amount_that_corona_shifted_the_shape_to_center_its_bounds”.

that’ll put the shifted shape’s mathematical origin back at the screen origin you intended.

to do that you need to track the min/max of your coordinates, then calc the midpoint – that then will be the offset you need.  your comments say you’re using the “center of gravity”, by which i assume you mean “center of mass” – though i don’t think your formula is equivalent to CoM, but it doesn’t matter because corona does NOT use center of gravity/mass, it uses the center of the content bounds.  that’s difference is perhaps the source of your problem.

also, since you’re omitting vertices based on an inequality test, then based on the “coarseness” of your polygonal approximation of the ellipse, your “ymax” could differ significantly from the actual y-coordinate of the top-most vertices.  that difference could throw off your centering calculations also.  again, you should track the min/max of actual coordinates, calc the center of those bounds, and use THAT value for positional correction.

hth

[davebollinger]

…hmm,… actually… after 5 seconds more thought… if you’re only cropping the top of the ellipse then maybe you could just set yAlign=1 on the shape and position it relative to the bottom of the truck’s tank, then it won’t even matter where the “center” ends up…

[redninjacat]

Did you try using various resolutions in the emulator? View > View As > [Device name]. Perhaps the problem has to do with the difference in screen resolution and how y is calculated.

[bjsorrentino]

Hi @laurent.mesguen.external,

Also, please post the code for how you’re generating the polygon, so readers will have context to assist you.

Best regards,

Brent

[laurent.mesguen.exte]

Hi !

@jerejigga : I’ve tried all the resolutions as you said but the ellipse is always well displayed.

@Brent Sorrentino : Yes, I will edit my post with the code.

Thank you for your replies

[davebollinger]

btw, your images don’t “prove” the ellipse is wrongly positioned - it could just as easily be the truck that’s wrongly positioned.  but let’s assume the problem is as you’ve stated…

corona’s polygon re-centering is non-intuitive:   corona recalculates the center of polygons based on the center of their content bounds.  for shapes with symmetric content bounds (like a circle, square, etc) there is no change, but for non-symmetric bounds (like your cropped ellipse) the vertices will be shifted to center the shape’s bounds at 0,0 (local relative).  so in order for you to position it correctly you must “reverse” corona’s math and position the shape at

  “y - the_amount_that_corona_shifted_the_shape_to_center_its_bounds”.

that’ll put the shifted shape’s mathematical origin back at the screen origin you intended.

to do that you need to track the min/max of your coordinates, then calc the midpoint – that then will be the offset you need.  your comments say you’re using the “center of gravity”, by which i assume you mean “center of mass” – though i don’t think your formula is equivalent to CoM, but it doesn’t matter because corona does NOT use center of gravity/mass, it uses the center of the content bounds.  that’s difference is perhaps the source of your problem.

also, since you’re omitting vertices based on an inequality test, then based on the “coarseness” of your polygonal approximation of the ellipse, your “ymax” could differ significantly from the actual y-coordinate of the top-most vertices.  that difference could throw off your centering calculations also.  again, you should track the min/max of actual coordinates, calc the center of those bounds, and use THAT value for positional correction.

hth

[davebollinger]

…hmm,… actually… after 5 seconds more thought… if you’re only cropping the top of the ellipse then maybe you could just set yAlign=1 on the shape and position it relative to the bottom of the truck’s tank, then it won’t even matter where the “center” ends up…