Scrolling World

[fractalbach]

Scrolling Logical Map. Allows players to traverse a large world map by re-rendering map blocks.

Currently, using 9 mapblocks in a 3x3 grid. Where each mapblock is made of a bunch of tiles. Using CSS grid. : https://css-tricks.com/snippets/css/complete-guide-grid/

Strategy

Trigger event when all of the following are true...

• you're in one of the outer mapblocks. (Not in middle mapblock)
• you're less than halfway away from the outer edge of that mapblock

What happens:

• the 3 blocks furthest away from you are "removed". -the rest shift the fill the "gap"
• 3 new blocks appear in the area you are headed toward.
• the camera scrolls back to the tile it was initially looking at.

What actually happens

• save camera location (the tile)
• the 3 furthest blocks are cleared and redrawn
• swap 3 furthest with the 3 your player is standing on.
• swap the 3 your player is standing on with the middle 3.
• update variable camera.FIRST_TILE
• scroll to initial camera location (the tile)

[fractalbach]

Blocknums

BlockNums are basically positions. Here's what they are

0	1	2
3	4	5
6	7	8

[fractalbach]

Shifting

NewBlockNumber ::= function (OldBlockNumber)

Here is the ways the new value is computed, based on the direction you want to shift the map. For example, "Shift Left" is called when you are approaching the left edge of the screen (near 0 on the visual x-axis).

for (let i=0; i<9; i++){
    n = some_function_of ( i ) // <~~ code differs here
}

Notice that...

• Shift Left is the inverse of Shift Right, and vise versa.
• Shift Up is the inverse of Shift Down, and vise versa.

Shift Up

n = (i+6) % 9

old	new
0	6
1	7
2	8
3	0
4	1
5	2
6	3
7	4
8	5

Shift Down

n = (i+3) % 9

old	new
0	3
1	4
2	5
3	6
4	7
5	8
6	0
7	1
8	2

Shift Left

This is the least elegant solution I've ever seen.

n = i + (3*((i + 1)%3%2) - 1)

Equivalent to:

if (i%3 == 0) {
    n = i + 2
} else { 
    n = i - 1 
}

Equivalent to:

i%3==0 ? n=i+2 : n=i-1

old	new
0	2
1	0
2	1
3	5
4	3
5	4
6	8
7	6
8	7

Shift Right

if (i%3 == 2) {
   n = i - 2
} else { 
    n = i + 1
}

Equivalent to:

i%3==2 ? n=i-2 : n=i+1

old	new
0	1
1	2
2	0
3	4
4	5
5	3
6	7
7	8
8	6

[fractalbach]

Let's put em in arrays so it's easier to use.

let ShiftUpArr    = [6, 7, 8, 0, 1, 2, 3, 4, 5]
let ShiftDownArr  = [3, 4, 5, 6, 7, 8, 0, 1, 2]
let ShiftLeftArr  = [2, 0, 1, 5, 3, 4, 8, 6, 7]
let ShiftRightArr = [1, 2, 0, 4, 5, 3, 7, 8, 6]

Now, the placement of the array can be used as if it was a function, instead of f(i) you would use f[i].

for (let i=0; i<9; i++) {
    n = ShiftRightArr[i]
}

Or if you want them to look like functions:

var ShiftRightArr = [1, 2, 0, 4, 5, 3, 7, 8, 6]
var ShiftNumRight = i => ShiftRightArr[i]
ShiftNumRight(3)
// 4

[fractalbach]

A simpler way, so that you don't need all the above craziness is:

Place the blocks into 3 arrays

Layer
  Row1
    Block
    Block
    Block
  Row2
    Block
    Block
    Block
  Row3
    Block
    Block
    Block
Endlayer

So then you could just you could just swap them around in a more sane way. You can access a block through the DOM at a specific spot by using:

Layer.children[row].children[col]

[fractalbach]

Added function game.drawer.getMapBlockElement(column,row)

Details of the DOM structure should be fully abstracted away inside the Shift___ functions.

[fractalbach]

game.drawer.ShiftDown() works as expected, scrolling looks fast enough to maintain the illusion.

CSS settings should take care of making off-map objects invisible. In future, server shouldnt even send you information about them.

Sometimes there are bugs with the target-box updating it's position.