Scene transitions

[RedHickory Creative]

I'm a bit of a newbie to Crafty and I was looking for a way to do visual transitions between scenes.  I couldn't find anything in the docs so I wrote this up:

function load_scene(scene, duration) {

    Crafty.e("2D, Canvas, Tween, Color")

        .attr({alpha:0.0, x:0, y:0, w:800, h:600})

        .color("#000000")

        .tween({alpha: 1.0}, duration)

        .bind("TweenEnd", function() {

            Crafty.scene(scene);

            Crafty.e("2D, Canvas, Tween, Color")

                .attr({alpha:1.0, x:0, y:0, w:800, h:600})

                .color("#000000")

                .tween({alpha: 0.0}, duration);

        });

}

It fades to black, loads the new scene, then fades back to transparent.  It seems to work on the limited testing I have done.  Just thought I would throw it out there in case anyone else needs something like this while this feature is (hopefully) being developed.

[Louis Stowasser]

Very nice!

I would recommend making it a module and submitting to  http://craftycomponents.com/ 

Cheers!

[Lab Monkey]

Really nice, I'm adding this to the community cookbook! I'll give you full credit :)