Home-theater-designers
Phaser는 2D 비디오 게임을 만들기 위한 프레임워크입니다. HTML5 Canvas를 사용하여 게임을 표시하고 JavaScript를 사용하여 게임을 실행합니다. 바닐라 JavaScript보다 Phaser를 사용하는 이점은 비디오 게임의 물리학의 대부분을 완성하는 광범위한 라이브러리가 있어 게임 자체를 디자인하는 데 집중할 수 있다는 것입니다.
Phaser는 개발 시간을 단축하고 워크플로를 용이하게 합니다. Phaser로 기본 게임을 만드는 방법을 알아보겠습니다.
Phaser로 개발해야 하는 이유
페이저 프로그램이 반복 업데이트를 기반으로 한다는 점에서 다른 시각적 프로그래밍 언어와 유사합니다. Phaser에는 사전 로드, 생성 및 업데이트의 세 가지 주요 단계가 있습니다.
사전 로드에서는 게임의 자산이 업로드되어 게임에서 사용할 수 있습니다.
만들기는 게임과 모든 시작 게임 요소를 초기화합니다. 각 기능은 게임이 시작될 때 한 번 실행됩니다.
반면에 업데이트는 게임 전체에서 루프로 실행됩니다. 게임의 요소를 업데이트하여 인터랙티브하게 만드는 것은 핵심입니다.
Phaser로 게임 개발을 위한 시스템 설정
Phaser는 HTML 및 JavaScript에서 실행되지만 게임은 실제로 클라이언트 측이 아닌 서버 측에서 실행됩니다. 즉, 다음에서 게임을 실행해야 합니다. 당신의 로컬 호스트 . 게임 서버 측을 실행하면 게임에서 프로그램 외부의 추가 파일 및 자산에 액세스할 수 있습니다. 나는 추천한다 XAMPP를 사용하여 로컬 호스트 설정 아직 하나의 설정이 없는 경우.
아래 코드를 실행하면 실행됩니다. 기본적인 게임 환경을 설정합니다.
var config = {
type: Phaser.AUTO,
backgroundColor: 0xCCFFFF,
width: 600,
height: 600,
physics: {
default: 'arcade'
},
scene: {
preload: preload,
create: create
}
};
var gamePiece;
var game = new Phaser.Game(config);
function preload(){
this.load.image('gamePiece', 'img/gamePiece.png');
}
function create(){
gamePiece = this.physics.add.sprite(270, 450, 'gamePiece');
}
게임을 실행하려면 로컬 호스트의 'img' 폴더에 저장된 'gamePiece'라는 PNG 이미지가 필요합니다. 단순화를 위해 이 예에서는 60xgame de60px 주황색 사각형을 사용합니다. 게임은 다음과 같아야 합니다.
문제가 발생하면 브라우저의 디버거를 사용하여 무엇이 잘못되었는지 알아내십시오. 단일 문자라도 누락되면 혼란이 발생할 수 있지만 일반적으로 디버거는 이러한 작은 오류를 포착합니다.
설정 코드 설명
지금까지 게임은 아무 것도 하지 않습니다. 그러나 우리는 이미 많은 부분을 다루었습니다! 코드를 더 자세히 살펴보겠습니다.
Phaser 게임을 실행하려면 Phaser 라이브러리를 가져와야 합니다. 3행에서 이 작업을 수행합니다. 이 예제에서는 소스 코드를 연결했지만 로컬 호스트에 다운로드하여 파일을 참조할 수도 있습니다.
손전등을 어떻게 켜?
지금까지 대부분의 코드는 게임 환경을 구성합니다. 구성 백화점. 이 예에서는 600x600px인 파란색(16진수 색상 코드의 CCFFFF) 배경으로 페이저 게임을 설정하고 있습니다. 현재 게임 물리학은 다음과 같이 설정되었습니다. 아르카디아 사람 , 그러나 Phaser는 다른 물리학을 제공합니다.
마침내, 장면 프로그램을 실행하도록 지시 예압 게임이 시작되기 전에 기능과 창조하다 게임을 시작하는 기능. 이 모든 정보는 게임 .
관련된: 프로그래밍 및 코딩을 위한 6가지 최고의 노트북
코드의 다음 섹션은 게임이 실제로 형성되는 부분입니다. 사전 로드 기능은 게임을 실행하는 데 필요한 모든 것을 초기화하려는 곳입니다. 우리의 경우 게임 조각의 이미지를 미리 로드했습니다. 의 첫 번째 매개변수 .영상 이미지의 이름을 지정하고 두 번째는 이미지를 찾을 위치를 프로그램에 알려줍니다.
gamePiece 이미지는 생성 기능에서 게임에 추가되었습니다. 29행은 게임 영역의 왼쪽 상단 모서리에서 왼쪽으로 270px, 아래로 450px 아래에 gamePiece 이미지를 추가한다고 말합니다.
게임 조각을 움직이게 하기
여기까지는 거의 게임이라고 할 수 없습니다. 우선, 우리는 게임 조각을 움직일 수 없습니다. 게임에서 변경하려면 업데이트 기능을 추가해야 합니다. 또한 게임을 업데이트할 때 실행할 함수를 게임에 알리기 위해 config 변수의 장면을 조정해야 합니다.
업데이트 기능 추가
구성의 새 장면:
scene: {
preload: preload,
create: create,
update: update
}다음으로 create 함수 아래에 업데이트 함수를 추가합니다.
windows iso에서 부팅 가능한 usb 생성
function update(){
}주요 입력 얻기
플레이어가 화살표 키로 게임 조각을 제어할 수 있도록 하려면 플레이어가 누르고 있는 키를 추적하는 변수를 추가해야 합니다. gamePieces를 선언한 아래에 keyInputs라는 변수를 선언하십시오. 그것을 선언하면 모든 함수가 새 변수에 액세스할 수 있습니다.
var gamePiece;
var keyInputs;keyInput 변수는 create 함수에서 게임이 생성될 때 초기화되어야 합니다.
function create(){
gamePiece = this.physics.add.sprite(270, 450, 'gamePiece');
keyInputs = this.input.keyboard.createCursorKeys();
}이제 업데이트 기능에서 플레이어가 화살표 키를 누르고 있는지 확인할 수 있고, 그렇다면 그에 따라 게임 조각을 이동할 수 있습니다. 아래 예에서 게임 조각은 2px 이동되지만 더 크거나 더 작게 만들 수 있습니다. 한 번에 1px씩 이동하는 것이 조금 느린 것 같았습니다.
function update(){
if(keyInputs.left.isDown){
gamePiece.x = gamePiece.x - 2;
}
if(keyInputs.right.isDown){
gamePiece.x = gamePiece.x + 2;
}
if(keyInputs.up.isDown){
gamePiece.y = gamePiece.y - 2;
}
if(keyInputs.down.isDown){
gamePiece.y = gamePiece.y + 2;
}
}이제 게임에 움직일 수 있는 캐릭터가 있습니다! 하지만 진정한 게임이 되려면 목표가 필요합니다. 몇 가지 장애물을 추가해 보겠습니다. 장애물 회피는 8비트 시대의 많은 게임의 기초였습니다.
게임에 장애물 추가하기
이 코드 예제에서는 장애물 1과 장애물 2라는 두 개의 장애물 스프라이트를 사용합니다. 장애물 1은 파란색 사각형이고 장애물 2는 녹색입니다. 각 이미지는 게임피스 스프라이트처럼 미리 로드해야 합니다.
function preload(){
this.load.image('gamePiece', 'img/gamePiece.png');
this.load.image('obstacle1', 'img/obstacle1.png');
this.load.image('obstacle2', 'img/obstacle2.png');
}그런 다음 각 장애물 스프라이트는 게임피스와 마찬가지로 생성 기능에서 초기화되어야 합니다.
function create(){
gamePiece = this.physics.add.sprite(270, 450, 'gamePiece');
keyInputs = this.input.keyboard.createCursorKeys();
obstacle1 = this.physics.add.sprite(200, 0, 'obstacle1');
obstacle2 = this.physics.add.sprite(0, 200, 'obstacle2');
}장애물을 움직이게 하기
이번에는 조각을 이동하기 위해 플레이어 입력을 사용하고 싶지 않습니다. 대신 한 조각을 위에서 아래로 이동하고 다른 조각을 왼쪽에서 오른쪽으로 이동하도록 합시다. 그렇게 하려면 업데이트 함수에 다음 코드를 추가합니다.
obstacle1.y = obstacle1.y + 4;
if(obstacle1.y > 600){
obstacle1.y = 0;
obstacle1.x = Phaser.Math.Between(0, 600);
}
obstacle2.x = obstacle2.x + 4;
if(obstacle2.x > 600){
obstacle2.x = 0;
obstacle2.y = Phaser.Math.Between(0, 600);
}위의 코드는 프레임당 4px의 게임 영역을 가로질러 장애물1을 화면 아래로 이동하고 장애물2를 이동합니다. 사각형이 화면을 벗어나면 새로운 임의의 지점에서 반대쪽으로 다시 이동합니다. 이것은 플레이어에게 항상 새로운 장애물이 있음을 보장합니다.
충돌 감지
그러나 우리는 아직 완전히 끝나지 않았습니다. 플레이어가 장애물을 바로 통과할 수 있다는 것을 눈치채셨을 것입니다. 플레이어가 장애물에 부딪혔을 때 이를 감지하고 게임을 종료하도록 해야 합니다.
Phaser 물리 라이브러리에는 충돌 감지기가 있습니다. 우리가 해야 할 일은 create 함수에서 초기화하는 것입니다.
this.physics.add.collider(gamePiece, obstacle1, function(gamePiece, obstacle1){
gamePiece.destroy();
obstacle.destroy();
obstacle2.destroy();
});
this.physics.add.collider(gamePiece, obstacle2, function(gamePiece, obstacle2){
gamePiece.destroy();
obstacle.destroy();
obstacle2.destroy();
});collider 메서드에는 세 개의 매개변수가 필요합니다. 처음 두 매개변수는 충돌하는 객체를 식별합니다. 그래서 위에서 우리는 두 개의 colliders를 설정했습니다. 첫 번째는 게임피스가 장애물1과 충돌할 때를 감지하고 두 번째 충돌자는 게임피스와 장애물2 간의 충돌을 찾고 있습니다.
세 번째 매개변수는 충돌을 감지한 후 수행할 작업을 충돌기에게 알려줍니다. 이 예에는 함수가 있습니다. 충돌이 발생하면 모든 게임 요소가 파괴됩니다. 이것은 게임을 중지합니다. 이제 플레이어는 장애물에 부딪히면 게임오버됩니다.
Phaser로 게임 개발 시도
이 게임을 개선하고 더 복잡하게 만들 수 있는 다양한 방법이 있습니다. 우리는 한 명의 플레이어만 만들었지만 두 번째 플레이 가능한 캐릭터를 추가하고 'awsd' 컨트롤로 제어할 수 있습니다. 마찬가지로, 더 많은 장애물을 추가하고 이동 속도를 변경하는 실험을 할 수 있습니다.
u break 나는 내 근처에서 고친다
이 소개로 시작하게 되지만 아직 배울 것이 많이 남아 있습니다. Phaser의 가장 큰 장점은 많은 게임 물리학이 사용자를 위해 수행된다는 것입니다. 2D 게임 디자인을 시작하는 아주 쉬운 방법입니다. 계속해서 이 코드를 빌드하고 게임을 개선하십시오.
오류가 발생하면 브라우저 디버거가 문제를 발견하는 좋은 방법입니다.
공유하다 공유하다 트위터 이메일 Chrome DevTools를 사용하여 웹사이트 문제를 해결하는 방법Chrome 브라우저에 내장된 개발 도구를 사용하여 웹사이트를 개선하는 방법을 알아보세요.
다음 읽기 관련 항목- 프로그램 작성
- 자바스크립트
- HTML5
- 게임 개발
J. Seaton은 복잡한 주제를 분류하는 데 전문적인 과학 작가입니다. 그녀는 서스캐처원 대학교에서 박사 학위를 받았습니다. 그녀의 연구는 온라인에서 학생 참여를 늘리기 위해 게임 기반 학습을 활용하는 데 중점을 두었습니다. 그녀가 일하지 않을 때, 당신은 그녀가 책을 읽거나, 비디오 게임을 하거나, 정원 가꾸기를 하는 그녀를 발견할 것입니다.
제니퍼 시튼이 참여한 작품 더보기뉴스레터 구독
기술 팁, 리뷰, 무료 전자책 및 독점 거래에 대한 뉴스레터에 가입하십시오!
구독하려면 여기를 클릭하세요.