How to make screen scrolling downwards!

I have done a lot of search but cannot find anything useful…every website is difficult…some say to make 2 layers and some say to make 3 and now i am fully confused. Therefore i came to you to give me the easiest code to do downwards scrolling…

THANK you :slight_smile:

Type “Parallax scrolling in corona sdk” in google and you will get lot of tutorials on it !

That is the only way you can scroll. No easy way !

Watch this series of tutorials 

https://www.youtube.com/watch?v=0GtUxdSeWzk&list=PLfjNlDrVXRK0NVKsqHgbG9RdOTp5K3Pos

It features the Physics Engine (gravity and collisions) as well as parallax scrolling. 

You follow this way, but instead put the second image off screen below the current one and change his function a bit…

bg.value = 1 bg2.value = 1 function scrollMountains(self,event) if self.y \< -self.height \* 0.6 then self.y = self.height \* 1.32 else self.y = self.y - self.value end end bg.enterFrame = scrollMountains Runtime:addEventListener("enterFrame", bg) bg2.enterFrame = scrollMountains Runtime:addEventListener("enterFrame", bg2)

This might work, of course your image would have to look good with this effect.

local function moveVertically() background[1].y = background[1].y - speed background[2].y = background[2].y - speed if(background[1].y \< -background[1].contentHeight)then background[1].y = background[1].contentHeight - speed \* 2 elseif(background[2].y \< -background[2].contentHeight)then background[2].y = background[2].contentHeight - speed \* 2 end end &nbsp;&nbsp;&nbsp; background[1] = display.newImageRect( "images/bg1.png", 1125, 375 ) &nbsp;&nbsp; &nbsp;background[2] = display.newImageRect( "images/bg1.png", 1125, 375 ) &nbsp;&nbsp; &nbsp;background[1].anchorY = 1 &nbsp;&nbsp; &nbsp;background[1].anchorX = 0 &nbsp;&nbsp; &nbsp;background[1].x = 0 &nbsp;&nbsp; &nbsp;background[1].y = display.actualContentHeight &nbsp;&nbsp; &nbsp;background[2].anchorY = 1 &nbsp;&nbsp; &nbsp;background[2].anchorX = 0 &nbsp;&nbsp; &nbsp;background[2].x = 0 &nbsp;&nbsp; &nbsp;background[2].y = display.actualContentHeight + 375 Runtime:addEventListener( "enterFrame", move )

This is code from a game I’m building. My game side scrolls, but I converted this to vertically scrolling as a quick test.

You need a function that gets called every time the screen updates. This is the “moveVertically” function. For this to work you have to have two background images. (Remember in my app I’m doing is a side scroller so my images are landscape, you would want yours to be vertical). I load my background image in twice. I center one on the screen and then make the second one fit exactly below or above (depending on which direction you want to scroll).

Once you have the two images in place, the moveVertically function will subtract a value “speed” (my game us using a speed of 1) to each background’s .y value, (or add if you want to go the other direction). The next block of code checks to see if the first background is off the screen. If it is, it re-positions it below (or above) background[2]. Then it checks to see if background[2] is offscreen and repeats the process. Since we’ve already moved the backgrounds, you have to take the speed into consideration.

Finally you need a Runtime “enterFrame” listener to make the moveVertical() function run every frame.

Now this is the simple way. Because the eventFrame event many not fire exactly on 1/30th or 1/60th second intervals, if you’re doing a lot in between frames, your background movement many not be as smooth as you like. It’s that point where you have to start factoring in the frame time which most of the tutorials above include in the code and complicate it.

Hey Rob, can this code work with a horizontal scrolling, mine is not very smooth…

Could this work?

local function moveVertically(self) self.x = self.x - self.speed if(self.x \< -self.contentWidth)then self.x = self - self.speed \* 2 elseif(self.x \< -self.contentWidth)then self.x = self.contentWidth - self.speed \* 2 end end

As I said above, this simple code doesn’t compensate for the fact that frames don’t fire at the exact same pace. If you want a smooth scroll you have to compute a time difference between frames and add that difference to your movement. Most scrolling tutorials take care with it. There is usually code in the tutorials that takes the system.getTimer() value and subtracts the time of the event handler. I don’t have the code in front of me, but you will see something like:

