ByronHsu

nice solution!! but how to solve my 2nd question?

1. How to resize the window at any time when I change my window size. Something weird will occur in my app now like the image below.(the right size should be black) 2. How can I directly access mouse local position without listening to an event. I want to deliver my mouse local position to the server even if the mouse doesn't move at all. Thx a lot!!

@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?

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; }

nothing

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

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!!!

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