Help with x Axis scrolling

Klynt · November 18, 2017, 11:50pm

So I have googled it and I have searched the forum. I am aware there are many post that discuss this very thing… BUT none of them explain the numbers they choose, thus I can’t get mine to work because I am not using the same resolution.

Basically, I need help making a background image (clouds) slowly scroll to the left or right for ever (in landscape mode). I have the img but I can’t get the numbers right. I have tried transition.to I have tried translate but I can’t get these to work for me because the examples I am looking at all just say… These are the numbers to put for this resolution. But I don’t understand how to get those to work with mine. I am using a Width of 768 and height of 1080.

Please assist.

rob · November 19, 2017, 1:25am

Is your app landscape or portrait? What size is your background image?

Rob

Klynt · November 19, 2017, 1:27am

Landscape and the full screen size (up to 768/1080)

&nbsp; &nbsp; bg1 = display.newImageRect( sceneGroup, "imgs/scrollingClouds.jpg", display.actualContentWidth, display.actualContentHeight ) &nbsp; &nbsp; bg1.x = display.contentCenterX &nbsp; &nbsp; bg1.y = display.contentCenterY

rob · November 19, 2017, 1:59am

So you need two copies of the image you want to scroll. The image needs to be wide enough to cover the entire screen, not your content area. So if your config.lua width is 768 and you’re on a 16:9 phone, your background image width needs to be 1366 x 768. If you concern yourself with the Galaxy S8 you need a 2:1 aspect ratio background ( 1536 x 768) and if you’re going to deploy to iOS and the iPhone X is a 19.5:9 aspect ratio or 1665 x 768. Of course, these wider images will work on narrower screens.

Load two copies into memory:

local background1 local background2 local function moveBackground() &nbsp; &nbsp; &nbsp; background1.x = background1.x - 1 -- or whatever speed you want &nbsp; &nbsp; &nbsp; background2,x = background2.x - 1&nbsp;&nbsp; &nbsp; &nbsp; if ( background1.x \< -background1.contentWidth + display.safeScreenOriginX ) then &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background1.x = background2.width + display.safeScreenOriginX &nbsp; &nbsp; &nbsp; end &nbsp; &nbsp; &nbsp; if ( background2.x \< -background2.contentWidth + display.safeScreenOriginX ) then &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background2.x = background1.width + display.safeScreenOriginX &nbsp; &nbsp; &nbsp; end end -- somewhere in scene:create() if you're using Composer: background1 = display.newImageRect("background.png", 1665, 768) sceneGroup:insert( background1 ) background1.x = display.safeScreenOriginX background1.y = display.contentCenterY -- assuming you want it centered background2 = display.newImageRect("background.png", 1665, 768) sceneGroup:insert( background2 ) background2.x = background1.x&nbsp; + background2.width \* 0.5&nbsp; -- this should put it off screen to the right background2.y = display.contentCenterY -- assuming you want it centered -- somewhere in scene:show()'s "did" phase: Runtime:addEventListener("enterframe", moveBackground)

Now I made this code up, but it should get you close. This does not compensate for delta time, that is that enter frame doesn’t fire off exactly ever 1/x frames. You can make minor adjustments to let you smooth out the animation. Others may chime in with the code or you can search for the delta time tutorials and forum posts. This also assumes you will be supporting an iPhone X. (Actually now that I think about it, you probably won’t use safeZone insets for the background on the iPhone X for backgrounds…) So you can probably get away with just using display.screenOriginX.

Rob

Klynt · November 19, 2017, 3:24am

rob:

So you need two copies of the image you want to scroll. The image needs to be wide enough to cover the entire screen, not your content area. So if your config.lua width is 768 and you’re on a 16:9 phone, your background image width needs to be 1366 x 768. If you concern yourself with the Galaxy S8 you need a 2:1 aspect ratio background ( 1536 x 768) and if you’re going to deploy to iOS and the iPhone X is a 19.5:9 aspect ratio or 1665 x 768. Of course, these wider images will work on narrower screens.

Load two copies into memory: …

Now I made this code up, but it should get you close. This does not compensate for delta time, that is that enter frame doesn’t fire off exactly ever 1/x frames. You can make minor adjustments to let you smooth out the animation. Others may chime in with the code or you can search for the delta time tutorials and forum posts. This also assumes you will be supporting an iPhone X. (Actually now that I think about it, you probably won’t use safeZone insets for the background on the iPhone X for backgrounds…) So you can probably get away with just using display.screenOriginX.

Rob

Rob,

Thanks for the information. I have gotten it close after a few adjustments. (minor syntax errors in yours like enterFrame vs enterframe and you have background2,x vs background2.x)

The problem I am having is… it doesn’t send background 1 back to the end of background 2, until almost half the screen has became black. Same with background2, it doesn’t send it to the end of background 1, until almost half the screen has become black. I have been fiddling with the function numbers and haven’t figured it quite out yet. Thoughts?

