Parallaxing

So I have this code

  
-- create new parallax scene  
local myScene = parallax.newScene(  
{  
 width = 1450,  
 height = 500,  
 bottom = 320, -- So the bottom lines up with the bottom of the screen  
 left = 0,  
 repeated = false -- Optional, repeated defaults to false  
} )  
  
  
-- repeated grass foreground  
myScene:newLayer(  
{  
 image = "grass.png",  
 width = 410, -- This is dimensions of the image  
 height = 62,  
 bottom = 320, -- Sometimes it makes sense to use bottom/left  
 left = 0,  
 speed = 1.4,  
 repeated = "horizontal" -- You can choose "horizontal" "vertical" or "both" directions to repeat  
} )  
  
  
-- repeated cloud layer  
myScene:newLayer(  
{  
 image = "clouds.png",  
 width = 629,  
 height = 61,  
 top = -216, -- Sometimes it makes sense to use top/left  
 left = 0,  
 speed = 1.2,  
 repeated = "horizontal"  
} )  
myScene:newLayer(  
{  
 image = "clouds2.png",  
 width = 629,  
 height = 161,  
 top = -206, -- Sometimes it makes sense to use top/left  
 left = 0,  
 speed = 0.9,  
 repeated = "horizontal"  
} )  
-- left-most hills  
local leftHills = myScene:newLayer(  
{  
 image = "hills\_left.png",  
 width = 500,  
 height = 188,  
 bottom = 320,  
 left = 0,  
 speed = 1 -- If speed is not defined, it will default to (1 / layer index)  
} )  
  
-- center hills  
local centerHills = myScene:newLayer(  
{  
 image = "hills\_center.png",  
 width = 502,  
 height = 182,  
 bottom = 320,  
 left = leftHills.width, -- Start these hills at the end of the left hills  
 speed = 1  
} )  
  
-- right hills  
myScene:newLayer(  
{  
 image = "hills\_right.png",  
 width = 500,  
 height = 212,  
 bottom = 320,  
 left = leftHills.width + centerHills.width,  
 speed = 1  
} )  
  
-- repeated horizon background  
local ground = myScene:newLayer(  
{  
 image = "ground.png",  
 width = 480,  
 height = 106,  
 bottom = 320,  
 left = 0,  
 speed = 0.6,  
 repeated = "horizontal"  
} )  
-- repeated sky background  
local sky = myScene:newLayer(  
{  
 image = "sky.png",  
 width = 480,  
 height = 500,  
 top = -180,  
 left = 0,  
 speed = 1,  
 repeated = "horizontal"  
} )  
  
  
-- add a mountain to the background  
local mountain = display.newImageRect( "mountain.png", 618, 321 )  
  
myScene:insertObj( mountain, ground ) -- The mountain is now a part of the ground layer  
  
mountain:setReferencePoint( display.BottomLeftReferencePoint )  
mountain.x = 240  
mountain.y = 250  
--floors  
-- add a mountain to the background  
local floors = display.newImageRect( "Ground1.png", 1002, 40 )  
  
myScene:insertObj( floors, ground ) -- The mountain is now a part of the ground layer  
  
floors:setReferencePoint( display.BottomLeftReferencePoint )  
floors.x = -840  
floors.y = 150  
  
------------------------------------------------  
-- Functions  
------------------------------------------------  
local function onTouch( event )  
  
 local phase = event.phase  
  
 if phase == "began" then  
 -- set scene to 'focused'  
 display.getCurrentStage():setFocus( myScene, event.id )  
 -- store location as previous  
 myScene.xPrev = event.x  
 myScene.yPrev = event.y  
  
 elseif phase == "moved" then  
 -- move scene as the event moves  
 myScene:move( event.x - myScene.xPrev, event.y - myScene.yPrev )  
 -- store location as previous  
 myScene.xPrev = event.x  
 myScene.yPrev = event.y  
  
 elseif phase == "ended" or phase == "cancelled" then  
 -- un-focus scene  
 display.getCurrentStage():setFocus( myScene, nil )  
  
 end  
  
 return true  
  
