Composer GUI scaling issue

sobh · August 20, 2016, 4:28pm

I am using the composer gui to design a game with lots of squares in it . it works will on large screen phones but once i try to run it on any other size it get distorted , i never faced this when i work without the GUI .

so is there any limitations when using the GUI to design games/apps ?

the problem shown mainly in the locations of the square on the screen . before i used to assign x and y according to the top,button,left,right screen. but in composer you cant do that . i guess it take straight forward x and y locations . which cant fit later for any screen size

any one faced this before ?

sobh · August 20, 2016, 8:59pm

for example i add this to each level lua file

centerX = display.contentCenterX centerY = display.contentCenterY screenLeft = display.screenOriginX screenWidth = display.contentWidth - screenLeft \* 2 screenRight = screenLeft + screenWidth screenTop = display.screenOriginY screenHeight = display.contentHeight - screenTop \* 2 screenBottom = screenTop + screenHeight display.contentWidth = screenWidth display.contentHeight = screenHeight

the after that i can place item according to its relevant

local Level1Name = display.newText( "Level 1",25,25, "Exo-ExtraLight.otf", 13 ) Level1Name.x=screenLeft+30 Level1Name.y=screenTop+30 sceneGroup:insert(Level1Name) Level1Name:setTextColor( 0.8,0.3,0.6 )

but when i place items on the screen using the composer gui . i cant type that relevant location in the gui , it only take numbers for the X and Y location . and i am using gui because it made the idea of my app come easy for deploy .

i am thinking now of using something like a grid to plece items without the need for the gui

is there any better way to let the gui smart enough to relocate items on the screen according to the size of the screen ?

Scott_Harrison · August 20, 2016, 10:04pm

What does your config.lua look like?

Scott_Harrison · August 20, 2016, 10:09pm

This also might help

local scale0X= ((display.actualContentWidth- display.contentWidth)*.5)*-1

local scale0Y= ((display.actualContentHeight- display.contentHeight)*.5)*-1

actualContentWidth: given you the real content width of the device screen

contentWidth: will give you the width value from your config.lua

sobh · August 20, 2016, 10:13pm

hi i am checking now the scale = “zoomStretch”,

mine was letterbox

i am building now and i will see if there is any change i will update soon

Scott_Harrison · August 20, 2016, 10:15pm

I cannot recommend zoom Stretch, it will make squares look like rects.

sobh · August 21, 2016, 1:45pm

it seems to be using scale = “zoomStretch” fixed this issue for me

i will update this later once i confirm 100% that it didnot made issues

rob · August 21, 2016, 3:58pm

The zoomStretch content scaling method does exactly what it says, it will stretch the screen to fill empty space. Squares become rectangles and circles become ovals until your screen is an exact match to your width/height in your config.lua. Just as Scott cannot recommend, we don’t recommend it either. Here are a few additional fun facts:

display.contentWidth = screenWidth display.contentHeight = screenHeight

Won’t work. display.contentWidth, display.contentHeight are read-only properties. They return the values you set in config.lua for width and height and nothing more.

screenWidth = display.contentWidth - screenLeft \* 2

We have an API call for this: display.actualContentWidth and display.actualContentHeight. It’s their job to get you that extra space beyond display.contentWidth similar to what display.screenOriginX does on the other side. In a “letterbox” app, display.screenOriginY, display.screenOriginX are the top, left corners of the content area, display.actualContentHeight, display.actualContentWidth are the bottom, right corners and normally unless you set an alignment in config.lua, 0, 0, display.contentWidth, display.contentHeight will be an imaginary box centered somewhere on the screen.

With zoomStretch, display.screenOriginX, display.screenOriginY will be 0, 0 and be the top, left. display.contentHeight, display.contentWidth will be the bottom, right but your screen will be distorted to get it. display.actualContentHeight will equal display.contentHeight.

