댓글 검색 목록

[javascript] ct.js 문서 - 게임 만들기 : 스페이스 슈터

페이지 정보

작성자 운영자 작성일 20-08-22 11:06 조회 634 댓글 0

소행성, 레이저, 적대적인 건쉽으로 작은 우주 슈팅 게임을 만들어 봅시다! 이 튜토리얼은 자산을 가져오고, 사용자 입력을 처리하고, 사물을 이동하고, 충돌에 대응하는 방법을 알려줍니다.

tutSpaceShooter_Result.2f9dc6e6.gif

우리가 할 일은 다음과 같습니다.

텍스처 가져 오기
첫 번째 유형 만들기 및 배치
플레이어의 움직임 추가
-, 액션 추가
-, 움직임 코딩
적대와 소행성 이동
-, 적 군함
-, 소행성
발사체 및 충돌
-, 적 총알
시간을 통해 개체 생성
라이브, 스코어 및 GUI
-, 점수 추가 및 그리기
-, 삶 그리기 및 관리

Importing Textures

ct.js를 열고 "SpaceShooter"라는 이름으로 새 프로젝트를 만듭니다.

tutSpaceShooter_01.a9e4d929.png

다음으로 Kenney 사이트에서 자산 팩을 다운로드합니다. 무료로 사용할 수 있으며 프로토 타이핑, 학습 또는 테스트에 적합합니다.

ct.js/examples/SpaceShooter_assets 폴더에 있는 자산을 사용할 수도 있습니다.

오늘 우리에게 필요한 모든 자산은 다음과 같습니다.

tutSpaceShooter_02.c250a88b.png

이제 ct.IDE 창의 상단에 있는 "Textures"탭을 열고 이 애셋을 ct.IDE 창 안에 끌어다 놓습니다. "가져 오기"버튼을 눌러 수동으로 찾을 수도 있습니다.

각 이미지에 대한 카드가 나타납니다. PlayerShip을 열고 구성 해 보겠습니다. 충돌 모양을 정의하는 노란색 모양이 표시됩니다. 현재로서는 너무 많은 빈 공간, 특히 날개 위를 덮습니다. 이를 수정하려면 왼쪽 열에서 이 충돌 모양을 수정해야 합니다.

먼저 "이미지의 중심"버튼을 눌러 축이 배의 중심에 위치하도록 합니다.

그런 다음 "충돌 모양"레이블에서 "선 스트립 / 다각형"옵션을 선택합니다. 몇 개의 추가 점을 추가하고 마우스로 이동하여 결과 다각형이 우주선의 모양과 비슷하도록 합니다.

tutSpaceShooter_03.c21c95c5.png

"저장"을 누르고 다음 텍스처 인 "LaserRed"로 이동합니다. 우주선과 마찬가지로 "Image 's Center"를 클릭하여 축을 가운데로 설정하겠습니다. 그런 다음이 버튼 바로 아래에 있는 원 충돌 모양을 선택합니다. 이제 노란색 충돌 모양이 원으로 그려집니다.

다음 텍스처 인 Laser_Blue도 중앙에 있어야 하며 충돌 모양이 모든 이미지를 덮어야 하므로 "채우기"버튼을 클릭하여 자동화 할 수 있습니다.

tutSpaceShooter_04.e4d7109b.png

두 소행성은 오목하거나 날카로운 모양으로 다각형으로 더 잘 정의됩니다. 충돌 모양을 Line Strip / Polygon으로 설정하고 축을 중심으로 설정하는 것을 잊지 마십시오.

tutSpaceShooter_05.986fe181.png

EnemyShip의 모양은 다각형으로 취급 할 수 있습니다.

배경 이미지는 게임의 다른 것들과 충돌하지 않기 때문에 그대로 남겨질 수 있습니다.

첫 번째 유형 만들기 및 배치

텍스처는 그 자체로 많은 작업을 수행하지 않으며 게임에 표시하려면 이러한 자산으로 유형을 만들어야 합니다. 유형은 복사본을 만드는 데 사용되며 후자는 룸 내부에 배치하여 서로 상호 작용하고 입력에 응답하는 것입니다.

