2022-07-20: Phaser 실습하기(1)

Phaser  is a 2D game framework used for making HTML5 games for desktop and mobile. It is free software developed by Photon Storm.

 

Phaser는 캔버스 요소를 지원하는 모든 웹 브라우저에서 실행할 수 있다. 

Phaser로 만든 게임은 JavaScript 또는 TypeScript로 개발된다. 

브라우저는 웹 페이지에서 동일한 출처의 파일에만 액세스해야 하므로 이미지, 오디오 및 기타 게임 파일과 같은 리소스를 로드하려면 웹 서버가 필요하다.

 (출처: https://en.wikipedia.org/wiki/Phaser_(game_framework))

 

 

https://phaser.io/

Phaser - A fast, fun and free open source HTML5 game framework

 

 

Phaser에서는 다양한 게임 코드를 js(javascript) 형태로 제공하고 있고, 그 중 하나를 가져와서 VisualStudioCode에서 실행해보고자 했다.

첫 번째 방식.

game.js에 Phaser 코드를 넣고 index.html에서 js 파일을 불러오는 방식으로 했으나, "Uncaught ReferenceError: Phaser is not defined" 에러가 나왔다.

구글 검색 후 npm install phaser 등 다양한 코드를 입력해봤지만 계속해서 같은 에러가 나왔고, 한 사이트에서 웹 서버를 설치해야 한다는 답변을 봤다.

 

두 번째 방식.

import Phaser from 'phaser';

위 코드를 game.js 파일 맨 위에 넣었고, 'Uncaught SyntaxError: Cannot use import statement outside a module (at index.html)' 에러 코드가 나왔다.

이 경우는 코드 문법 자체를 몰라서 발생한 에러인 것 같아서 다른 방법을 찾아봤다.

 

결론

Phaser는 html 파일에서 js 파일을 load하는 것만으로 사용할 수 있지만, 일반적인 웹페이지처럼 Open In Default Brower(alt + b)에서 열 수는 없다.

 

 

왜 Phaser를 사용하려면 서버가 필요한가?

https://phaser.io/tutorials/getting-started-phaser3

Phaser - A fast, fun and free open source HTML5 game framework

phaser.io 사이트에 나와있는 tutorial을 따라가다 보면, web server를 사용해야 한다는 부분이 있다.

이 부분을 번역해보면 아래와 같다.

"Why do I need a local web server? Can't I just drag the html files onto my browser?"

다소 혼란스럽지만 모두 브라우저 보안으로 귀결됩니다. 
정적 html 웹 페이지를 만들고 있다면 이 파일을 브라우저로 드래그하여 최종 결과를 볼 수 있습니다. 또한 전체 웹 페이지를 로컬로 "다른 이름으로 저장"하고 대부분의 내용을 그대로 유지하여 다시 열 수 있습니다. 이 두 가지가 모두 작동한다면 HTML5 게임을 브라우저로 드래그하여 실행할 수 없는 이유는 무엇입니까?

파일에 액세스하는 데 사용되는 프로토콜과 관련이 있습니다. 사용 중인 웹을 통해 무엇이든 요청할 때 http서버 수준 보안은 원하는 파일에만 액세스할 수 있도록 하기에 충분합니다. 그러나 파일을 드래그하면 로컬 파일 시스템(기술적으로 file://)을 통해 로드되며 명백한 이유로 인해 크게 제한됩니다. file:// 아래에서는 도메인 개념도 없고 서버 수준 보안도 없고 원시 파일 시스템만 있을 뿐입니다.

JAVASCRIPT가 파일 시스템의 어느 곳에서나 파일을 로드할 수 있기를 정말로 원하십니까?
당신의 즉각적인 대답은 물론 "백만 년 후에는 아닙니다!"여야 합니다. JavaScript가 아래에서 작동하는 동안 자유 통치를 한다면 file://거의 모든 파일을 로드하고 어디에서 보내는지 알 수 있습니다.
이것은 매우 위험한 브라우저이기 때문에 file://. 모든 단일 페이지는 고유한 로컬 도메인으로 처리됩니다. 이것이 "웹 페이지 저장"이 어느 정도 작동하는 이유입니다. 라이브 서버에 있는 것과 동일한 사이트 간 제한으로 열립니다.

게임은 이미지, 오디오 파일, JSON 데이터, 기타 JavaScript 파일 등의 리소스를 로드해야 합니다. 그리고 이를 위해서는 브라우저 보안 족쇄에 의해 방해받지 않고 실행되어야 합니다. http:// 게임 파일에 액세스 해야 하고 이를 위해서는 웹 서버가 필요합니다.

 

따라서 VisualStudioCode에서 Phaser를 동작시키기 위해서는 web server가 필요하다.

1. Windows

Windows에서는 WAMP 서버 또는 XAMPP를 권장한다. Cesanta가 제공하는 몽구스 웹 서버는 설치가 필요없고 단일 exe 파일로 실행할 수 있는 작은 응용 프로그램이다.

'올인원' 번들 대신 자체적으로 웹 서버만 다운로드하려면 Microsoft IIS와 Apache가 있다. (무료)

2. Python을 사용하는 간단한 HTTP 서버

https://www.linuxjournal.com/content/tech-tip-really-simple-http-server-python

Tech Tip: Really Simple HTTP Server with Python | Linux Journal

3. node.js용 http-server

http-server 는 node.js 용으로 구성이 필요 없는 간단한 명령줄 http 서버이다 . 프로덕션 사용에 충분히 강력하지만 테스트, 로컬 개발 및 학습에 사용하기에 충분히 간단하고 해킹 가능하다.

http-server 웹 사이트

http-server

 

아마도 SSAFY 공통프로젝트에서는 프론트가 React, 백엔드가 node.js를 활용할 예정이기 때문에 3. node.js용 http-server 방식으로 Phaser를 실행시킬 수 있지 않을까 예상한다.