konva/test/unit/Sprite-test.ts

import { assert } from 'chai';

import { addStage, Konva, loadImage } from './test-utils';

describe('Sprite', function () {
  // ======================================================
  it('add sprite', function (done) {
    loadImage('scorpion-sprite.png', (imageObj) => {
      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);

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

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

      sprite.start();

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

      done();
    });
  });

  // ======================================================
  it('don`t update layer too many times', function (done) {
    loadImage('scorpion-sprite.png', (imageObj) => {
      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);
        return layer;
      };

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

  // ======================================================
  it('don`t update layer too many times 2', function (done) {
    loadImage('scorpion-sprite.png', (imageObj) => {
      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);
        return layer;
      };

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

  it('check is sprite running', function (done) {
    loadImage('scorpion-sprite.png', (imageObj) => {
      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();
    });
  });

  it('start do nothing if animation is already running', function (done) {
    loadImage('scorpion-sprite.png', (imageObj) => {
      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);

      var counter = 0;
      sprite.on('frameIndexChange.konva', function (event) {
        counter += 1;
      });

      sprite.start();
      sprite.start();
      sprite.stop();

      setTimeout(function () {
        assert.equal(counter, 0);
        done();
      }, 200);
    });
  });

  // need fix.
  it.skip('can change frame rate on fly', function (done) {
    loadImage('scorpion-sprite.png', (imageObj) => {
      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);
        assert.equal(sprite.anim.isRunning(), false, '1');
      }, 23);

      setTimeout(function () {
        sprite.start();
        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, '2');
        done();
      }, 68);
    });
  });
});