화면 상단의 "유형"탭을 누르고 플레이어에 대한 새 유형을 만듭니다. "만들기"버튼을 클릭 한 후 왼쪽 열에서 큰 유령 고양이를 클릭합니다. 모든 텍스처가 표시됩니다. 배와 함께 카드를 누르십시오. 이제 편집기의 왼쪽 열에 나타납니다.

이제 Type의 이름을 PlayerShip으로 변경하여 코딩하는 동안이 번호를 기억할 필요가 없습니다.

tutSpaceShooter_06.7a901d6e.png

배경 이미지를 제외한 다른 모든 텍스처에 대한 유형을 만듭니다. 배경 이미지는 어떤 것도 움직이거나 상호 작용하지 않으며 종종 타일링 되므로 유형이 아닙니다. 나중에 Room에 추가합니다.

tutSpaceShooter_07.26c76fcc.png

생성 된 유형을 맵 어딘가에 배치하겠습니다. 이지도 또는 방을 만들려면 ct.IDE 창 상단의 "방"탭을 누르고 "새로 추가"버튼을 클릭합니다. 그런 다음 새로 만든 방을 클릭하여 엽니다.

tutSpaceShooter_08.f4fda4ab.png

여기서는 Room 편집기 사용 방법에 대해 설명하겠습니다. 먼저, 룸의 이름과 뷰포트 크기를 설정할 수 있습니다.

ct.js에서 룸은 무한하며 모든 방향으로 이동할 수 있습니다. 뷰포트 내부와 외부에 개체를 배치 할 수 있습니다.

그런 다음 Room 이벤트가 있습니다. 이 방을 위해 특별히 게임 로직을 정의하는 섹션입니다. 여기에서 UI 또는 레벨 시나리오를 정의 할 수 있습니다.

이 버튼 아래에는 복사본과 배경이있는 패널이 있습니다. 해당 탭에서 사본을 선택하고 오른쪽의 넓은 영역을 클릭하여 지도에 배치합니다. 새 복사본 추가를 비활성화 하려면 왼쪽에서 유령 고양이를 선택합니다. 아무것도 선택되지 않은 상태에서 마우스를 왼쪽으로 드래그하여 편집기의 보기를 이동할 수 있습니다. 상단의 버튼을 사용하거나 마우스 휠을 사용하여 확대 / 축소 수준을 변경할 수 있습니다.

길을 잃었다 고 생각되면 "가운데로"버튼을 눌러 (0, 0) 좌표로 돌아갑니다.

오른쪽 하단의 버튼을 클릭하여 그리드를 설정할 수 있습니다. 다시 클릭하면 그리드가 비활성화 됩니다.

마지막으로 왼쪽 상단 모서리에 있는 "이동"아이콘이 있는 버튼을 클릭하여 방에 있는 모든 사본을 한 번에 이동할 수 있습니다.

지금은 플레이어의 함선, 적대적 함선, 소행성 두 개를 배치 해 보겠습니다.

tutSpaceShooter_10.b0e085dd.png

그런 다음 배경을 추가하십시오. "배경"탭을 클릭하고 "추가"를 누른 다음 BG를 선택하십시오. 메인 뷰에서 타일 텍스처로 나타납니다.

tutSpaceShooter_09.62e8b528.png

배경은 항상 동일한 깊이 레벨 (기본적으로 0)의 사본 앞에 그려 지지만 깊이 레벨을 변경하는 것이 좋습니다. 왼쪽 열의 배경 아이콘 왼쪽에 있는 톱니 바퀴를 클릭하고 "Depth"필드에 -5를 입력합니다. 이렇게 하면 이 배경이 다른 복사본 및 배경보다 낮게 배치된다는 것을 엔진에 알립니다. 깊이는 X와 Y가 측면으로 갈 때 위쪽으로 가는 세 번째 좌표 축을 나타냅니다.

tutSpaceShooter_Depth.4ee7bb32.png

