Any 640px wide device will pick up the -568h@2x prefix. The scale is anything greater than that scale factor. The iPhone 4/4s are a 2.0 scale factor which is greater than 1.7775.
thats what i thought but its not loading my 568 file all im getting is regular images and @2x images
just checked after the above change and now im getting regular and 568 but not 2x
Right, the @2x will only load on devices from 480px to 567px wide. 568px wide and greater up to 959px wide will get your -568h@2x images. 960px wide and higher use @4x images.
This doesn’t look at the height only the width. Your iPhone 5 is going to pick up the same images as the iPhone 4 because they are both 640px wide devices.
so if i want different images for iphone3, iphone4, iphone5 the config will select iphone3 / iphone4 and load correct image and if i want a different image for iphone5 i will need to detect the iphone5 and switch to that image in my code?
Corona deals with dynamic scaling so that your iPhone 3 can use a lower resolution image than your retina iPhones. So yes, if you don’t have the ability to use backgrounds that have bleed areas, then yes, you need to test for tall devices and load in accordingly.
thx
Hi there, thanks for this! 
I am new to Corona, and I was wondering if anyone would be able to tell me why my background image isn’t scaling to the entire screen? It only takes up the top left corner of the screen instead of scaling to fit.
I used this config, and also it does same thing with the ultimate config. Here is my code (not sure if I need the set reference point code, I found it on one of the pages that talked about how to do dynamic image scaling). And, I made back.png 360x570px and I also have a back@2x.png and a back@4x.png like how the post on ultimate config describes.
Thanks in advance!
[lua]
local group = self.view
local background = display.newImageRect( “back.png”, 360, 570 )
background:setReferencePoint( display.CenterReferencePoint )
background.x = display.contentCenterX
background.y = display.contentCenterY
group:insert( background, true )
[/lua]
Can you post a screen shot? Are you seeing your entire image, just scaled down or are you only seeing the bottom right quarter of the image?
Can you post your config.lua too.
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.
you saved my bacon, aukStudios!!! this was the first solution that actually worked for my project which needed to display on all i devices. when I dropped this into the beginning of Rob’s ultimate lua code…:
if ( string.sub( system.getInfo(“model”), 1, 2 ) == “iP” and display.pixelHeight == 1134 ) then
device.width = 640 * (display.pixelHeight/display.pixelWidth>1.5 and 1 or 1.5/(display.pixelHeight/display.pixelWidth))
device.height = 1134 * (display.pixelHeight/display.pixelWidth<1.5 and 1 or (display.pixelHeight/display.pixelWidth)/1.5)
device.scale = “letterbox”
…my app instantly loaded up in perfect proportion. I just had to add another design element at the bottom to cover the gap, but it is a beauiful thing! THANK YOU!!!
If I can put in my two cents (pure speculation here)…
This proposed code would end up possibly giving widths or heights in fractional pixels. Though that may be okay for the simulator and popular devices, it might (?) cause problems on other devices. How about this minor change, which would round up any fractional heights/widths to the next highest pixel (possibly giving a fractional “bleed” offscreen, which I think would be better than a fractional pixel of empty space) and eliminate the possibility of running into fractional pixel widths or heights:
local aspectRatio = display.pixelHeight/display.pixelWidth application = { content = { width = aspectRatio\>1.5 and 320 or math.ceil( 480/aspectRatio ), height = aspectRatio\<1.5 and 480 or math.ceil( 320\*aspectRatio ), scale = "letterBox", fps = 30, imageSuffix = { ["@2x"] = 1.5, ["@4x"] = 3.0, }, }, }@joe413, I see where you’re coming from, it’s a potentially good suggestion. I’d be curious if you’ve encountered a device and use case where this actually makes a difference. All of the major aspect ratios I’m aware of (3:2, 4:3, 16:9, 16:10, and 5:4) would give integer results, but maybe there are others that wouldn’t.
That said, I wonder, as you do, whether a non-integer result would make any observable difference.
- Andrew