config, Width and Height

[jake1987.jj]

Hello everyone.

I just joined the Crown but it is a bit that lua study. I wanted to know quele is the best way to create my Aplications. I refer in particular to config I read the guide but they are still undecided between these two:

Config1

application = { content = { width = 320, height = 480, scale = "letterBox", fps = 30, --[[imageSuffix = { ["@2x"] = 2, ["@4x"] = 4, }, --]] }, }

Config2:

local aspectRatio = display.pixelHeight / display.pixelWidth application = { content = { -- graphicsCompatibility = 1, -- Turn on V1 Compatibility Mode width = aspectRatio \> 1.5 and 800 or math.ceil( 1200 / aspectRatio ), height = aspectRatio \< 1.5 and 1200 or math.ceil( 800 \* aspectRatio ), scale = "letterBox", fps = 30, imageSuffix = { ["@2x"] = 1.3 }, }, }

There is no way to be able to use both widths and heights in the same project? I would try to uttilizzarle together.

thank you so much

[rob]

The two serve different purposes and philosophies. The first one is the standard way of doing things. The content area can either be in the center of the screen with parts of the screen outside the defined area or the content area can be anchored to the top, bottom or sides. 0, 0 won’t necessarily be the left, top. display.contentWidth, display.contentHeight won’t necessarily be right, bottom. But what will be true is that display.screenOriginX, display.screenOriginY will be left, top and display. actual ContentWidth, display. actual ContentHeight will be the right, bottom of the screen.

The other config.lua dynamically adjusts the content area to fit the screen. 0, 0 will be left, top, display.contentWidth, display.contentHeight will be right, bottom.

The first version works best when you need to have the same number of content points between objects regardless of the screen shape. Think of Angry Birds. The sling-shot and the structures have to be the same distance apart regardless of a phone or tablet. Business apps can also benefit from this.

The second version works best when you think about positioning things relative to the center or edges. If it’s okay for your objects to be further apart or closer together and you think that it’s easier to have 0, 0 be the left-top instead of using display.screenOriginX, display.screenOriginY then the second version will work for you.  

But honestly using display.screenOriginX, dispaly.screenOriginY and display.actualContentWidth, display.actualContentHeight is just as easy to use.

Rob

[jake1987.jj]

Thanks Rob

From what you’ve told me I was thinking of using the first config. So as not to have problems in the positioning of ojects. But then I would not know how “famous” I would fill empty spaces.

If I wanted to create a math3 game, puzzle or adventure, I could create everything with the first config, but elements such as energy status bars etc I would place them at a distance on the edge of the device and not the config.

I would like to do this to be able to fill the empty space and not lascirare empty areas.

How could I do this?

[rob]

First of all, base your background off of a 360x570 background. I’m going to list everything in vertical orientation, you will have to rotate things accordingly. Keep in mind config.lua is always done using vertical numbers. This will fully cover all screens using a 320x480 content area.

Because different devices are going to slice out parts of the background (on a phone, it will use the center 320 points of the background and the full 570 points, an iPad will use only 480 points of the 570 vertically but show all 360 horizontal points for instance), you can’t put any thing critical on the background that could get cut off on various devices. I’m talking about things like decorations behind the high score or energy bars. You need those as separate objects. 

Then you can use edges to position these elements. For instance if you want your score and it’s background in the Top Right corner you could do:

