Thanks for responding! Full image, scaled down. :-S
config.lua is exactly same as the one in this post (also I’ve tried using the ultimate config.lua from your post a while back).
Hi @chris841, can you verify the image sizes of your three background images and make sure that the @2x and @4x images are actually 2X and 4X the size of 360x570, i.e. 720x1140 and 1440x2280?
I’d really like for you to post your config.lua even though it’s the same as in the blog. There may still be an oops in there somewhere.
Hi, I checked and they are right resolution (I actually took the 4x and reduced it 50% twice to get the others).
Here is config.lua and main.lua and one of the view lua files. I also have view_about.lua, view_settings.lua, and view_timer.lua, which are currently all the same code from the tab_Bar sample code.
config.lua:
local aspectRatio = display.pixelHeight/display.pixelWidth application = { content = { width = aspectRatio\>1.5 and 320 or 480/aspectRatio, height = aspectRatio\<1.5 and 480 or 320\*aspectRatio, scale = "letterBox", fps = 30, imageSuffix = { ["@2x"] = 1.5, ["@4x"] = 3.0, }, }, }
main.lua:
----------------------------------------------------------------------------------------- -- Project: Test App -- Description: -- -- Version: 1.0 -- -- main.lua -- ----------------------------------------------------------------------------------------- display.setStatusBar(display.HiddenStatusBar) -- include Corona's "widget" library local widget = require "widget" local storyboard = require "storyboard" local clock = display.newGroup() local background = display.newImageRect( "back.png", 360, 570 ) clock:insert( background, true ) -- event listeners for tab buttons: local function onTimerView( event ) storyboard.gotoScene( "view\_timer" ) end local function onSettingsView( event ) storyboard.gotoScene( "view\_settings" ) end local function onAboutView( event ) storyboard.gotoScene( "view\_about" ) end -- create a tabBar widget with 3 buttons at the top of the screen print ("Display Width: " .. display.contentWidth) -- table to setup buttons local tabButtons = { { width = 24, height = 24, --baseDir = "media", defaultFile = "btn\_timer.png", overFile = "btn\_timer\_down.png", onPress = onTimerView, selected = true }, { width = 24, height = 24, --baseDir = "media", defaultFile = "btn\_settings.png", overFile = "btn\_settings\_down.png", onPress = onSettingsView }, { width = 24, height = 24, --baseDir = "media", defaultFile = "btn\_about.png", overFile = "btn\_about\_down.png", onPress = onAboutView }, } -- create the actual tabBar widget local tabBar = widget.newTabBar{ --left = 0, --top = 0, --background = "btn\_bar\_background.png", height = 50, top = display.contentHeight - 50, -- 50 is default height for tabBar widget buttons = tabButtons } onTimerView() -- invoke first tab button's onPress event manually
view_settings.lua:
----------------------------------------------------------------------------------------- -- -- view\_settings.lua -- ----------------------------------------------------------------------------------------- local storyboard = require( "storyboard" ) local scene = storyboard.newScene() ----------------------------------------------------------------------------------------- -- BEGINNING OF YOUR IMPLEMENTATION -- -- NOTE: Code outside of listener functions (below) will only be executed once, -- unless storyboard.removeScene() is called. -- ----------------------------------------------------------------------------------------- -- Called when the scene's view does not exist: function scene:createScene( event ) local group = self.view -- create a white background to fill screen local bg = display.newRect( 0, 0, display.contentWidth, display.contentHeight ) bg:setFillColor( 0 ) -- black -- create some text local title = display.newText( "Settings", 0, 0, native.systemFont, 32 ) title:setTextColor( 255 ) -- white title:setReferencePoint( display.CenterReferencePoint ) title.x = display.contentWidth \* 0.5 title.y = 125 local summary = display.newText( "Loaded by the first tab 'onPress' listener\n— specified in the 'tabButtons' table.", 0, 0, 300, 300, native.systemFont, 14 ) summary:setTextColor( 255 ) -- white summary:setReferencePoint( display.CenterReferencePoint ) summary.x = display.contentWidth \* 0.5 + 10 summary.y = title.y + 215 -- all objects must be added to group (e.g. self.view) group:insert( bg ) group:insert( title ) group:insert( summary ) end -- Called immediately after scene has moved onscreen: function scene:enterScene( event ) local group = self.view -- Do nothing end -- Called when scene is about to move offscreen: function scene:exitScene( event ) local group = self.view -- INSERT code here (e.g. stop timers, remove listenets, unload sounds, etc.) end -- If scene's view is removed, scene:destroyScene() will be called just prior to: function scene:destroyScene( event ) local group = self.view -- INSERT code here (e.g. remove listeners, remove widgets, save state variables, etc.) end ----------------------------------------------------------------------------------------- -- END OF YOUR IMPLEMENTATION ----------------------------------------------------------------------------------------- -- "createScene" event is dispatched if scene's view does not exist scene:addEventListener( "createScene", scene ) -- "enterScene" event is dispatched whenever scene transition has finished scene:addEventListener( "enterScene", scene ) -- "exitScene" event is dispatched whenever before next scene's transition begins scene:addEventListener( "exitScene", scene ) -- "destroyScene" event is dispatched before view is unloaded, which can be -- automatically unloaded in low memory situations, or explicitly via a call to -- storyboard.purgeScene() or storyboard.removeScene(). scene:addEventListener( "destroyScene", scene ) ----------------------------------------------------------------------------------------- return sceneWhat is this line of code outputting?
print ("Display Width: " … display.contentWidth)
Hi there, it prints 320 on droid and iphone and 360 on something like ipad.
Is there any reason to think dynamic scaling is not supported in the free version? :-s
Also I’m using SDK version 2013.1137 (2013.6.7)
Actually you are never centering your background in main.lua. Above you show some code where you are centering your background, but it appears to have some storyboard scene code in it like it’s coming from a storyboard scene and not your main.lua. I think your image is the right size, but it’s being drawn with the center of the image at 0,0.
Try dropping these two lines:
background.x = display.contentCenterX
background.y = display.contentCenterY
After you insert the background into the group called “clock”.
Cool it worked! Thanks! 
Oddly I did have those 2 lines in there, but before the insert call, based on an example I saw somewhere online. :-S
I see that doing it before doesn’t center it, but doing it after does.
The before or after the insert into the group doesn’t really matter. Something else may have been going on at the time.
Any of my modules in the code exchange should take into account the screen origin
Right, good modules do. :-) But the ChartBoost module, currently in beta, doesn’t yet seem to.
- Andrew
The code is a little cut off for me, so I’m having a little trouble following the math.
One of the key’s for the ultimate config.lua was to deal with the iPad’s by making them 360px instead of 320px. This keeps the center of the screen in the 320x480 pixel range I’m assuming that the math does that?
Hi Rob,
Yes, the math does do that – for iPads, it gives a width of 360 and a height of 480.
Basically, what the math does in words is this:
-
If the device has an aspect ratio that’s taller than 3:2, then it leaves the width at 320, and it increases the height from 480 to the value that matches the device aspect ratio (e.g., 568 for an iPhone 5)
-
If the device has an aspect ratio that’s squatter than 3:2, then it leaves the height at 480, and it increase the width from 320 to the value that matches the device aspect ratio (e.g., 360 for an iPad)
I used 320x480 as my base coordinate system (i.e., my lowest resolution images target this size, my placement of images uses content coordinates based on this size, etc.), but it doesn’t have to be. In the example above, one could replace 320 with 768, replace 480 with 1024, and replace 1.5 with 1.33333 (or 4/3, to avoid rounding), and it’ll work fine, but with 768x1024 as the “base” coordinate system.
- Andrew
It looks like it simplifies things, especially for business type apps that typically have responsive design?
But the math is really *woosh* for me. Ultimate config file itself is easier to understand. Could you be bothered to put line by line comments in the code? Specifically line 6 and 7?
Sure, here’s an annotated version.
[lua]
application =
{
content =
{
– The aspect ratio of the device we’re running on is display.pixelHeight/display.pixelWidth. (We can’t use display.contentHeight/display.contentWidth as the aspect ratio, because it’s the content area that we’re now about to define! Also, we can’t save the aspect to a variable, because config.lua is just a table. So we’ll have to repeat it a few times.)
– This example uses a base size of 320x480, which is an aspect ratio of 1.5. One could modify this example to use other base sizes by simply replacing the 320, 480, and 1.5s with some other values
– The content width will be 320, our base value, *unless* the device we’re running on has a squatter aspect ratio, i.e., an aspect ratio *below* 1.5. In that case, we’ll keep the height constant at 480, and we’ll make the width wider than 320 so that the aspect ratio is the squat ratio. What should the width be? We’ll take 320 and multiply it by the ratio of our assumed aspect ratio (1.5) and the device’s actual aspect ratio
width = 320 * (display.pixelHeight/display.pixelWidth>1.5 and 1 or 1.5/(display.pixelHeight/display.pixelWidth)),
– The content height will be 480, our base value, *unless* the device we’re running on has a taller aspect ratio, i.e., an aspect ratio *above* 1.5. In that case, we’ll keep the width constant at 320, and we’ll make the height taller than 480 so that the aspect ratio is the tall ratio. What should the height be? We’ll take 480 and multiply it by the ratio of the device’s actual aspect ratio and our assumed aspect ratio (1.5)
height = 480 * (display.pixelHeight/display.pixelWidth<1.5 and 1 or (display.pixelHeight/display.pixelWidth)/1.5),
– We’re using letterbox scaling
scale = “letterbox”,
imageSuffix =
{
["@2x"] = 1.5,
["@4x"] = 3.0,
},
},
}
[/lua]
To help the math challenged, you could put:
local aspectRatio = display.contentHeight / display.contentWidth
at the top, and make the code a bit more understandable.
can you make the line shorter so its not cut off
Sure, it’s not cut off in my browser, but I guess it is on some.
And you’re right Rob. For some reason I assumed config.lua was special and couldn’t handle any code aside from the application table.
[lua]
local aspectRatio = display.pixelHeight/display.pixelWidth
application =
{
content =
{
width = 320 * (aspectRatio>1.5 and 1 or 1.5/aspectRatio),
height = 480 * (aspectRatio<1.5 and 1 or aspectRatio/1.5),
scale = “letterbox”,
imageSuffix =
{
["@2x"] = 1.5,
["@4x"] = 3.0,
},
},
}
[/lua]
Here’s an equivalent way to do the math that’s probably even easier to understand.
[lua]
local aspectRatio = display.pixelHeight/display.pixelWidth
application =
{
content =
{
width = aspectRatio>1.5 and 320 or 480/aspectRatio,
height = aspectRatio<1.5 and 480 or 320*aspectRatio,
scale = “letterbox”,
fps = 60,
imageSuffix =
{
["@2x"] = 1.5,
["@4x"] = 3.0,
},
},
}
[/lua]
removed to not cause confusion