Multiple devices

Hi, I’m a newbie in gaming developing I’m looking for the best guideto accept multiple devices (Screen Resolutions) in a landscape game. If there is a link or some tutorial that I don’t see in the forum. I’m going to be very grateful if you advice me about it.

Hi @robertohnorton91,

This section in the “Project Configuration” guide is a good starting point for you. It outlines the concept of the “content area” which is fundamental to apps built with Corona:

https://docs.coronalabs.com/guide/basics/configSettings/index.html#contentscaling

In terms of setting landscape-only orientation, see here:

https://docs.coronalabs.com/guide/distribution/buildSettings/index.html#app-orientation

If you have any questions as you go alone, just let me know!

Brent

thank you so much im going to check this.

I’m going to add to this… Consider this diagram:

The green area is what you define in config.lua. Most people use a 3:2 or 1.5:1 aspect ratio (same thing) such as setting the width to 320 and the height to 480.  On all screens, 0, 0 will be the top left corner of the green block. display.contentWidth, display.contentHeight will be the right, bottom of the green block. There are few devices that have this shape screen today, but it’s common to all devices.

The blue area is what’s typical of a 16:9 phone, which is most phones today (the Samsung Galaxy S8 the main exception).  Here the left, top is display.screenOriginX, display.screenOriginY. These two values will always represent the left top of the visible screen regardless of  your defined content area.  The right, bottom is display.actualContentWidth, display.actualContentHeight. For these devices part of your screen is going to be outside of the defined content area.  The yellow area is the Galaxy S8’s 2:1 aspect ratio. The new iPhones may end up being taller too (in portrait terms) but we will have to wait a few more weeks to find out.

The pinkish color represents iPads and their 4:3 aspect ratio (other tablets share a similar aspect ratio). Like the phone, the actual top left and bottom right are represented by the same display.screenOrigin* and display.actualContent* values.   

Depending on your game, you may want to constrain your game to the green area. Games like AngryBirds need a fixed distance between the slingshot and the pigs. A platformer needs to have all game play happen in the common area. In this case, you make your backgrounds big enough to fill the area for all devices (570x360 or 640x360 if you want to fill the S8’s screen) knowing that part of that background (either top/bottom or left/right) will be cut off on various devices. Don’t build any graphics into the background that can’t afford to be cut off.

Then you can place your edge elements (score, lives, coins, UI buttons, etc.) near the edges using display.actualContent* and display.screenOrigin* and they will stay relative to the edges/corners regardless of the device they are on and your game content stays centered. If you’re building a platformer, have your map extend tiles into the cut off areas, just don’t let the player be able to move there and you will be fine.

If you are doing something like a card game where it would look better to spread the cards out to use the space, then you can use the top left/bottom right values to help position your graphics.

Hi, this is the best explanation that i read in all internet, my game is for android and only landscape,  but with this i can do a lot of thing, thank you so much im going to save this in a word .

Hi @robertohnorton91,

This section in the “Project Configuration” guide is a good starting point for you. It outlines the concept of the “content area” which is fundamental to apps built with Corona:

https://docs.coronalabs.com/guide/basics/configSettings/index.html#contentscaling

In terms of setting landscape-only orientation, see here:

https://docs.coronalabs.com/guide/distribution/buildSettings/index.html#app-orientation

If you have any questions as you go alone, just let me know!

Brent

thank you so much im going to check this.

I’m going to add to this… Consider this diagram:

The green area is what you define in config.lua. Most people use a 3:2 or 1.5:1 aspect ratio (same thing) such as setting the width to 320 and the height to 480.  On all screens, 0, 0 will be the top left corner of the green block. display.contentWidth, display.contentHeight will be the right, bottom of the green block. There are few devices that have this shape screen today, but it’s common to all devices.

The blue area is what’s typical of a 16:9 phone, which is most phones today (the Samsung Galaxy S8 the main exception).  Here the left, top is display.screenOriginX, display.screenOriginY. These two values will always represent the left top of the visible screen regardless of  your defined content area.  The right, bottom is display.actualContentWidth, display.actualContentHeight. For these devices part of your screen is going to be outside of the defined content area.  The yellow area is the Galaxy S8’s 2:1 aspect ratio. The new iPhones may end up being taller too (in portrait terms) but we will have to wait a few more weeks to find out.

The pinkish color represents iPads and their 4:3 aspect ratio (other tablets share a similar aspect ratio). Like the phone, the actual top left and bottom right are represented by the same display.screenOrigin* and display.actualContent* values.   

Depending on your game, you may want to constrain your game to the green area. Games like AngryBirds need a fixed distance between the slingshot and the pigs. A platformer needs to have all game play happen in the common area. In this case, you make your backgrounds big enough to fill the area for all devices (570x360 or 640x360 if you want to fill the S8’s screen) knowing that part of that background (either top/bottom or left/right) will be cut off on various devices. Don’t build any graphics into the background that can’t afford to be cut off.

Then you can place your edge elements (score, lives, coins, UI buttons, etc.) near the edges using display.actualContent* and display.screenOrigin* and they will stay relative to the edges/corners regardless of the device they are on and your game content stays centered. If you’re building a platformer, have your map extend tiles into the cut off areas, just don’t let the player be able to move there and you will be fine.

If you are doing something like a card game where it would look better to spread the cards out to use the space, then you can use the top left/bottom right values to help position your graphics.

Hi, this is the best explanation that i read in all internet, my game is for android and only landscape,  but with this i can do a lot of thing, thank you so much im going to save this in a word .