konva/test/unit/shapes/Sprite-test.js

suite('Sprite', function() {
    // ======================================================
    test('add sprite', function(done) {
        var imageObj = new Image();
        imageObj.onload = function() {
            var stage = addStage();
            var layer = new Konva.Layer();


            var sprite = new Konva.Sprite({
                x: 200,
                y: 50,
                image: imageObj,
                animation: 'standing',
                animations: {
                    standing: [
                        0, 0, 49, 109,
                        52, 0, 49, 109,
                        105, 0, 49, 109,
                        158, 0, 49, 109,
                        210, 0, 49, 109,
                        262, 0, 49, 109
                    ],
                    kicking: [
                        0, 109, 45, 98,
                        45, 109, 45, 98,
                        95, 109, 63, 98,
                        156, 109, 70, 98,
                        229, 109, 60, 98,
                        287, 109, 41, 98
                    ]
                },
                frameRate: 10,
                draggable: true,
                shadowColor: 'black',
                shadowBlur: 3,
                shadowOffset: {x: 3, y:1},
                shadowOpacity: 0.3
            });

            layer.add(sprite);
            stage.add(layer);

            assert.equal(sprite.getClassName(), 'Sprite');
            assert.equal(sprite.frameIndex(), 0);

            showHit(layer);

            var trace = layer.hitCanvas.getContext().getTrace();

            assert.equal(trace.indexOf(sprite.colorKey) >= 0, true);

            sprite.start();


            // kick once
            setTimeout(function() {
                sprite.setAnimation('kicking');
                sprite.on('indexChange', function(evt) {
                    if (evt.newVal === 0 && this.getAnimation() === 'kicking') {
                        sprite.setAnimation('standing');
                    }
                });
            }, 2000);
            setTimeout(function() {
                sprite.stop();
            }, 3000);



            done();
        };
        imageObj.src = 'assets/scorpion-sprite.png';
    });

    // ======================================================
    test('don`t update layer too many times', function(done) {
        var imageObj = new Image();
        imageObj.onload = function() {
            var stage = addStage();
            var layer = new Konva.Layer();


            var sprite = new Konva.Sprite({
                x: 200,
                y: 50,
                image: imageObj,
                animation: 'standing',
                animations: {
                    standing: [
                        0, 0, 49, 109,
                        52, 0, 49, 109,
                        105, 0, 49, 109,
                        158, 0, 49, 109,
                        210, 0, 49, 109,
                        262, 0, 49, 109
                    ]
                },
                frameRate: 5,
                draggable: true,
                shadowColor: 'black',
                shadowBlur: 3,
                shadowOffset: {x: 3, y:1},
                shadowOpacity: 0.3
            });

            layer.add(sprite);
            stage.add(layer);

            var oldDraw = layer.draw;
            var updateCount = 0;
            layer.draw = function() {
                updateCount++;
                oldDraw.call(layer);
            };

            sprite.start();
            setTimeout(function() {
                sprite.stop();
                assert.equal(updateCount < 7, true);
                done();
            }, 1000);


        };
        imageObj.src = 'assets/scorpion-sprite.png';
    });

    // ======================================================
    test('don`t update layer too many times 2', function(done) {
        var imageObj = new Image();
        imageObj.onload = function() {
            var stage = addStage();
            var layer = new Konva.Layer();


            var sprite = new Konva.Sprite({
                x: 200,
                y: 50,
                image: imageObj,
                animation: 'standing',
                animations: {
                    standing: [
                        0, 0, 49, 109,
                        52, 0, 49, 109,
                        105, 0, 49, 109,
                        158, 0, 49, 109,
                        210, 0, 49, 109,
                        262, 0, 49, 109
                    ]
                },
                frameRate: 5
            });

            var sprite2 = new Konva.Sprite({
                x: 200,
                y: 50,
                image: imageObj,
                animation: 'standing',
                animations: {
                    standing: [
                        0, 0, 49, 109,
                        52, 0, 49, 109,
                        105, 0, 49, 109,
                        158, 0, 49, 109,
                        210, 0, 49, 109,
                        262, 0, 49, 109
                    ]
                },
                frameRate: 20
            });

            layer.add(sprite).add(sprite2);
            stage.add(layer);

            var oldDraw = layer.draw;
            var updateCount = 0;
            layer.draw = function() {
                updateCount++;
                oldDraw.call(layer);
            };

            sprite.start();
            sprite2.start();
            setTimeout(function() {
                sprite.stop();
                sprite2.stop();
                assert.equal(updateCount > 15, true);
                assert.equal(updateCount < 27, true);
                done();
            }, 1000);


        };
        imageObj.src = 'assets/scorpion-sprite.png';
    });

    test('check is sprite running', function(done){
        var imageObj = new Image();
        imageObj.onload = function() {
            var stage = addStage();
            var layer = new Konva.Layer();


            var sprite = new Konva.Sprite({
                x: 200,
                y: 50,
                image: imageObj,
                animation: 'standing',
                animations: {
                    standing: [
                        0, 0, 49, 109,
                        52, 0, 49, 109,
                        105, 0, 49, 109,
                        158, 0, 49, 109,
                        210, 0, 49, 109,
                        262, 0, 49, 109
                    ]
                },
                frameRate: 50,
                draggable: true,
                shadowColor: 'black',
                shadowBlur: 3,
                shadowOffset: {x: 3, y:1},
                shadowOpacity: 0.3
            });

            layer.add(sprite);
            stage.add(layer);
            assert.equal(sprite.isRunning(), false);
            sprite.start();
            assert.equal(sprite.isRunning(), true);
            sprite.stop();
            done();
        };
        imageObj.src = 'assets/scorpion-sprite.png';
    });

    test.skip('can change frame rate on fly', function(done){
        var imageObj = new Image();
        imageObj.onload = function() {
            var stage = addStage();
            var layer = new Konva.Layer();


            var sprite = new Konva.Sprite({
                x: 200,
                y: 50,
                image: imageObj,
                animation: 'standing',
                animations: {
                    standing: [
                        0, 0, 49, 109,
                        52, 0, 49, 109,
                        105, 0, 49, 109,
                        158, 0, 49, 109,
                        210, 0, 49, 109,
                        262, 0, 49, 109
                    ]
                },
                frameRate: 50,
                draggable: true,
                shadowColor: 'black',
                shadowBlur: 3,
                shadowOffset: {x: 3, y:1},
                shadowOpacity: 0.3
            });

            layer.add(sprite);
            stage.add(layer);
            assert.equal(sprite.frameRate(), 50);
            setTimeout(function(){
                sprite.frameRate(100);
                assert.equal(sprite.frameRate(), 100);
                // don't run animation after change frame rate
                assert.equal(sprite.anim.isRunning(), false);

                sprite.start();
            }, 23);

            setTimeout(function(){
                sprite.frameRate(52);
                assert.equal(sprite.anim.isRunning(), true);
                // for this moment should tick more than 2 times
                // make sure that sprite is not restating after set frame rate
                assert.equal(sprite.frameIndex() > 2, true);
                done();
            }, 68);
        };
        imageObj.src = 'assets/scorpion-sprite.png';
    });

});