HTML5 게임 개발 따라하기 - 총알 피하기(1/3)

개발

HTML5 게임 개발 따라하기 - 총알 피하기(1/3)

동고킴 2021. 11. 2. 00:08

Phaser를 이용하여 HTML5 게임을 개발해보자

Phaser를 이용한 HTML5 게임 개발하기입니다. 자세한 원리는 글에 포함하지 않았으며 코딩을 처음 접하는 분들을 위해 나름(?) 친절하게 작성하였습니다. 또한 외부 이미지 리소스를 사용하지 않고 오로지 코드로만 구현합니다. 코드를 단순히 복사하기보다는 단계별로 코드를 따라 하면서 사용 방법을 익히고 응용하면 좋을 것 같습니다.

전체 목차

Phaser 및 플레이어 설정 (현재 페이지)
시작, 종료 및 텍스트 설정
적(총알) 설정 및 충돌 설정

1. 준비

개발을 위해 IDE를 설치합니다. 여러 IDE가 있지만 VSCODE를 추천합니다.

2. Phaser 세팅 & 게임 영역 그리기

아래와 같이 html 파일을 생성 후 아래와 같이 작성합니다.

<!DOCTYPE html>
<html lang="ko">
  <head>
  </head>

  <body>
    <div>총알 피하기</div>
  </body>

  <script type="text/javascript"></script>
</html>

Phaser를 세팅합니다. 직접 다운로드해도 되지만 CDN을 사용하겠습니다. Phaser.is에서 현재 stable 버전인 v3.55.2를 사용하겠습니다.

<head> 태그 사이에 아래처럼 추가해주세요. 화면은 아직 변화가 없습니다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.min.js"></script>
  </head>

  <body>
    <div>총알 피하기</div>
  </body>

  <script type="text/javascript">
  </script>
</html>

게임 영역을 만듭니다.

MainScence 클래스가 생성되면 Phaser는 내부적으로 preload -> create -> update 함수를 차례대로 호출합니다.

// ...생략...
  <body>
    <div>총알 피하기</div>
    <!-- 게임 영역이 그려질 영역입니다. -->
    <div id="game"></div>
  </body>

  <script type="text/javascript">
    class MainScene extends Phaser.Scene {
      constructor() {
        super();
      }
    }

    // 에셋 로드 영역
    preload() {
    }

    // 게임 오브젝트를 만드는 영역
    create() {
    }

    // 로직(코드)을 반복 수행하는 영역
    update() {
    }

    const config = {
      type: Phaser.AUTO, // 게임 타입
      width: 500, // 가로
      height: 500, // 세로
      parent: "game", // 게임을 그릴 영역 id
      backgroundColor: "#000000", // 배경 색 RGB
      // 물리 설정. 충돌 처리 등에 사용
      physics: {
        default: "arcade", // 아케이드 게임
        arcade: {
          debug: true, // 디버그 모드 설정
        },
      },
      scene: MainScene, // 게임 Scene
    };

    let game = new Phaser.Game(config);
  </script>
</html>

3. Player 세팅 & 움직이기

Player를 세팅합니다.

debug 모드일 때는 게임 오브젝트 경계가 보라색으로 표시됩니다. 끄고 싶을 경우에는 debug를 false로 설정합니다.

class MainScene extends Phaser.Scene {
  constructor() {
    super();

    this.player; // 1) 플레이어 변수 추가
  }

  // 에셋 로드 영역
  preload() {
    // 2) 플레이어 그래픽을 생성한다. 0x00ff00 색상으로 가로20, 세로20 만큼의 원으로 만든다.
    let playser = this.make.graphics().fillStyle(0x00ff00).fillCircle(10, 10, 10, 10);
    // 3) 플레이어 그래픽을 'player'라는 이름의 Texture로 생성한다.
    playser.generateTexture("player", 20, 20);
    // 4) 플레이어 그래픽을 파괴한다.
    playser.destroy();
  }

  // 게임 오브젝트를 만드는 영역
  create() {
    // 5) 플레이어 오브젝트를 250, 250 위치에 생성한다.
    this.player = this.physics.add.image(250, 250, "player");
  }

   // ...생략...

키보드 이벤트를 입력받아 Player를 움직입니다.

update 함수는 초당 60번 반복 수행됩니다. 오브젝트(플레이어 등) 움직임처럼 지속적으로 변경해야 하는 부분을 이 함수 안에서 처리하면 됩니다.

class MainScene extends Phaser.Scene {
  constructor() {
    super();

    this.player;
    this.cursorKeys; // 1) 키보드 변수 추가
  }

  create() {
    this.player = this.physics.add.image(250, 250, "player");
    this.cursorKeys = this.input.keyboard.createCursorKeys(); // 2) 키보드 입력 설정
  }

  // 로직(코드)을 반복 수행하는 영역
  update() {
    // 3) player를 0만큼 이동 (키를 누르고 있는 동안만 움직이도록하기 위함)
    this.player.setVelocity(0);

    if (this.cursorKeys.up.isDown) {
      // 4-1) up 키를 눌렀을 때 player를 Y축 -200만큼 이동
      this.player.setVelocityY(-200);
    } else if (this.cursorKeys.down.isDown) {
      // 4-2) down 키를 눌렀을 때 player를 Y축 200만큼 이동
      this.player.setVelocityY(200);
    }

    if (this.cursorKeys.left.isDown) {
      // 4-3) left 키를 눌렀을 때 player를 X축 200만큼 이동
      this.player.setVelocityX(-200);
    } else if (this.cursorKeys.right.isDown) {
      // 4-4) down 키를 눌렀을 때 player를 X축 200만큼 이동
      this.player.setVelocityX(200);
    }
  }
}

아래 코드를 추가하여 Player가 화면 밖으로 나가지 못하도록 설정합니다.

create() {
    this.player = this.physics.add.image(250, 250, "player");
    // 1) player가 화면 밖으로 나가지 못하도록 설정
    this.player.setCollideWorldBounds(true);
    // 키보드 입력
    this.cursorKeys = this.input.keyboard.createCursorKeys();
}

저작자표시

'개발' 카테고리의 다른 글

자바스크립트 객체 리터럴을 이용한 스위치문 구현 (0)	2021.12.04
HTML5 게임 개발 따라하기 - 총알 피하기(2/3) (3)	2021.11.10
HTML5 게임 프레임워크 Phaser (0)	2021.11.01
CORS 프록시 서버 구축 (Feat. CORS Anywhere & Heroku) (0)	2021.10.25
VSCODE for the WEB - vscode.dev 사용 후기 (0)	2021.10.22

현재글HTML5 게임 개발 따라하기 - 총알 피하기(1/3)

동고 팔자 상팔자