이 비디오에서는 23 줄의 코드만으로 Phaser에서 미사일을 만들고 촬영하는 방법을 살펴 봅니다.
기본적인 생각은 그룹 내부에 스프라이트 미사일을 만드는 것입니다. 스프라이트를 마우스의 x 위치에 놓고 y 위치를 게임 높이 아래에 놓습니다. 그런 다음 업데이트 기능을 수행하는 동안 그룹을 반복하고 각 미사일의 y 위치에서 빼냅니다.
| Phaser Js 에서 Toast 메시지 추가하기 (0) | 2018.01.29 |
|---|---|
| Phaser Js 에서 두 객체 사이의 각도를 확인해 봅시다. (0) | 2018.01.29 |
| Phaser Js 와 클래스(Class) (0) | 2018.01.27 |
| Phaser Js 에서 그룹으로 생성된 객체 드래그 하는 방법 (0) | 2018.01.27 |
| Phaser Js - Audio Delay - (0) | 2018.01.27 |
자바스크립트 클래스
나는 바위 밑에서 살고있는 것처럼 느껴진다.
Javascript 클래스는 1 년 넘게 사용하었습니다. 이것은 모든 것을 바꿉니다! 설명하겠습니다.
지난 16 년 동안 게임을 만드는 대부분의 시간은 Flash를 사용하여 이루어졌습니다. Flash의 Actionscript 언어에 대한 좋은 점 중 하나는 그것이 매우 잘 구조화되어 있다는 것입니다. 클래스를 사용하고, 다른 클래스를 확장하고, 잘 관리 할 수있는 부분으로 분류 할 수 있습니다.
html5로 옮기기에 대한 나의 가장 큰 반대 중 하나는 클래스가 없었기 때문입니다. 우리는 항상 javascript 클래스를 다음과 같이 사용할수 있습니다.
function Apple (type) {
this.type = type;
this.color = "red";
}
Apple.prototype.getInfo = function() {
return this.color + ' ' + this.type + ' apple';
};
var myApple=new Apple("macintosh");
console.log(myApple.getInfo());
자, 이것은 완벽하게 잘 작동했습니다. 문제는 대부분 정리할 수있는 문제 중 하나였습니다. 이 방법으로 계속 작성했거나 복잡한 개체에 대한 이 게시물에서 사용한 것과 비슷한 개체를 반환하는 함수를 사용했습니다.
그러나, 방금 Javascript에서 실제 클래스를 사용할 수 있다는 것을 알았습니다. 기술적으로 내가 읽은 바로는 이것이 "Syntax Sugar"라는 것입니다. Javascript에서는 모든 것이 똑같이 작동하지만, 다르게 쓸 수는 있습니다. 그것은 나를 위해 충분합니다. 이제 우리는 apple 클래스를 다음과 같이 작성할 수 있습니다.
Class Apple
{
constructor(type)
{
this.type=type;
this.color=red;
}
getInfo()
{
return this.color + ' ' + this.type + ' apple';
}
}
var myApple=new Apple("macintosh");
console.log(myApple.getInfo());
Phaser 에서 클래스 사용하기
자, Phaser가 무엇을 의미합니까?
그것은 우리가 할 수있는 것을 의미합니다 :
- Phaser 클래스를 확장하는 클래스 작성
- 훨씬 더 재사용 가능한 코드 작성하기
- 코드를보다 효율적으로 정리
그리드 만들기!
예를 들어, 많은 게임과 프로젝트에 그리드가 필요합니다. 그리드에는 객체가 추가되어야하고 객체를 행과 열로 정렬해야합니다. Phaser에서는 그룹을 사용하여 각 개체를 그룹에 추가 한 다음 forEach를 사용하여 그룹 전체를 반복합니다. 그리드를 사용해야 할 때마다 프로젝트 폴더에 복사 할 수있는 클래스를 작성하고 싶습니다.
먼저 Grid라는 클래스를 만들어야합니다.
class Grid {
constructor() {
}
}
두 번째 단계는 Grid 클래스가 Phaser의 그룹 클래스를 확장하도록 만드는 것입니다.
extends 키워드를 사용하여이 작업을 수행 할 수 있습니다.
Phaser의 그룹 클래스는 Grid 클래스의 부모가됩니다.
class Grid extends Phaser.Group {
constructor() {
}
}
마지막 단계는 super 명령을 사용하고 게임의 인스턴스를 매개 변수로 전달하여 부모 (Phaser.Group)의 생성자를 호출하는 것입니다. 이것은 "game"이라는 Phaser 게임 내에서 코드를 실행한다고 가정합니다. super가 생성자 내부에서 호출되는 첫 번째 것이 맞는지 확인하십시오.
class Grid extends Phaser.Group {
constructor() {
super(game);
}
}
현재 우리의 그리드는 Phaser 그룹보다 더 많은 것을하지 않습니다. 그런데 왜이 곤경에 가야합니까? 이제 우리는 우리 자신의 사용자 정의 함수와 변수를 추가 할 수 있습니다!
먼저 "cols"라는 생성자에 매개 변수를 전달하여 그리드에 포함시킬 열 수를 표시 한 다음이를 클래스 변수로 설정해 보겠습니다.
class Grid extends Phaser.Group {
constructor(cols) {
super(game);
this.cols=cols;
}
}
항목을 추가 한 후에는 그리드에 정렬해야하므로 이제 해당 기능을 만들어 보겠습니다. 참고 : 이것은 동일한 크기의 항목에서만 잘 작동합니다.
arrange()
{
//current row count
var row=0;
//current column count
var col=0;
//use the group's built in for each to loop
//through all the children
this.forEach(function(item)
{
//set the position based
//on the row, the column
//and the height of the item
item.y=row*item.height;
item.x=col*item.width;
//advance the column count
col++;
//if the column count is equal to the
//number of columns set
if (col==this.cols)
{
//go to the next row
row++;
//reset the column to 0
col=0;
}
}.bind(this));
//use bind(this) to keep the 'this' keyword
//to mean the class
}
이제 다음과 같이 그리드 클래스를 사용할 수 있습니다.
var grid=new Grid(3);
//add nine sprites
grid.add(sprite1);
....
grid.add(sprite9);
grid.arrange();
스프라이트를 확장하는 것은 어떨까요?
조금 더 많은 작업이 필요하지만 다음과 같이 할 수 있습니다.
class LetterBox extends Phaser.Sprite {
constructor() {
super(game,0,0,"letters",0);
//add to stage right away
game.add.existing(this);
}
}
스프라이트의 슈퍼 생성자에서 매개 변수는 다음과 같습니다.
super(game,x,y,"library_key",frame_number);
game.add.existing은 호출 한 후 곧바로 스프라이트를 스테이지에 추가합니다.
var letter=new LetterBox();
클래스의 인스턴스를 그룹에 추가하려는 경우 생략 할 수 있습니다.
다음은 Grid 및 LetterBox 클래스와 몇 가지 추가 함수가 추가 된 예제입니다.
StateMain.js
var StateMain = {
preload: function() {
//preload the sprite sheet
game.load.atlasJSONHash('letters', "images/letters.png", "images/letters.json");
},
create: function() {
//make a new grid
//with 5 columns
//
var grid = new Grid(5);
//
//make 25 letter boxes
//
for (var a = 0; a < 25; a++) {
//
//make a new letter box
//
var lb = new LetterBox();
//
//set a random letter
//
lb.setRand();
//
//add the letter to the grid
//
grid.add(lb);
}
//arrange the grid
grid.arrange();
//fit to the stage
grid.fitStage();
//put the grid in the center
grid.center();
},
update: function() {}
}
The Grid Class – grid.js
class Grid extends Phaser.Group {
constructor(cols) {
super(game);
this.cols = cols;
}
arrange() {
//current row count
var row = 0;
//current column count
var col = 0;
//use the group's built in for each to loop
//through all the children
this.forEach(function(item) {
//set the position based
//on the row, the column
//and the height of the item
item.y = row * item.height;
item.x = col * item.width;
//advance the column count
col++;
//if the column count is equal to the
//number of columns set
if (col == this.cols) {
//go to the next row
row++;
//reset the column to 0
col = 0;
}
}.bind(this));
//use bind(this) to keep the 'this' keyword
//to mean the class
}
fitStage(per = 100) {
this.width = game.width * (per / 100);
this.scale.y = this.scale.x;
}
center() {
this.x = game.width / 2 - this.width / 2;
this.y = game.height / 2 - this.height / 2;
}
}
The Letter Box Class – letterBox.js
class LetterBox extends Phaser.Sprite {
constructor() {
super(game, 0, 0, "letters", 0);
//add to stage right away
//game.add.existing(this);
}
/**
* set by passing a lower case letter
*/
setLetter(letter) {
var index = letter.charCodeAt(0);
this.frame = index - 97;
}
/**
* set a random letter
*/
setRand() {
var index = game.rnd.integerInRange(0, 26);
this.frame = index;
}
}
| Phaser Js 에서 두 객체 사이의 각도를 확인해 봅시다. (0) | 2018.01.29 |
|---|---|
| Phaser Js 에서 미사일 만들기 (0) | 2018.01.27 |
| Phaser Js 에서 그룹으로 생성된 객체 드래그 하는 방법 (0) | 2018.01.27 |
| Phaser Js - Audio Delay - (0) | 2018.01.27 |
| Phaser Js - Complex Objects – (0) | 2018.01.27 |
저는 종종 프로젝트 중 그룹으로 생성된 객체를 드래그할 필요가 있다는 문제에 직면했습니다.
지난 며칠간 프로젝트로 인해 이것은 나를 괴롭혔습니다.
나는 현재 그리드에 엄지 손톱을 많이 표시해야하는 앱을 만들고 있습니다.
그리드는 수직으로 스크롤해야하며 축소판을 클릭해야합니다.
이제 Phaser의 그룹에서 드래그를 구현하려고 시도해 본 적이 있다면 쉬운 일이 아닌지 알 수 있습니다.
Phaser의 창시자 인 Richard Davey는 html5gamedevs 포럼에서이 게시물의 그룹을 끌 수있는 기본 방법이없는 이유를 설명합니다.
"그것은 실제로 생각보다 조금 더 복잡합니다. 그룹에는 모든 영역이 없으며 모든 방향에서 무한합니다. 따라서 클릭 한 경우 감지 할 수 없습니다. 그러나 드래그하여 다른 모든 자식, 그 자식 또는 그룹 x / y 배치 자체를 업데이트해야한다면 쉽게 자식을 클릭 할 수 있습니까? (차례 차례로 다른 아이들을, 당신이 예기 할 방법에서 어쩌면 단지) 새롭게 할 것입니다. 그리고 중첩 된 그룹은 어떻습니까?"
필자는이 기능이 마음에 든다. 표면에 나타나는 것처럼 구현하기가 쉽지 않다.
Brainstorming the solution
그래서 내가 뭘해야하니? 내가 생각해 낸 첫 번째 해결책은 그룹의 높이와 너비가 같고 드래그 할 수 있도록 스프라이트를 만드는 것입니다. 작동하지만 새로운 자체 문제는 스프라이트를 클릭하여 개별 축소판에 도달 할 수 없다는 것입니다. 이것은 프로젝트의 핵심 부분입니다. 이제는 더 나은 솔루션이 필요하다는 것을 알게되었습니다. 이것은 내가 지금까지 알고있는 것이다 :
내 요구 사항 :
- 그룹 드래그
- 자녀를 클릭 할 수있는 상태로두기
내가 지금까지 알고있는 것 :
- 클릭 할 수있는 스프라이트는 마우스 이벤트를 다른 스프라이트로 차단합니다.
- 그룹이 마우스 이벤트를 감지 할 수 없습니다.
- Phaser의 드래그를 사용하여 그룹을 끌 수 없습니다.
- game.input은 아무것도 차단되지 않습니다.
그 마지막 요점은 내가 끌기가 무엇인지 생각하고있다 :
- 마우스 다운 이벤트
- 마우스가 눈금의 범위 내에 있는지 확인하기
- 마우스의 움직임을 확인하고 필요에 따라 눈금을 업데이트하십시오.
여기서 마우스라는 용어를 사용하고 있지만 터치 이벤트 일 수도 있습니다.
여기에 내가 지금 애플 리케이션에서 사용하고있는 해결책이있다. 이 예제에서는 Javascript 클래스를 사용합니다.
드래그를 위해 DragBox라는 클래스를 사용하고 있으며이 클래스도 그룹을 확장합니다. 나는 아이들을 여기에 추가하고 있지 않지만 내장 된 업데이트 기능을 사용할 수 있도록 그룹을 확장 중입니다. 드래그 해야하는 객체는 DragBox의 인스턴스로 유일한 매개 변수로 전달됩니다.
class DragBox extends Phaser.Group {
constructor(dragObj) {
super(game);
this.dragObj = dragObj;
game.input.onDown.add(this.onDown, this);
}
onDown() {
//set canDrag to false
this.canDrag = false;
//check if the mouse is in bounds
//since my dragObject is the full width of the game
//I only need to check the y position
//The top of the drag object is the y position
//and the bottom is the top plus the height
//
if (game.input.y > this.dragObj.y && game.input.y < (this.dragObj.y + this.dragObj.height)) {
//set the canDrag to true;
this.canDrag = true;
//get the start position of the dragObject
//so we may compare it to the current position
//when dragging
this.startY = this.dragObj.y;
//the offset is how far down on the grid the
//mouse is when the user started dragging
//without this line the grid will jump when
//the drag starts
this.offSet = this.dragObj.y - game.input.y;
}
}
update() {
if (game.input.mousePointer.isDown) {
if (this.canDrag == true) {
//calculate the difference between the startY
//and the current mouse y position
//and add in the offSet
var diff = game.input.y - this.startY + this.offSet;
//update the start position
//by adding the difference to the start position
this.dragObj.y = this.startY + diff;
}
}
}
}
대부분의 코드는 주석입니다. 노트가 없는 코드는 약 23 행뿐입니다.
class DragBox extends Phaser.Group {
constructor(dragObj) {
super(game);
this.dragObj = dragObj;
game.input.onDown.add(this.onDown, this);
}
onDown() {
this.canDrag = false;
if (game.input.y > this.dragObj.y && game.input.y < (this.dragObj.y + this.dragObj.height)) {
this.canDrag = true;
this.startY = this.dragObj.y;
this.offSet = this.dragObj.y - game.input.y;
}
}
update() {
if (game.input.mousePointer.isDown) {
if (this.canDrag == true) {
var diff = game.input.y - this.startY + this.offSet;
this.dragObj.y = this.startY + diff;
}
}
}
}
그룹을 직접 드래그하려면 코드 클래스를 직접 복사하여 프로젝트에 포함해야합니다.
그런 다음, 이 코드를 사용하여 개체를 만든 직후에 구현합니다.
var dragBox = new DragBox(objectYouWantToDrag);
이렇게하면 객체를 세로로 드래그 할 수 있지만 코드는 수평이 좋도록 조정할 수 있습니다.
다음은 내가 하는 일의 예입니다.
먼저 Phaser 그룹을 확장하는 그리드 클래스를 만들었습니다.
이 그리드 클래스는 같은 크기의 자식 요소 용입니다.
열 수에 'cols' 매개 변수가 필요합니다.
class Grid extends Phaser.Group {
constructor(cols) {
super(game);
this.cols = cols;
}
arrange() {
var xx = 0;
var yy = 0;
this.children.forEach(function(item) {
//place the item on a column with a 10 percent buffer
item.x = item.width * xx * 1.1;
//place the item on a row with a 10 percent buffer
item.y = item.height * yy * 1.1;
xx++;
if (xx ==this.cols) {
xx = 0;
yy++;
}
}.bind(this));
}
center() {
this.x = game.width / 2-this.width/2;
this.y = game.height / 2-this.height/2;
}
}
미리보기 이미지의 경우 Box라는 클래스를 사용하고 있습니다. 이것은 단순히 마우스 리스너가 연결된 이미지가 포함 된 그룹을 확장하는 클래스입니다.
class Box extends Phaser.Group
{
constructor()
{
super(game);
var thumb=this.create(0,0,"box");
thumb.anchor.set(0.5,0.5);
thumb.inputEnabled=true;
thumb.events.onInputDown.add(this.clicked);
}
clicked()
{
console.log("click");
}
}
그리고 이건 내 stateMain.js 코드입니다.
var StateMain = {
preload: function() {
game.load.image("box", "images/box.png");
},
create: function() {
//make a grid
//
this.grid = new Grid(5);
//make 30 boxes and add to the grid
//
for (var i = 0; i < 30; i++) {
var box = new Box();
this.grid.add(box);
}
//arrange the child objects into a grid
//
this.grid.arrange();
//center on stage
//
this.grid.center();
//make a dragBox and pass the grid to it
//
var dragBox = new DragBox(this.grid);
}
}
그리고 드래그 그룹 코드가 실제로 작동합니다. 개발자 콘솔을 열면 사각형이 여전히 클릭 가능한지 확인할 수 있습니다. 드래그 중에 실수로 사각형이 클릭되지 않도록하려면 마우스를 아래로 내리고 마우스를 위로 올리는 시간을 확인하는 함수를 구현할 것입니다. 그것은 빠른 다음 그렇지 않으면 클릭이 될 것입니다, 나는 사용자가 드래그하고 있다고 가정합니다.
| Phaser Js 에서 미사일 만들기 (0) | 2018.01.27 |
|---|---|
| Phaser Js 와 클래스(Class) (0) | 2018.01.27 |
| Phaser Js - Audio Delay - (0) | 2018.01.27 |
| Phaser Js - Complex Objects – (0) | 2018.01.27 |
| Phaser Js 에서 오브젝트 크기 조절하기 (0) | 2018.01.27 |