local dt = system.getTimer() - event.time

If you find a tutorial that includes something like that it should be a smooth scrolling method.

Rob

Thanks.

Type “Parallax scrolling in corona sdk” in google and you will get lot of tutorials on it !

That is the only way you can scroll. No easy way !

Watch this series of tutorials 

https://www.youtube.com/watch?v=0GtUxdSeWzk&list=PLfjNlDrVXRK0NVKsqHgbG9RdOTp5K3Pos

It features the Physics Engine (gravity and collisions) as well as parallax scrolling. 

You follow this way, but instead put the second image off screen below the current one and change his function a bit…

bg.value = 1 bg2.value = 1 function scrollMountains(self,event) if self.y \< -self.height \* 0.6 then self.y = self.height \* 1.32 else self.y = self.y - self.value end end bg.enterFrame = scrollMountains Runtime:addEventListener("enterFrame", bg) bg2.enterFrame = scrollMountains Runtime:addEventListener("enterFrame", bg2)

This might work, of course your image would have to look good with this effect.

local function moveVertically() background[1].y = background[1].y - speed background[2].y = background[2].y - speed if(background[1].y \< -background[1].contentHeight)then background[1].y = background[1].contentHeight - speed \* 2 elseif(background[2].y \< -background[2].contentHeight)then background[2].y = background[2].contentHeight - speed \* 2 end end &nbsp;&nbsp;&nbsp; background[1] = display.newImageRect( "images/bg1.png", 1125, 375 ) &nbsp;&nbsp; &nbsp;background[2] = display.newImageRect( "images/bg1.png", 1125, 375 ) &nbsp;&nbsp; &nbsp;background[1].anchorY = 1 &nbsp;&nbsp; &nbsp;background[1].anchorX = 0 &nbsp;&nbsp; &nbsp;background[1].x = 0 &nbsp;&nbsp; &nbsp;background[1].y = display.actualContentHeight &nbsp;&nbsp; &nbsp;background[2].anchorY = 1 &nbsp;&nbsp; &nbsp;background[2].anchorX = 0 &nbsp;&nbsp; &nbsp;background[2].x = 0 &nbsp;&nbsp; &nbsp;background[2].y = display.actualContentHeight + 375 Runtime:addEventListener( "enterFrame", move )

This is code from a game I’m building. My game side scrolls, but I converted this to vertically scrolling as a quick test.

You need a function that gets called every time the screen updates. This is the “moveVertically” function. For this to work you have to have two background images. (Remember in my app I’m doing is a side scroller so my images are landscape, you would want yours to be vertical). I load my background image in twice. I center one on the screen and then make the second one fit exactly below or above (depending on which direction you want to scroll).

Once you have the two images in place, the moveVertically function will subtract a value “speed” (my game us using a speed of 1) to each background’s .y value, (or add if you want to go the other direction). The next block of code checks to see if the first background is off the screen. If it is, it re-positions it below (or above) background[2]. Then it checks to see if background[2] is offscreen and repeats the process. Since we’ve already moved the backgrounds, you have to take the speed into consideration.

Finally you need a Runtime “enterFrame” listener to make the moveVertical() function run every frame.

Now this is the simple way. Because the eventFrame event many not fire exactly on 1/30th or 1/60th second intervals, if you’re doing a lot in between frames, your background movement many not be as smooth as you like. It’s that point where you have to start factoring in the frame time which most of the tutorials above include in the code and complicate it.

Hey Rob, can this code work with a horizontal scrolling, mine is not very smooth…

Could this work?

local function moveVertically(self) self.x = self.x - self.speed if(self.x \< -self.contentWidth)then self.x = self - self.speed \* 2 elseif(self.x \< -self.contentWidth)then self.x = self.contentWidth - self.speed \* 2 end end

As I said above, this simple code doesn’t compensate for the fact that frames don’t fire at the exact same pace. If you want a smooth scroll you have to compute a time difference between frames and add that difference to your movement. Most scrolling tutorials take care with it. There is usually code in the tutorials that takes the system.getTimer() value and subtracts the time of the event handler. I don’t have the code in front of me, but you will see something like:

local dt = system.getTimer() - event.time

If you find a tutorial that includes something like that it should be a smooth scrolling method.

Rob

Thanks.