Ponytiled on multiple screen ratios

Getting Started Newbie Questions
#1

I was wondering if there is a way to stretch or shrink a map so that it would fit on multiple screen ratios. For example, in the game I am working on right now, the map loads exactly how I want on the Samsung Galaxy S3 and S5 (It’s a puzzle game and I want the player to see the whole map at once). However, when I switch to the iPad Pro simulator, the top and bottom of the map is cut off. I’ve been looking through the examples in ponytiled, and I can’t seem to find a way to resize the map to fit the screen. Is it possible, or am I trying to use ponytiled as something it’s not meant to be? Thanks in advance for your help!

EDIT: If I just edit map.width and/or map.height, it changes the position of the obstacles in a level, but it still interacts with physics as if the obstacles were in their original position.

#2

Of interest, I’m using PonyTiled, and I just checked it out and it works fine on both devices.

I am using map.xScale, map.yScale = 1,1 but I don’t know that this would address it.

What’s in your config.lua? I have it set to letterbox.

#3

I would treat this like any other app. Build the screen map so that you expect part of it to be off screen.  Consider this image:

The blue area is a typical 16:9 phone. The pink area is tablets with a typical 4:3 aspect ratio like an iPad. On a phone, the pink will be cut off. On an iPad, the blue will be cut off. Only the green common  3:2 aspect ratio will be common to all devices. This is what the typical “letterbox” config.lua produces:

application = { content = { width = 320, height = 480, scale = "letterbox", }, } 

You should build your backgrounds based on this to fit 570x360 (for the 1x size). The 570 width will make sure the background is wide enough when on a phone, understanding the part of the background in the pink area will be cut off. The 360 height will fill the pink areas understanding the blue areas will be clipped. This is called the bleed areas. 

Now for your tile map, you should think about it in the same way. Extend your map with ground to the left and right past the green area, but never allow your player move there. Keep them in the green zone. If you think about Mario Bros. it did the same thing. Mario could only move so far left. At the end of the level he could move up to the flag pole, but the game extended further to the right.

Then vertically fill your map with whatever ground and sky elements that extend into the pink area so something shows, but the player will never be able to get out of the green area vertically. Doing this, your tile map should work well on all devices… well except the Samsung Galaxy S8. It has a 2:1 aspect ratio, so we need to rethink the math a bit. It would change the backgrounds/tile width to be 640x360 to completely cover it. the S8’s extra screen is in the yellow color in this version:

Rob

           

#4

Thanks for the help y’all!

#5

@Rob

Can I choose 570x360 image for adaptive scale?  And as I understand I should multiply it by max(xScale, yScale)?

#6

That’s pretty much for letterbox scaling.  If you’re using adaptive, the rules are going to be different. I’ll do this in iOS devices because its a limited set to use as an example.

With adaptive you get the following screen sizes:

iPhone 4 – 320 x 480 (@2x)

iPhone 5 – 320 x 568 (@2x)

iPhone 6-8 – 375 x 667 (@2x)

iPhone 6-8 plus – 414 x 736 (@3x) 

iPhone X – 375 x 812 (@3x)

iPad (non-retina) – 768 x 1024 (1x)

iPad (retina) – 768 x 1024 (@2x)

Androids will be similar. You get bigger content areas relative to the physical screen size. This is great for business style apps. Many games need to play the same and having bigger screen sizes could change how the game plays.

For those curious, I have an updated version of the graphic above that adds the new iPhone X in.

The orange area is the extra iPhone X screen space. It’s a whopping 2.165:1 aspect ratio.

Rob

#7

@Rob

Thank you!

#8

Of interest, I’m using PonyTiled, and I just checked it out and it works fine on both devices.

I am using map.xScale, map.yScale = 1,1 but I don’t know that this would address it.

What’s in your config.lua? I have it set to letterbox.

#9

I would treat this like any other app. Build the screen map so that you expect part of it to be off screen.  Consider this image:

The blue area is a typical 16:9 phone. The pink area is tablets with a typical 4:3 aspect ratio like an iPad. On a phone, the pink will be cut off. On an iPad, the blue will be cut off. Only the green common  3:2 aspect ratio will be common to all devices. This is what the typical “letterbox” config.lua produces:

application = { content = { width = 320, height = 480, scale = "letterbox", }, } 

You should build your backgrounds based on this to fit 570x360 (for the 1x size). The 570 width will make sure the background is wide enough when on a phone, understanding the part of the background in the pink area will be cut off. The 360 height will fill the pink areas understanding the blue areas will be clipped. This is called the bleed areas. 

Now for your tile map, you should think about it in the same way. Extend your map with ground to the left and right past the green area, but never allow your player move there. Keep them in the green zone. If you think about Mario Bros. it did the same thing. Mario could only move so far left. At the end of the level he could move up to the flag pole, but the game extended further to the right.

Then vertically fill your map with whatever ground and sky elements that extend into the pink area so something shows, but the player will never be able to get out of the green area vertically. Doing this, your tile map should work well on all devices… well except the Samsung Galaxy S8. It has a 2:1 aspect ratio, so we need to rethink the math a bit. It would change the backgrounds/tile width to be 640x360 to completely cover it. the S8’s extra screen is in the yellow color in this version:

Rob

           

#10

Thanks for the help y’all!

#11

@Rob

Can I choose 570x360 image for adaptive scale?  And as I understand I should multiply it by max(xScale, yScale)?

#12

That’s pretty much for letterbox scaling.  If you’re using adaptive, the rules are going to be different. I’ll do this in iOS devices because its a limited set to use as an example.

With adaptive you get the following screen sizes:

iPhone 4 – 320 x 480 (@2x)

iPhone 5 – 320 x 568 (@2x)

iPhone 6-8 – 375 x 667 (@2x)

iPhone 6-8 plus – 414 x 736 (@3x) 

iPhone X – 375 x 812 (@3x)

iPad (non-retina) – 768 x 1024 (1x)

iPad (retina) – 768 x 1024 (@2x)

Androids will be similar. You get bigger content areas relative to the physical screen size. This is great for business style apps. Many games need to play the same and having bigger screen sizes could change how the game plays.

For those curious, I have an updated version of the graphic above that adds the new iPhone X in.

The orange area is the extra iPhone X screen space. It’s a whopping 2.165:1 aspect ratio.

Rob

#13

@Rob

Thank you!