2

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);
                    });
                }
            });
        }
Deyang
  • 510
  • 6
  • 20

2 Answers2

5

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.)

starwed
  • 2,536
  • 2
  • 25
  • 39
Piers Mana
  • 382
  • 4
  • 13
  • 1
    As of Crafty 0.6.1, it's not frames, but milliseconds now. – ashes999 Jan 12 '14 at 04:03
  • That's actually really great for some games, but is there still the option to use frames instead? – Piers Mana Jan 13 '14 at 20:55
  • I believe milliseconds makes it more robust. If your app runs on a faster/slower machine, the animation appears more consistent when timed by seconds than by frames. (This is not unique to CraftyJS either.) – ashes999 Jan 13 '14 at 21:43
  • By default, 1 frame is 20ms (50 FPS), so just multiply by 20! – starwed Mar 12 '14 at 14:16
1

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 :-)

sorenbs
  • 749
  • 4
  • 7
  • 1
    -1: doesn't actually answer the user's question. I'm also not entirely comfortable with driving users away from SO on this very site. – millimoose Feb 04 '12 at 22:30
  • 1) If the vision behind SO is to improve the web, and i know for sure there is another place on the web where people are much more likely to receive a good answer to a specific question (and other people are more likely to benefit from that answer) i think it is in line with the SO vision to let people know. 2) Upgrading Crafty is the correct answer in this case. 3) Sorry for bitching :-) – sorenbs Feb 29 '12 at 12:30
  • Considering the OP's question doesn't make it clear what the problem actually was, and you in fact asked for clarification in your answer, and neither the question or the answer were edited to tell the rest of the story, I only have your word on it that the problem was an issue fixed by upgrading. And while I have no reason not to trust you on it, it doesn't make this question-and-answer less useless to anyone else who finds it in Google. – millimoose Feb 29 '12 at 19:02