대부분 우리가 Phaser에서 게임을 만들때 우리는 스프라이트, 텍스트 또는 버튼 같은 간단한 객체를 사용하고 있습니다. Phaser에 글쓰기를 정말 좋아하지만 플래시 게임을 만들 때 사용하지 않을 때가 있습니다. 수업 내에서 다양한 요소를 만들 수 있습니다. Phaser로는 똑같은 일을 할 수는 없지만 복잡한 대상을 만드는 함수를 만드는 것이 가능합니다. 복잡한 객체는 단순히 자식 요소가 포함 된 그룹을 설명하는 데 사용하는 구문입니다. 이런 식으로, 나는 기본적으로 내가했던 것과 똑같은 결과를 얻을 수있었습니다.
이 예제에서는 버튼 객체를 만드는 함수를 작성했습니다. 이 경우 Phaser 프레임 워크에 내장 된 버튼이 아니라 텍스트 필드와 스프라이트가 포함 된 그룹입니다. 이것은 필요한 버튼이 무엇인지 모르는 상황에서 유용하기 때문에 한 줄의 코드로 새로운 버튼을 제작 할수 있습니다.
나는 최근에 한 게임에서 우주선 내부의 글자와 다른 게임에서의 거품으로 된 글자로 알파벳을 배우는 아이들을 위해 쓰고있는 몇 가지 게임에 대해이 기술을 사용했습니다. 나는 단순히 makeBubble 또는 makeShip 함수를 작성하고 필요한 모든 것을 만들기 위해 알파벳을 반복했습니다.
이 기술을 사용하려면 4 가지 작업을 수행해야합니다.
1. 스타일 (텍스트, 색상, 크기, 프레임)에 대한 매개 변수가있는 함수 만들기
2. 그 스타일 선택을 반영하는 자식 요소 만들기 (스프라이트, 텍스트 필드)
3. 그룹을 만들고 그 안에 요소들을 넣으십시오.
4. 그 그룹을 객체로 반환한다.
makeButton 함수로이 작업을 수행하고 create 함수에 버튼을 만들었습니다.
var StateMain = {
preload: function () {
game.load.spritesheet("colors","images/colors.png",150,50);
},
create: function () {
var btnYes=this.makeButton("YES",1);
btnYes.y=game.height*.25;
btnYes.x=game.world.centerX;
var btnNo=this.makeButton("NO",0);
btnNo.y=game.height*.75;
btnNo.x=game.world.centerX;
this.statusText=game.add.text(game.world.centerX,game.world.centerY,"");
this.statusText.fill="#ffffff";
this.statusText.anchor.set(0.5,0.5);
},
makeButton:function(text,color)
{
//create the back for the button
var back=game.add.image(0,0,"colors");
back.frame=color;
//create the label for the button
//and set the text to the text parameter passed down
var label=game.add.text(0,0,text);
back.anchor.set(0.5,0.5);
label.anchor.set(0.5,0.5);
//create the group
var buttonGroup=game.add.group();
//add the sprite and the label to the group
buttonGroup.add(back);
buttonGroup.add(label);
//groups can not take input so we need to add the
//listener for the click
back.inputEnabled=true;
back.events.onInputDown.add(this.buttonClicked,this);
//return the group as the button
return buttonGroup;
},
buttonClicked:function(target)
{
//since the target is the sprite
//we get the parent of the target
//
var group=target.parent;
//the label is the second child we added to the
//group so we can find it at index 1
//the back sprite is found at index 0
var label=group.getChildAt(1);
this.statusText.text=label.text;
},
update: function () {
}
}
'PHASER.JS' 카테고리의 다른 글
| 그룹으로 생성된 객체 드래그 하는 방법 (0) | 2018.10.12 |
|---|---|
| Phaser Audio Delay (0) | 2018.10.12 |
| Phaser Js 에서 오브젝트 크기 조절하기 (0) | 2018.10.12 |
| Phaser Js 코드 템플레이트 (Text) (0) | 2018.10.12 |
| Phaser Js 코드 템플레이트 (Button) (0) | 2018.10.12 |