[Phaser] Phaser 개발을 위한 준비

Phaser 개발을 위한 준비를 해보자.

우선 브라우저는 크롬을 사용할 예정이다.

Web 컨텐츠를 띄우기 위해 간단한 서빙용 서버를 하나 띄워야하는데

Typescript도 사용해볼겸해서 NodeJS를 이용하기로 결정했다. (Python의 SimpleHTTPServer로도 가능)

---

1. nvm 설치

NodeJS 버전을 뭘 깔아야 할지 모르겠어서 일단 nvm(Node Version Manager)를 설치했다.

nvm은 원하는 Node 버전을 골라 설치할 수도 있고 설치된 버전중 어떤 버전을 사용할 것인지 정할 수도 있게 해준다.

나는 윈도우에서 개발중이므로 https://github.com/coreybutler/nvm-windows 여기서 다운받았다.

맥이나 다른 플랫폼이면 그냥 nvm을 받으면 된다.

---

2. NodeJS 설치

nvm install "latest"를 실행해 최신 버전을 설치해본다.

그냥 개인 개발이니까 쿨하게 최신 버전을 설치해보자. ㅎㅎ

9.11.1이라니 버전이 많이 올라갔구나...

---

3. Typescript 설치

npm install -g typescript

(typescript 모듈을 글로벌하게 설치한다!)

---

4. 막 이것 저것 설정하고 해야 하지만 귀찮다.

누군가 github에 기본틀을 만들어 놓지는 않았을까??

검색해보자.

https://github.com/troyedwardsjr/phaser3-typescript-webpack

기본 틀이 만들어져 있고 webpack으로 빌드를 내는 부분까지 만들어져 있다!

받아서 해보자!

크으 잘 된다.

zip 파일 다운받아서 코드랑 에셋만 쳐내고 기본 틀 만들어서 git 사용하자! ㅋㅋㅋ

잘 되기는 하는데 아직 TypeScript 연동이 제대로 되어 있지 않은 것 같다.

일단 Javascript로 진행하자!!!

https://github.com/nkholski/phaser3-es6-webpack

마찬가지로 잘 정리되어 있는 곳이 있어 땡겨쓰기로 함!

---

https://snowbillr.github.io/blog/2018-04-09-a-modern-web-development-setup-for-phaser-3/

Phaser 튜토리얼에도 올라왔는데

처음부터 설정하는 과정을 적어준 블로그가 있어서 공유한다.

아직 이런 설정하는게 익숙치 않은데 참고해서 한땀 한땀 해봐야겠다. ㅎㅎ