What does your config.lua look like?
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
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
I cannot recommend zoom Stretch, it will make squares look like rects.
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
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
@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"}}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/
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 .
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
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
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
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 ?
You should be able to move in objects code. You will have to adjust for different screen sizes in code.
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
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
Rob
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 .