The “zoomEven” scaling mode, like “zoomStretch” will have the same values for display.screenOriginX, display.actualContentWidth, etc. but the screen will be zoomed up to where there are no black bars. Some of the content area will be off screen if your device doesn’t perfectly match the define content area. “zoomEven” can work pretty well as long as your game/app is designed so that the UI can work with part of the content area being offscreen.

Rob

sobh · August 25, 2016, 1:24pm

@Rob and scottrules44.

yes zoomStretch made things bad.

but using

centerX = display.contentCenterX centerY = display.contentCenterY screenLeft = display.screenOriginX screenWidth = display.contentWidth - screenLeft \* 2 screenRight = screenLeft + screenWidth screenTop = display.screenOriginY screenHeight = display.contentHeight - screenTop \* 2 screenBottom = screenTop + screenHeight display.contentWidth = screenWidth display.contentHeight = screenHeight

is not making any problem for me now . i used it for more than one App/Game and it works well .

my main issue here and this topic is for is the Composer GUI . my game only viewed well in one screen size and once i changed the simulator device to something bigger or smaller , location of the player change .

when i use relative location then i dont face any issue . only when i use Composer GUI to place items .

here is my config

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

and here is GUI scene parameters .

{"objects":{"id10":{"isSensor":false,"isFixedRotation":false,"isBodyActive":true,"isVisible":true,"imageFile":"images/pl1.png","rotation":0,"x":231,"yLocked":false,"height":200,"xLocked":false,"isAwake":false,"fillColor":{"a":1,"r":1,"g":1,"b":1},"strokeColor":{"a":1,"r":0.50196078431373,"g":0.50196078431373,"b":0.50196078431373},"bounce":0,"physicsEnabled":true,"isBullet":false,"linearDamping":0,"angularDamping":0,"width":200,"yScale":0.15999999642372,"xScale":0.15999999642372,"hasJoint":false,"bodyShape":[{"y":-80,"x":-84},{"y":-80,"x":79},{"y":83,"x":79},{"y":84,"x":-84}],"id":"R3","radius":0,"alpha":1,"strokeWidth":0,"density":100,"friction":100,"bodyType":"static","createdAtStart":true,"isSleepingAllowed":true,"y":177.5,"meta":"id10","tag":"pl1"},"id15":{"isSensor":false,"isFixedRotation":true,"isBodyActive":true,"isVisible":true,"imageFile":"images/BaseO.png","rotation":0,"x":177,"yLocked":false,"height":200,"xLocked":false,"isAwake":true,"fillColor":{"a":1,"r":1,"g":1,"b":1},"strokeColor":{"a":1,"r":0.50196078431373,"g":0.50196078431373,"b":0.50196078431373},"bounce":0,"physicsEnabled":true,"isBullet":false,"linearDamping":100,"angularDamping":0,"width":200,"yScale":0.15500000119209,"xScale":0.15500000119209,"hasJoint":false,"bodyShape":[{"y":-80,"x":-83},{"y":-80,"x":77},{"y":81,"x":76},{"y":82,"x":-83}],"id":"BaseT","radius":0,"alpha":1,"strokeWidth":0,"density":100,"friction":100,"bodyType":"static","createdAtStart":true,"isSleepingAllowed":true,"y":438,"meta":"id15","tag":"BaseT"},"id14":{"isSensor":false,"isFixedRotation":false,"isBodyActive":true,"isVisible":true,"imageFile":"images/pl1.png","rotation":0,"x":20,"yLocked":false,"height":200,"xLocked":false,"isAwake":false,"fillColor":{"a":1,"r":1,"g":1,"b":1},"strokeColor":{"a":1,"r":0.50196078431373,"g":0.50196078431373,"b":0.50196078431373},"bounce":0,"physicsEnabled":true,"isBullet":false,"linearDamping":0,"angularDamping":0,"width":200,"yScale":0.15999999642372,"xScale":0.15999999642372,"hasJoint":false,"bodyShape":[{"y":-82,"x":-84},{"y":-80,"x":79},{"y":83,"x":79},{"y":84,"x":-84}],"id":"R6","radius":0,"alpha":1,"strokeWidth":0,"density":100,"friction":100,"bodyType":"static","createdAtStart":true,"isSleepingAllowed":true,"y":177,"meta":"id14","tag":"pl1"},"id13":{"isSensor":false,"isFixedRotation":false,"isBodyActive":true,"isVisible":true,"imageFile":"images/pl1.png","rotation":0,"x":178,"yLocked":false,"height":200,"xLocked":false,"isAwake":false,"fillColor":{"a":1,"r":1,"g":1,"b":1},"strokeColor":{"a":1,"r":0.50196078431373,"g":0.50196078431373,"b":0.50196078431373},"bounce":0,"physicsEnabled":true,"isBullet":false,"linearDamping":0,"angularDamping":0,"width":200,"yScale":0.15999999642372,"xScale":0.15999999642372,"hasJoint":false,"bodyShape":[{"y":-81,"x":-84},{"y":-80,"x":79},{"y":83,"x":79},{"y":83,"x":-84}],"id":"R2","radius":0,"alpha":1,"strokeWidth":0,"density":100,"friction":100,"bodyType":"static","createdAtStart":true,"isSleepingAllowed":true,"y":151,"meta":"id13","tag":"pl1"},"id6":{"isSensor":true,"rectWidth":21,"isFixedRotation":false,"isBodyActive":true,"rectHeight":527,"isVisible":true,"imageFile":"ui\_assets/symbol\_rectangle.png","rotation":0,"x":360,"yLocked":false,"xLocked":false,"isAwake":true,"fillColor":{"a":1,"r":0.50196078431373,"g":0.50196078431373,"b":0.50196078431373},"strokeColor":{"a":1,"r":0.50196078431373,"g":0.50196078431373,"b":0.50196078431373},"bounce":0.2,"physicsEnabled":true,"isBullet":false,"linearDamping":0,"angularDamping":0,"bodyShape":[{"y":-295,"x":-10.5},{"y":-295,"x":10.5},{"y":295,"x":10.5},{"y":295,"x":-10.5}],"yScale":1,"type":"rect","hasJoint":false,"radius":0,"id":"borderRight","friction":0.3,"alpha":1,"strokeWidth":0,"density":1,"y":244.5,"bodyType":"static","createdAtStart":true,"isSleepingAllowed":true,"xScale":1,"meta":"id6","tag":"borderRight"},"id1":{"targetW":320,"gridW":20,"bgColor":{"a":1,"b":1,"g":1,"r":0.9999960064888},"gridH":20,"isVisible":true,"children":["id2","id3","id4","id5","id6","id7","id8","id9","id10","id11","id12","id13","id14","id15","id16"],"type":"group","yScale":1,"xScale":1,"yGravity":0,"targetH":480,"sceneName":"scene1","gridSnapping":false,"alpha":1,"width":320,"y":0,"x":0,"name":"root","drawMode":"normal","height":480,"meta":"id1","rotation":0,"xGravity":0},"id4":{"isSensor":true,"rectWidth":365,"isFixedRotation":true,"isBodyActive":true,"rectHeight":24,"isVisible":true,"imageFile":"ui\_assets/symbol\_rectangle.png","rotation":0,"x":161,"yLocked":false,"xLocked":false,"isAwake":true,"fillColor":{"a":1,"r":0.50196078431373,"g":0.50196078431373,"b":0.50196078431373},"strokeColor":{"a":1,"r":0.50196078431373,"g":0.50196078431373,"b":0.50196078431373},"bounce":0,"physicsEnabled":true,"isBullet":false,"linearDamping":0,"angularDamping":0,"bodyShape":[{"y":-12,"x":-182.5},{"y":-12,"x":182.5},{"y":12,"x":182.5},{"y":12,"x":-182.5}],"yScale":2.2916667461395,"type":"rect","hasJoint":false,"radius":0,"id":"borderUp","friction":0,"alpha":1,"strokeWidth":0,"density":1,"y":-73.5,"bodyType":"static","createdAtStart":true,"isSleepingAllowed":true,"xScale":1.027397274971,"meta":"id4","tag":"borderUp"},"id3":{"isSensor":true,"rectWidth":365,"isFixedRotation":false,"isBodyActive":true,"rectHeight":24,"isVisible":true,"imageFile":"ui\_assets/symbol\_rectangle.png","rotation":0,"x":156,"yLocked":false,"xLocked":false,"isAwake":true,"fillColor":{"a":1,"r":0.50196078431373,"g":0.50196078431373,"b":0.50196078431373},"strokeColor":{"a":1,"r":0.50196078431373,"g":0.50196078431373,"b":0.50196078431373},"bounce":0.2,"physicsEnabled":true,"isBullet":false,"linearDamping":0,"angularDamping":0,"bodyShape":[{"y":-12,"x":-182.5},{"y":-12,"x":182.5},{"y":12,"x":182.5},{"y":12,"x":-182.5}],"yScale":1.375,"type":"rect","hasJoint":false,"radius":0,"id":"borderDown","friction":0.3,"alpha":1,"strokeWidth":0,"density":1,"y":561,"bodyType":"static","createdAtStart":true,"isSleepingAllowed":true,"xScale":1.1479451656342,"meta":"id3","tag":"borderDown"},"id9":{"isSensor":false,"isFixedRotation":false,"isBodyActive":true,"isVisible":true,"imageFile":"images/pl1.png","rotation":0,"x":257,"yLocked":false,"height":200,"xLocked":false,"isAwake":false,"fillColor":{"a":1,"r":1,"g":1,"b":1},"strokeColor":{"a":1,"r":0.50196078431373,"g":0.50196078431373,"b":0.50196078431373},"bounce":0,"physicsEnabled":true,"isBullet":false,"linearDamping":0,"angularDamping":0,"width":200,"yScale":0.15999999642372,"xScale":0.15999999642372,"hasJoint":false,"bodyShape":[{"y":-80,"x":-84},{"y":-80,"x":79},{"y":83,"x":79},{"y":82,"x":-85}],"id":"R1","radius":0,"alpha":1,"strokeWidth":0,"density":100,"friction":100,"bodyType":"static","createdAtStart":true,"isSleepingAllowed":true,"y":80,"meta":"id9","tag":"rock1"},"id11":{"isSensor":false,"isFixedRotation":false,"isBodyActive":true,"isVisible":true,"imageFile":"images/pl1.png","rotation":0,"x":204,"yLocked":false,"height":200,"xLocked":false,"isAwake":false,"fillColor":{"a":1,"r":1,"g":1,"b":1},"strokeColor":{"a":1,"r":0.50196078431373,"g":0.50196078431373,"b":0.50196078431373},"bounce":0,"physicsEnabled":true,"isBullet":false,"linearDamping":0,"angularDamping":0,"width":200,"yScale":0.15999999642372,"xScale":0.15999999642372,"hasJoint":false,"bodyShape":[{"y":-80,"x":-84},{"y":-80,"x":79},{"y":83,"x":79},{"y":83,"x":-84}],"id":"R4","radius":0,"alpha":1,"strokeWidth":0,"density":100,"friction":100,"bodyType":"static","createdAtStart":true,"isSleepingAllowed":true,"y":278,"meta":"id11","tag":"pl1"},"id16":{"isSensor":false,"isFixedRotation":true,"isBodyActive":true,"isVisible":true,"imageFile":"images/player1.png","rotation":0,"x":114,"yLocked":false,"height":200,"xLocked":false,"isAwake":true,"fillColor":{"a":1,"r":1,"g":1,"b":1},"strokeColor":{"a":1,"r":0.50196078431373,"g":0.50196078431373,"b":0.50196078431373},"bounce":0,"physicsEnabled":true,"isBullet":false,"linearDamping":0,"angularDamping":0,"width":200,"yScale":0.15500000119209,"xScale":0.15500000119209,"hasJoint":false,"bodyShape":[{"y":-79,"x":-83},{"y":-80,"x":79},{"y":76,"x":79},{"y":76,"x":-84}],"id":"pl2","radius":0,"alpha":1,"strokeWidth":0,"density":20,"friction":100,"bodyType":"dynamic","createdAtStart":true,"isSleepingAllowed":true,"y":80,"meta":"id16","tag":"pl2"},"id12":{"isSensor":false,"isFixedRotation":false,"isBodyActive":true,"isVisible":true,"imageFile":"images/pl1.png","rotation":0,"x":115,"yLocked":false,"height":200,"xLocked":false,"isAwake":false,"fillColor":{"a":1,"r":1,"g":1,"b":1},"strokeColor":{"a":1,"r":0.50196078431373,"g":0.50196078431373,"b":0.50196078431373},"bounce":0,"physicsEnabled":true,"isBullet":false,"linearDamping":0,"angularDamping":0,"width":200,"yScale":0.15999999642372,"xScale":0.15999999642372,"hasJoint":false,"bodyShape":[{"y":-81,"x":-84},{"y":-80,"x":79},{"y":83,"x":79},{"y":84,"x":-84}],"id":"R5","radius":0,"alpha":1,"strokeWidth":0,"density":100,"friction":100,"bodyType":"static","createdAtStart":true,"isSleepingAllowed":true,"y":203,"meta":"id12","tag":"pl1"},"id8":{"isSensor":false,"isFixedRotation":false,"isBodyActive":true,"isVisible":true,"imageFile":"images/pl1.png","rotation":0,"x":47,"yLocked":false,"height":200,"xLocked":false,"isAwake":false,"fillColor":{"a":1,"r":1,"g":1,"b":1},"strokeColor":{"a":1,"r":0.50196078431373,"g":0.50196078431373,"b":0.50196078431373},"bounce":0,"physicsEnabled":true,"isBullet":false,"linearDamping":0,"angularDamping":0,"width":200,"yScale":0.15999999642372,"xScale":0.15999999642372,"hasJoint":false,"bodyShape":[{"y":-82,"x":-84},{"y":-80,"x":79},{"y":83,"x":79},{"y":84,"x":-84}],"id":"R7","radius":0,"alpha":1,"strokeWidth":0,"density":100,"friction":100,"bodyType":"static","createdAtStart":true,"isSleepingAllowed":true,"y":304.5,"meta":"id8","tag":"pl1"},"id7":{"isSensor":false,"isFixedRotation":false,"isBodyActive":true,"isVisible":true,"imageFile":"images/pl1.png","rotation":0,"x":204,"yLocked":false,"height":200,"xLocked":false,"isAwake":false,"fillColor":{"a":1,"r":1,"g":1,"b":1},"strokeColor":{"a":1,"r":0.50196078431373,"g":0.50196078431373,"b":0.50196078431373},"bounce":0,"physicsEnabled":true,"isBullet":false,"linearDamping":0,"angularDamping":0,"width":200,"yScale":0.15999999642372,"xScale":0.15999999642372,"hasJoint":false,"bodyShape":[{"y":-82,"x":-84},{"y":-80,"x":79},{"y":83,"x":79},{"y":84,"x":-84}],"id":"R8","radius":0,"alpha":1,"strokeWidth":0,"density":100,"friction":100,"bodyType":"static","createdAtStart":true,"isSleepingAllowed":true,"y":437.5,"meta":"id7","tag":"pl1"},"id2":{"isSensor":false,"isFixedRotation":false,"isBodyActive":true,"isSleepingAllowed":true,"imageFile":"images/30.jpg","rotation":0,"x":155,"yLocked":false,"height":570,"xLocked":false,"isAwake":true,"fillColor":{"a":1,"r":1,"g":1,"b":1},"strokeColor":{"a":1,"r":0.50196078431373,"g":0.50196078431373,"b":0.50196078431373},"bounce":0.2,"physicsEnabled":false,"isBullet":false,"linearDamping":0,"angularDamping":0,"yScale":1,"xScale":1,"hasJoint":false,"id":"Object","width":360,"alpha":1,"strokeWidth":0,"density":1,"radius":0,"friction":0.3,"createdAtStart":true,"bodyType":"dynamic","isVisible":true,"meta":"id2","y":241},"id5":{"isSensor":true,"rectWidth":20,"isFixedRotation":false,"isBodyActive":true,"rectHeight":560,"isVisible":true,"imageFile":"ui\_assets/symbol\_rectangle.png","rotation":0,"x":-38,"yLocked":false,"xLocked":false,"isAwake":true,"fillColor":{"a":1,"r":0.50196078431373,"g":0.50196078431373,"b":0.50196078431373},"strokeColor":{"a":1,"r":0.50196078431373,"g":0.50196078431373,"b":0.50196078431373},"bounce":0.2,"physicsEnabled":true,"isBullet":false,"linearDamping":0,"angularDamping":0,"bodyShape":[{"y":-295,"x":-10},{"y":-295,"x":10},{"y":295,"x":10},{"y":295,"x":-10}],"yScale":1,"type":"rect","hasJoint":false,"radius":0,"id":"borderLeft","friction":0.3,"alpha":1,"strokeWidth":0,"density":1,"y":247.5,"bodyType":"static","createdAtStart":true,"isSleepingAllowed":true,"xScale":1,"meta":"id5","tag":"borderLeft"}},"root":{"object":"id1","numObjects":16},"metadata":{"creator":"Corona Composer","version":"0.6"}}

