gpt4 book ai didi

javascript - 整个 Sprite 表显示在移相器中

转载 作者:行者123 更新时间:2023-12-01 03:15:45 24 4
gpt4 key购买 nike

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

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');

最佳答案

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

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

然后你的动画应该按预期工作。

请参阅official Load Spritesheet example获取完整的工作示例。

关于javascript - 整个 Sprite 表显示在移相器中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45545920/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com