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

[rlangton]

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);
    this.stage.removeChild(sprite.sprite);
    this.stage.addChild(sprite.sprite);
    this.renderer.render(this.stage);
  }

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

 

[rlangton]

Also this is moving my sprite instantly from spot A to spot B.  I'd like to add a movement animation in between (change x and y over time).

[Sambrosia]

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):

http://gameprogrammingpatterns.com/game-loop.html

http://gameprogrammingpatterns.com/update-method.html

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.

[ClusterAtlas]

Sambrosia nailed it, you're better off using PIXI Application..

Btw, if you need easing / tweening too, check out https://www.npmjs.com/package/pixi-tween 

[rlangton]

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!

[ivan.popelyshev]

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.

[rlangton]

The reason I'm adding and removing sprites from the stage is because I need them to be drawn ON TOP of what already exists on the stage.  Is there any way to just set the zOrder?  Maybe this is just missing from the typings as well:

https://pixijs.github.io/examples/#/display/zorder.js

[ivan.popelyshev]

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

[Sambrosia]

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?

[ivan.popelyshev]

@Sambrosia the problem is that core team doesn't understand whats going on in that plugin, I just dont have enough reviewers for it to be merged. If GoodBoyDigital uses it in one of their games, then it'll be merged , im sure

[QuinTRON]

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!