avalon1315 Posted August 4, 2017 Share Posted August 4, 2017 Hi, I think that I have typed my code in correctly, but when I try to play the game all three panels of my sprite animation show. Can someone please tell me what I am doing wrong? I am stuck! Thank you so much in advance!! 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'); Link to comment Share on other sites More sharing options...
Recommended Posts