how does game like surviv.io work

[kutas]

Im trying to wrap my brain around the internals of game like surviv.io.

As i know it uses pixi.js for rendering. The whole map is enormous with many players doing their things in diffrent parts of it. How does it even work and renders so smoothly?

How do I achieve similar effect in pixi? Let's say i want to put big game world into one container and control my player on only small rectangle of it while something is happening (monsters spawning etc) on other parts of game world?

Could you please give some ideas, tutorials about it?

 

The general idea i thought about is:

Store coordinates of all the monsters , items, interactable objects in their JS objects, add them all to the game container when i create it and render them on screen only when player gets a few pixels near them. and redraw whole viewport area after each character step

So basically draw things that are only few pixels away from player but still make them work outside of the render screen (changing their positions etc). 

Is it proper path to follow? Still cant wrap my head around getting lets say 10000x10000x map into the game and display only chunk 800x600 of it

 

[ivan.popelyshev]

All "100k bunnies" problems solutions separate to two parts:

1. High-level algos: window, chunks, carmac algo, many others

2. Low-level algos: Containers/Sprites, Graphics, pixi-tilemap, e.t.c.

You write a high-level algo that crunches data and gives it to low-level.

[kutas]

ok but should i load for example whole 8000x8000 png file into my app? How do i display just part of it and render only for example 300x300 cutted piece of it?

[ivan.popelyshev]

Low-level wont survive 8000x8000 png. For example, you tested that 1024x1024 is fine, or tile-based 4096 is fine. Then you have to write high-level algo that scales this up

[kutas]

and what is best approach to do that?

Lets say i have map 8000x8000 

i give starting point for x4000, y4000 and create my view container with rectangle slice of the map of coords x3000 and width 2000px / y3000, width 2000px

and then every character move lets say 1px to the right and 1 px to the down just re-draw the container with slice of the map of coords x3001 and width 2000px / y3001, width 2000px etc?

 

Would it be good idea?

Edited April 11, 2021 by kutas

[ivan.popelyshev]

I think that should be start:

1. learn whats pivot/position combination for camera , search forums, search pixijs issues by "pivot"

2. learn pixi-viewport, read sources

I really cannot make summary of those two things right now. 

[ivan.popelyshev]

Start with phaser, it has everything from the box

[kutas]

i got my camera following sprite by setting pivot to sprite position on every move but the question is how the hell that works? For me its very unintuitive. As far as i know pivot is just only a point that describes position where every transformations occurs but nothing more. Here im not moving my camera position so how why that moves? I've worked with many engines, graphiics softwares and never seen that just changing pivot position caused any transformation....

Steps are:

Set stage to the center (which is x 400 y 300)

add player to that stage on default position relative to stage (which is 0,0 so player is centered)

set pivot point of stage to player position which is 0,0 - which i dont understand. why we do that?

move player by +5px and update pivot point of stage to player new position - why stage moves? We just change position of the point which describes transformations starting place, not even touching stage transformations itself

 

Can you explain this to me? Why does it move when we change pivot? Maybe this is the mystery i need to understand to get this library around my head

 

 

 

Edited April 12, 2021 by kutas