Using displayObject:translate in multiple screen resolutions

Hi,

I’m using translate() method to change x position for a display object. Currently, I’m using deltaX = 3 (pixels) when calling object:translate() method, but I’m wondering if I need to modify the deltaX according to the current device screen resolution.

Source code:

local deltaX = 3

object:translate(deltaX,0)

Please show us  your config.lua settings and we can give you better assistance.

-Ed

Please note: There is a thing called (I call it this; others may call it something else) ‘design resolution’.

If you set a design resolution of 320x480 in your config file, that is what the size of the world  your code thinks it lives in.  Corona will automatically scale movements/translations/assignments to match this to the actual pixel size of the screen.  

Thus, all movements are the same visually versus the size of the target screen.  In short, you only have to worry about this if you set different device specific resolutions in your config.lua file.

For a concrete example, consider this:

  • config.lua specifies a ‘design resolution’ of 786 x 1024
  • In your code an object starts at < 100, 0 >
  • You translate the object by 50 to  a design space of < 150, 0 >
  • On an iPad Gen 1 (768 x 1024) the object is at <150,0>
  • On an iPad Gen 3 (1536 x 2048) the object is at <300,0>  - Automatically handled by Corona.

Thanks roaminggamer.

My game is in landscape mode. Config.lua file looks like this:

– config.lua

local aspectRatio = display.pixelHeight / display.pixelWidth

application =

{

    content =

    {

        width = aspectRatio > 1.5 and 320 or math.ceil(480 / aspectRatio),

        height = aspectRatio < 1.5 and 480 or math.ceil(320 * aspectRatio),

        scale = “letterbox”,

        fps = 60,

        --antialias = true,

        --width = 320,

        --height = 480,

imageSuffix =

{

["@2x"] = 1.5,

            ["@4x"] = 3.0,

},

    },

}

The way width and height are defined might cause visual differences when translating an object in different screen resolutions?

Update: ** On my second reading I see you said 'Making a Game" ** 

Hi.  Are you making a game or an app?  If you’re making a game, do you care if different players on different devices have different experiences? 

If you’re making a business app, then it makes sense to scale the resolution dynamically so you can expand your visual space to match the screen.  This however, will require intelligent placement of the interface elements.

If you’re making a game, it is my opinion, that you are better off choosing a fixed design resolution that matches your primary target device.  Then, if you choose “letterbox” scaling, include small adjustments to interface elements to align more nicely with the device edges.  Also provide background art that fills the maximum possible screen bleed (apsect ratios that are wider or taller than the target device).

I suggest this for games, because then you can be assured that all in-game objects are placed relative to eachother in the same relation from device to device. 

If you use the above provided config.lua file, you’ll need to calculate the size of players, and blocks, and moves, jumps, … etc.  Even then, a small mistake will wreck the experience.  Using a dynamically calculated config.lua file for game (IMHO) defeats the purpose of using an API that auto-scales.

Of course, if you don’t care about squishing/stretching you could also select a fixed resolution and use of of the zoom scalings.  This will also produce correct layout and behavior with consistent results.

I’m going to stop here, an let others pitch in with their ideas and opinions.

Thanks roaminggamer for your comments.

I’m creating a platform game (my second game).