The code I am using below

local background1, background2 local function moveBackground() background1.x = background1.x - 2 -- or whatever speed you want background2.x = background2.x - 2 if ( background1.x \< -background1.contentWidth + display.safeScreenOriginX ) then background1.x = background1.width + display.safeScreenOriginX - 1 --the minus 1 because it was leaving 1 pixel between images print("Move back 1") end if ( background2.x \< -background2.contentWidth + display.safeScreenOriginX ) then background2.x = background2.width + display.safeScreenOriginX - 2 --the minus 2 because it was leaving 1 pixel between images print("Move back 2") end end --In scene:create() background1 = display.newImageRect( sceneGroup, "imgs/scrollingClouds.jpg", 1665, 768) &nbsp; &nbsp; background1.x = display.contentCenterX background1.y = display.contentCenterY background2 = display.newImageRect( sceneGroup, "imgs/scrollingClouds.jpg", 1665, 768) background2.x = background1.x + background2.width --Removed the \*.5 because it wasn't even near background 1 at this point. background2.y = display.contentCenterY --In scene:show() phase = "did" Runtime:addEventListener("enterFrame", moveBackground)

Klynt · November 19, 2017, 4:02am

OK,

I figured it out. I set the anchorX to 0 and that seemed to do the trick. Here is my final code with it working for anyone else interested:

