Complex Objects – Phaser

대부분 우리가 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 () {

    }

}