그 후 프로젝트를 저장하고 '재생'버튼을 클릭합니다. 이 시점에서 움직일 수 없는 배와 소행성이 있는 게임 프로젝트가 생성됩니다.

tutSpaceShooter_11.06427c26.png

플레이어의 움직임 추가

사용자 입력을 처리하는 것이 가장 중요한 작업입니다. 이 섹션에서는 플레이어가 화살표 키 또는 WASD를 눌렀을 때 파란색 배를 움직이게 할 것입니다.

키보드 입력을 처리하려면 키보드 모듈을 활성화해야 합니다. "프로젝트"탭을 누른 다음 왼쪽의 "Catmods"탭을 누른 다음 사용 가능한 모듈이 있는 섹션에서 키보드 모듈을 찾습니다. 활성화하려면 클릭하십시오 (기본적으로 활성화되어있을 수 있습니다 — 작은 회전 원이 있는 녹색 확인란은 모듈이 활성화되었음을 나타냅니다). 그런 다음 나중에 필요하므로 모듈 mouse, random 및 place가 활성화되어 있는지 확인하십시오.

tutSpaceShooter_12.64bf01df.png

액션 추가

ct.js의 작업은 다양한 입력 방법을 이벤트로 그룹화 하고 코드에서 플레이어 입력을 수신 할 수 있도록 하는 엔티티입니다. 여기에서 자세한 내용을 읽을 수 있습니다.

지금은 슈터에 대한 기본 입력 체계를 만들어 보겠습니다. "프로젝트"탭을 연 다음 왼쪽에 있는 "작업 및 입력 방법"탭을 엽니다. 레이저 총알 발사, 수평 이동 및 수직 이동의 세 가지 다른 동작을 정의해야 합니다.

먼저 "작업 추가"버튼을 클릭합니다. 그런 다음 첫 번째 작업의 이름을 입력합니다. 특정 버튼을 작업에 바인딩 하려면 "입력 방법 추가"라는 버튼을 클릭합니다. 검색을 사용하여 사용 가능한 입력 방법을 빠르게 필터링 합니다.

tutSpaceShooter_15.9dca68e2.png

위 그림과 같이 세 가지 동작을 만듭니다. keyboard.ArrowUp, keyboard.KeyW, keyboard.ArrowLeft 및 keyboard.KeyA의 경우 승수 값을 -1로 설정하여 이러한 키가 우주선을 반대 방향으로 이동하도록 합니다.

움직임 코딩

상단의 "유형"탭을 열고 On Step 이벤트로 이동합니다.

팁 : On Step 이벤트는 그리기 전에 모든 프레임에서 발생하고 Draw는 새로운 프레임을 그리기 위해 방의 모든 On Step 이벤트 후에 발생합니다. On Create는 새 복사본을 생성 할 때 발생하고 On Destroy는 복사본이 죽으면 Draw 이벤트 전에 발생합니다.

다음 코드를 작성하십시오.

/**
 * Move the ship
 * See Project > Actions and input methods panel
 * and "Actions" in the docs.
 */

this.x += 8 * ct.delta * ct.actions.MoveX.value; // Move by X axis


/**
 * Check whether the ship fell off the viewport
 */
if (this.x < 0) { // Have the ship crossed the left border?
    this.x = 0; // Go back to the left border
}
if (this.x > ct.camera.width) { // Have the ship crossed the right border?
    this.x = ct.camera.width; // Go back to the right border
}

this.move();

여기서는 생성 된 작업을 사용합니다. 먼저 배를 수평으로 이동하려고 합니다 (x, 6 행). ct.actions.MoveX는 오른쪽 키보드 화살표 또는 "D"키를 누르면 1을 반환하고 플레이어가 왼쪽 화살표 또는 "A"키를 누르면 -1을 반환합니다. 아무 것도 누르지 않으면 0을 반환하고 수평 이동을 비활성화 합니다.

ct.delta는 가능한 지연 및 FPS 저하를 보상하기 위해 필요합니다. 일반적으로 1과 같고 많이 추가하지 않지만 일부 프레임이 삭제되면 이동 속도가 빨라집니다.