local background1, background2 local function moveBackground() background1.x = background1.x - 2 -- Change the 2 to adjust speed (higher# = faster) background2.x = background2.x - 2 bgW = background1.contentWidth if ( background1.x \< -bgW + display.safeScreenOriginX ) then background1.x = background1.width + display.safeScreenOriginX - 1 --the minus 1 because it was leaving 1 pixel between images, used to smooth out print("Move back 1") end if ( background2.x \< -bgW + display.safeScreenOriginX ) then background2.x = background2.width + display.safeScreenOriginX - 2 --the minus 2 because it was leaving 2 pixel between images, used to smooth out print("Move back 2") end end --in scene:create() background1 = display.newImageRect( sceneGroup, "imgs/scrollingClouds.jpg", 1665, 768) background1.anchorX = 0 background1.x = display.safeScreenOriginX background1.y = display.contentCenterY background2 = display.newImageRect( sceneGroup, "imgs/scrollingClouds.jpg", 1665, 768) background2.anchorX = 0 background2.x = background1.x + background1.width background2.y = display.contentCenterY --in scene:show() phase == "did" Runtime:addEventListener("enterFrame", moveBackground) --in scene:hide() phase == "did" Runtime:removeEventListener("enterFrame", moveBackground)

Klynt · November 19, 2017, 4:20am

Rob,

As always thanks a lot this really helped. I was even able to get it to continue from the menu to the game smoothly thanks to composer params (passing the background1.x and background2.x).

rob · November 19, 2017, 1:25am

Is your app landscape or portrait? What size is your background image?

Rob

Klynt · November 19, 2017, 1:27am

Landscape and the full screen size (up to 768/1080)

&nbsp; &nbsp; bg1 = display.newImageRect( sceneGroup, "imgs/scrollingClouds.jpg", display.actualContentWidth, display.actualContentHeight ) &nbsp; &nbsp; bg1.x = display.contentCenterX &nbsp; &nbsp; bg1.y = display.contentCenterY

rob · November 19, 2017, 1:59am

So you need two copies of the image you want to scroll. The image needs to be wide enough to cover the entire screen, not your content area. So if your config.lua width is 768 and you’re on a 16:9 phone, your background image width needs to be 1366 x 768. If you concern yourself with the Galaxy S8 you need a 2:1 aspect ratio background ( 1536 x 768) and if you’re going to deploy to iOS and the iPhone X is a 19.5:9 aspect ratio or 1665 x 768. Of course, these wider images will work on narrower screens.

Load two copies into memory:

local background1 local background2 local function moveBackground() &nbsp; &nbsp; &nbsp; background1.x = background1.x - 1 -- or whatever speed you want &nbsp; &nbsp; &nbsp; background2,x = background2.x - 1&nbsp;&nbsp; &nbsp; &nbsp; if ( background1.x \< -background1.contentWidth + display.safeScreenOriginX ) then &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background1.x = background2.width + display.safeScreenOriginX &nbsp; &nbsp; &nbsp; end &nbsp; &nbsp; &nbsp; if ( background2.x \< -background2.contentWidth + display.safeScreenOriginX ) then &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background2.x = background1.width + display.safeScreenOriginX &nbsp; &nbsp; &nbsp; end end -- somewhere in scene:create() if you're using Composer: background1 = display.newImageRect("background.png", 1665, 768) sceneGroup:insert( background1 ) background1.x = display.safeScreenOriginX background1.y = display.contentCenterY -- assuming you want it centered background2 = display.newImageRect("background.png", 1665, 768) sceneGroup:insert( background2 ) background2.x = background1.x&nbsp; + background2.width \* 0.5&nbsp; -- this should put it off screen to the right background2.y = display.contentCenterY -- assuming you want it centered -- somewhere in scene:show()'s "did" phase: Runtime:addEventListener("enterframe", moveBackground)

Now I made this code up, but it should get you close. This does not compensate for delta time, that is that enter frame doesn’t fire off exactly ever 1/x frames. You can make minor adjustments to let you smooth out the animation. Others may chime in with the code or you can search for the delta time tutorials and forum posts. This also assumes you will be supporting an iPhone X. (Actually now that I think about it, you probably won’t use safeZone insets for the background on the iPhone X for backgrounds…) So you can probably get away with just using display.screenOriginX.

Rob

Klynt · November 19, 2017, 3:24am

rob:

So you need two copies of the image you want to scroll. The image needs to be wide enough to cover the entire screen, not your content area. So if your config.lua width is 768 and you’re on a 16:9 phone, your background image width needs to be 1366 x 768. If you concern yourself with the Galaxy S8 you need a 2:1 aspect ratio background ( 1536 x 768) and if you’re going to deploy to iOS and the iPhone X is a 19.5:9 aspect ratio or 1665 x 768. Of course, these wider images will work on narrower screens.

Load two copies into memory: …

Now I made this code up, but it should get you close. This does not compensate for delta time, that is that enter frame doesn’t fire off exactly ever 1/x frames. You can make minor adjustments to let you smooth out the animation. Others may chime in with the code or you can search for the delta time tutorials and forum posts. This also assumes you will be supporting an iPhone X. (Actually now that I think about it, you probably won’t use safeZone insets for the background on the iPhone X for backgrounds…) So you can probably get away with just using display.screenOriginX.

Rob

Rob,

Thanks for the information. I have gotten it close after a few adjustments. (minor syntax errors in yours like enterFrame vs enterframe and you have background2,x vs background2.x)

The problem I am having is… it doesn’t send background 1 back to the end of background 2, until almost half the screen has became black. Same with background2, it doesn’t send it to the end of background 1, until almost half the screen has become black. I have been fiddling with the function numbers and haven’t figured it quite out yet. Thoughts?

The code I am using below

local background1, background2 local function moveBackground() background1.x = background1.x - 2 -- or whatever speed you want background2.x = background2.x - 2 if ( background1.x \< -background1.contentWidth + display.safeScreenOriginX ) then background1.x = background1.width + display.safeScreenOriginX - 1 --the minus 1 because it was leaving 1 pixel between images print("Move back 1") end if ( background2.x \< -background2.contentWidth + display.safeScreenOriginX ) then background2.x = background2.width + display.safeScreenOriginX - 2 --the minus 2 because it was leaving 1 pixel between images print("Move back 2") end end --In scene:create() background1 = display.newImageRect( sceneGroup, "imgs/scrollingClouds.jpg", 1665, 768) &nbsp; &nbsp; background1.x = display.contentCenterX background1.y = display.contentCenterY background2 = display.newImageRect( sceneGroup, "imgs/scrollingClouds.jpg", 1665, 768) background2.x = background1.x + background2.width --Removed the \*.5 because it wasn't even near background 1 at this point. background2.y = display.contentCenterY --In scene:show() phase = "did" Runtime:addEventListener("enterFrame", moveBackground)

Klynt · November 19, 2017, 4:02am

OK,

I figured it out. I set the anchorX to 0 and that seemed to do the trick. Here is my final code with it working for anyone else interested:

local background1, background2 local function moveBackground() background1.x = background1.x - 2 -- Change the 2 to adjust speed (higher# = faster) background2.x = background2.x - 2 bgW = background1.contentWidth if ( background1.x \< -bgW + display.safeScreenOriginX ) then background1.x = background1.width + display.safeScreenOriginX - 1 --the minus 1 because it was leaving 1 pixel between images, used to smooth out print("Move back 1") end if ( background2.x \< -bgW + display.safeScreenOriginX ) then background2.x = background2.width + display.safeScreenOriginX - 2 --the minus 2 because it was leaving 2 pixel between images, used to smooth out print("Move back 2") end end --in scene:create() background1 = display.newImageRect( sceneGroup, "imgs/scrollingClouds.jpg", 1665, 768) background1.anchorX = 0 background1.x = display.safeScreenOriginX background1.y = display.contentCenterY background2 = display.newImageRect( sceneGroup, "imgs/scrollingClouds.jpg", 1665, 768) background2.anchorX = 0 background2.x = background1.x + background1.width background2.y = display.contentCenterY --in scene:show() phase == "did" Runtime:addEventListener("enterFrame", moveBackground) --in scene:hide() phase == "did" Runtime:removeEventListener("enterFrame", moveBackground)

Klynt · November 19, 2017, 4:20am

Rob,

As always thanks a lot this really helped. I was even able to get it to continue from the menu to the game smoothly thanks to composer params (passing the background1.x and background2.x).