整个精灵 sheet 显示在移相器中

Question

我不明白为什么我的整个精灵 sheet 都显示在移相器中。我认为我的代码是正确的，但显然我遗漏了一些东西。我尝试指定动画应从窗格 1 开始，但当游戏加载到浏览器时，所有三个窗格都会显示。非常感谢任何帮助！提前致谢！

html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
    <title>Farm Game</title>
    <script type="text/javascript" src="phaser.js"></script>
    <style>

        body{
            padding:0px;
            margin:0px;
            background:black;
        }
    </style>
    </head>
<body>
    <script src="main.js"></script>
    </body>

JavaScript

var GameState={
  preload:function(){
      this.load.image('background', 'background.png');
      this.load.image('arrow', 'arrow.png');

      /*this.load.image('chicken', 'chicken.png');
      this.load.image('horse','horse.png');
      this.load.image('pig', 'pig.png');
      this.load.image('sheep','sheep3.png');*/

      this.load.image('chicken','chicken_spritesheet.png', 131,200,3);
      this.load.image('horse', 'horse_spritesheet.png', 212, 200, 3);
      this.load.image('pig', 'pig_spritesheet.png', 297,200,3);
      this.load.image('sheep', 'sheep_spritesheet.png', 244,200,3);



  },
     create: function() {

    //scaling options
    this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;

    //have the game centered horizontally
    this.scale.pageAlignHorizontally = true;
    this.scale.pageAlignVertically = true;

    //create a sprite for the background
    this.background = this.game.add.sprite(0, 0, 'background')

    //group for animals

    var animalData=[

        {key:'chicken', text:'CHICKEN'},
        {key:'horse', text:'HORSE'},
        {key:'pig', text:'PIG'},
        {key:'sheep', text:'SHEEP'},

    ];


    this.animals=this.game.add.group();  

    var self= this;     
    var animal;

    animalData.forEach(function(element){

        animal = self.animals.create(-1000, self.game.world.centerY, element.key, 0);
        animal.customParams={text:element.key};
        animal.anchor.setTo(0.5);

        //animal animation

         animal.animations.add('animate', [0, 1, 2, 1, 0, 1], 3, false);

        animal.inputEnabled=true;
        animal.input.pixelPerfectClick=true;
        animal.events.onInputDown.add(self.animateAnimal,self);
    });

         this.currentAnimal=this.animals.next();
         this.currentAnimal.position.set(this.game.world.centerX,this.game.world.centerY);



    //left arrow
    this.leftArrow = this.game.add.sprite(60, this.game.world.centerY, 'arrow');
    this.leftArrow.anchor.setTo(0.5);
    this.leftArrow.scale.x = -1;
    this.leftArrow.customParams = {direction: -1};

    //left arrow allow user input
    this.leftArrow.inputEnabled = true;
    this.leftArrow.input.pixelPerfectClick = true;
    this.leftArrow.events.onInputDown.add(this.switchAnimal, this);

    //right arrow
    this.rightArrow = this.game.add.sprite(580, this.game.world.centerY, 'arrow');
    this.rightArrow.anchor.setTo(0.5);
    this.rightArrow.customParams = {direction: 1};

    //right arrow user input
    this.rightArrow.inputEnabled = true;
    this.rightArrow.input.pixelPerfectClick = true;
    this.rightArrow.events.onInputDown.add(this.switchAnimal, this);    

  },
  //this is executed multiple times per second
  update: function() {
  },

  animateAnimal: function(sprite, event) {
    sprite.play('animate');
  },

  switchAnimal: function(sprite, event) {

      if(this.isMoving){
          return false;
      }

      this.isMoving=true;

      var newAnimal, endX;

    if(sprite.customParams.direction >0){
       newAnimal= this.animals.next();
        newAnimal.x = -newAnimal.width/2;
        endX= 640 +this.currentAnimal.width/2;

    }else{

     newAnimal=this.animals.previous(); 
        newAnimal.x= 640 + newAnimal.width/2;
        endX= -this.currentAnimal.width/2;
    }
      var newAnimalMovement = this.game.add.tween(newAnimal);
      newAnimalMovement.to({x: this.game.world.centerX}, 1000);
      newAnimalMovement.onComplete.add(function(){
          this.isMoving=false;
      }, this);
      newAnimalMovement.start();

      var currentAnimalMovement= this.game.add.tween(this.currentAnimal);
      currentAnimalMovement.to({x:endX}, 1000);
      currentAnimalMovement.start();


      this.currentAnimal = newAnimal;
  }
  };







//initiate the Phaser framework
var game = new Phaser.Game(640, 360, Phaser.AUTO);

game.state.add('GameState', GameState);
game.state.start('GameState');

Answer 1

要加载 spritesheet，您需要告诉 Phaser 这是一个 spritesheet。

game.load.spritesheet('chicken','chicken_spritesheet.png', 131,200,3);

那么您的动画应该会按预期运行。

有关完整的工作示例，请参阅 official Load Spritesheet example。

整个精灵 sheet 显示在移相器中

entire sprite sheet showing in phaser

javascript

phaser-framework

html

JavaScript