Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

Bitmapdata animations


kcurtin
 Share

Recommended Posts


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

Link to comment
Share on other sites

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);
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

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