마지막으로 중간 속도 값에 원하는 속도 8을 곱합니다.

나중에 X 좌표가 뷰포트에서 떨어졌는지 확인합니다. 여기서 0은 방의 왼쪽을 의미하고 ct.camera.width는 오른쪽을 형성하는 뷰포트의 수평 크기를 의미합니다.

스스로! 플레이어에게 수직 이동을 추가합니다. 그런 다음 우주선이 뷰포트 중앙 위로 날지 못하도록 이동을 제한합니다.

적대와 소행성 이동

적들도 움직여야 합니다. 이 튜토리얼에서는 적 군함이 위에서 아래로 이동하고 소행성이 임의의 방향으로 비행합니다.

적 군함

"유형"탭을 열고 EnemyShip을 클릭합니다. On Create 이벤트로 이동하여 다음 코드를 추가합니다.

this.speed = 3;
this.direction = 270;

여기서는 이동을 위해 내장 변수를 사용합니다. 수동으로 좌표를 편집하는 것은 플레이어의 입력을 처리하는 데 유용하지만 대부분의 작업을 자동화하므로 대부분의 작업에서 이러한 변수를 사용하는 것이 좋습니다. 예를 들어 this.speed 및 this.direction을 사용하는 동안 ct.delta를 사용할 필요가 없습니다. 여기서 this.speed는 Copy의 속도를 의미하고 this.direction은 방향을 의미합니다.

팁

ct.js에서 방향은 왼쪽에서 시계 반대 방향으로 이동하여 각도로 측정됩니다. 0 °는 오른쪽, 90 °는 위쪽, 180 °는 왼쪽, 270 °는 아래쪽을 의미합니다.

tutSpaceShooter_Direction.102c93a8.png

Step 이벤트로 이동하면 다음과 같은 작은 코드가 표시됩니다.

this.move();

이 줄은 내장 변수를 읽고 그에 따라 Copy를 이동합니다. 그것 없이는 this.speed와 this.direction은 의미가 없습니다.

ct.types 페이지에서 찾을 수 있는 더 많은 기본 제공 변수가 있습니다.

단계 코드를 수정하여 적이 화면에서 떨어지면 스스로 파괴 할 것입니다.

this.move();

if (this.y > ct.viewHeight + 80) {
    this.kill = true;
}

스스로!

적 군함이 대각선으로 지그재그로 움직일 수 있다면 어떨까요?

소행성

소행성은 동일한 단계 코드를 포함하지만 방향 변수는 무작위로 정의됩니다.

"Types"탭에서 Asteroid_Medium을 연 다음 On Create 이벤트에 아래 코드를 작성하십시오.

this.speed = ct.random.range(1, 3);
this.direction = ct.random.range(270 - 30, 270 + 30);

Step 이벤트는 EnemyShip에서와 동일합니다.

this.move();

if (this.y > ct.viewHeight + 80) {
    this.kill = true;
}

다른 소행성에 대해서도 똑같이 하십시오.

프로젝트를 저장하고 상단의 "재생"버튼을 클릭합니다. 적 군함은 천천히 바닥으로 이동하고 소행성은 더 혼란스럽게 움직입니다. 페이지를 새로 고침 하면 소행성이 새로운 방향으로 이동합니다.

tutSpaceShooter_RandomMovement.6a9b1ba8.gif

발사체 및 충돌

이제 총을 가져올 시간입니다 ?

PlayerShip의 Step 이벤트를 열고 다음 코드를 추가하십시오.

if (ct.actions.Shoot.pressed) {
    ct.types.copy('Laser_Blue', this.x, this.y);
}

프로그래밍 방식으로 새 사본을 추가하는 것은 이번이 처음입니다. 만세!

팁

ct.types.copy는 현재 방에 새 사본을 생성하는 매우 중요한 기능입니다. 먼저 복사 할 인용 된 유형의 이름을 작성합니다. 그런 다음 그에 따라 수평 및 수직 축으로 좌표를 작성해야 합니다. this.x는 현재 사본의 가로 위치를 의미하고 this.y는 세로 위치를 의미합니다.

