How to do a Tween in CraftyJS?

Question

Alright, I'm at my wits end and I can't get CraftyJS to do a tween.

So what I wanna do is, everytime a Mushroom gets hit, I want to check if that mushroom has the component "Answer". If it exists, I will do nothing. Otherwise, I wanna display a big red box that fades away.

Crafty.c("Mushroom", {
        init: function() {
            this.addComponent("collision");
            this.collision();
            this.onhit("bullet",function(e) {
                this.destroy();
                e[0].obj.destroy();
                if(!this.has("Answer")) {
                    Crafty.e("2D, Tween, color, canvas")
                    .attr({alpha: 1.0, x: 170, y: 100, w:300, h:100})
                    .color("red")
                    .bind("enterframe", function() { //How do i actually get the box to fade?
                        this.tween({alpha: 0.5, x: 170, y: 100}, 30);
                    });
                }
            });
        }

Answer 1

You are binding the tween code execution to the EnterFrame event, which will cause the tween to start with each frame. Instead, you want to simply call the tween function on the entity you created, like so

 Crafty.e("2D, Tween, color, canvas")
                .attr({alpha: 1.0, x: 170, y: 100, w:300, h:100})
                .color("red")
                .tween({alpha: 0.5, x: 170, y: 100}, 600);

And the tween function will manage its own EnterFrame over the next 600 ms (30 frames), after which it will fire the TweenEnd event.

(In old versions of Crafty, you specified the duration in frames instead of ms.)

Answer 2

This is more like a meta answer :-)

First, i would encourage you to upgrade to the latest version as it has a lot of bugfixes. Some of the changes you will have to do to get your code to run under the new release is to change all components and events to Pascal casing. That is enterframe => EnterFrame, canvas => Canvas etc.

Second, i think you should bring these questions to the Crafty forum to get the right audience. The only way i discovered this question was through a google alert.

The best way to get help is to create a jsfiddle from this template http://jsfiddle.net/mCdUX/62/ with a small running example demonstrating the part that you can not get to work.

Oh, and welcome to the Crafty community :-)