자바스크립트로 게임 만들기

프로그래밍/JavaScript 게임 개발

자바스크립트로 게임 만들기

천둥상어

2023. 12. 9. 19:53

자바스크립트로 간단한 게임을 만들어 볼까 합니다.

게임 개발의 양대 산맥은 언리얼 엔진(C++)과 유니티(C#)이지만, 웹에서 돌아가는 간단한 2D 기반 게임 만큼은 자바스크립트가 적합하다고 봅니다.

파이썬도 고민했지만 역시 브라우저 환경에서 실행되는 게임이 메리트가 있겠죠.

내가 만큼 게임을 웹에 올리면 언제라도 할 수 있고 누군가에게 보여 줄 수 있으니까요.

개발 환경

자바스크립트로 게임 개발을 하기 위해서는 무엇을 사용해야 할까요?

언리얼 엔진이나 유니트 같은 자바스크립트 게임 프레임워크로 Phaser.js 가 있습니다.

하지만 저는 게임 프레임 워크를 사용하지 않고, 그래픽 라이브러리만 설치해서 사용할 생각입니다.

간단한 게임을 개발하는데 프레임 워크까지는 필요가 없기 때문입니다.

아래 세가지를 설치하여 개발 환경을 구축 합니다.

1. Node.js

자바스크립트를 브라우저 밖에서 사용하기 위해서 Node.js 설치는 필수 입니다.

최신 버전이 아닌 LTS 버전을 설치해야 번들러나 라이브러리 설치시 문제가 발생하지 않습니다.

2. Parcel.js

번들러는 Parcle.js를 사용합니다.

속도도 빠르고 심플해 개인적으로 간단한 개발을 할 때 사용합니다.

3. Pixi.js

그래픽 라이브러리로는 Pixi.js를 사용합니다.

그래픽 라이브러리 중에서는 가장 좋다고 생각합니다. 업데이트도 꾸준히 이뤄지고 있고요.

버전마다 일부 사용 방법이 달라 주의해야 합니다.

버전은 PixiJS v7을 설치 합니다.

설치

Node.js를 설치하고 나서 Parcel.js와 Pixi.js는 npm 이나 yarn 통해 설치하면 됩니다.

Node.js 설치

Node.js 공식 다운로드 사이트에서 LTS 버전을 다운로드 후 설치 합니다.

https://nodejs.org/en/download/

Parcel.js 설치 및 빌드

한국어 버전 사이트가 있어서 자세한건 그곳에서 정독을 권장합니다.

여기서는 설치와 index.html 파일과 main.js를 생성하여 연결하고 빌드까지 설명합니다.

https://ko.parceljs.org/

Node.js가 설치 후 VSC(Visual Studio Code)에서 터미널을 열고 아래와 같이 입력하여 설치 합니다.

npm install -g parcel-bundler

개발할려는 폴더에 index.html 파일과 main.js 파일을 새로 만듭니다.

저는 puzzle이라는 폴더에 index.html을 생성하고 src 폴더를 만들어 그곳에 main.js를 생성 하였습니다.

index.html 에서 main.js를 읽어들이도록 아래와 같이 작성 합니다.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script src="./src/main.js"></script>
    </body>
</html>

main.js는 아래와 같이 작성 합니다.

class Main {
    constructor() {
        alert("빌드 성공");
    }
}

const main = new Main();

이제 터미널에 아래와 같이 입력하여 빌드 합니다.

parcel index.html

빌드가 성공했다면 다음과 같은 로그가 출력되고,

http://localhost:1234 를 Ctrl + 클릭으로 바로 브라우저에서 확인 할 수 있습니다.

Main() 클래스 생성자 함수의 alert() 함수가 호출되었다면 성공 입니다.

Pixi.js 설치

이제 Pixi.js를 설치 합니다. Pixi.js를 사용할려면 당연히 이 라이브러리에 대한 학습이 필요합니다.

다행히 러닝 커브가 높지 않고 레퍼런스도 잘 정리가 되어 있습니다.

https://pixijs.com/

설치는 parcel.js와 동일하게 터미널에서 npm 이나 yarn 으로 설치하면 됩니다.

npm i pixi.js

위에도 언급했지만 버전별로 차이가 있기 때문에 원하는 버전이 있다면 다음과 같이 설치 합니다.

저는 7.3.1 버전을 사용할 것입니다.

npm i pixi.js@^7.3.1

게임 스테이지 띄우기

이제 게임 화면이 렌더링 될 스테이지를 띄워 보겠습니다.

HTML 기반의 게임은 보통 <canvas> 태그에 렌더링이 됩니다.

canvas 태그는 이름 그대로 도화지처럼 뭔가를 그릴수 있는 태그 입니다.

여기에 게임 화면을 렌더링 합니다.

<canvas> 태그 추가

index.html에 <canvas> 태그를 추가하고 id는 "puzzle-game"으로 합니다.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <canvas id="puzzle-game"></canvas>
        <script src="./src/main.js"></script>
    </body>
</html>

main.js에서 PIXI.Application 생성

이제 index.html에 추가한 <canvas> 태그에 Application() 메서드를 호출해서 스테이지를 생성합니다.

import * as PIXI from "pixi.js";

class Main {
  constructor() {
    this.app = new PIXI.Application({
      width: 800,
      height: 600,
      backgroundColor: 0x000000,
      resolution: window.devicePixelRatio || 1,
      antialias: false,
      view: document.getElementById("puzzle-game"),
    });
  }
}

const main = new Main();

추가된 코드들에 대한 설명 입니다.

import * as PIXI from "pixi.js" : pixi.js의 메서들을 사용하기 위해 import 합니다.
this.app = new PIXI.Application({ 옵션 }) :pixi 기반의 캔버스 태그에 렌더링 될 앱을 생성 합니다.
- width : 가로 길이 입니다.
- height :세로 길이 입니다.
- baccgroundColor : 0x000000 : 백그라운드 색상 입니다.
- resolution : 해상도 설정 입니다. 디바이스의 비율에 맞추거나 지정 비율 값을 지정할 수 있습니다.
- antialias : 안티앨리어싱 적용 유무 입니다. 성능에 영향을 주므로 fasle 처리 해둡니다.
- view : 렌더링 될 캔버스 입니다.

다시 빌드해서 실행하면 아래와 같이 800x600의 검은 바탕을 가진 스테이지가 생성 됩니다.

마무리

이제 게임 개발을 할 수 있는 기초 공사가 끝났습니다.

'프로그래밍 > JavaScript 게임 개발' 카테고리의 다른 글

슬라이딩 퍼즐 게임 만들기 #4/4 (완성 및 리팩토링) (0)	2024.01.12
슬라이딩 퍼즐 게임 만들기 #3/4 (타일 섞기) (3)	2024.01.05
슬라이딩 퍼즐 게임 만들기 #2/4 (타일 이동) (1)	2023.12.25
슬라이딩 퍼즐 게임 만들기 #1/4 (타일 배치) (0)	2023.12.15

TS-LOG