Phaser.js로 Click Pals 프론트를 개발하기 위해 VS Code와 Node.js, Phaser.js를 설치하고 GitHub에 업로드하는 과정이다.
Phaser는 고사하고 게임을 처음 개발해보는 만큼 세세하게 기록하고 공유하려 한다.
1. 개발 환경 준비
Node.js와 npm 설치
- Node.js 공식 웹사이트에서 LTS(Long Term Support) 버전을 다운로드하여 설치한다.
- 설치 후 아래 명령어로 Node.js와 npm이 설치되었는지 확인한다.
node -v
npm -vVisual Studio Code 설치
- VS Code 공식 웹사이트에서 MacOS용 설치 파일을 다운로드하고 설치한다.
2. Git 설치 및 설정
Git 설치 및 사용자 정보 설정
- Git 공식 웹사이트에서 MacOS용 Git을 다운로드하고 설치한다.
- 설치 후 아래 명령어로 Git 사용자 정보를 설정한다.
git config --global user.name "Your Name"
git config --global user.email "your.email@example.com"
3. Phaser.js 프로젝트 생성 및 초기 설정
프로젝트 폴더 생성 및 초기화
1. 터미널을 열고 원하는 위치에 프로젝트 폴더를 생성한다.
mkdir my-phaser-game
cd my-phaser-game
2. npm init -y 명령어로 package.json 파일을 생성한다.
Phaser.js 설치
- 아래 명령어로 Phaser.js를 설치하고 dependencies에 추가한다.
npm install phaser
4. 프로젝트 구조 설정
- 기본 프로젝트 구조는 다음과 같다.
my-phaser-game/
├── index.html
├── src/
│ └── main.js
├── package.json
└── node_modules/index.html 파일 작성
- 프로젝트 루트에 index.html 파일을 생성하고 다음 HTML을 입력한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>🖱️ Click Pals 🖱️</title>
</head>
<body>
<script src="node_modules/phaser/dist/phaser.js"></script>
<script src="src/main.js"></script>
</body>
</html>src/main.js 파일 작성
- main.js 파일을 생성하고 간단한 Phaser 게임 틀 코드를 입력한다.
const config = {
type: Phaser.AUTO,
width: 800,
height: 600,
backgroundColor: '#2d2d2d',
physics: { default: 'arcade', arcade: { gravity: { y: 0 } } },
scene: { preload: preload, create: create, update: update }
};
const game = new Phaser.Game(config);
function preload() { /* 에셋 로드 */ }
function create() { /* 게임 초기 설정 */ }
function update() { /* 프레임마다 호출되는 로직 */ }
5. 로컬 서버 실행
lite-server 설치 및 설정
1. lite-server를 사용하여 로컬 서버를 실행한다.
npm install --save-dev lite-server
2. package.json의 scripts를 다음과 같이 수정한다.
"scripts": {
"start": "lite-server"
}
3. npm start 명령어로 서버를 실행하고 http://localhost:3000에서 짜놓은 Phaser 게임 틀이 정상적으로 실행되는지 확인한다.
6. Git 저장소 초기화 및 GitHub에 업로드
Git 초기화 및 .gitignore 설정
1. 프로젝트 폴더에서 Git 저장소를 초기화한다.
git init
2. gitignore 파일을 생성하고 node_modules/ 폴더를 제외시킨다.
node_modules/GitHub 업로드
- GitHub에 새 저장소를 만들고, 아래 명령어로 원격 저장소에 연결한 후 푸시한다.
git remote add origin <https://github.com/YourUsername/my-phaser-game.git>
git branch -M main
git push -u origin main