sobh · August 25, 2016, 1:32pm

i will read this link and come back to update if i could do it or not

https://coronalabs.com/blog/2012/12/04/the-ultimate-config-lua-file/

sobh · August 27, 2016, 4:12pm

i still cant get this to work in the right way .

i face only one issue now . if i put player using the GUI on y 450 ( it show on iPhone 4s ) at the bottom line of the phone . but when i run it on iPhone 6plus there are a long area empty just under that player . because GUI didnot scale the player Y position

here is my new config

if string.sub(system.getInfo("model"),1,4) == "iPad" then application = { content = { width = 360, height = 480, scale = "letterBox", xAlign = "center", yAlign = "center", imageSuffix = { ["@2x"] = 1.5, ["@4x"] = 3.0, }, }, notification = { iphone = { types = { "badge", "sound", "alert" } } } } elseif string.sub(system.getInfo("model"),1,2) == "iP" and display.pixelHeight \> 960 then application = { content = { width = 320, height = 568, scale = "letterBox", xAlign = "center", yAlign = "center", imageSuffix = { ["@2x"] = 1.5, ["@4x"] = 3.0, }, }, notification = { iphone = { types = { "badge", "sound", "alert" } } } } elseif string.sub(system.getInfo("model"),1,2) == "iP" then application = { content = { width = 320, height = 480, scale = "letterBox", xAlign = "center", yAlign = "center", imageSuffix = { ["@2x"] = 1.5, ["@4x"] = 3.0, }, }, notification = { iphone = { types = { "badge", "sound", "alert" } } } } elseif display.pixelHeight / display.pixelWidth \> 1.72 then application = { content = { width = 320, height = 570, scale = "letterBox", xAlign = "center", yAlign = "center", imageSuffix = { ["@2x"] = 1.5, ["@4x"] = 3.0, }, }, } else application = { content = { width = 320, height = 512, scale = "letterBox", xAlign = "center", yAlign = "center", imageSuffix = { ["@2x"] = 1.5, ["@4x"] = 3.0, }, }, notification = { iphone = { types = { "badge", "sound", "alert" } } } } end

