I been working with corona for a few and I wanted to know how to make a sprite (using texture packer) and set it as a background of my app. I also want it to fit as many devices as it can without any of the sprite content being cropped out. In short, I want the sprite to be a background fitting the entire screen without losing any of the sprite's content
I hope this help you:
local _W = display.actualContentWidth
local _H = display.actualContentHeight
local bg = display.newImage( 'bg.jpg' )
bg.x, bg.y = display.contentCenterX, display.contentCenterY
local mode = 'inside'
-- the image will fill the device width/height exactly
if mode == 'stretch' then
bg.width, bg.height = _W, _H
-- the image will be scaled proportionally to fit inside the device width/height
elseif mode == 'inside' then
local scale = math.min( _W / bg.width, _H / bg.height )
bg:scale(scale, scale)
-- the image will be scaled proportionally to completely fill the area,
-- allowing portions of it to exceed the bounds defined by device width/height
elseif mode == 'outside' then
local scale = math.max( _W / bg.width, _H / bg.height )
bg:scale(scale, scale)
end
Related
I am trying to create a drag-able square, which changes its transparency the closer it goes to the center of the screen (from being invisible in the sides to being completely visible in the center, like in the pictures below)
you can use alpha and transition to achieve that try below code , It should work .. below code changes square opacity from 0 to 100% over a time period of 1.5 seconds while moving
display.setDefault( "background", 80/255 )
local square = display.newRect( 0, display.contentHeight/2, 100, 100 )
square.anchorChildren = true
square:setFillColor( 255,255,0 )
square.alpha = 0
local w,h = display.contentWidth, display.contentHeight
transition.moveTo( square, { x = w/2, y = h/2, time=1500 , alpha = 1.0} )
So I tried everything an can't seem to get the image to take up the full screen and be centered. I have attached the image, and how it looks when I run on corona.
I tried this and got what I attached:
local background = display.newImageRect( "bg.png",
display.contentCenterX, display.contentCenterY)
Thanks in advance for the help!
background image
how it looks on corona
example your config.lua is like below
application = {
content = {
width = 640,
height = 960,
scale = "letterBox",
fps = 30,
},
}
then use like below to display image in fullscreen
local background = display.newImageRect( "bg.png",
640 , 960 )
// then center it like below
background.x = display.contentCenterX
background.y = display.contentCenterY
According to documentation you need to pass width and height, not x and y. Try this:
--take screen width and height, so image can take whole screen
local width = display.contentWidth
local height = display.contentHeight
local background = display.newImageRect( "bg.png", width, height)
--setting coordinates to center
background.x = display.contentCenterX
background.y = display.contentCenterY
Edit: If you are using letterbox scaling mode you should ajust width and height
width = display.contentWidth - 2 * display.screenOriginX
height = display.contentHeight - 2 * display.screenOriginY
If you want preserve aspect ratio of image try
local _CX = display.contentCenterX
local _CY = display.contentCenterY
local imgW = 440 -- width of image
local imgH = 623-- height of image
local imgR = imgH / imgW
local screenW = display.contentWidth - 2 * display.screenOriginX
local screenH = display.contentHeight - 2 * display.screenOriginY
local screenR = screenH / screenW
local factor = imgR > screenR and screenW / imgW or screenH / imgH
local background = display.newImageRect( 'bg.jpg', imgW * factor, imgH * factor )
background .x, background .y = _CX, _CY
I tested code against letterbox mode.
Other solution from Corona forum How to make an image full screen?:
if you want to fill the screen with an image, it's better to make the
image larger than any potential screen aspect ratio, then accept some
amount of clipping on certain screens when the image goes beyond the
edges.
I am new in Corona SDK and I have a problem,
when I place an image at the top of the screen, there is an empty space, how can I make it disappear?
thanks!
It all depends on which device you are running an app. Some of them are taller, some are wider. So there's a value display.screenOriginY which has to be added to a y value if you place an object in a distance from top of screen.
Here's more info:
https://docs.coronalabs.com/api/library/display/screenOriginY.html
In your config.lua file, you can make Corona fill the entire device screen by setting scale = "adaptive". You can read more about adaptive content scaling here
When you use this adaptive scaling, the coordinate (0,0) will be the upper left of the device screen. However, the width and height will vary from device to device and you have to take this into account in your code. You can get these parameters using display.contentWidth and display.contentHeight.
Try (point (0, 0) is located in upper top corner od screen)
--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,
},
},
}
I want to make a moon rotating around a planet, or something along that analogy. So is there something I can call for physics.setGravity(0,0) that changes the position that the gravity pulls towards, particularly assigning that to be a physics body? If not, simply a specific x-y coordinate will be fine.
local moon = display.newImage ("moon.png")
physics.addBody(moon, {bounce=0, density=1.0})
local earth = display.newImage ("earth.png")
physics.addBody(earth, {bounce=0, density=1.0})
Thanks
Instead of playing around with the setGravity option, I think you should just rotate the images using something like this:
local physics = require("physics")
physics.start()
physics.setGravity(0, 0)
display.setStatusBar( display.HiddenStatusBar )
local background = display.newImage( "space.png", true )
background.x = display.contentWidth / 2
background.y = display.contentHeight / 2
local earth = display.newImage( "earth.png" )
earth.x = 100; earth.y = 200
earth.xScale = 0.7
earth.yScale = 0.7
physics.addBody( earth, {radius=40 } )
earth.bodyType = "static"
local moon = display.newImage( "moon.png", 40, 40)
moon.x = earth.x + 80
moon.y = earth.y
moon.xScale = 0.3
moon.yScale = 0.3
moon.rotation = 100
physics.addBody( moon, {radius=10 } )
moon.bodyType = "dynamic"
myJoint = physics.newJoint( "pivot", moon, earth, earth.x, earth.y )
local orbit = function( event )
moon.rotation = moon.rotation + 1.5
end
Notice that I am not really mucking about with setGravity, but the speed of the rotation is defined in the orbit function.
The above code assumes you just have image files to represent your planetary bodies. If so, you will have to play around with the constants above (earth.x and earth.y, scaling values, etc) to make the whole system LOOK right for the images you choose.
Good luck!
No - you can change gravity but it will pull/push only in the direction you have it set to, never to any point. You'd likely use a sensor (invisible) around your earth and apply force to draw things towards it when the collision event between the moon/other and sensor began.
Can someone explain why the rectangle doesn't spin here? This is Lua code and I'm using Corona SDK.
That is, I've tried to set up a rectangle with it's centre of mass off-center, and then apply a force to it in the middle, expecting it to spin as it's center of mass is off....
display.setStatusBar( display.HiddenStatusBar )
-- Setup
local screenCenterX, screenCenterY = display.contentWidth/2, display.contentHeight/2
-- Create Object
local myRect = display.newRect(0, 0, 30, 90)
myRect.strokeWidth = 2
myRect:setFillColor(140, 140, 140, 0)
myRect:setStrokeColor(180, 180, 180)
myRect:setReferencePoint(display.CenterReferencePoint)
myRect.x, myRect.y = screenCenterX, screenCenterY
-- Apply Physics
local physics = require("physics")
physics.start()
physics.setGravity(0,0)
physics.addBody( myRect, "kinimatic", { friction=0.5, bounce=0.1, radius = 45 } )
-- Redefine Centre of Mass (what I'm trying to get right)
myRect.xOrigin, myRect.yOrigin = screenCenterX, screenCenterY - 100
-- Replace myRect to the center as setting the xOrigin/yOrigin seems to have moved it
myRect.x, myRect.y = screenCenterX, screenCenterY
-- Apply Force
timer.performWithDelay(3000,
function(event)
myRect:applyForce(5,0, screenCenterX, screenCenterY)
-- WHY DOES THIS NOT SPIN THE OBJECT???
-- Centre of gravity has been change so shouldn't it rotate now?
-- That is, trying to simulate applying a force to an object who's centre of mass is NOT in
-- the center, and then see it spin.
end
)
The variables xOrigin and yOrigin are used only to move a object, those variables cannot affect physics at all, and they are not really a "origin" (they are the x/y position of a object in relation of the parent "x/yOrigin" variable).
To do a unbalanced physics object, you need to do it with the shapes, so you will have to create two shapes (thus you cannot use automatic shapes, you will have to use polygon), with one of them being heavier than the other to simulate the off-center mass.
For example a rectangle with 100 units in length, you make 50 units weight 1, and the other 50 units weight 2, the result would be the center being at x 75 more or less (my math may be wrong here).