parallax scrolling

kumarchetan312 · January 15, 2017, 3:47pm

hii,

here is my part of code for scrolling-

--set nearbackground1 local nearback1=display.newImageRect("nearbk2.png",display.actualContentWidth,600) nearback1.x=0+display.screenOriginX nearback1.y=100+display.screenOriginY --set nearbackround2 local nearback3=display.newImageRect("nearbk2.png",display.actualContentWidth,600) nearback3.x=display.actualContentWidth+display.screenOriginX nearback3.y=100+display.screenOriginY --[[local nearback2=display.newImageRect("nearbk1.png",2000,400) nearback2.x=0+display.screenOriginX nearback2.y=300+display.screenOriginY]]-- local function scroll(self,event) if(self.x\<-(display.actualContentWidth)) then self.x=display.actualContentWidth else self.x=self.x-3 end end nearback1.enterFrame=scroll Runtime:addEventListener("enterFrame",nearback1) nearback3.enterFrame=scroll Runtime:addEventListener("enterFrame",nearback3)

my problem is when i use "letterBox " scaling method,first image move in -ve x direction.

but it gets disappear before crossing the screen .

when i use"zoomEven " scaling method it works perfectly…but i want to use recommended scaling method(i.e “letterBox”) .

what i want is

-every image cross the screen and after that they disappear not before.

Blex · January 15, 2017, 6:16pm

Could you show a video of how this occurs?

kumarchetan312 · January 15, 2017, 6:59pm

i am not able to do so…there is always an error box pops up…but u can check it out on this facebook link

https://www.facebook.com/100008711146035/videos/1655229354777420/

Blex · January 15, 2017, 7:47pm

I can’t see it.

kumarchetan312 · January 15, 2017, 8:37pm

https://youtu.be/8_3gh7hJtwU

this link will work…

any suggestion?how can i fix this

kumarchetan312 · January 16, 2017, 3:31pm

any help?

Blex · January 16, 2017, 3:37pm

What probably happens here is that, by default, any object’s x and y coordinates are measured by their center. Your code is fine, but they disappear when their center reaches the edge of the screen. You need to change your anchorX value to avoid this.

Blex · January 16, 2017, 3:38pm

You can change it like this:

nearback1.anchorX = 1 --Put it after you have defined its x and y values

Let me know how the result changes.

kumarchetan312 · January 16, 2017, 4:03pm

actually i defined my anchor point as(0,0) (default). here is my code from starting-

-- Set default anchor point for objects display.setDefault( "anchorX", 0 ) display.setDefault( "anchorY", 0 ) --------------------------------------------------------- --set background local backbackground=display.newImageRect("backback.png",2000,display.contentHeight) backbackground.x=-20+display.screenOriginX backbackground.y=-20+display.screenOriginY -------------------------------------------------------- --set nearbackground1 local nearback1=display.newImageRect("nearbk2.png",display.actualContentWidth,600) nearback1.x=0+display.screenOriginX nearback1.y=100+display.screenOriginY nearback1.anchorX=1 --set nearbackround2 local nearback3=display.newImageRect("nearbk2.png",display.actualContentWidth,600) nearback3.x=display.actualContentWidth+display.screenOriginX nearback3.y=100+display.screenOriginY nearback3.anchorX=1

and here is the result:

https://youtu.be/RDYulJblBoM

kumarchetan312 · January 17, 2017, 6:41am

is there any other option?

kumarchetan312 · January 17, 2017, 1:03pm

is there any solution other than "zoomEven " scaling method

graham07 · January 17, 2017, 3:23pm

Can you use transition.to to handle the scrolling? You can still control the speed via the transition time.

Something like the following?

--set nearbackground1local nearback1=display.newImageRect("nearbk2.png",display.actualContentWidth,600) nearback1.x=0+display.screenOriginX nearback1.y=100+display.screenOriginY --set nearbackround2 local nearback3=display.newImageRect("nearbk2.png",display.actualContentWidth,600) nearback3.x=display.actualContentWidth+display.screenOriginX nearback3.y=100+display.screenOriginY local function restartscroll( self ) -- Reset the background to the right hand side &nbsp; self.x = w +400 &nbsp; -- Rerun the transition and call itself when it's done. transition.to( self, { time=5000, &nbsp;x=(-600), y=self.y, onComplete=restartscroll } ) end -- Scroll the object. transition.to( nearback1, { time=5000, &nbsp;x=(-600), y=nearback1.y, onComplete=restartscroll } ) -- transition from the right of nearback1 (the math is a guess). Don't change Y. transition.to( nearback3, { time=5000, &nbsp;x=(nearback1.x+300), y=nearback3.y, onComplete=restartscroll} )

kumarchetan312 · January 17, 2017, 4:05pm

thanks,i will try it

and one thing i want to ask …in function restartScroll , it seems w stands for dispaly.actualContentWidth

kumarchetan312 · January 17, 2017, 4:34pm

@graham07

i tried in your way .here is my code and result

-- Set default anchor point for objects to bottom-left display.setDefault( "anchorX", 0 ) display.setDefault( "anchorY", 0 ) --------------------------------------------------------- --set nearbackground1 local nearback1=display.newImageRect("nearbk2.png",display.actualContentWidth,600) nearback1.x=0+display.screenOriginX nearback1.y=100+display.screenOriginY --set nearbackround2 local nearback3=display.newImageRect("nearbk2.png",display.actualContentWidth,600) nearback3.x=display.actualContentWidth+display.screenOriginX nearback3.y=100+display.screenOriginY local function restartscroll( self ) -- Reset the background to the right hand side self.x = display.actualContentWidth +400 -- Rerun the transition and call itself when it's done. transition.to( self, { time=5000, x=(-600), y=self.y, onComplete=restartscroll } ) end -- Scroll the object. transition.to( nearback1, { time=5000, x=(-600), y=nearback1.y, onComplete=restartscroll } ) -- transition from the right of nearback1 (the math is a guess). Don't change Y. transition.to( nearback3, { time=5000, x=(nearback1.x+300), y=nearback3.y, onComplete=restartscroll} )

result

https://youtu.be/ZSqI3WRWzPg

graham07 · January 17, 2017, 4:53pm

Right, it wasn’t supposed to be an exact answer as I don’t know your background dimensions. You will need to change the X values to match what you’re using. Likely better to use variables to allow for multiple devices. (Plus your anchorX will cause a change on the XPos).

Play with the X values (-600) and see what you can do with it. As you can see, you’re getting closer (I believe).

You will need to make sure you position them next to each other for a smooth scroll. (Change the xStart of your second background)

If the effect is what you want, a little tinkering should get you what you need.

graham07 · January 17, 2017, 5:21pm

As an addendum, try removing the second sprite and get the first one working. It should start on screen and scroll to the left. (or right depending on your objective) Always better to work on one problem at a time.