A few questions about pixi.js on building agar.io

[ByronHsu]

Recently I am building an io game like agar.io.

But I encounter 2 problems now.

First, after reading up some articles in this forum about the camera on pixi.js.I found the best way is to set pivot to the container. I try this and work greatly. But I just wonder can I create another container called camera to perform the functionality of camera instead of using app.stage as a map and camera at the same time?

Secondly, what is the best way to get my circle bigger when I eat a food? The only way I think of is using PIXI.Graphics to draw a new circle and replace the old one with it.But it seems time-consuming and stupid. Are there any better solutions?

Thx everyone!

Below is my test code on pixi.

import * as PIXI from 'pixi.js';
// SOME ALIAS
const Application = PIXI.Application;
const Graphics = PIXI.Graphics;
const Sprite = PIXI.Sprite;
const ObservablePoint = PIXI.ObservablePoint;
const Container = PIXI.Container;
const Point = PIXI.Point;

// CREATE A NEW PIXI APP
const appConfig = {width: window.innerWidth, height: window.innerHeight,antialias: true, view: document.querySelector('#root')};
const app = new Application(appConfig);
 
// CREATE NEW SPRITES
const spriteMove = Circle(0xffffff,30);
app.stage.addChild(spriteMove);
const spriteStop = Circle(0xe83a30,50);
app.stage.addChild(spriteStop);
 
// SET CAMERA
// FIXME CAN'T NOT BUILD A INDEPENDENT CAMERA MAYBE BECAUSE OF THE PIXI ORIGINAL DESIGN
const camera = new Container();
app.stage.position.set(app.screen.width/2,app.screen.height/2);
 
// ANIMATION
app.ticker.speed = 0.1;
app.ticker.add(()=>{
spriteMove.x += 0.5;
spriteMove.y += 0.5;
// GROW BIGGER
// app.stage.children[0] = Circle(0xfff,r++);
// IT DOES NOT ASSIGN REFERENCE SO IT HAS TO BE PUT IN ANIMATION LOOP
app.stage.pivot.copy(spriteMove.position);
})
 
// GRAPH FUCNTION
function Circle(c, r){
const g = new Graphics();
g.lineStyle();
g.beginFill(c);
g.drawCircle(0, 0, r);
g.endFill();
const s = new PIXI.Sprite(g.generateCanvasTexture());
s.anchor.set(0.5,0.5);
return s;
}

 

[ivan.popelyshev]

Yes, just add camera to the stage and use pivot and position of camera instead.

As for growth, there are many ways, for example you can change scale every time player eats something. Every ten seconds check if scale is too big, and re-generate the texture if needed.

[ByronHsu]

@ivan.popelyshev Thanks a lot!!! You are really a nice guy!!

The purpose of regenerating is ensuring that the quality of sprite does not get too low?

And for the first response, do you mean that I have to add sprite to the camera (i.e. use camera as a map)?

Can't I separate my game map and camera? 

Edited November 29, 2017 by ByronHsu
clearify

[ivan.popelyshev]

Yep, in basic case, camera is a map. However, there are cases where CAMERA and MAP are separated in pixi, I just dont want to make it difficult for you now.

Old config: STAGE->elements

New config: STAGE-> CAMERA->elements , STAGE->UI

Whatever you did with stage before, you do with camera instead. In most cases, there are multiple layers in camera, because you want certain elements be above others.

CAMERA->DOWN_LAYER,UP_LAYER 

elements are added either to one layer or another.