Change or Tween a Sprite’s Color on Haxe NME HTML5 Target

Haxe is a write once compile everywhere (some might say “debug everywhere”) language and NME is a Flash-like library for drawing graphics with Haxe. I’ve been using it for a few weeks and I like it. The language has some nice features that make it very familiar to me.

For my 2012 Github Game-Off game I’m using Haxe and NME. I ran into a problem while trying to fade a rectangle from one color to another. After asking a quick question on haxelang got an answer. Here’s how to fix it.

If you’re using the HTML5 target, you might notice that you can’t use Actuate.transform() to change the color of a sprite. That’s because the canvas renderer that NME uses, Jeash, hasn’t implemented it yet, dang. Here’s what I did instead.

public function new(itemInBox:Resource) 
{
  super();
    
  resource = itemInBox;
    
  boxWidth = Lib.current.stage.stageWidth * .08;
    
  drawBox(defaultColor);
  fadeBoxIn(7);
}
  
public function changeBoxColor():Void 
{
  var boxColor:Int = 0;
  switch(resource.type)
  {
    case ResourceType.Lithium:
      boxColor = lithiumColor;
    case ResourceType.Plutonium:
      boxColor = plutoniumColor;
    case ResourceType.Uranium:
      boxColor = uraniumColor;
  }
    
  drawBox(boxColor);
  fadeBoxIn(.5, 0);
}
  
private function drawBox(fillColor:Int):Void 
{
  this.graphics.beginFill(fillColor, 1);
  this.graphics.drawRect(
    (boxWidth / 2) * -1,
    (boxWidth / 2) * -1,
    boxWidth,
    boxWidth);
  this.alpha = 0;
}
  
private function fadeBoxIn(speed:Float, delay:Float = 0):Void
{
  Actuate.tween(this, speed, { alpha: 1 } ).delay(delay);
}
									

Explanation:

  • First, I draw a box, “drawBox(defaultColor)”.
  • Next, I fade it in, “fadeBoxIn(7)”.
  • A bunch of stuff happens outside of this class.
  • “changeBoxColor()” is called from outside.
  • I pick a color based on “ResourceType”
  • Then, I redraw the box and fade it in again.

 

You may notice that I never graphics.clear()’d the original box. That is so the new box color will fade in smoothly over the old box color. If I cleared the old box first, you’d see it disappear and then the new box would fade in.

Yes, now I have two rectangles instead of one. Unfortunately, that takes memory. I hope Jeash implements Actuate.transform() soon.