so how can i fix this . i am thinking only in one way to do this which is using grid to place items according to their relative location on the screen .

Scott_Harrison · August 27, 2016, 4:30pm

I pasted in your config.lua and put this in my main.lua

local rect = display.newRect( 0+25, 0+25, 50, 50 ) local rect2 = display.newRect( display.actualContentWidth-25, 0+25, 50, 50 ) local rect3 = display.newRect( display.actualContentWidth-25, display.actualContentHeight-25, 50, 50 ) local rect4 = display.newRect( 0+25, display.actualContentHeight-25, 50, 50 )

Worked on every device

sobh · August 27, 2016, 4:45pm

scottrules44

i think you didnot get my point yet . i am not typing it using code . i am using the Composer GUI .

can you please test this . use the composer GUI and add square image 32*32 at Y 460 . and view it on iPhone 4S .

then view it on iPhone 6PLus . and see it that square image will be located in relative position to the screen or not

for example in the iPhone 4S it will be located at the bottom of the screen but when you view on iPhone 6S it will be way up .

please confirm if you didnot face this issue

Thanks

Scott_Harrison · August 27, 2016, 5:22pm

Composer gui does not handle the different screen sizes you do.

You may have to use

local scale0X= ((display.actualContentWidth- display.contentWidth)*.5)*-1