local highScoreBackground = display.newImageRect("images/hsbackground.png", 100, 70 highScoreBackground.x = display.actualContentWidth - 50 highScoreBackground.y = 35 --(half of 70) local highScoreText = display.newText( "0", highScoreBackground.x, highScoreBackground.y, native.systemFontBold, 36 )

Don’t forget to insert them into the scene’s group!

Want the energy status bar in the Top left?

local energyBar = display.newRect( display.screenOriginX + 50, display.screenOriginY + 10, 100, 20)

In this case, I made a 100 x 20 energy bar and I positioned it 50 points from the left and 10 points from the top (center of the bar). 

Make sense?

Rob

[jake1987.jj]

This really make much sense, it is just what I needed. Thank you so much.

With these guides the second config seems really messy in comparison.

Just one last little question about it then I’ll clear. The size of the background (useful to cover the blacks spaces) are 360 * 570. Like you said these areas are good for any device. I wonder if you can calcolore inside the project. This is because new devices come out every day and would like to know if I have to change from time to time (360 * 570).

Thanks again really, I’ve made a lot of my ideas.

[rob]

16:9 is already a pretty extreme aspect ratio. I can’t see phones getting longer and thinner. It’s also a universal size in that many desktop monitor and TVs are 16:9. Movies at the theater are more narrow, and occasionally a device maker might make a status bar case things to thin out more. Tablets approach a more square form factor, but I can’t see any one making a more square device than the iPad.

It seems to be more now this is fairly future proof.

Rob

[jake1987.jj]

Perfect

Now I’m sure I can put everything in the right place.

thanks again

[rob]

The two serve different purposes and philosophies. The first one is the standard way of doing things. The content area can either be in the center of the screen with parts of the screen outside the defined area or the content area can be anchored to the top, bottom or sides. 0, 0 won’t necessarily be the left, top. display.contentWidth, display.contentHeight won’t necessarily be right, bottom. But what will be true is that display.screenOriginX, display.screenOriginY will be left, top and display. actual ContentWidth, display. actual ContentHeight will be the right, bottom of the screen.

The other config.lua dynamically adjusts the content area to fit the screen. 0, 0 will be left, top, display.contentWidth, display.contentHeight will be right, bottom.

The first version works best when you need to have the same number of content points between objects regardless of the screen shape. Think of Angry Birds. The sling-shot and the structures have to be the same distance apart regardless of a phone or tablet. Business apps can also benefit from this.

The second version works best when you think about positioning things relative to the center or edges. If it’s okay for your objects to be further apart or closer together and you think that it’s easier to have 0, 0 be the left-top instead of using display.screenOriginX, display.screenOriginY then the second version will work for you.  

But honestly using display.screenOriginX, dispaly.screenOriginY and display.actualContentWidth, display.actualContentHeight is just as easy to use.

Rob

[jake1987.jj]

Thanks Rob

From what you’ve told me I was thinking of using the first config. So as not to have problems in the positioning of ojects. But then I would not know how “famous” I would fill empty spaces.

If I wanted to create a math3 game, puzzle or adventure, I could create everything with the first config, but elements such as energy status bars etc I would place them at a distance on the edge of the device and not the config.

I would like to do this to be able to fill the empty space and not lascirare empty areas.

How could I do this?

[rob]

First of all, base your background off of a 360x570 background. I’m going to list everything in vertical orientation, you will have to rotate things accordingly. Keep in mind config.lua is always done using vertical numbers. This will fully cover all screens using a 320x480 content area.

Because different devices are going to slice out parts of the background (on a phone, it will use the center 320 points of the background and the full 570 points, an iPad will use only 480 points of the 570 vertically but show all 360 horizontal points for instance), you can’t put any thing critical on the background that could get cut off on various devices. I’m talking about things like decorations behind the high score or energy bars. You need those as separate objects. 

Then you can use edges to position these elements. For instance if you want your score and it’s background in the Top Right corner you could do:

local highScoreBackground = display.newImageRect("images/hsbackground.png", 100, 70 highScoreBackground.x = display.actualContentWidth - 50 highScoreBackground.y = 35 --(half of 70) local highScoreText = display.newText( "0", highScoreBackground.x, highScoreBackground.y, native.systemFontBold, 36 )

Don’t forget to insert them into the scene’s group!

Want the energy status bar in the Top left?

local energyBar = display.newRect( display.screenOriginX + 50, display.screenOriginY + 10, 100, 20)

In this case, I made a 100 x 20 energy bar and I positioned it 50 points from the left and 10 points from the top (center of the bar). 

Make sense?

Rob

[jake1987.jj]

This really make much sense, it is just what I needed. Thank you so much.

With these guides the second config seems really messy in comparison.

Just one last little question about it then I’ll clear. The size of the background (useful to cover the blacks spaces) are 360 * 570. Like you said these areas are good for any device. I wonder if you can calcolore inside the project. This is because new devices come out every day and would like to know if I have to change from time to time (360 * 570).

Thanks again really, I’ve made a lot of my ideas.

[rob]

16:9 is already a pretty extreme aspect ratio. I can’t see phones getting longer and thinner. It’s also a universal size in that many desktop monitor and TVs are 16:9. Movies at the theater are more narrow, and occasionally a device maker might make a status bar case things to thin out more. Tablets approach a more square form factor, but I can’t see any one making a more square device than the iPad.

It seems to be more now this is fairly future proof.

Rob

[jake1987.jj]

Perfect

Now I’m sure I can put everything in the right place.

thanks again