So I’ve been developing an app for iOS & Android.
I built the skeleton of the app on PC, then USB’d it over to my mac to make sure everything is well.
When I’m on PC, I view it as whatever devices and everything is fine, on mac, things seem a bit off. Is there something I’m missing?
Do anchors or just the screen itself work different on the macOS simulator? Or am I actually expected to moves things around when I put it on the mac.
Hi @sachinseem,
It shouldn’t be different. Can you show some screenshots or code of what’s appearing differently?
Brent
Sorry I took so long, long day. First image is on PC, second is on MAC. All these x/y coordinates for each display object are relative to screenLeft/Right/Top/Bottom. Nothing out of the ordinary here. Also, all I did on each device was run, didn’t alter the code whatsovever.
There’s no reason these should be sideways, or as large as they are 
This is something I have not mastered in Corona yet, I experienced it during the game jam, and again as I work on an app for publishing.
In the end, I used this setup (https://coronalabs.com/blog/2013/09/10/modernizing-the-config-lua/ as a base. I still have some issues, but it was at least in the ball park. Before that I had stuff appear everywhere.
This IS largely due to my in-experience and specifying X/Y coords, whereas now I try to calculate everything so it looks good across platforms.
Hi @sachinseem,
In the screenshots, it appears that on the PC, you’re simulating a different “skin” than on the Mac? Meaning, from the Corona Simulator, if you go to “Window > View As…” (Mac) or “View > View As…” (Windows), you should see a selection of common device skins to simulate. Make sure you’re choosing the same one on each platform, so the simulated output can be compared side-by-side.
Next, can you post the contents of your “config.lua” file here? That will usually help us determine what’s going on. Please remember to surround it with “code” tags for clarity in the forums:
[code] -- [/code]
Thanks,
Brent
P.S. - Honestly, although some people still use it, I’ve never liked the “ultimate config.lua” which is mentioned in the post above, where you change the content area size based on various math formulas. I’ve always found that it complicates things (for me) more than it helps, and that simply using a predictable “letterbox” or “zoomEven” scale mode lets me easily accomplish whatever I need in Corona across every device, without any random behavior.
Just for clarity, I used only this entry in the config as I had seen that the ‘ultimate config’ while may work, may be overkill. I ‘think’ that the below is somewhat what Brent is referring to. It does just use Letterbox. (From the post linked above)
--calculate the aspect ratio of the device local aspectRatio = display.pixelHeight / display.pixelWidth application = { content = { width = aspectRatio > 1.5 and 800 or math.floor( 1200 / aspectRatio ), height = aspectRatio < 1.5 and 1200 or math.floor( 800 \* aspectRatio ), scale = "letterBox", fps = 30, imageSuffix = { ["@2x"] = 1.3, }, }, }Yep, that’s what I personally avoid… but again, if it works for you, then by all means please use it! I just prefer knowing exactly what content area I’m dealing with, and if I’m using letterbox, it’s simple for me to just use “display.screenOriginX” or “display.screenOriginY” added (or subtracted) to the position any object which I want to force toward an actual edge of the device screen, since these will return the exact amount of pixels of letterbox space (the width or height of the letterbox bar region).
https://docs.coronalabs.com/api/library/display/screenOriginX.html
https://docs.coronalabs.com/api/library/display/screenOriginY.html
Just my personal preference. 
Brent
Good to know, its still an area I encounter issues with, so I’ll take a look at your preference and see if it works out better for me
Take away some of the guess work…
Thank you
I tried similar skins on both mac and PC, and i still seem to get the error. Here’s my config.lua:
If I’m being completely honest, I’ve been copy-pasting the exact same config.lua file (just changing fps), since I began using Corona back in February, as for why the width and height are what they are, I just trust that my prof knew what he was doing when he gave it to us on the first day :unsure:
local aspectRatio = display.pixelHeight / display.pixelWidth application = { content = { 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, } }Hi @sachinseem,
OK, can you please try a more simple one like this?
application = { content = { width = 800, height = 1200, scale = "letterBox", fps = 60, } }Let me jump in to this.
The “Modernizing the Ultimate Config.lua” tutorial had a goal of assuring that 0, 0 is the top, left corner and that display.contentHeight, display.contentWidth is the bottom, right corner. This won’t work for all games and apps. It’s good for positioning things around the edges of the screen or positioning things some relative distance away from center and the actual distance between object isn’t all that important. Think of a card game where the card stacks can be easily balanced and might be further apart on a phone and closer together on a tablet
The other option is to use the simple config.lua that Brent provided above, it requires more work to edge position items, but your objects will be the same distance apart. Think of Angry birds where the slingshot has to be a fixed number of pixels away from the pigs regardless of the device you’re on. If you use this config.lua, then display.actualContentHeight, display.actual.ContentWidth is the bottom, right corner and display.contentOriginY, display.contentOriginX represents the top, left corner. Anything positioned along the top or left edges that needs to stay a fixed distance from those edges requires you to add display.contentOriginX and display.originY to those coordinates. This can make the code a bit ugly, but it works effectively.
Consider (assuming a landscape app and a 320x480 content area):
local healthBar = display.newImageRect(“health.png”, 100, 25)
healthBar.x = 55
healthBar.y = 15
Regardless of device, the health bar will stay the same distance from other game elements. On a 16:9 shaped phone, there will be 44 extra pixels between the left edge and the health bar. On an iPad, it will be 5 pixels away from the left edge.
local healthBar = display.newImageRect(“health.png”, 100, 25)
healthBar.x = 55 + display.screenOriginX
healthBar.y = 15 + display.screenOriginY
With this code, regardless of the device, the bar will be 5 pixels away from the edge.
As someone who has used the dynamic aspect ratio a lot (it makes sense for my way of screen design), I’ve switched to using the simple config.lua on my recent projects and I’m just biting the bullet on adding display.screenOriginX/Y to everything and I’m pretty happy with the simple config.lua.
Rob
The shifting of elements to screen edges is usually for UI objects like menu bars, not for actual game level objects. Games like Angry Birds, where you scroll a larger level around, would not want to adjust the slingshot position based on the device aspect ratio, otherwise it could change the design and functionality of the entire level (distance of slingshot from targets).
For simplicity, I always localize my “screenOrigin” variables at the top of my file, and then I apply a math absolute value to them:
[lua]
local offsetX = math.abs( display.screenOriginX )
local offsetY = math.abs( display.screenOriginY )
[/lua]
Why the absolute value? Because then you have a convenient, positive number which you can add or subtract to any object which needs shifting to an edge (this assumes portrait orientation):
LEFT edge: subtract “offsetX”
RIGHT edge: add “offsetX”
TOP edge: subtract “offsetY”
BOTTOM edge: add “offsetY”
Easy, convenient, and consistently predictable. I have enough other challenges to tackle in my code than “making a mountain out of a mole hill” and over-complicating the config.lua.
Brent
Tried this, didn’t fix the issue in the pics I posted before.
I am seeing an error on my macOS simulator output that I don’t see on PC:
WARNING: Issue found in build.settings
WARNING: unrecognized key: settings.orientation.fps (number)
Can you post your “build.settings” content here?
settings = { orientation = { default = "portrait", supported = {"portrait"}, fps = 30, } }OK… “fps” doesn’t belong there. That goes in “config.lua”. You should also probably be supporting both “portrait” and “portraitUpsideDown” so people can turn the phone either way.
Fixed, error has disappeared. Still can’t figure out why some objects have their alignment offset on the macOS, I tested every other component and the game is fully functional, and if I change the code to fix the objects on mac, it then offsets it on PC. Tried switching to and from the different config formats to no avail.
Can you show me a bit of code from objects which aren’t aligning how you expect them to?
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 local RegFont = native.newFont("/fonts/RINGM\_\_\_.ttf",100) -- var.playerClass is whatever class the player has selected, pulled from the var.lua file -- This is aligning perfectly. local playerClass = display.newText(var.playerClass, screenRight-10, screenTop+75, RegFont) playerClass.anchorX = 1 playerClass.anchorY = 0 playerClass.fill = {0} -- After a few seconds, game replaces the class name with its icon -- This isn't aligning perfectly. (Showed in the pics earlier) classIcon = display.newImage("images/"..var.playerClass.."Icon.png", screenRight-10, screenTop+100) classIcon.anchorX = 1 classIcon.anchorY = 0