Infinite scrolling (treadmill like)?

Questions
1

Hi,
Im wondering if there’s any info about how Babylon can handle this.

Let’s say I have a 2d array map, for a tiled-based game (absolute x,y positions).
I want it to be infinite in both X and Y directions. Like a treadmill.
For example, this world has 9 chunks.

//each chunk = 10 tiles
//world size: 30 x 30 = 900 tiles

[1][2][3]
[4][5][6]
[7][8][9]

Let’s say a player starts at chunk 5 and walk right (+X). It would be looping: 5,6,4,5,6,4… and so on.
Im already rendering whatever the server sends me as a “nextChunk” in any direction im walking.

If I keep walking +x, my mesh.position would continue incrementing and rendering chunks in that direction (absolute x > 30), exceeding boundaries, even if server-side the player already turned around the world back to x=0.

So I guess im supossed to move my mesh and its camera back to x=0 too.

What I’m confused about is:

  • How to do this movement as seamless as possible.
  • Is it okay to render clones of opposite chunk at boundaries?
    So player wont face a black void at limits before re-position takes place. Like so:
//when moving ->
[4][5][6][c4]

Im still quite a noob, maybe my whole approach is wrong. I read you…

2

Here is one of possible solutions - Dynamic Terrain | Babylon.js Documentation

3

Hey labris!

I’ve been reading about Dynamic Terrain the whole day but I think I just don’t completely get it.
When I first saw it in the docs I just skipped it cause it seemed more like procedural seed generation.

I get the scrolling part. Is exactly what I need.
But isn this a divided mesh morphing? (to make mountain-like stuff)?
Or is there a way to load my own separate tiles meshes as terrain?
where in all of this should I call my “chunkBuilder” function?

Thanks.

4

If the map data aren’t updated or if a new data array isn’t passed to the terrain when it reaches the map edges, then the terrain goes on moving as if the current map where repeated on the current axis.

So basically you need to call chunks at edges and add/update their data to the map.

1 Like
5

Right, i get it, and after playing enough with it in the Playground I think its perfect for my needs.

As a last thing, I tried to download this extension as typescript files from:
Extensions/DynamicTerrain/src at master · BabylonJS/Extensions · GitHub.

import DynamicTerrain from "../dynamicTerrain/babylon.dynamicTerrain"

And I get:

File '[...]/dynamicTerrain/babylon.dynamicTerrain.ts' is not a module.

6

Here are some tips how to do it - ES6 Compatible Dynamic Terrain Babylon Extension · GitHub

2 Likes
7

I was able to import it, even tho im getting this weird artifacts at borders I can mark it as solved. Thank you so much! :smiley:

image
image1150×772 231 KB

2 Likes