end  
--------------------------------------------  
-- Events  
--------------------------------------------  
myScene:addEventListener( "touch", onTouch )  
  
--timer.performWithDelay( 3000, function() print( collectgarbage("count"), system.getInfo("textureMemoryUsed") ) end, 0 )  
  

I’ve been trying to figure out how to add my existing code for the floors to it but to no avail. In the code above I added one floor but it seems to be in the background. I want to basically just overlay the parallax with my preset floor layout (code below).

local floor = display.newImageRect("Ground1.png", 1000, 50)  
group:insert(floor)  
floor.x = -220; floor.y = 240  
  
physics.addBody(floor, "static", {density=3,friction=3,bounce=0})  
floor.name = "floor"  
  
local floor = display.newImageRect("Ground1.png", 1050, 50)  
group:insert(floor)  
floor.x = -130; floor.y = 460  
  
physics.addBody(floor, "static", {density=3,friction=3,bounce=0})  
floor.name = "floor"  
  
local floor = display.newImageRect("Ground1.png", 1000, 50)  
group:insert(floor)  
floor.x = 975; floor.y = 460  
  
physics.addBody(floor, "static", {density=3,friction=3,bounce=0})  
floor.name = "floor"  

Any help would be appreciated. New to the whole parallaxing thing.

Thanks,
FL
[import]uid: 72845 topic_id: 35475 reply_id: 335475[/import]

Hey, you might try out my library, Perspective.

http://developer.coronalabs.com/code/perspective

You’d have too rewrite a lot of your code, but once you’ve done that, it would be a lot easier to continue with.

C [import]uid: 147322 topic_id: 35475 reply_id: 141066[/import]

Hey, you might try out my library, Perspective.

http://developer.coronalabs.com/code/perspective

You’d have too rewrite a lot of your code, but once you’ve done that, it would be a lot easier to continue with.

C [import]uid: 147322 topic_id: 35475 reply_id: 141066[/import]

I find all of the parallax-assistance code in the Code Exchange to be very inflexible, and not specifically intuitive. Are you trying to make a platforming “Mario” type game where the foreground and background move as the player moves, or are you just making an app where dragging the screen around changes the location of the background/foreground objects?

Either way, I’d suggest a Runtime event listener which moves the objects based on one static object you created. For instance:

[lua]
local floor = display.newImageRect(“Ground1.png”, 1000, 50)
group:insert(floor)
floor.x = -220; floor.y = 240

physics.addBody(floor, “static”, {density=3,friction=3,bounce=0})
floor.name = “floor”

local floor = display.newImageRect(“Ground1.png”, 1050, 50)
group:insert(floor)
floor.x = -130; floor.y = 460

local guyBackground1 = display.newRect(0,0,90,32)
guyBackground1:setFillColor(0,0,255)
group:insert(guyBackground1 )
guyBackground1.x =-200; guyBackground1.y=440

local guy = display.newRect(0,0,32,32)
group:insert(guy)
guy.x =-200; guy.y=440

local guyBackground2 = display.newRect(0,0,120,32)
guyBackground2:setFillColor(0,255,0)
group:insert(guyBackground2 )
guyBackground2.x =-200; guyBackground2.y=440

local function testParallax()
guyBackground1.x = guy.x/2
guyBackground2.x = guy.x/10
guyBackground1.x = guy.y/2
guyBackground2.x = guy.y/10
end
Runtime:addEventListener(“enterFrame”, testParallax)
[/lua]

Obviously this is a super-simple example but it might be enough to get you started. Let me know if you have any questions! [import]uid: 135394 topic_id: 35475 reply_id: 142093[/import]

Perspective does just about that exactly, but all under the hood.

It’s a library for all things camera - related.

C [import]uid: 147322 topic_id: 35475 reply_id: 142105[/import]

