How to implement endless scrolling of a composite background?

[barfi]

Hello everybody!
Who knows how to implement endless scrolling of a composite background from different parts that are loaded from the data array? 
The important point: each part contains an image and text.
The array of such parts can be large, so the parts will be loaded by the stack (about 6-10 items).
I will be glad to any ideas and suggestions, since I spent a lot of time searching nothing. For clarity, I'm attaching an image. Thanks for any suggestions.

Phaser v.3.10.1

[qnpbgood]

I'm also looking for a solution to a similar problem.

[scope2229]

well im not sure how you could accomplish exactly what you would want.

But ill have a go for you.

First create a spritesheet in gimp 700x100 with each of the block you wish to use.

now for really easy simple scrolling effect you can do this

 

preload() {
  load your assets here with corresponding values.
  this.load.image('floor', 'assets/floor.png')
create(){
  //set background
  this.background1 = this.add.tileSprite(400,300,700,100, 'floor')
}
update(){
  this.backgound1.tilePositionX -= 0.5 //change this to a value suited for your needs change - to + to change direction
}

this with scroll your image continuously from start to finish.

with what you what it sounds like you want to have a set of frames and randomly iterate through the frames.

http://labs.phaser.io/edit.html?src=src/game objects/group/sprite pool.js

maybe modifying this examples could work. changing the random spawn location to a fixed location use a json assets config for the images

look at how the random color is chosen i think there you would iterate through your assets sorry i cant be of more help

[Tom Atom]

Depends on your game, but... I would not scroll any individual item in scene. Instead, I would move camera over world. Items, that are off on left side can be recycled/destroyed. And on right side you can build your world parts as your camera is approaching it. Here is Phaser 2 discussion: http://www.html5gamedevs.com/topic/27445-phaser-little-plane/ and below is minimal example "SimpleRunner.zip"

 

[barfi]

Thanks for answers! The point is that the parts going from the right are infinite, in other words the world will be completely infinite and dynamically
generated from the database. Moving the camera is not an option, since its shift along the x axis will constantly increase, to unrealistic values.
I found a way out of what was in the documentation.
The idea is this: 
1. Тake the group object and dynamically create the containers in it (they will allow relative positioning for pictures and text).
2. In each container, we place a picture of the sprite type and text.
3. Move each container in this group (by update function: group.children.iterate -> child.x +=1 for example).
4. The group will allow you to iterate all the containers, find the first (to delete) and the last to add the following parts (coordinate x).
Do you think there will be a strong load in the rendering in this case? In one time there are about 5-8 parts will be render.

[Tom Atom]

13 hours ago, barfi said:

... in other words the world will be completely infinite and dynamically
generated from the database. Moving the camera is not an option, since its shift along the x axis will constantly increase, to unrealistic values.

:-) you are right with big values, but unrealistic? Look at JS safe integer value: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER. Let's say your scrolling speed is 640px / sec (which is pretty high). It means you will scroll 38400 pixels in minute ... 55296000 pixels in 24 hours. Max safe integer gives you space to scroll 162890611 days ... about 446000 years.

All my scrooling games are moving camera over world and I never run into problems. Simply, it is natural. And you do not have to solve issues like changed positions of waypoints etc.

[barfi]

 

I understand that theoretically the maximum number of camera shifts justifies itself and it's safe. There are things that are not mentioned, it's a character, several layers of background backdrops, several common objects. In the case of camera movement, we will have to move it all. It turns out that moving parts is much easier and cheaper. Tell me the way that I suggest is real?

[Tom Atom]

29 minutes ago, barfi said:

I understand that theoretically the maximum number of camera shifts justifies itself and it's safe. There are things that are not mentioned, it's a character, several layers of background backdrops, several common objects. In the case of camera movement, we will have to move it all. It turns out that moving parts is much easier and cheaper. Tell me the way that I suggest is real?

 When moving camera, you do not have to move anyhing else - only camera. It is the same as in real world - it is static (like houses), dynamic (cars moving on static roads) and finally your eyes - camera. If you want to see some building you have to move yourself in front of it, but nothing else moves. Sometime you are looking at something and suddenly car gets into your view - you have your position in world and car has its position in world which is changing as it is going.
 If you start moving your platforms and you will have enemies on platforms, then you will run into issues like: I am scrolling right, so I have to move everything left and as enemy on this platform is moving left, I have to move him left by scrolling speed + his movement speed...
 With Phaser 3 you can use multiple scenes running paralelly or you can have multiple cameras within one scene. With multiple scenes you can have for example static GUI scene over your scrolling scene. You can also have multiple scrolling scenes - each with its own scrolling speed for pralax scrolling.