Scrolling Background with multiple images

[Djloop]

I am having trouble figuring out how to do a scrolling background using multiple background images. These images are not overlayed to create a parallax effect, but rather next to each other to create a changing background scene. 

My background is created using 20 different images who's order must be dynamically changed as the background scrolls.

So I can start with A,B,C showing and as it moves I need to remove A and add D after C...and so forth.

 

I tried using tweens, but it is almost impossible to to place the next image at the correct starting position without gaps forming between the images.

I have tried using a tileSprite, but I can only figure out how to add a single texture to the tileSprite.

I tried creating a texture dynamically using bitMapData and copying a image sequences to the texture and then scrolling the texture using a tileSprite, but that does not allow me to dynamically change the next image that should appear based on whatever is happening in the game. Also I have read that tileSprites have performance issues on mobile.

 

In another post on this form Rich suggests doing the following:

http://www.html5gamedevs.com/topic/3218-continuously-scrolling-background/

The issue you're having is that you can't place the next tile down correctly because you don't really know how far ahead the previous tile is, because it's being moved with physics (or a tween). The solution would be to use a Group and tween that - then all the tiles are placed within the Group. So in effect the tiles never actually move at all, only the Group does, and you can keep on placing new tiles at the back and moving old ones off the front as the Group moves.

I have tried this by adding my stating ABC images next to each other in a group and then moving the group, but all that happens is that the group moves off the screen after a while. 

 

Could someone please explain to me how to implement what Rich suggests above? Or any other method to achieve my desired result?

 

[samme]

Are you moving the camera?

[Djloop]

No, the camera is not moving

[samme]

 

[Djloop]

Thank you samme. This is an excellent example and exactly what I was trying to achieve.

I think this example should be added to the official Phaser examples as I am sure a lot of people will find this useful.

Could you finally please explain the use of cards cursor in the update function?

Are you moving the current card in the group (that is pointed to by the cursor) to the front of the  cards display row and then pointing the cursor to the next card in the group?

Thanks again!