Phaser용 웹서버 구축 및 실행

lhk810 commented 3 years ago

Phaser를 사용하기 위해서는 웹서버가 필요하다. (https://phaser.io/tutorials/getting-started-phaser3)

이 이슈에서는 웹서버를 구축하기 위한 여러가지 방법들을 공유해본다.

예시
- MAMP
- Nodejs + express
- macOS 내장 apache 이용 (https://discussions.apple.com/docs/DOC-250001766) ~/etc/ 하위에 있는거 전 건드리기 싫어서 안할거임~

lhk810 commented 3 years ago

MAMP를 이용하는 방법

여기에서 OS에 맞게 다운로드 받으면 된다. 유료버전(MAMP PRO)과 함께 설치되는데 무료버전을 이용한다.

실행하면 위와 같은 화면이 뜨는데, Preference에서 포트나, index.html이 위치할 경로를 수정해주고 실행하면 된다.

해당 경로에서의 파일 예시

phaser 설치는 여기를 참고한다.

index.html

<!DOCTYPE html>
<html>
<head>
    <script src="./js/phaser-arcade-physics.js"></script>
</head>
<body>

    <script src="./js/src_games_snake_part7.js">
    </script>

</body>
</html>

src_games_snake_part7.js에서 상대경로로 수정

function preload ()
{
    this.load.image('food', './assets/games/snake/food.png');
    this.load.image('body', './assets/games/snake/body.png');
}

lhk810 commented 3 years ago

Nodejs + express를 이용하는 방법

프로젝트 생성
- 우선 nodejs, npm을 설치한다. 그 후 npm install express-generator -g로 express를 설치.
- 원하는 경로에서 express {dir_name} --no-view으로 새로운 경로에 프로젝트 생성
- --no-view 옵션을 이용하면 public 경로 하위에 index.html이 생성되어 정적 문서를 서빙할 수 있음.

public 경로에 아래와 같이 파일을 위치시킨다.

프로젝트 경로에서 npm install && npm start로 실행

UnorganizedCompany / PhaserStudy

Phaser용 웹서버 구축 및 실행 #1

MAMP를 이용하는 방법

Nodejs + express를 이용하는 방법