local scale0Y= ((display.actualContentHeight- display.contentHeight)*.5)*-1

sobh · August 27, 2016, 5:28pm

didn’t got it .

so can you confirm that symptoms i mention above ? can GUI handle that scaling?

what is the alternative .? Composer GUI is very handy

also what do you mean by using

local scale0X= ((display.actualContentWidth- display.contentWidth)*.5)*-1

local scale0Y= ((display.actualContentHeight- display.contentHeight)*.5)*-1

is it going to fix the Composer GUI issue ? or you just mean using it when doing normal coding without the GUI ?

Scott_Harrison · August 27, 2016, 6:48pm

You should be able to move in objects code. You will have to adjust for different screen sizes in code.

sobh · August 27, 2016, 8:57pm

I knew that this will come… i will dump the GUI then .

i will depend on the code 100% by making grid and place items .

Thanks for help

rob · August 27, 2016, 10:48pm

The Composer GUI is based around a fixed content area. It’s expecting a normal config.lua where you set a fixed with and height and you are not using techniques like the Ultimate/Modernized config.lua. These config.lua’s change the aspect ratio of content area and things like display.contentCenterX/Y and display.contentWidth/Height change from device to device and you have to think a little bit before you use them. Composer GUI is a work in progress and as it is today is unaware of the screen’s aspect ratio. Its up to the developer to position things outside the grid area when needed.

