CODEWITHSUNDEEP
javascripthtmlactionscript-3
Merlin
Merlin

Reputation: 978

Does CreateJS contain an event listener similar to "ENTER_FRAME" in AS3?

I am trying to translate an effect found in "Actionscript 3.0: Game Programming University" over to HTML5 Canvas rendering, and more specifically, Create/EaselJS.

This is the code I am working on:

    private var flipStep:uint;
    private var isFlipping:Boolean = false;
    private var flipToFrame:uint;

    // begin the flip, remember which frame to jump to
    public function startFlip(flipToWhichFrame:uint) {
        isFlipping = true;
        flipStep = 10;
        flipToFrame = flipToWhichFrame;
        this.addEventListener(Event.ENTER_FRAME, flip);
    }

    // take 10 steps to flip
    public function flip(event:Event) {
        flipStep--; // next step

        if (flipStep > 5) { // first half of flip
            this.scaleX = .20*(flipStep-6);
        } else { // second half of flip
            this.scaleX = .20*(5-flipStep);
        }

        // when it is the middle of the flip, go to new frame
        if (flipStep == 5) {
            gotoAndStop(flipToFrame);
        }

        // at the end of the flip, stop the animation
        if (flipStep == 0) {
            this.removeEventListener(Event.ENTER_FRAME, flip);
        }
    }

I got about halfway through before realizing it just about requires a step-by-step push every frame to animate correctly. This is my JS equivalent in HTML5:

function FlipTile(e)
{
    if (!TileFlipping)
    {
        var flipStep = 30;
        var sprite = e.currentTarget;
        console.log(sprite);

        TileFlipping = true;

        flipStep--;

        if (flipStep > 15)
        {
            sprite.scaleX = .02 * (flipStep-6);
        } else {
            sprite.scaleX = .02 * (5 - flipStep);
        }


        if (flipStep == 0)
        {
            TileFlipping = false;
        }

    }
}

The effect presents it like a card being flipped around the center, however this breaks and 'skews' the sprite flip badly without that step by step. It also only fires once, breaking the flip counter. That brings it to the hunt for the ENTER_FRAME equivalent.. or an alternate method of working this. At the moment, I am stumped.

Upvotes: 1

Views: 1961

Answers (1)

derz
derz

Reputation: 732

Not quite sure if I got your question right - but you should use the CreateJS Ticker to update stuff on the stage, check the docs here: http://www.createjs.com/docs/easeljs/classes/Ticker.html You can just replace the Event.ENTER_FRAME with "tick" and keep the logic the same as in your AS3 example.

Internally the Ticker is using window.requestAnimationFrame which usually runs 60 times per second (= 60fps). https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

Upvotes: 1

Related Questions