Jump to content

How to update only animated area using Phaser.Animation


Recommended Posts


I'm in the middle of simple phaser based board game, written in Typescript. There is a dices' animation in the game.

My canvas is transparent put on static CSS's background image. The whole drawing area of the canvas is based on Bitmapdata class. Till now everithing works fine.


I have a separate class for dices. The dice's frames are loaded as atlas and played using Phaser.Animation. I have also a "draw" and "isDirty" methods in this class.

They are used within update() method called by Phaser driven by RAF:


update() {
var somethingToRender: number = 0; // Add more

if (this.board.Dirty) {

if (this.dices.Dirty) {

if (somethingToRender > 0) {




Here is implementation of Dices::draw():


this.bmpDrawArea.clear(this.diceSprite.x, this.diceSprite.y, this.diceSprite.width, this.diceSprite.height);
this.bmpDrawArea.draw(this.diceSprite, this.diceSprite.x, this.diceSprite.y);


If the dices clas is dirty the upper code is called from update().


I ask to myself and you, does the Phaser really clears only diceSprite's part of drawing area or the whole this.bmpDrawArea is drawn on each update iteration during animation plays?


PS: If the draw method is empty it still works

Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...