Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

Help with x Axis scrolling
Started by Klynt Nov 18 2017 03:50 PM

6 replies to this topic

Best Answer Klynt , 18 November 2017 - 08:02 PM

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)

[TOPIC CONTROLS]
This topic has been archived. This means that you cannot reply to this topic.
[/TOPIC CONTROLS]
[modOptionsDropdown]
[/modOptionsDropdown]
[reputationFilter]
[TOPIC: post.html]
#1

Klynt

[GLOBAL: userInfoPane.html]
Klynt
  • Enthusiast

  • 74 posts
  • Corona SDK

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. 



[TOPIC: post.html]
#2

Rob Miracle

[GLOBAL: userInfoPane.html]
Rob Miracle
  • Moderator

  • 25,461 posts
  • Enterprise

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

 

Rob



[TOPIC: post.html]
#3

Klynt

[GLOBAL: userInfoPane.html]
Klynt
  • Enthusiast

  • 74 posts
  • Corona SDK

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

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


[TOPIC: post.html]
#4

Rob Miracle

[GLOBAL: userInfoPane.html]
Rob Miracle
  • Moderator

  • 25,461 posts
  • Enterprise

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()
      background1.x = background1.x - 1 -- or whatever speed you want
      background2,x = background2.x - 1       if ( background1.x < -background1.contentWidth + display.safeScreenOriginX ) then
          background1.x = background2.width + display.safeScreenOriginX
      end
      if ( background2.x < -background2.contentWidth + display.safeScreenOriginX ) then
          background2.x = background1.width + display.safeScreenOriginX
      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  + background2.width * 0.5  -- 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



[TOPIC: post.html]
#5

Klynt

[GLOBAL: userInfoPane.html]
Klynt
  • Enthusiast

  • 74 posts
  • Corona SDK

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)
    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)


[TOPIC: post.html]
#6

Klynt

[GLOBAL: userInfoPane.html]
Klynt
  • Enthusiast

  • 74 posts
  • Corona SDK

  Best Answer

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)


[TOPIC: post.html]
#7

Klynt

[GLOBAL: userInfoPane.html]
Klynt
  • Enthusiast

  • 74 posts
  • Corona SDK

...

 

 

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).




[topic_controls]
[/topic_controls]