Going for a mario style game. Everything I’ve looked at though basically points to using a program in conjunction with Corona. Not really sure what’s going on though because I started using corona about a year ago just trying to learn the code but every time I finish something IE my sprite or parallaxing I’m told I should use a different code…Makes me think I should just learn C and use xcode. Ugh frustration!

[import]uid: 72845 topic_id: 35475 reply_id: 142163[/import]

@Focus Lab:
You can use whatever you want. I simply posted that because Perspective is very easy to use - whatever is comfortable for you, you can use, though.

C

PS: Don’t learn C+XCode. I tried it, and I don’t think I’ll try it again :slight_smile: [import]uid: 147322 topic_id: 35475 reply_id: 142185[/import]

@Focus, who keeps telling you to use different code? You’ve got to look at development like skinning a cat: More than one way to do it. In your Mario-style game, what issues are you encountering? At what point of development are you? I think Caleb would agree that taking advantage of the many tutorials that are out there would get you to a point where you could make your game unique.

http://www.tandgapps.co.uk/resources/ [import]uid: 135394 topic_id: 35475 reply_id: 142187[/import]

I find all of the parallax-assistance code in the Code Exchange to be very inflexible, and not specifically intuitive. Are you trying to make a platforming “Mario” type game where the foreground and background move as the player moves, or are you just making an app where dragging the screen around changes the location of the background/foreground objects?

Either way, I’d suggest a Runtime event listener which moves the objects based on one static object you created. For instance:

[lua]
local floor = display.newImageRect(“Ground1.png”, 1000, 50)
group:insert(floor)
floor.x = -220; floor.y = 240

physics.addBody(floor, “static”, {density=3,friction=3,bounce=0})
floor.name = “floor”

local floor = display.newImageRect(“Ground1.png”, 1050, 50)
group:insert(floor)
floor.x = -130; floor.y = 460

local guyBackground1 = display.newRect(0,0,90,32)
guyBackground1:setFillColor(0,0,255)
group:insert(guyBackground1 )
guyBackground1.x =-200; guyBackground1.y=440

local guy = display.newRect(0,0,32,32)
group:insert(guy)
guy.x =-200; guy.y=440

local guyBackground2 = display.newRect(0,0,120,32)
guyBackground2:setFillColor(0,255,0)
group:insert(guyBackground2 )
guyBackground2.x =-200; guyBackground2.y=440

local function testParallax()
guyBackground1.x = guy.x/2
guyBackground2.x = guy.x/10
guyBackground1.x = guy.y/2
guyBackground2.x = guy.y/10
end
Runtime:addEventListener(“enterFrame”, testParallax)
[/lua]

Obviously this is a super-simple example but it might be enough to get you started. Let me know if you have any questions! [import]uid: 135394 topic_id: 35475 reply_id: 142093[/import]

Perspective does just about that exactly, but all under the hood.

It’s a library for all things camera - related.

C [import]uid: 147322 topic_id: 35475 reply_id: 142105[/import]

Going for a mario style game. Everything I’ve looked at though basically points to using a program in conjunction with Corona. Not really sure what’s going on though because I started using corona about a year ago just trying to learn the code but every time I finish something IE my sprite or parallaxing I’m told I should use a different code…Makes me think I should just learn C and use xcode. Ugh frustration!

[import]uid: 72845 topic_id: 35475 reply_id: 142163[/import]

@Focus Lab:
You can use whatever you want. I simply posted that because Perspective is very easy to use - whatever is comfortable for you, you can use, though.

C

PS: Don’t learn C+XCode. I tried it, and I don’t think I’ll try it again :slight_smile: [import]uid: 147322 topic_id: 35475 reply_id: 142185[/import]

@Focus, who keeps telling you to use different code? You’ve got to look at development like skinning a cat: More than one way to do it. In your Mario-style game, what issues are you encountering? At what point of development are you? I think Caleb would agree that taking advantage of the many tutorials that are out there would get you to a point where you could make your game unique.