If you’re using something that’s the normal 1.5:1 aspect ratio (i.e. 320x480, 800x1200) then scale mode “zoomEven” will be the easiest way to manage getting rid of the black letterbox bars on the screen. If you want to use letter box, you still have to do techniques like having your background bigger than the 320x480 and position things off screen.

Rob

sobh · August 28, 2016, 9:30am

Thanks Rob . thats what i want to know that GUI is not yet aware of ratio .

ok here is what i did and it worked for me . i used the GUI as usual and in the code i checked the screen size and moved all items on the screen accordingly .

sobh · August 20, 2016, 8:59pm

for example i add this to each level lua file

centerX = display.contentCenterX centerY = display.contentCenterY screenLeft = display.screenOriginX screenWidth = display.contentWidth - screenLeft \* 2 screenRight = screenLeft + screenWidth screenTop = display.screenOriginY screenHeight = display.contentHeight - screenTop \* 2 screenBottom = screenTop + screenHeight display.contentWidth = screenWidth display.contentHeight = screenHeight

the after that i can place item according to its relevant

local Level1Name = display.newText( "Level 1",25,25, "Exo-ExtraLight.otf", 13 ) Level1Name.x=screenLeft+30 Level1Name.y=screenTop+30 sceneGroup:insert(Level1Name) Level1Name:setTextColor( 0.8,0.3,0.6 )

but when i place items on the screen using the composer gui . i cant type that relevant location in the gui , it only take numbers for the X and Y location . and i am using gui because it made the idea of my app come easy for deploy .

i am thinking now of using something like a grid to plece items without the need for the gui

is there any better way to let the gui smart enough to relocate items on the screen according to the size of the screen ?