In my first game I used a fixed design resolution, however, for my second game I followed a tutorial (https://coronalabs.com/blog/2012/12/04/the-ultimate-config-lua-file/) but I’m noticing some weird behaviors when the character jumps over platforms (testing in different devices with different screen resolutions).

Hi @oquesada,

I don’t suggest that you use the config setup discussed in that old tutorial. If you want to use a “flexible” content area, please refer to the updated (and more simplified) setup in this tutorial:

http://coronalabs.com/blog/2013/09/10/modernizing-the-config-lua/

Brent

Thanks Brent.

I’m using this suggested config.lua

–calculate the aspect ratio of the device:

local aspectRatio = display.pixelHeight / display.pixelWidth

application = {
content = {
width = aspectRatio > 1.5 and 320 or math.ceil( 480 / aspectRatio ),
height = aspectRatio < 1.5 and 480 or math.ceil( 320 * aspectRatio ),
scale = “letterBox”,
fps = 60,

imageSuffix = {
["@2x"] = 1.5,
["@4x"] = 3.0,
},
},
}

but it seems not scaling my character jumps or object display:translate() movements when testing ins different screen resolutions.

For jumping I;'m using the following method

character:applyLinearImpulse(0, -15, character.x, character.y )

but when I use this in different screen resolutions, the effect is different and the object ends in different location.

However, if I use this other content in the config.lua

application = {

content = {
width = 480,
height = 320,
scale = “zoomStretch”,
fps = 60,

imageSuffix = {
["@2x"] = 1.5,
["@4x"] = 3.0,
},
},
}

The jumping effect is similar in any screen resolution.

In case I use the option 1 for config.lua, Do I need to recalculate values used in applyLinearImpulse and translate methods?

Hi @oquesada,

Thanks for the details. A few things I can comment on:

  1. You should not be using “zoomStretch”. I discourage anybody from using this scale method.

  2. When using physics, the behavior of bodies, forces, etc. should be identical within the content area. However, if you’re dealing with different screen aspect ratios, there’s really no way to guarantee that a body will move to the same place, because some areas of the actual screen will be outside of the content area when using “letterbox”. You could try to use “zoomEven” instead, which will fit the entire content area up to the edges, but also force some content off the visible screen region.

Hope this helps,

Brent

Thanks both of you for your comments.

One additional (and hopefully last question). If I use different screen aspect rations in config.lua file, should I scale x/y values in translate(), applylinearImpulses and similar methods()?

For instance,

For screen w-480, h=320

I use a default x-delta value of 3 pixels for translate method.

this hardcoded x-delta value should be different for other screen resolutions?

thanks

Olman

Hi Olman,

No, I wouldn’t suggest tinkering with the values you apply to physics based on different resolutions. Simply work within the bounds of the content area.

Also, remember that for config.lua, “width” should always be the shorter (smaller) value, and “height” the higher one… even if your app is designed for landscape orientation. So, it would never be “width=480, height=320”. The correct values would be “width=320, height=480”.

Brent

Please show us  your config.lua settings and we can give you better assistance.

-Ed

Please note: There is a thing called (I call it this; others may call it something else) ‘design resolution’.

If you set a design resolution of 320x480 in your config file, that is what the size of the world  your code thinks it lives in.  Corona will automatically scale movements/translations/assignments to match this to the actual pixel size of the screen.  

Thus, all movements are the same visually versus the size of the target screen.  In short, you only have to worry about this if you set different device specific resolutions in your config.lua file.

For a concrete example, consider this:

  • config.lua specifies a ‘design resolution’ of 786 x 1024
  • In your code an object starts at < 100, 0 >
  • You translate the object by 50 to  a design space of < 150, 0 >
  • On an iPad Gen 1 (768 x 1024) the object is at <150,0>
  • On an iPad Gen 3 (1536 x 2048) the object is at <300,0>  - Automatically handled by Corona.

Thanks roaminggamer.

My game is in landscape mode. Config.lua file looks like this:

– config.lua

local aspectRatio = display.pixelHeight / display.pixelWidth

application =

{

    content =

    {

        width = aspectRatio > 1.5 and 320 or math.ceil(480 / aspectRatio),

        height = aspectRatio < 1.5 and 480 or math.ceil(320 * aspectRatio),

        scale = “letterbox”,

        fps = 60,

        --antialias = true,

        --width = 320,

        --height = 480,

imageSuffix =

{

["@2x"] = 1.5,

            ["@4x"] = 3.0,

},

    },

}

The way width and height are defined might cause visual differences when translating an object in different screen resolutions?

Update: ** On my second reading I see you said 'Making a Game" ** 

Hi.  Are you making a game or an app?  If you’re making a game, do you care if different players on different devices have different experiences? 

If you’re making a business app, then it makes sense to scale the resolution dynamically so you can expand your visual space to match the screen.  This however, will require intelligent placement of the interface elements.

If you’re making a game, it is my opinion, that you are better off choosing a fixed design resolution that matches your primary target device.  Then, if you choose “letterbox” scaling, include small adjustments to interface elements to align more nicely with the device edges.  Also provide background art that fills the maximum possible screen bleed (apsect ratios that are wider or taller than the target device).

I suggest this for games, because then you can be assured that all in-game objects are placed relative to eachother in the same relation from device to device. 

If you use the above provided config.lua file, you’ll need to calculate the size of players, and blocks, and moves, jumps, … etc.  Even then, a small mistake will wreck the experience.  Using a dynamically calculated config.lua file for game (IMHO) defeats the purpose of using an API that auto-scales.

Of course, if you don’t care about squishing/stretching you could also select a fixed resolution and use of of the zoom scalings.  This will also produce correct layout and behavior with consistent results.

I’m going to stop here, an let others pitch in with their ideas and opinions.

Thanks roaminggamer for your comments.

I’m creating a platform game (my second game).

In my first game I used a fixed design resolution, however, for my second game I followed a tutorial (https://coronalabs.com/blog/2012/12/04/the-ultimate-config-lua-file/) but I’m noticing some weird behaviors when the character jumps over platforms (testing in different devices with different screen resolutions).

Hi @oquesada,

I don’t suggest that you use the config setup discussed in that old tutorial. If you want to use a “flexible” content area, please refer to the updated (and more simplified) setup in this tutorial:

http://coronalabs.com/blog/2013/09/10/modernizing-the-config-lua/

Brent

Thanks Brent.

I’m using this suggested config.lua

–calculate the aspect ratio of the device:

local aspectRatio = display.pixelHeight / display.pixelWidth

application = {
content = {
width = aspectRatio > 1.5 and 320 or math.ceil( 480 / aspectRatio ),
height = aspectRatio < 1.5 and 480 or math.ceil( 320 * aspectRatio ),
scale = “letterBox”,
fps = 60,

imageSuffix = {
["@2x"] = 1.5,
["@4x"] = 3.0,
},
},
}

but it seems not scaling my character jumps or object display:translate() movements when testing ins different screen resolutions.

For jumping I;'m using the following method

character:applyLinearImpulse(0, -15, character.x, character.y )

but when I use this in different screen resolutions, the effect is different and the object ends in different location.

However, if I use this other content in the config.lua

application = {

content = {
width = 480,
height = 320,
scale = “zoomStretch”,
fps = 60,

imageSuffix = {
["@2x"] = 1.5,
["@4x"] = 3.0,
},
},
}

The jumping effect is similar in any screen resolution.

In case I use the option 1 for config.lua, Do I need to recalculate values used in applyLinearImpulse and translate methods?

Hi @oquesada,

Thanks for the details. A few things I can comment on:

  1. You should not be using “zoomStretch”. I discourage anybody from using this scale method.

  2. When using physics, the behavior of bodies, forces, etc. should be identical within the content area. However, if you’re dealing with different screen aspect ratios, there’s really no way to guarantee that a body will move to the same place, because some areas of the actual screen will be outside of the content area when using “letterbox”. You could try to use “zoomEven” instead, which will fit the entire content area up to the edges, but also force some content off the visible screen region.

Hope this helps,

Brent

Thanks both of you for your comments.

One additional (and hopefully last question). If I use different screen aspect rations in config.lua file, should I scale x/y values in translate(), applylinearImpulses and similar methods()?

For instance,

For screen w-480, h=320

I use a default x-delta value of 3 pixels for translate method.

this hardcoded x-delta value should be different for other screen resolutions?

thanks

Olman

Hi Olman,

No, I wouldn’t suggest tinkering with the values you apply to physics based on different resolutions. Simply work within the bounds of the content area.

Also, remember that for config.lua, “width” should always be the shorter (smaller) value, and “height” the higher one… even if your app is designed for landscape orientation. So, it would never be “width=480, height=320”. The correct values would be “width=320, height=480”.

Brent