http://www.tandgapps.co.uk/resources/ [import]uid: 135394 topic_id: 35475 reply_id: 142187[/import]

I appreciate the responses. In regards to perspective I’m still a bit lost with the example.

--[[  
Perspective example main.lua  
   
Demonstrates parallax scrolling, damping, tracking objects, and setting the Perspective view focus.  
--]]  
local perspective=require("perspective") -- Include Perspective and create a view  
local camera=perspective.createView()  
camera.damping=20 -- Higher values make the camera slower and more "buttery"  
   
local referenceTable={} -- Table to hold all of the circles  
   
for i=1, 10 do  
 referenceTable[i]=display.newCircle(0, 0, math.random(40, 80))  
 referenceTable[i].x, referenceTable[i].y=math.random(1024), math.random(768)  
 referenceTable[i]:setFillColor(0, 0, 0, 0)  
 camera:add(referenceTable[i], 1, false) -- Add it to the camera  
 referenceTable[i].strokeWidth=6  
 referenceTable[i]:setStrokeColor(math.random(255), math.random(255), math.random(255))  
end  
   
local screenRect=display.newRect(0, 0, display.contentWidth, display.contentHeight) -- Make a bounding rectangle so you can see the screen dimensions  
screenRect:setFillColor(0, 0, 0, 0)  
screenRect.strokeWidth=4  
camera:add(screenRect, 1, false) -- Add the screenRect to the camera - in layer 1 because it has no parallaxRatio  
   
camera:setFocus(referenceTable[1]) -- Set the view's focus  
camera:track() -- Start tracking  
   
local function newTransition()  
 for i=1, #referenceTable do  
 transition.to(referenceTable[i], {x=math.random(display.contentWidth), y=math.random(display.contentHeight), time=1000}) -- Re-transition everything  
 end  
end  
   
