I am having an issue with scaling between iPhone3g, iPhone 4 and iPhone 5. I have used the ultimate config file here http://www.coronalabs.com/blog/2012/12/04/the-ultimate-config-lua-file/ and I am setting my background image using:
bgimage = display.newImageRect("images/moonbase.png", 570, 360)
bgimage:setReferencePoint( display.CenterReferencePoint )
bgimage.x = _W / 2
bgimage.y = _H / 2
Part of the game I am developing the enemy follows a path, to draw this I created a line and used a bezier plugin. You will see from the following screenshots that the path and satelitte are in the wrong position. How can i get these to be the same across devices? Only zoomstretch seems to work but the images lose quality.
Screenshots: http://lukestirk.com/screen_resolution.png
My guess is that your bezier plugin should be made 'aware' of the
display.contentHeight
and fixed width=x,height=y settings should be removed from your config.lua file
Related
So I am trying to fit my 350x570 image file fully as a background. But it's not working no matter what I do. Here's my code:
display.setStatusBar(display.HiddenStatusBar)
local background = display.newImageRect("background.png", display.contentWidth, display.contentHeight)
background.x = display.contentCenterX
background.y = display.contentCenterY
and here's what I get:
As shown in the image, there are two black bars because it's not fitted properly. But I don't know why. The code seems ok so what's the problem?
The internal coordinate system of Corona SDK depends on the content area defined in config.lua file. Point (0,0) is positioned at the top-left corner of this content area. If you are using the default Config.lua file then point (0,0) may not be positioned on the top-left corner of the screen.
Tutorial on modernizing the config.lua
https://coronalabs.com/blog/2013/09/10/modernizing-the-config-lua/
Ultimate Config.lua file
https://gist.github.com/pkoperek/11156473
I am trying to make a math game but I have come into several problems. The first is that In the android emulator that comes with corona I have black space at the top and bottom. These are my files:
config.lua:
local aspectRatio = display.pixelHeight / display.pixelWidth
application = {
content = {
width = 320
height = 480
scale = "letterBox",
fps = 30,
},
}
build.settings:
local aspectRatio = display.pixelHeight / display.pixelWidth
application = {
content = {
width = 320
height = 480
scale = "letterBox",
fps = 30,
},
}
It shows my image correctly but I get black at the top and bottom. I read tutorials about these to files, but they are so complex. What is the easiest way to may these files work? The tutorials I read also tried to find each device that this app could be running on and makes the settings accordingly, but id like to be more cross-platform and not have to update the app every time their is a new size of device.
In regards to the black bars at the top and bottom, that is a side-effect of "letterbox" scaling.
Corona automatically scales your content so that it fills as much of the screen space as possible, WHILE maintaining aspect ratio of your original content. This means that it will scale the content up until it hits either the top/bottom edge or the left/right edge of the screen.
When it hits an edge, it stops scaling the content. That may result in the black bars you're seeing right now.
This tutorial here is the most comprehensive tutorial available.
That tutorial has a file (the ultimate config.lua file) that you can download and use in your app's build. Also found here!
I am making my first iphone game using corona sdk and would like it to run on as many devices as possible (phones + tablets). However I am not sure how to deal with different screen sizes and resolutions. I developed my game for the iPhone 5 using corona simulator and it works fine on that device. When I tried it on lower resolution devices like the iPhone 4 I get 2 black rectangles on each side. I tried creating 2 different backgrounds with different resolutions and added this in my config.lua:
imageSuffix = {
["#2x"] = 2
}
However this does not seem to change anything... I am not sure what height and width I should set in content in the config.lua file and what heights and widths I should set for the backgrounds. I am sorry if these questions are stupid, I am just starting.
Thanks in advance!
It sounds like you need to fully read up on config files and dynamic scaling.
The question is a little to broad as such I suggest you read this article about "the ultimate config/modernizing the config".
Some screens are wider while others are more narrow. If we take
resolution out of the equation, its easier to visualize the screens.
Corona makes it easy to take resolution out of the picture using
Dynamic Scaling. With Dynamic Scaling, you can use a common set of
screen coordinates and Corona will automatically scale the text and
graphics for different resolution screens. It can scale upwards or
downwards depending on your starting point. It also can substitute
higher resolution images when it needs to scale up. This is all
managed by a Lua file in your project folder called config.lua.
Since available resolutions vary considerably, it’s helpful to use the
same scale for each device. It doesn’t matter if you’re on an iPhone
3GS at 320×480 or a Retina iPad at 1536×2048, the location (0,0)
represents the top-left corner and (320,480), in vertical portrait
mode, is the bottom-right corner. The screen center is (160,240).
Each point, in this case, is one pixel on a lower-resolution device
like the 3GS, which has a native screen resolution of 320×480, while
each point is four pixels on a Retina iPad. Don’t worry about the math
— Corona will handle it for you.
Source: http://coronalabs.com/blog/2012/12/04/the-ultimate-config-lua-file/
This goes through the creation of a config file that fully utilize the dynamic scaling and image scaling.
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 = {
["#2"] = 1.8,
["#4"] = 3.6,
},
},
}
I am still new to lua and corona (3 days to be exact) and I'm trying to my objects on the screen using multiple devices. From what I understand, to make the objects automatically reposition themselves, I need to get the screen size and do some calculation to it to make the necessary adjustment. Here's a sample of what I'm trying to do:
obj1 = display.contentWidth*0.50
This will then put my object to the middle of the screen but there are instances wherein this doesn't seem effective so my question is, what is a better approach to automatically reposition my objects? Especially objects that are no longer in the center of the screen.
I'm doing it in a different way. I think this may help you. As my opinion, just create multiplier values for width and height(according to which simulator you are coding in), and multiply your each width or height parameter with this(as below):
--------------------------------------------------------------------------
-- choosing xMultiplier and yMultiplier values --
--------------------------------------------------------------------------
local xMultiplier = display.contentWidth/320
local yMultiplier = display.contentHeight/480
--[[ I used 320 here because i'm using iPhone Simulator
(320 is the width of the simulator you are coding in)
I used 480 here because i'm using iPhone Simulator
(480 is the height of the simulator you are coding in)--]]
--------------------------------------------------------------------------
-- creating background and positioning it --
--------------------------------------------------------------------------
local bg = display.newImageRect("bg.png",320*xMultiplier,480*yMultiplier)
bg.x = 160*xMultiplier ; bg.y = 240*yMultiplier
--------------------------------------------------------------------------
-- creating object and positioning it --
--------------------------------------------------------------------------
local rect = display.newImageRect(0,0,50*xMultiplier,50*yMultiplier)
rect.x = 160*xMultiplier ; rect.y = 100*yMultiplier
--------------------------------------------------------------------------
Note: If you are using config.lua file in your project, this may not work.
Pros: This needs only one image.
Cons: It may affect the clarity of images in devices with high resolution. So choose an image with suitable resolution.
keep coding... :)
The way I do this is based off of the principle that things are going to positioned based on a side of the device or from the center. I'm going to use a horizontal app for this, btw.
Somethings need to be anchored to the left or right edges. Somethings need anchored to the top of the screen and other things need to be some distance away from center.
Consider this image:
The Home Icon and settings icon need to be a few pixels away from the left edge. They also need to be a few pixels down from the top. I would position these using a fixed number:
homeIcon.x = 32
homeIcon.y = 32
gearIcon.x = 32
gearIcon.y = 64 -- or whatever numbers they really are.
The score on the right needs to be a fixed distance away from the right edge and top:
scoreText.x = display.contentWidth - 64
scoreText.y = 32
The Turkey on the bottom's position shouldn't change based on the shape of the device's width, but could move based on the height of the device.
turkey.x = display.contentCenterX
turkey.y = display.contentHeight - 64
On an iPad which is less wide than an iPhone in this example, the home, gear and score buttons will end up closer to center. On an iPhone 5 or a wide screen Android, they spread out.
The example above doesn't really help on some of the centering ideas. I don't have a screen shot for this, but lets say you were laying out a login form for a game where you are collecting the Username and password and you had a submit button. You could position them like:
usernameField.y = display.contentCenterY - 64
passwordField.y = display.contentCenterY
submitButton.y = display.contentCenterY + 64
Then regardless of the height of the device, those UI elements would stay the same distance from the center making your form look good. If you used a fixed distance from the top, the form would move based on the size of the device. Here their positions stay the same.
I made an iPhone game a few months ago, and am now trying to port it as a universal app to both the iPad and iPhone 5 with Cocos2D. I was wondering if there was a simple-ish way to determine where an object should be placed based on the device running the game.
I could use if statements to figure out which device the game is running on, so when I get the correct sized images for the device I could have separate positions for each object, but it seems like there would be a maths formula which would allow me to use a lot less code. Obviously something like a full screen background is very simple, because it just needs to be centred with:
[background setPosition:CGPointMake(screenSize.width/2,screenSize.height/2)];
I haven't a clue how to adapt a button that would be X = 144 & Y = 330 on the old 3.5inch, 640 by 960 resolution iPhone to an iPad or iPhone 5 resolution.
I'm willing to use a more recent version of iOS if it will make my life easier, but because I'm not using any of Apple's objects I don't know if that is possible.
Maybe this isn't even possible because the button will be different sizes for the iPhone and iPad version, but I thought I would ask.
yeah, i am usually facing the same problem,
but if it is just a static objects placement
i would have relative coordinates instead of absolute for every object
and then use screen sizes to place them correctly
so you might want to use a function like:
-(CGPoint) relativeToScreen:(CGPoint) p {
return ccp(screenSize.width * p.x, screenSize.height * p.y)
}
where 0.0 <= p.x =< 1.0 and the same for p.y
and don't forget about your anchorPoint, because the node position is based on it as well
and i hope you have discovered that cocos2d already does image choosing instead of you,
you just have to set right suffixes for your images: -hd, -ipad, -ipadhd
For iphone5 resolution, I position hud buttons relative to the screen dimensions. Very similar to what you are doing for the background. So for example, a pause button I want in the top left I would position like this:
[pauseButton setPosition:CGPointMake(0.0f + 30.0f, screenSize.height - 50.0f)];
For ipad it gets really tricky. The lazy way which I have implemented is to play around with the content scale factor and zoom everything up and have "dead" borders to compensate for the ipad's screen ratio. Not the best, but at least you can re-use all the same assets for the ipad.