Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

Polyline drawn in Tiled map do not appear in its location when displayed in simulator
Started by IndieEnthusiast Jul 26 2018 06:11 AM

19 replies to this topic
[TOPIC CONTROLS]
[/TOPIC CONTROLS]
[modOptionsDropdown]
[/modOptionsDropdown]
[reputationFilter]
[TOPIC: post.html]
#1

IndieEnthusiast

[GLOBAL: userInfoPane.html]
IndieEnthusiast
  • Contributor

  • 154 posts
  • Corona SDK

Issue description :

- Created a polyline to surround a green terrain island

- Added property hasBody=true and bodyType=static to the polyline object

- Save map and run corona simulator

- observe where it appears in simulator

- collision works no problem with the polyline object but it is appearing not surrounding the terrain

 

image link : https://goo.gl/LuECVt

 

Any idea why it is appearing like this? 

 

Using Berry Engine/ Tiled map editor



[TOPIC: post.html]
#2

roaminggamer

[GLOBAL: userInfoPane.html]
roaminggamer
  • Corona Geek

  • 7,363 posts
  • Corona SDK

Yes. Tiled is using an offset for the vertex positions.

You will need to extract that offset (it should be in the record) and add it to (or subtract it from) the line vertices.

You may also be dealing with relative offset that you'll need to calculate.

I wish I could give you a better answer, but in my experience, this offsetting varies in Tiled.

  • Polygons use one style
  • Physics bodies use another
  • Lines may use yet another.

 

RGTiiled handles polygons here: https://github.com/roaminggamer/SSK2/blob/master/ssk2/tiledLoader.lua (221 .. 232 )

 

Notice the use of this SSK function: 'offset_xy()' which came out of a discussion here in the forums.  It calculates the relative offset of the vertices to 'center' them.

 

RGTiled handles Physics polygon bodies here: https://github.com/roaminggamer/SSK2/blob/master/ssk2/tiledLoader.lua (527-539)

 

Notice that the physics record has an x and y (offset) that has to be added to the vertices.  Also notice the object offset by half height/width values.  This is because  Tiled uses a corner anchor, while I'm placing the bodies by their center.

 

 

You will need to take a look at the record for the object you're drawing and adjust accordingly.


  • IndieEnthusiast likes this

[TOPIC: post.html]
#3

roaminggamer

[GLOBAL: userInfoPane.html]
roaminggamer
  • Corona Geek

  • 7,363 posts
  • Corona SDK

My guess is that a polyline will be most like a polygon for adjustment purposes.



[TOPIC: post.html]
#4

roaminggamer

[GLOBAL: userInfoPane.html]
roaminggamer
  • Corona Geek

  • 7,363 posts
  • Corona SDK

Here is the offset_xy code:

