Use pixi.js to build a game like agar.io

[ByronHsu]

I want to build a game like agar.io. I create a PIXI.app first and then create a container called clientView insides. I render all my sprites on app.stage and I want to render clientView to my window so that when the client move , I only have to move the container and render it to my windows. Do anyone have good suggestion to implement this, and can I only render a container instead of the whole stage? thx everyone

[ivan.popelyshev]

For camera&moving, in general, search for "camera" threads in this subforum, I posted "pivot & position" solution multiple times.

Also, read all threads by @caymanbruce , he's making the same type of game.

PIXI draws everything every frame and while on old computers it was good idea to draw only certain elements, now there's no big gap between that and "draw everything". However, code style and application architecture suffers significantly. Basic performance optimization is "tilemap" optimizations, I described it, please search this subforum.

However if you are ready for what I think is premature optimizations - of course you can ask renderer to render only one container and dont clear the view, but dont complain when it turns out you spend time for nothing. But please remember that first you want to make a game and second is to optimize it for slow computers with old GPU's, because that'll take siginificant amount of hours and suck all of your motivation like a brain slug.

Anyway, first thing that you need is to look into https://github.com/pixijs/pixi.js/blob/dev/src/core/Application.js , and make your own Application instead of that pixi mashup made for demos and hello-worlds. Create renderer, ticker, loader. Add whatever updates/animations/extra_renderer_calls in it.

[ByronHsu]

I successfully centered my circle. But I still can't understand how to do if I want to use app as a world map and only render camera.(app and camera are the same size now) Really thx a lot for your help!!!

 

 

[ivan.popelyshev]

> how to do if I want to use app as a world map and only render camera.

That's something you must nail in your brain:

World map does not have size. Camera doesnt have size. Any pixi container does not have size. Size is second-class citizen, while position&scale&pivot are first. If something renders beyond the screen, its vertex shaders run but fragments aren't - that's how WebGL works. It does not calculate pixel colors outside the screen.

Another thing that is very hard to understand if you dont clear your mind and forget about whatever way you wanted to implement it:

Imagine that you have all data for big map, but not actual sprites/graphics/whatever. You maintain a "window" 2x or 3x size of camera, that is filled with your objects. Every time camera rectangle (that you calculate, pixi doesnt know about it) touches that "window" edge, you calculate new "window" centered at the camera and fill it with objects that has to be inside that area. You can re-use objects. You can also treat moving objects differently - dont apply that strategy for them, or check every time if they are in your culling "window".

This strategy allows to optimize many objects with PIXI.Graphics or https://github.com/pixijs/pixi-tilemap or PIXI.mesh. There are no tutorials on that, its just common sense that you have to understand and at least try to implement.

> window.outerWidth, window.outerHeight

Use innerWidth.

[ivan.popelyshev]

I feel like im explaining same things every week and every week it all over again. I think pixi really needs a tutorial about big maps and cameras, but I'm still not ready to write it.

[ivan.popelyshev]

ITs simplest solution, not the best one, but its enough for most projects. There are different techniques like "Chunks" that are used in Minecraft, but that way you'll have much more problems in the code. 

Here the only serious work is to get a list of objects that appear in new "window", and compare which objects already exists, which has to be added, and which removed. Sometimes you just refill it completely, that is even easier. If that process takes less than 10 milliseconds, then game wont lag at all. Otherwise , you'll see small lag every time you scroll too far.

As for coordinates, all objects have global map coords, just imagine that map is really big but only small part around the camera exists right now  

That way we cut all the far-away objects, and for near objects out of camera view WebGL doesnt run the most expensive thing - fragment shader.

[ByronHsu]

Really thanks a lot.I will read all your comments more thoroughly!! 

[ByronHsu]

nothing

Edited November 18, 2017 by ByronHsu
fix bug