Bitmapdata animations

[kcurtin]

I've been trying to draw using Bitmapdata to perform basic animations and am not sure if it is a good idea / I am doing it correctly.

 

I am trying to create an expanding circle - something like a spell that starts at the current x, y and the diameter of the circle grows to a set amount and then dies after a set period of time. I have a working solution using a tween, but wondering if there is a better way because I am having some issues.

 

For example, one issue I have is that the size of the Bitmapdata I am drawing onto has to always be double the diameter of the circle I am drawing so that there is space on the Bitmapdata to fit the circle, but since the tween increases the radius / diameter linearly depending on starting / target values and length a time this isn't always the case. Here is my current psuedo-coded implementation that I'd like feedback on:

 

create function() {

  var bmd = game.add.bitmapData(2, 2);

  var spell = game.add.sprite(x, y, bmd);

  spell.radius = 0;

  spell.diameter = 0;


  this.tween = game.add.tween(spell).to({radius: 50, diameter: 100}, 200, Phaser.Easing.Linear.None, 0);


  this.tween.onStart.add(function(spell) {

    spell.casting = true;

  })


  this.tween.onComplete.add(function(spell) {

    spell.casting = false;

    spell.kill()

  })

  

  tween.start()

}



update function() {

  if (spell.casting) {

    spell.bmd.resize(spell.diameter, spell.diameter)

    spell.bmd.circle(spell.radius, spell.radius, spell.radius, 'green');

  }

};

thanks

 

-KC

[Tilde]

I don't know if this is the best way at all, but here's what I have in place for an expanding circle.

this.burstCircle = new Phaser.Circle(0, 0, 0);this.burstRing = game.add.graphics(0, 0);Update loop:this.burstCircle.radius = this.burstRadius / 2;this.burstRadius+= 3;this.burstRing.clear();this.burstRing.lineStyle(64, 0xffffff);this.burstRing.drawCircle(this.burstOrigin.x, this.burstOrigin.y, this.burstRadius);

[kcurtin]

Interesting, thanks for sharing. I'm using Bitmapdata / Sprite because I need to enable physics body for collision detection. Seems pretty similar except you are just using the update function to bump the burstRadius instead of a tween. That actually makes much more sense... thanks!

[Tilde]

Right, instead of actually colliding the graphics object, I have a circle object that shares its radius, and that invisible circle object is what's actually checked for collisions.