Farm_3) 그룹과 반복문, next(), 동물 교체, tween, onComplete

반복문과 .next()

// 반복문을 돌리면서 그룹 내 모든 element에 원하는 attribute를 설정한다

animalData.forEach(function(element){

//create each animal and put it in the group

animal = self.animals.create(-1000, self.game.world.centerY, element.key);

//I'm saving everything that's not Phaser-related in a custom property

animal.customParams = {text: element.text};

//anchor point set to the center of the sprite

animal.anchor.setTo(0.5);

//enable input so we can touch it

animal.inputEnabled = true;

animal.input.pixelPerfectClick = true;

animal.events.onInputDown.add(self.animateAnimal, self);

});

//place current animal in the middle

// currentAnimal이라는 변수를 선언하고 animals의 다음 요소를 call한다

// 커서의 개념으로 생각하면 되고 또 next를 하면 그 다음 요소를 call한다

this.currentAnimal = this.animals.next();

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

클릭 -> 동물 교체

//switch animal

switchAnimal: function(sprite, event) {

var newAnimal, endX;

if(sprite.customParams.direction > 0) {

newAnimal = this.animals.next();

endX = 640 + this.currentAnimal.width/2;

}

else {

newAnimal = this.animals.previous();

endX = -this.currentAnimal.width/2;

}

// 현재의 animal의 x좌표를 계산해둔 endX로 설정해서 없앤다

this.currentAnimal.x = endX;

// 새로운 animal의 x좌표를 정중앙에 위치

newAnimal.x = this.game.world.centerX;

// 현재의 animal을 newAnimal로 변경(이미 저 멀리 가있음)

this.currentAnimal = newAnimal;

    }

};

tween

//switch animal

switchAnimal: function(sprite, event) {

var newAnimal, endX;

//according to the arrow they pressed, which animal comes in

// left arrow의 경우

// 1) new animal을 선언후 next로 할당

// 2) new animal의 최초 x 좌표를 설정

// 3) new animal의 end X 좌표를 설정

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;

}

// tween animations, moving on x

// 변수 선언 후 tween할 타켓을 파라미터로 설정하하고 할당

var newAnimalMovement = this.game.add.tween(newAnimal);

// final destination(센터, 소요시간(1초 = 1000))

newAnimalMovement.to({x: this.game.world.centerX}, 1000);

newAnimalMovement.start();

// newAnimalMovement가 동물을 불러오는 함수

// currentAnimalMovement는 현재 동물을 치우는 함수

var currentAnimalMovement = this.game.add.tween(this.currentAnimal);

currentAnimalMovement.to({x: endX}, 1000);

currentAnimalMovement.start();

this.currentAnimal = newAnimal;

}

onComplete

//switch animal

switchAnimal: function(sprite, event) {

//if an animation is taking place don't do anything

if(this.isMoving) {

return false;

}

this.isMoving = true;

var newAnimal, endX;

//according to the arrow they pressed, which animal comes in

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;

}

//tween animations, moving on x

var newAnimalMovement = game.add.tween(newAnimal);

newAnimalMovement.to({ x: this.game.world.centerX }, 1000);

// onComplete를 통해서 Movement가 끝나면 false를 반환 함으로써

// 끝나기 전에는 계속 true라 위 if문에서 종료가 되어 버린다

// onComplete에 달린 function은 newAnimalMovement가 끝나면 실행된다

newAnimalMovement.onComplete.add(function(){

this.isMoving = false;

}, this);

newAnimalMovement.start();

var currentAnimalMovement = game.add.tween(this.currentAnimal);

currentAnimalMovement.to({ x: endX }, 1000);

currentAnimalMovement.start();

this.currentAnimal = newAnimal;

}

};