Phaser 加载屏幕动画

Question

所以我正在使用 Phaser 开发一个简单的 android 应用程序。但我一直在寻找是否有可能创建一个使用 spritesheet 动画的加载屏幕，或者以编程方式制作动画，而不仅仅是简单的裁剪，移相器是如何做到的？

this.preloadBar = this.add.sprite(50, 170, 'preloaderBar');
this.load.setPreloadSprite(this.preloadBar);

提前致谢:)

Answer 1

为了实现这一点，我有一个启动状态，在该状态下我初始化了各种与游戏相关的实用程序以及我想要在加载屏幕期间拥有的精灵。然后我只加载加载其他所有内容的预加载器状态，我只是将前一个精灵放在屏幕上。当一切完成后，主游戏或菜单状态开始。
这是一个例子：

Test.Boot.prototype = {

    init: function () {
      //general game config like scaleManager
    },

    preload: function () {
      this.game.stage.backgroundColor = '#000000';
      // the sprite you want to show during loading
      this.game.load.atlasJSONHash('logo', 'asset/images/hand.png', 'asset/images/hand.json');
    },

    create: function () {
        this.state.start('Preloader');
    }

};
// Preloader.js
Test.Preloader.prototype = {

    preload: function() {
      //add the animation
      this.logo = this.add.sprite(this.world.width/2, this.world.height/2, 'logo');
      this.logo.anchor.set(0.5, 0.5);
      this.logo.animations.add('shake',[8,9,10,11,12,13,14,15,16,17,17,8,9,8]);
      this.logo.animations.play('shake', 60, true);
      //load all the other assets
      this.game.load.image("hero", "asset/images/hero.png");
      this.game.load.image("clouds", "asset/images/sky3.jpg");
      //this.game.load.image("rope", "asset/images/rope.png");
      this.game.load.atlasJSONHash('items', 'asset/images/items.png', 'asset/images/items.json');
      this.game.load.physics('physicsData', 'asset/images/polygon.json');

    },

    create: function() {
      this.game.stage.backgroundColor = '#1589FF';

      //A simple fade out effect
      this.game.time.events.add(Phaser.Timer.SECOND * 2.0, function() {
          var tween = this.add.tween(this.logo)
              .to({alpha: 0}, 750, Phaser.Easing.Linear.none);

        tween.onComplete.add(function() {
              this.logo.destroy();
              this.startGame();
          }, this);

        tween.start();
      }, this);
    },

    startGame: function() {
        this.state.start('MainMenu');
    },

};

如果你想了解更多，有一个类似技术的视频教程here。