모든 데이터를 결합하여 우리는 우주선 바로 아래에서 레이저 총알을 만듭니다. Space 키를 누르면 총알이 생성됩니다.

이제 Laser_Blue 자체로 이동하겠습니다. 기본 변수로 움직임을 정의합니다.

this.speed = 18;
this.direction = 90;

다음으로,이 레이저 총알이 시야 밖으로 날아간 후 사라지도록 합시다. 항상 맨 위로 날아 가기 때문에 위쪽 테두리에 대한 조건 만 작성할 수 있습니다.

if (this.y < -40) {
    this.kill = true;
}

this.move();

다음은 충돌을 처리하는 것입니다. 적 군함과 소행성 코드에 모든 충돌 논리를 작성하는 것이 좋습니다. 왜냐하면 서로 다르게 반응하여 총알의 코드를 복잡하게 만들지 않기 때문입니다.

EnemyShip의 On Step 코드로 이동합니다. 다음 코드를 추가하십시오.

var collided = ct.place.meet(this, this.x, this.y, 'Laser_Blue');
if (collided) {
    collided.kill = true;
    this.kill = true;
}

ct.place.meet 메소드는 주어진 좌표에 배치 된 것처럼 주어진 사본이 특정 유형의 다른 사본과 충돌하는지 여부를 확인합니다. 이 예에서는 적 군함의 현재 카피 (this)가 현재 위치 (this.x, this.y)에서 레이저 총알 ( 'Laser_Blue')과 충돌하는지 확인해야 합니다. 이 메서드는 충돌 된 복사본 또는 false를 반환하므로 유효한 값을 반환했는지 확인해야 합니다.

팁

ct.place 모듈에는 더 많은 메소드가 있습니다. 'Catmods'섹션을 열고 왼쪽에 있는 장소 모듈을 클릭합니다. 오른쪽의 '참조'탭을 클릭하여 문서를 엽니다.

우주선이 레이저 총알과 충돌하면 총알과 우주선이 모두 파괴되어야 합니다.

정확히 동일한 코드를 Asteroid_Medium에 복사합니다. Asteroid_Big에서도 이 코드가 필요하지만 큰 소행성이 두 개의 작은 소행성으로 나뉘도록 만들 것입니다.

var collided = ct.place.meet(this, this.x, this.y, 'Laser_Blue');
if (collided) {
    collided.kill = true;
    this.kill = true;
    ct.types.copy('Asteroid_Medium', this.x, this.y);
    ct.types.copy('Asteroid_Medium', this.x, this.y);
}

게임을 실행하면 적 군함과 소행성을 파괴 할 수 있습니다. 더 큰 소행성은 더 작은 소행성으로 분해되어야 합니다.

적 총알

적 군함도 쏠 수 있어야 합니다. EnemyShip의 On Create 코드에 다음 코드를 추가합니다.

this.bulletTimer = 60;

이를 통해 적 군함이 정확한 간격으로 사격 할 수 있도록 타이머를 설정합니다. 각 단계마다 this.bulletTimer 값을 줄이고 촬영 후 재설정 합니다. 60은 첫 번째 총알을 쏘기 전에 1 초 (60 프레임)를 기다릴 것임을 의미합니다.

이 코드를 On Step 섹션에 추가하십시오.

this.bulletTimer -= ct.delta;
if (this.bulletTimer <= 0) {
    this.bulletTimer = 180;
    ct.types.copy('Laser_Red', this.x, this.y + 32);
}

this.bulletTimer-= ct.delta; this.bulletTimer 값을 한 프레임 낮춘다는 의미입니다. ct.delta는 일반적으로 1과 같지만 낮은 프레임 속도에서는 게임 속도의 균형을 맞추고 모든 FPS 값으로 사물이 균일하게 움직이도록 하기 위해 더 커집니다.

