Jump to content

Should I have to re-render ever time I move a sprite?


Recommended Posts

I have a number of sprites on the screen.  Any time I move one (set the x and y values), I have to remove the sprite from the stage, add the sprite to the stage, and then rerender the stage.  Is this normal?  Just wondering if I'm doing it right or if there is a more efficient way.  Here's my code for moving a sprite:

  private renderer: PIXI.WebGLRenderer | PIXI.CanvasRenderer;
  private stage: PIXI.Container;

  private moveCharacter(sprite: CharacterSprite, hex: PlayfieldHex) {
    console.log('move at speed! :' + hex.character.speed);
    this.setSprite(sprite.sprite, hex.row, hex.column);

  private setSprite(sprite: PIXI.Sprite, row: number, column: number) {
    sprite.position.x = this.getX(row, column);
    sprite.scale.x = this.scale;
    sprite.position.y = this.getY(row, column);
    sprite.scale.y = this.scale;


Link to comment
Share on other sites

I would suggest using PIXI.Application instead of manually creating the renderer and stage, unless you have a specific reason not to. http://pixijs.download/release/docs/PIXI.Application.html

That will also create a PIXI.ticker.Ticker object which will be used automatically to render the stage every frame at a rate decided by the browser (usually 60 fps).

You can then simply add your objects to the stage and they will be rendered every frame. Just change your objects' positions and they will appear where they should. If you want to move your objects smoothly, you will need to move them by a small amount each frame until they reach their destination.

I recommend reading about game loops/update functions if you want a better understanding of how this works.

Here's a very well-written resource for exactly that (and much more):



The update method chapter is what's particularly relevant here, but the game loop one is worth reading even though PIXI.Application (and the browser) mostly handles it.


Edit: Oh, and to answer your question: No you shouldn't have to do that. Something more fundamental is wrong which is why I wrote what I did.

Link to comment
Share on other sites

Thank you Sambrosia for the excellent recommendations!

Just for a bit of background, this is an application that has different "components" on the screen, with the main play field being the largest.  Any issues you foresee with having multiple PIXI.Application's?  It looks like the current typings (@typings/pixi.js) is missing the definition for a PIXI.Application as well as the book I've been reading on PixiJS.  Both are likely outdated which is why I didn't know about the PIXI.Application object.  Thanks again for the info!

Link to comment
Share on other sites

use typings from https://github.com/pixijs/pixi-typescript repo. We have a problem updating "[email protected]" . Application is very easy mashup, look in https://github.com/pixijs/pixi.js/blob/dev/src/core/Application.js

Yes, you can use multiple renderers but I think that only main one and may be minimap has to be WebGLRenderer, and most of them have to be rendered only when you change something.

Link to comment
Share on other sites

Its not missing. Its https://github.com/pixijs/pixi-display and it has its own typings, its written on TS ;) 

Also you can use newer version: https://github.com/pixijs/pixi-display/tree/layers, it has different API but also some bonus things: http://pixijs.github.io/examples/#/layers/lighting.js

Link to comment
Share on other sites

I'm unfamiliar with pixi-display, but here's how pixi works without it:

Newly added objects are rendered on top by default. The display objects are rendered in the same order they are in their parent's "children" array. So the first child in the array is rendered, and then the second is rendered (over top of the previous) and so on. If a child has children of its own, then all of those grandchildren are rendered in the same fashion before moving on to the next child.

There are methods for adding and removing children at specific positions in the parent's children array: http://pixijs.download/release/docs/PIXI.Container.html#addChildAt

You can also use Array methods to do things like sort the children array: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort


@ivan.popelyshev Are there any plans to merge pixi-display into pixi at some point?

Link to comment
Share on other sites

Hi guys, I really require this for my game so I have downloaded the package from here: https://github.com/gameofbombs/pixi-display 

I basically have many player sprites on top of other player sprites, and each player sprites have layers within themselves which need to be displayed correctly.

I will let you know how I go! 

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