Jump to content

how does game like surviv.io work


Recommended Posts

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


Link to comment
Share on other sites

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 by kutas
Link to comment
Share on other sites

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 by kutas
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...