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
Related
Is there a bug in SKCameraNode when used with .AspectFill on devices where the aspect ratio of the SKScene does not match that of the devices view?
I have a minimal demo of the issue I see: an SKScene created in an SKS file, to be 768w x 1024h, filled with an image (also 768w x 1024h). It's loaded with .AspectFill. An SKLabel is positioned in the middle of the scene programmatically. The demo is simply the out-of-the-box iOS template for a SpriteKit game, with a background image added.
An iPad in Portrait (so 768w x 1024h) displays this fine. An iPhone 6+ in Portrait (414w x 736h) displays fine. An iPhone 5S (320w x 568h) displays fine.
If I add a camera to the scene, position it in the middle by setting its coordinates to (384, 512) in the SKS file and set the scene to use it, the iPad is fine but now the iPhones (and any other device with a aspect ratio other than 3:4) does NOT work. It displays the right-hand side of the scene. It is not centered. Screen shot from the iPhone below.
The camera being in the middle of the scene, should ALWAYS work.
I am currently using a work-around. When you use .AspectFill the sides of the scene are cropped by an amount - let's call it cropAmount - to fit on the narrower screen. The work-around is to move the camera left, so it is off-center by cropAmount, then the scene displays correctly.
The background image here is an #3x of a 768w x 1024h background for my game. I've put in green the cropAmount corresponding to the SKView for 9:16, and in red the scene bounds. Given the camera is set in the middle of the scene, same as the label and the pink dot in the middle of the image, why is the center of the view not also there?
If this is a bug, and I leave in my "fix" where I offset the camera by cropAmount, later updates could break production code running on devices.
Also I am not using .ResizeFill as it doesn't fix the camera node issue, and would also mean that the assets are incorrectly sized and positioned in the scene for the thousands of lines of code and dozens of SKS files I already have over 6 months of work.
Question has been edited. Originally I had my "fix" added as an extension but this just caused confusion so I have removed it.
I've created simple 7 seconds clop which uses standard plugin for FCPX: "Bold Fin" title.
While i am editing this clip - everything fits to the screen:
also everything is ok when i am starts to export this clip to the master file:
but when actual file is ready - it seems like it is cropped:
Could somebody please help to find a reason why my output actually cropped? And how fix this issue?
Judging by the image you provided, you have non-square pixels in your footage or in projects settings (or footage's aspect ratio isn't 16:9). I print-screened the image inside FCP's canvas and found that you have rectangular pixels stretched along X axis, instead of square ones.
Seemingly, FCPX trying to compensate pixel aspect ratio for FullHD export (par = 1.0, ar = 16:9), stretched pixels along Y axis, which led to cropping.
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 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
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.