How to make a infinite SMOOTH scrolling background?

[chaocanha]

This is what I have done:

var BGround1:Background=new Background();

var BGround2:Background= Background();

stage.addChild(BGround1);

stage.addChild(BGround2);

addEventListener(Event.ENTER_FRAME, moveScroll, false, 0, true);

function moveScroll(e:Event): void

                    {

                              BGround1.x -= scrollSpeed; 

                               BGround2.x -= scrollSpeed; 

                        if(BGround1.x <= -BGround1.width)

                              {

                            BGround1.x =BGround2.x + BGround2.width;

                        }

                              else if(BGround2.x <= -BGround2.width)

                              {

                            BGround2.x = BGround1.x + BGround1.width;

                              }

                    }

However, If I set scrollSpeed too high, the movement is not smooth. Is there any way to make a smooth animation?

Thanks in advance.

PS: I dont know how to put the code into code tag.

[kglad]

you can increase the framerate or decrease the scrollSpeed.  that's it.

but you'll achieve better performance by enabling the cacheAsBitmap property of BGround1 and BGround2:

var BGround1:Background=new Background();

var BGround2:Background= Background();

BGround1.cacheAsBitmap=true;

BGround2.cacheAsBitmap=true;

stage.addChild(BGround1);

stage.addChild(BGround2);

addEventListener(Event.ENTER_FRAME, moveScroll, false, 0, true);

function moveScroll(e:Event): void

                    {

                              BGround1.x -= scrollSpeed; 

                               BGround2.x -= scrollSpeed; 

                        if(BGround1.x <= -BGround1.width)

                              {

                            BGround1.x =BGround2.x + BGround2.width;

                        }

                              else if(BGround2.x <= -BGround2.width)

                              {

                            BGround2.x = BGround1.x + BGround1.width;

                              }

                    }

[chaocanha]

I didnt see any improment after enabling cacheAsBitmap. The background is still a blur.

This is my file

https://dl-web.dropbox.com/get/stickman.swf?w=AAA2UhpRDI7YLmSMfBoOR9GvLFHL57IMBrM0J5lxClvOsQ&dl=1

[kglad]

i don't download and correct files unless i'm hired.

that said, my message 1 is still accurate so the value of scrollSpeed and your framerate are critical. 

enabling cacheAsBitmap allows you to achieve greater framerates (especially if you have nothing else slowing down the animation).  but in no situation will you be able to achieve a framerate greater than 60.

[chaocanha]

I dont ask you to correct for me as the filetype is SWF.

I tried to set the framerate = 60, and scrollSpeed = 5, but what it ended up is that my character acted super fast, but the background moved so slowly.

[kglad]

if you want to post something to be viewed (like your swf), add it to your http server and post a link.

[chaocanha]

This is my SWF file. (You dont need to download it anymore. )

http://www.shareswf.com/game/32580/demo

as you can see, the background's movement is choppy. It is not smooth at all and annoys my eyes. I have used cacheAsBitmap.

My idea is that in 2 minutes, the speed of the background is increasing, so the game is harder.

[kglad]

yes, i see that.

some of your code is screwy. i thought you had two different backgrounds and were using a parallax effect.

also, you should round the positions so you eliminate some of the jumpiness.

if you have just one you should make sure the final (right edge) stage.stageWidth-part of it is the same as the initial (left edge) stage.stageWidth-part of it.  then use

var scrollSpeed:int = 3;

var BGround1:Background=new Background();

BGround1.cacheAsBitmap=true;

stage.addChild(BGround1);

addEventListener(Event.ENTER_FRAME, moveScroll, false, 0, true);

function moveScroll(e:Event): void{

                              BGround1.x -= scrollSpeed; 

                        if(BGround1.x <= BGround1.width-stage.stageWidth){

                            BGround1.x =0;

                        }

                    }

[chaocanha]

@kglad: it didnt work if I use only one instance of BackGround (My background is larger than the stage.stageWidth).

if(BGround1.x <= BGround1.width-stage.stageWidth){

                            BGround1.x =0;

                        }

The condition above is always true as BGround1.x = 0 and BGround1.width-stage.stageWidth > 0.

@moccamaximum: I copied the code to my app (only change the name of the background), but it moved so slowly. So, I speed it up by changing "_xOffset--;" to "_xOffset-=25;" and the result is the same as my approach.

[kglad]

that should be:

var scrollSpeed:int = 3;

var BGround1:Background=new Background();

BGround1.cacheAsBitmap = true;

stage.addChild(BGround1);

addEventListener(Event.ENTER_FRAME, moveScroll, false, 0, true);

function moveScroll(e:Event):void {

    BGround1.x -=  scrollSpeed;

    if (BGround1.x <= -BGround1.width + stage.stageWidth) {

         BGround1.x = 0;

    }

}

[moccamaximum]

You are obviously aiming for a canabalt clone.

To get the performance that you need to get this high-speed-scroll without hurting your eyes,

you either use the engine canabalt was built with:

http://www.flixel.org/ (which uses copyPixel, I guess)

or you upgrade to starling (which might be too much, if you are a beginner)

There is a pretty good tutorial here:

http://www.hungryherogame.com/

[Amy Blankenship]

You don't have to use an engine. It's relatively simple to do yourself, as the link I posted demonstrates.

[Amy Blankenship]

You might want to try changing your approach.