Content Scaling

[jdsmith1012]

Hello,

I’ve been evaluating Corona for a bit now and am just about ready to buy.

I’m having trouble getting content scaling to work correctly and David Rangel from Corona asked that I post as many details on this forum as possible in the hopes of getting assistance. As soon as I am comfortable with the resolution to this problem, I’ll be happy to purchase Corona SDK.

For now, I’m using Ceramic as my tile engine but if I choose Corona SDK, I’ll be switching to Million Tile Engine.

Basically, I have tiles that are 70x70 in size for testing. I’ve used Texture Packer to combine them into a tilesheet with the appropriate options and have imported them into Tiled as tilesets.

I created a 10 tall x 15 wide map and I am loading it in a landscape-only game using Ceramic.

I would expect the content size to be 700px tall (70*10) and 1050px wide (70*15).

I want the screen to be stretched so that these conditions are always met:

• There are always 10 tiles visible on the Y axis and 15 tiles on the X axis
• The four corners/edges of the map are always aligned perfectly with the physical screen of each device
• I understand stretching/distortion may occur with some devices

My config file

 local aspectRatio = display.pixelHeight / display.pixelWidth application = { content = { width = aspectRatio \> 1.5 and 700 or math.ceil( 1050 / aspectRatio ), height = aspectRatio \< 1.5 and 1050 or math.ceil( 700 \* aspectRatio ), scale = "zoomStretch", fps = 30, imageSuffix = { ["@2x"] = 1.3, }, }, }

My main.lua

----------------------------------------------------------------------------------------- -- -- main.lua -- ----------------------------------------------------------------------------------------- -- Your code here display.setStatusBar( display.HiddenStatusBar ) local bg = display.newRect(0, 0, 1050, 700) bg.x = display.contentWidth/2 bg.y = display.contentHeight/2 bg:setFillColor(135,206,250) local ceramic = require("Ceramic") local map = ceramic.buildMap("test.json")

Screenshots can be viewed at this link. The iPhone and iPhone4 are correct while all others exhibit issues.

https://www.dropbox.com/sh/3skxhcol3izr3dz/wQbS-QQ6YZ

The blue background is separate from the tilemap but it also has issues.

Of note, I’ve tried zoomStretch, zoomEven, and letterBox as well as several combinations of xAlign and yAlign in config.lua

Anyone have an idea what I am doing wrong?

[rob]

You probably should not be using zoomStretch or zoomEven with this particular config.lua.  It’s set to make letterbox fill the screen for you but your content area is going to change depending on the shape of the device, which doesn’t match your criteria.  I would use a simpler config.lua:

application = {     content = {         width = 700,         height = 1050,         scale = "zoomStretch",         fps = 30,            imageSuffix = {                ["@2x"] = 1.3,        },     }, }

If your using either of the zoom’s, you want a fixed content area.

[jdsmith1012]

Rob Miracle,

That definitely improved the situation but didn’t resolve entirely.

It seems that some devices (mostly android, but also ipad and ipad retina) still show a border on the bottom and/or right sides of the screen. Anything I can do about this?

The border ranges in size from barely visible (probably 1 or 2 pixels) all the way to noticeable (probably 10-20 pixels)

[rob]

Well on the iOS side, you need to hide the status bar.  See:

http://docs.coronalabs.com/api/library/display/setStatusBar.html

Let me know if that helps out there.  The soft bars on Android are going to be trickier to deal with.  I’ll need to a bit more research on it.

[jdsmith1012]

Rob Miracle,

I am hiding the status bar (look at main.lua in my original post) and these artifacts don’t look like something a status bar would be causing on either device.

Please see these screenshots (iPad and Droid):

The iPad is barely noticeable but Droid is very much so.

https://www.dropbox.com/sh/pgeci5cyfe9hafz/R1ikCtCMP_

[rob]

This looks like a problem with your tiling software.  If you notice, the blue background you create does fill the screen like it supposed to.

Is it possible your tiles are overlapping by a pixel?  If so you would be about 15 short horizontally and 10 short vertically and depending on how much things are being stretched, it won’t look like 10 and 15 exactly. 

If it were a problem with your config.lua, the blue background wouldn’t fill the screen.

[jdsmith1012]

Rob Miracle,

You have a point there. It does appear to be my mapping software.

I was able to modify a line which seems to have fixed the bottom area. However, the right area is still present.

This may be something that is resolved by switching to the more popular Million Tile Engine. However, I am unwilling to try that until I am sure it will work properly so I will continue trying to work through Ceramic.

[rob]

Unfortunately, I have no experience with either tile engine.  The MTE folks do have a pretty vibrant community on here.  I had to look up Ceramic.  Caleb, one of the authors is a pretty frequent poster on here.  He might be able to help you more with it.

[rob]

You probably should not be using zoomStretch or zoomEven with this particular config.lua.  It’s set to make letterbox fill the screen for you but your content area is going to change depending on the shape of the device, which doesn’t match your criteria.  I would use a simpler config.lua:

application = {     content = {         width = 700,         height = 1050,         scale = "zoomStretch",         fps = 30,            imageSuffix = {                ["@2x"] = 1.3,        },     }, }

If your using either of the zoom’s, you want a fixed content area.

[jdsmith1012]

Rob Miracle,

That definitely improved the situation but didn’t resolve entirely.

It seems that some devices (mostly android, but also ipad and ipad retina) still show a border on the bottom and/or right sides of the screen. Anything I can do about this?

The border ranges in size from barely visible (probably 1 or 2 pixels) all the way to noticeable (probably 10-20 pixels)

[rob]

Well on the iOS side, you need to hide the status bar.  See:

http://docs.coronalabs.com/api/library/display/setStatusBar.html

Let me know if that helps out there.  The soft bars on Android are going to be trickier to deal with.  I’ll need to a bit more research on it.

[jdsmith1012]

Rob Miracle,

I am hiding the status bar (look at main.lua in my original post) and these artifacts don’t look like something a status bar would be causing on either device.

Please see these screenshots (iPad and Droid):

The iPad is barely noticeable but Droid is very much so.

https://www.dropbox.com/sh/pgeci5cyfe9hafz/R1ikCtCMP_

[rob]

This looks like a problem with your tiling software.  If you notice, the blue background you create does fill the screen like it supposed to.

Is it possible your tiles are overlapping by a pixel?  If so you would be about 15 short horizontally and 10 short vertically and depending on how much things are being stretched, it won’t look like 10 and 15 exactly. 

If it were a problem with your config.lua, the blue background wouldn’t fill the screen.

[jdsmith1012]

Rob Miracle,

You have a point there. It does appear to be my mapping software.

I was able to modify a line which seems to have fixed the bottom area. However, the right area is still present.

This may be something that is resolved by switching to the more popular Million Tile Engine. However, I am unwilling to try that until I am sure it will work properly so I will continue trying to work through Ceramic.

[rob]

Unfortunately, I have no experience with either tile engine.  The MTE folks do have a pretty vibrant community on here.  I had to look up Ceramic.  Caleb, one of the authors is a pretty frequent poster on here.  He might be able to help you more with it.