타이머 변수가 0으로 내려 가면 this.bulletTimer를 새 숫자로 설정하고 빨간색 레이저 총알을 만듭니다. 보시다시피 this.y + 32를 작성하면 우주선보다 약간 낮게 스폰 됩니다.

빨간색 글 머리 기호에 코드를 작성해 보겠습니다. 다음 코드를 Laser_Red의 On Create 섹션에 추가합니다.

this.speed = 8;
this.direction = 270;

this.rotation = ct.random.deg();

this.rotation은 복사본의 텍스처를 회전합니다. ct.random.deg ()는 0에서 360 사이의 임의 값을 반환하므로 각도 값을 정의 할 때 편리합니다.

팁

또한 this.scale.x와 this.scale.y는 복사본의 수평 및 수직 배율을 설정하고, this.alpha는 불투명도를 조정합니다 (0은 완전 투명, 1-완전 불투명).

On Step 섹션의 코드는 다음과 같습니다.

if (this.y > ct.viewHeight + 40) {
    this.kill = true;
}

this.move();

this.rotation += 4 * ct.delta;

this.rotation + = 4 * ct.delta; 즉, 각 단계에서 사본을 약 4 도씩 회전합니다.

나중에 플레이어의 함선을 파괴하는 로직을 정의하겠습니다. 지금은 플레이 시간에 적과 소행성 생성을 추가해야 합니다.

시간을 통해 개체 생성

룸 섹션에서 메인 룸을 엽니다. 기존 소행성과 적을 마우스 오른쪽 버튼으로 클릭하여 제거하거나 Ctrl 키를 누른 상태에서 마우스 왼쪽 버튼으로 지웁니다.

다음으로 왼쪽의 방 이벤트 버튼을 누릅니다.

룸에는 카피와 같은 모든 이벤트가 있습니다.

On Create 게임을 시작하거나 프로그래밍 방식으로 이 방으로 이동할 때 호출됩니다.
Step Copies 'On Step 이후에 각 프레임이 호출됩니다.
Draw 모든 레벨을 그린 후 호출됩니다. UI 업데이트에 유용합니다.
On Leave 다른 방으로 이동하기 전에 호출됩니다.

적 군함이 총알을 생성하는 것과 거의 같은 방식으로 적을 생성합니다. 우리는 두 개의 타이머를 가지고 플레이어의 시야 위에 복사본을 배치 할 것입니다.

이렇게 하려면 On Create 코드에서 두 개의 타이머를 설정합니다.

this.asteroidTimer = 20;
this.enemyTimer = 180;

그런 다음 On Step 탭에 다음 코드를 추가하여 시간을 통해 적을 생성합니다.

this.asteroidTimer -= ct.delta;
if (this.asteroidTimer <= 0) {
    this.asteroidTimer = ct.random.range(20, 200);
    ct.types.copy(ct.random.dice('Asteroid_Big', 'Asteroid_Medium'), ct.random(ct.camera.width), -100);
}

this.enemyTimer -= ct.delta;
if (this.enemyTimer <= 0) {
    this.enemyTimer = ct.random.range(180, 400);
    ct.types.copy('EnemyShip', ct.random(ct.camera.width), -100);
}

소행성과 적을 생성하는 데 필요한 모든 것입니다!

팁

ct.random.dice는 제공된 값 중 하나를 반환합니다. 여기에 숫자, 문자열, 복잡한 개체를 포함한 모든 값을 입력 할 수 있습니다. 여기서 'Asteroid_Big'이 반환 될 확률은 50 %이고 'Asteroid_Medium'이 될 확률은 50 %입니다. ct.random.range (a, b)는 a와 b 사이의 임의의 숫자 값을 반환합니다. ct.random (b)는 ct.random.range (0, b)와 동일합니다.

Lives, score and GUI

적군에 대한 게임 및 플레이어 함선의 반응에 점수 계산을 추가해 보겠습니다.

점수 추가 및 그리기