-- Get polygon center <x,y> based on vertices
local function offset_xy( t )
   local sort = table.sort
   local coordinatesX, coordinatesY = {}, {}
   local minX, maxX, minY, maxY
   local function compare( a, b )
      return a > b
   end
   for i = 1, #t*0.5 do
      coordinatesY[i] = t[i*2]
   end
   for i = 1, #t*0.5 do
      coordinatesX[i] = t[i*2-1]
   end
   sort( coordinatesX, compare )
   maxX = coordinatesX[1]
   minX = coordinatesX[#coordinatesX]
   sort( coordinatesY, compare )
   maxY = coordinatesY[1]
   minY = coordinatesY[#coordinatesY]
   local offset_x = (minX+maxX)*0.5
   local offset_y = (minY+maxY)*0.5
   return offset_x, offset_y
end

  • IndieEnthusiast likes this

[TOPIC: post.html]
#5

IndieEnthusiast

[GLOBAL: userInfoPane.html]
IndieEnthusiast
  • Contributor

  • 154 posts
  • Corona SDK

I would assume t is the object name?

 

 

Here is the offset_xy code:

-- Get polygon center <x,y> based on vertices
local function offset_xy( t )
   local sort = table.sort
   local coordinatesX, coordinatesY = {}, {}
   local minX, maxX, minY, maxY
   local function compare( a, b )
      return a > b
   end
   for i = 1, #t*0.5 do
      coordinatesY[i] = t[i*2]
   end
   for i = 1, #t*0.5 do
      coordinatesX[i] = t[i*2-1]
   end
   sort( coordinatesX, compare )
   maxX = coordinatesX[1]
   minX = coordinatesX[#coordinatesX]
   sort( coordinatesY, compare )
   maxY = coordinatesY[1]
   minY = coordinatesY[#coordinatesY]
   local offset_x = (minX+maxX)*0.5
   local offset_y = (minY+maxY)*0.5
   return offset_x, offset_y
end


[TOPIC: post.html]
#6

roaminggamer

[GLOBAL: userInfoPane.html]
roaminggamer
  • Corona Geek

  • 7,363 posts
  • Corona SDK

No.  't' is a table of vertices


  • IndieEnthusiast likes this

[TOPIC: post.html]
#7

IndieEnthusiast

[GLOBAL: userInfoPane.html]
IndieEnthusiast
  • Contributor

  • 154 posts
  • Corona SDK

Forgive me but I do not clearly understand how I should be using this function.

 

Where will I get the set of vertices from polyline? 

Is there a way of doing this from UI, like moving the map grids manually?

 

I am using Berry Tiled Engine and I plan to continue to use this.

 

Sorry for asking silly questions : :(



[TOPIC: post.html]
#8

IndieEnthusiast

[GLOBAL: userInfoPane.html]
IndieEnthusiast
  • Contributor

  • 154 posts
  • Corona SDK

Image link : https://goo.gl/Nvvrxq

In fact found a way of offsetting grid for object layer, but it does not have any effect on what is shown on simulator



[TOPIC: post.html]
#9

IndieEnthusiast

[GLOBAL: userInfoPane.html]
IndieEnthusiast
  • Contributor

  • 154 posts
  • Corona SDK

Ok I went inside the map.json file and can see coordinates of polyline :

"polyline":[
                        {
                         "x":0,
                         "y":0
                        }, 
                        {
                         "x":60,
                         "y":0
                        }, 
                        {
                         "x":86,
                         "y":-18
                        }, 
                        {
                         "x":113,
                         "y":-16
                        }, 
                        {
                         "x":189,
                         "y":52
                        }, 
                        {
                         "x":213,
                         "y":65
                        }, 
                        {
                         "x":211,
                         "y":102
                        }, 
                        {
                         "x":186,
                         "y":113
                        }, 
                        {
                         "x":150,
                         "y":173
                        }, 
                        {
                         "x":118,
                         "y":198
                        }, 
                        {
                         "x":112,
                         "y":220
                        }, 
                        {
                         "x":73,
                         "y":205
                        }, 
                        {
                         "x":48,
                         "y":207
                        }],


[TOPIC: post.html]
#10

IndieEnthusiast

[GLOBAL: userInfoPane.html]
IndieEnthusiast
  • Contributor

  • 154 posts
  • Corona SDK

In the map.json file I have manually subtracted each value with the offset and it seemed to work, shift in upward direction.

However this process is extremely lengthy, how can I do it from code, I dont want to do it manually in the json file?

I have printed out the x and y offset and they return 50 and 101 respectively.

Please advice.



[TOPIC: post.html]
#11

roaminggamer

[GLOBAL: userInfoPane.html]
roaminggamer
  • Corona Geek

  • 7,363 posts
  • Corona SDK

You probably need to modify the code in Berry that makes the polyline.  Extract the x,y coordinates from the input into a table, pass it to the function, take the result and draw a line.

 

Easy Peasy.

 

Once you get it working, you might consider submitting the fix to @ldurniat for addition to the Berry module/lib.


  • IndieEnthusiast likes this

[TOPIC: post.html]
#12

IndieEnthusiast

[GLOBAL: userInfoPane.html]
IndieEnthusiast
  • Contributor

  • 154 posts
  • Corona SDK

@Idurniat : Do you think you can fix this problem from Berry code?

 

The issue is I am not very skilled to really understand how Berry was created, so I guess Idurniat is the right person to modify this.

 

Q:1) "Extract the x,y coordinates from the input", what do you mean by this?

- Do you say that I should extract the coordinates from the map.json file? Is that the input file?

 

Q:2) The function provides the offset, what do I do with the offset x and y values? Subtract from the table of x and y coordinates to adjust?

 

Sorry for asking silly question, but I think this is an issue in the Berry engine :

 

Observation : subtracting the offset values from the coordinates, do take the polyline closer. However this effort is a killer for me...there can be 20 points in a polyline, need an automatic solution.

 

Please suggest @Idurniat  or @roaminggamer : Is there any engine which does this adjustment automatically?

 

 

You probably need to modify the code in Berry that makes the polyline.  Extract the x,y coordinates from the input into a table, pass it to the function, take the result and draw a line.

 

Easy Peasy.

 

Once you get it working, you might consider submitting the fix to @ldurniat for addition to the Berry module/lib.



[TOPIC: post.html]
#13

roaminggamer

[GLOBAL: userInfoPane.html]
roaminggamer
  • Corona Geek

  • 7,363 posts
  • Corona SDK

I'm staying out of this.  If @Idurniat  has time to add this feature to Berry that's great, but since Berry is open source you may simply need to figure this out on your own.

 

Whatever the case, the change would be made to Berry not your data and once implemented correctly, it will work for all cases.


  • IndieEnthusiast likes this

[TOPIC: post.html]
#14

IndieEnthusiast

[GLOBAL: userInfoPane.html]
IndieEnthusiast
  • Contributor

  • 154 posts
  • Corona SDK

Does RGTiled take care of this automatically?



[TOPIC: post.html]
#15

roaminggamer

[GLOBAL: userInfoPane.html]
roaminggamer
  • Corona Geek

  • 7,363 posts
  • Corona SDK

Nope.  I haven't implemented Polylines in RGTiled.  I have never needed the feature.

 

Regardless, switching away from Berry if you have already created significant content would be a waste of time.

 

Do you have a budget?  I'd be happy to consider changing Berry as a hit.


  • IndieEnthusiast likes this

[TOPIC: post.html]
#16

IndieEnthusiast

[GLOBAL: userInfoPane.html]
IndieEnthusiast
  • Contributor

  • 154 posts
  • Corona SDK

I have created significant amount of content with Berry, so I am reluctant to move away from it.

I will try to dig through the issue and if possible implement a fix in Berry with help of Idurniat.

 

My apologies, I am an indie developer who at the moment do not have any budget and learning my way up, otherwise I would have seriously considered it. Thanks for your help so far. 



[TOPIC: post.html]
#17

ldurniat

[GLOBAL: userInfoPane.html]
ldurniat
  • Contributor

  • 373 posts
  • Corona SDK

Hi ahmed_shahjada,

 

@Idurniat : Do you think you can fix this problem from Berry code?

Fixed :)

 

 

Have a nice day:)

 

ldurniat 


  • IndieEnthusiast likes this

[TOPIC: post.html]
#18

roaminggamer

[GLOBAL: userInfoPane.html]
roaminggamer
  • Corona Geek

  • 7,363 posts
  • Corona SDK

@ldrniat - Nice and elegant fix!


  • ldurniat and IndieEnthusiast like this

[TOPIC: post.html]
#19

IndieEnthusiast

[GLOBAL: userInfoPane.html]
IndieEnthusiast
  • Contributor

  • 154 posts
  • Corona SDK

Thanks a million to Idurniat.

I was just wondering if this was a bug or was thought of like a design for polyline initially?



[TOPIC: post.html]
#20

ldurniat

[GLOBAL: userInfoPane.html]
ldurniat
  • Contributor

  • 373 posts
  • Corona SDK

I was just wondering if this was a bug or was thought of like a design for polyline initially?

Bug.


  • IndieEnthusiast likes this


[topic_controls]
[/topic_controls]