ByronHsu

Members
  • Content Count

    8
  • Joined

  • Last visited

About ByronHsu

  • Rank
    Newbie

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. nice solution!! but how to solve my 2nd question?
  2. 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!!
  3. ByronHsu

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

    @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?
  4. 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; }
  5. ByronHsu

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

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

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

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