점수는 전역 적으로 저장되는 숫자 변수입니다. 우리의 경우에는 방 안에 두는 것이 좋습니다. 메인 룸을 열고 '룸 이벤트'버튼을 클릭합니다. On Create 섹션에 다음 코드를 추가합니다.

this.score = 0;

this.scoreLabel = new PIXI.Text('Score: ' + this.score);
this.addChild(this.scoreLabel);
this.scoreLabel.x = 30;
this.scoreLabel.y = 30;
this.scoreLabel.depth = 1000;

여기에서 score라는 변수를 만듭니다. 그런 다음 new PIXI.Text ( 'Some text')로 텍스트 레이블을 구성하고 this.scoreLabel을 저장 한 다음 this.addChild (this.scoreLabel);로 방에 추가합니다. 나중에 각 측면에 30px 패딩을 사용하여 왼쪽 상단 모서리에 표시되도록 배치합니다. 또한 깊이를 설정합니다. 이것은 유형 설정에서 사용하는 것과 동일한 매개 변수이며 이 큰 양수 값은 scoreLabel을 방의 다른 엔티티 위에 배치합니다.

또한 Draw에서 레이블을 최신 상태로 유지하려면 이 코드가 필요합니다.

this.scoreLabel.text = 'Score: ' + this.score;

이제 EnemyShip의 On Step 코드로 이동하여 ct.room.score + = 100; 총알과 충돌하여 함선이 파괴되는 곳으로 이동하므로 전체 코드는 다음과 같습니다.

this.move();

if (this.y > ct.viewHeight + 80) {
    this.kill = true;
}

var collided = ct.place.meet(this, this.x, this.y, 'Laser_Blue');
if (collided) {
    collided.kill = true;
    this.kill = true;
    ct.room.score += 100;
}

this.bulletTimer -= ct.delta;
if (this.bulletTimer <= 0) {
    this.bulletTimer = 180;
    ct.types.copy('Laser_Red', this.x, this.y + 32);
}

팁

ct.room은 현재 룸 객체를 가리킵니다.

소행성에도 똑같이 하십시오. 원하는 대로 주어진 점수 점수를 변경합니다.

게임을 시작하면 왼쪽 상단 모서리에 작은 검은 색 숫자가 표시되어 소행성과 적 군함이 파괴됨에 따라 변경됩니다. 하지만 이건 보기에 좋지 않아서 스타일링을 하기에 좋은 시기 입니다.

채우기 색상, 선 스타일, 글꼴 설정, 그림자를 선언하는 미리 정의 된 스타일로 텍스트를 그릴 수 있습니다. 상단 표시 줄의 UI 섹션에서 생성됩니다. 만들기 버튼을 클릭하여 만듭니다. 속성 설정을 위한 탭이 있는 왼쪽 막대와 오른쪽에 미리보기 이미지가 있는 스타일 편집기가 표시됩니다.

글꼴을 더 크고 굵게 만들어 보겠습니다. 크기를 변경하고 무게를 800으로 설정합니다. 그런 다음 왼쪽 상단 모서리에서 그려 지도록 정렬합니다.

tutSpaceShooter_13.fcc05c45.png

채우기 탭을 클릭하고 활성화 한 다음 "확산"채우기 유형을 선택합니다. 적절한 색상을 선택하십시오. 플레이어의 배색과 비슷한 것을 선택했습니다.

tutSpaceShooter_14.273cd2bd.png

그림자, 테두리 또는 둘 다를 추가하십시오! 그런 다음 왼쪽 하단에 있는 "적용"버튼을 클릭하여 변경 사항을 저장합니다.

생성 된 스타일의 이름을 ScoreText로 지정합니다. 목록보기에서 마우스 오른쪽 버튼으로 클릭하여 이름을 바꿀 수 있습니다.

이제 방의 이벤트로 돌아 갑시다. On Create 탭을 열고 코드를 수정하여 생성 된 스타일을 적용합니다.

this.asteroidTimer = 20;
this.enemyTimer = 180;

this.score = 0;
this.scoreLabel = new PIXI.Text('Score: ' + this.score, ct.styles.get('ScoreText'));
this.addChild(this.scoreLabel);
this.scoreLabel.x = 30;
this.scoreLabel.y = 30;