local function setNewFocus() -- Get a random focus object  
 local obj=referenceTable[math.random(#referenceTable)]  
 camera:setFocus(obj)  
end  
   
newTransition() -- Initialize with a transition for each object  
timer.performWithDelay(5000, setNewFocus, 0) -- Add timers  
timer.performWithDelay(1000, newTransition, 0)  
   
for i=1, 8 do  
 camera:layer(i).parallaxRatio=math.random(1,10)/10 -- Get a random parallax ratio for each layer  
end  
   
for i=1, 60 do  
 local rect=display.newRect(0, 0, 20, 20) -- Populate the background with rectangles - normally you wouldn't want to have them all local without a reference, but I'm just doing this to show the parallax effect  
 rect.x, rect.y=math.random(display.contentWidth), math.random(display.contentHeight)  
 camera:add(rect, math.random(1,8), false) -- Add to a random layer  
end  

Instead of generating shapes at random how would you create for example 3 specific images that have the same parrallax effect? ex. grass, mountain, sky.

Also I noticed the rectangle that limits the movement of objects, can I use perspective to make a full screen unrestrained parrallax effect? Also how would you use a touch effect instead of the auto generated movement?

Thanks for your input
-FL [import]uid: 72845 topic_id: 35475 reply_id: 143345[/import]

What Perspective does is, instead of creating objects to parallax/track, it simply takes already made objects to parallax/track. So creating an object can be whatever you want; for three specific images, simply create three specific images.
Once you’ve created your images, you can add them to the camera and they will move according to the camera’s internal movement. Objects do not have to be created with a special format, or anything like that, they just have to be added to the camera. And parallax is achieved by layer, not by object. So here’s an example, assuming that you already loaded Perspective and created a camera view:
[lua]
local obj1=display.newImage(“MyImage.png”)
camera:add(obj1, 1)

local obj2=display.newImage(“MyImage2.png”)
camera:add(obj2, 2)
[/lua]
Now both objects will be included in the camera’s movement/tracking. Notice the second parameter for the :add() function. That’s the layer they will be included in. Objects in layer 1 will appear like an overlay over objects in layer 2, layer 2 is an overlay over layer 3, etc.
Once you’ve added objects, set the camera’s focus. The focus is the object that the camera tracks to follow - think Mario in a Mario-style game, and how he’s always visible, while the terrain moves.
[lua]
camera:setFocus(obj1)
[/lua]
To keep the focus within bounds (like you said about the rectangle) simply use the :setBounds() function, complete documentation is on the code page. If you don’t want bounds, set “false” as the first parameter (without quotes).
If you have the objects inside of the camera and the focus set (and bounds set, if you want them), you can start the camera moving. Simply use the :track() command, and it automatically keeps track of moving the world according to the position of the focus.
[lua]
camera:track()
[/lua]
Now all of that is taken care of, and all you need to do is move your character. The camera will follow it automatically.

Important: Make sure you insert all of the objects that will be moving with the camera into the camera - and physics doesn’t work well with parallax.

Caleb [import]uid: 147322 topic_id: 35475 reply_id: 143364[/import]

(What I mean by “physics doesn’t work well with parallax” was that things your player collides with should be in the same layer as the player) [import]uid: 147322 topic_id: 35475 reply_id: 143365[/import]

I understand what you’re saying about the layers, I’m just still a little confused about coding it to work.

I have

local perspective=require("perspective")  
local camera=perspective.createView()  
  
camera.x, camera.y=-200, -200  
  
local obj1=display.newImage("grass.png")  
camera:add(obj1, 1)  
   
local obj2=display.newImage("mountain.png")  
camera:add(obj2, 2)  
  
local obj3=display.newImage("sky.png")  
camera:add(obj3, 3)  
camera:setFocus(obj1)  
camera:setFocus(obj2)  
camera:setFocus(obj3)  
camera.offsetX, camera.offsetY=250, 150  
  
camera:setBounds(false)  
camera:track()  
obj1.x=event.x-camera.scrollX  
obj1:addEventListener("touch", touch\_obj1)  

but this definitely isn’t right : / [import]uid: 72845 topic_id: 35475 reply_id: 143370[/import]

Here, I’ll rewrite it for you, with comments:
[lua]
local perspective=require(“perspective”)
local camera=perspective.createView() – Include and create camera

–camera.x, camera.y=-200, -200 – This is the offset of the camera

local player=create_your_player_however_you_do_it()
camera:add(player, 1) – He’s in the front - layer 1 never has parallax

local grass=display.newImage(“grass.png”)
camera:add(grass, 1) – Add the grass in layer 1, with the player, because we want it to move the same as the player

local mountain=display.newImage(“mountain.png”)
camera:add(mountain, 7) – You can add this is layer 7, it’s a background object, so when we add parallax ability we’ll make it move less

local sky=display.newImage(“sky.png”)
camera:add(sky, 8) – And the same with this, although we’ll set layer 8’s parallax to barely moving

–camera.offsetX, camera.offsetY=250, 150 – This isn’t supported any more, see comment above

–THIS IS THE PARALLAX IMPLEMENTATION
camera:layer(7).parallaxRatio=0.5 – The layer with the mountain in it moves 0.5 times the player’s movement
camera:layer(8).parallaxRatio=0.2 – The layer with the sky in it moves 0.2 times the player’s movement

camera:setBounds(false) – No bounds
camera:track() – Start tracking the player

–Not sure what that last part was for
[/lua]
It’s important to note that Perspective does not restrict you on parallax or object creation - if you want, you can make layer 2 move less than layer 8, which moves more than layer 4 - and the objects are simply objects.

Caleb [import]uid: 147322 topic_id: 35475 reply_id: 143373[/import]

Here’s what I’ve got so far:

  
  
local perspective=require("perspective")  
local camera=perspective.createView() -- Include and create camera  
  
local physics = require("physics")  
physics.start()  
physics.setGravity(0,16)  
   
\_W = display.contentWidth; -- Get the width of the screen  
\_H = display.contentHeight; -- Get the height of the screen  
motionx = 0; -- Variable used to move character along x axis  
speed = 5.5; -- Set Walking Speed  
playerInAir = true; -- Set a boolean of whether our guy is in the air or not  
   
   
   
--camera.x, camera.y=200, 200 -- This is the offset of the camera  
  
local grass = display.newImage("grass.png")  
physics.addBody(grass, "static", {density=3,friction=3,bounce=0})  
grass.x = 130; grass.y = 460  
grass.myName = "grass"  
camera:add(grass, 1) -- Add the grass in layer 1, with the player, because we want it to move the same as the player  
   
local mountain = display.newImage("mountain.png")  
camera:add(mountain, 7) -- You can add this is layer 7, it's a background object, so when we add parallax ability we'll make it move less  
   
local sky = display.newImage("sky.png")  
camera:add(sky, 8) -- And the same with this, although we'll set layer 8's parallax to barely moving  
   
local guy = display.newImage( "guy.png" )  
 physics.addBody( guy, "dynamic", { friction=0.1, bounce=0.2 } )   
 guy.x = 1; guy.y = 50;  
 guy.myName = "guy"  
 guy.isFixedRotation = true  
 guy.isAlive = yes  
camera:add(guy, 1) -- He's in the front - layer 1 never has parallax  
   
  
   
   
   
   
   
   
local left = display.newImage ("btn\_arrow.png")  
 left.x = 45; left.y = 430;  
 left.rotation = 180;  
 camera:add(left, 1)  
  
local right = display.newImage ("btn\_arrow.png")  
 right.x = 180; right.y = 432;  
 camera:add(right, 1)  
  
local up = display.newImage ("btn\_arrow.png")  
 up.x = 740; up.y = 430;  
 up.rotation = 270;  
 camera:add(right, 1)  
  
  
  
  
  
-- Add Game Functionality  
  
-- Stop character movement when no arrow is pushed  
local function stop (event)  
 if event.phase =="ended" then  
 motionx = 0;  
 end   
end  
Runtime:addEventListener("touch", stop )  
  
-- Move character  
local function moveguy (event)  
 guy.x = guy.x + motionx;   
end  
Runtime:addEventListener("enterFrame", moveguy)  
  
-- When left arrow is touched, move character left  
function left:touch()  
 motionx = -speed;  
end  
left:addEventListener("touch",left)  
  
-- When right arrow is touched, move character right  
function right:touch()  
 motionx = speed;  
end  
right:addEventListener("touch",right)  
  
-- Make character jump  
function up:touch(event)  
 if(event.phase == "began" and playerInAir == false) then  
 playerInAir = true  
 guy:setLinearVelocity( 0, -200 )  
 end  
end  
up:addEventListener("touch",up)  
  
-- Detect whether the player is in the air or not  
function onCollision( event )  
 -- If guy is touching grass, allow jump  
 if(event.object1.myName == "grass" and event.object2.myName == "guy") then  
 playerInAir = false;  
 end   
end  
Runtime:addEventListener( "collision", onCollision )  
  
  
--THIS IS THE PARALLAX IMPLEMENTATION  
camera:layer(7).parallaxRatio=0.5 -- The layer with the mountain in it moves 0.5 times the player's movement  
camera:layer(8).parallaxRatio=0.2 -- The layer with the sky in it moves 0.2 times the player's movement  
   
camera:setBounds(false) -- No bounds  
camera:track() -- Start tracking the player  
   

My character moves and is in front of my other layers but the camera doesn’t follow him. Not sure why.

Thanks again for the help.
[import]uid: 72845 topic_id: 35475 reply_id: 143386[/import]

I think this should do it - at the end of your code, right before you call camera:track(), do a [lua]camera:setFocus(guy)[/lua]. That’ll tell the camera to use that player as the tracking object.

Caleb [import]uid: 147322 topic_id: 35475 reply_id: 143467[/import]