또한 라벨이 각 프레임에 업데이트 되도록 그리기 탭에 이 선을 추가해야 합니다.

this.scoreLabel.text = 'Score: ' + this.score;

팁

ct.styles.get ( '스타일'); 주어진 스타일을 로드합니다. PIXI.Text 생성자 내에서 이를 사용하여 생성 된 레이블의 스타일을 지정할 수 있습니다.

게임을 시작하면 만든 스타일로 점수가 그려집니다. 만세!

삶 그리기 및 관리

삶을 관리하는 것은 점수를 관리하는 것과 비슷합니다. 이 코드를 룸의 On Create 코드에 추가하여 생명 수를 저장하고 그립니다.

this.lives = 3;
this.livesLabel = new PIXI.Text('Lives: ' + this.lives, ct.styles.get('ScoreText'));
this.addChild(this.livesLabel);
this.livesLabel.x = ct.camera.width - 200;
this.livesLabel.y = 30;
this.livesLabel.depth = 1000;

스스로!

새 스타일을 만들어 'Lives'라벨에 적용합니다.

그런 다음 플레이어의 함선이 충돌시 생명체 하나를 제거하도록 로직을 추가해야 합니다. 특정 유형에 대해 테스트하기 위해 소행성과 적의 코드에서 사용한 것처럼 ct.place.meet을 사용할 수 있지만 하나의 충돌 그룹으로 그룹화 합시다. 더 적은 코드를 작성할 수 있고, 다른 크기의 적, 미사일 또는 소행성을 더 추가해도 변경이 필요하지 않습니다.

충돌 그룹에 복사본을 추가하려면 필요한 모든 유형의 On Create 코드에 다음 코드 줄을 추가해야 합니다.

this.ctype = 'Hostile';

이 줄을 소행성, 적 군함 및 적색 레이저의 On Create 코드에 추가합니다.

이제 다음 코드를 플레이어 함선의 On Step 코드에 추가합니다.

var hostile = ct.place.occupied(this, this.x, this.y, 'Hostile');
if (hostile) {
    hostile.kill = true;
    ct.room.lives --;
    if (ct.room.lives <= 0) {
        this.kill = true;
        setTimeout(function() {
            ct.rooms.switch('Main');
        }, 1000);
    }
}

ct.place.occupied는 이전에 사용했던 ct.place.meet과 유사하지만 유형이 아닌 충돌 그룹과 함께 작동합니다.

ct.rooms.switch는 현재 룸을 언로드 하고 새 룸을 로드합니다. 우리가 플레이하고 있던 같은 방을 가리키면 다시 시작합니다.

setTimeout은 주어진 시간 (밀리 초) 후에 함수를 실행하는 표준 브라우저의 함수입니다. 여기서 1 초 (1000 밀리 초)를 기다린 다음 방을 다시 시작합니다.

팁

setTimeout은 타이머를 작성하는 것보다 지연된 이벤트로 작업하는 더 나은 방법처럼 보일 수 있습니다. 차이점은 소유자가있는 동안 타이머가 존재하지만 setTimeout은 호출 한 복사본이 방에서 제거 된 경우에도 어떤 상황에서든 발생한다는 것입니다. (사실 setTimeout을 취소하는 방법이 있지만 다른 복사본으로 작업 할 때는 그다지 편리하지 않습니다. 좋아, 내가 말한 내용은 잊어 버리십시오.) 우리의 경우 화면에 플레이어 배송이 없는데도 방이 다시 시작되기를 원하므로 setTimeout을 사용합니다. 적을 파괴 한 후 총알이 무작위로 나타나는 것을 원하지 않기 때문에 적을 쏘고 생성하는 데 타이머를 사용합니다.

프로젝트를 저장하고 테스트하십시오. 이제 작지만 완전히 작동하는 우주 슈팅 게임이 있습니다! 이 게임을 더욱 향상 시킬 수 있는 방법은 많습니다.