Phaser
Photon Storm에서 개발한 무료 SW로, HTML5용 게임을 만드는데 사용되는 2D 게임 프레임워크다.
Phaser는 내부적으로 Canvas와 WebGL 렌더러를 모두 사용하기 때문에 데스크톱과 모바일에서 빠른 렌더링이 가능하다.
렌더링에는 Pixi.js 라이브러리를 사용한다.
주요 기능에는 씬 관리 / 물리 엔진 / 입력 처리 / 애니메이션 / 오디오 처리 등이 있다.
사용 언어
웹 기술에 의존하는 프레임워크이기 때문에 JavaScript로 개발되었다. 때문에 Phaser를 사용하여 게임을 개발하려면 JavaScript나 TypeScript를 사용해야 한다.
디렉터리 구조
아래는 Phaser와 node_modules 관련 디렉토리 및 파일만 나타낸다.
Web_Game
ㄴ asset
ㄴ audio
ㄴ image
ㄴ lib
ㄴ node_modules
ㄴ src
ㄴ index.js
ㄴ index.html
ㄴ package-lock.json
ㄴ package.json
asset
게임 내에 필요한 이미지 / 음악 파일 / 라이브러리 등이 위치한다.
src
index.js 및 Scene 파일이 위치한다.
index.html
Phaser 전반에 필요한 모든 html 요소를 정의하고 있다.
index.html
코드 전문은 아래와 같다.
<!doctype html>
<html>
<head>
<script src="./asset/lib/phaser.min.js"></script>
<meta charset="utf-8" />
<title>Webpack App</title>
</head>
<body>
<!-- <h1>Hello world!</h1>
<h2>Tip: Check your console</h2> -->
<script src="src/index.js"></script>
<script>
if ("serviceWorker" in navigator) {
window.addEventListener("load", () => {
navigator.serviceWorker
.register("service-worker.js")
.then((registration) => {
console.log("Service Worker registered: ", registration);
})
.catch((registrationError) => {
console.error(
"Service Worker registration failed: ",
registrationError
);
});
});
}
</script>
</body>
</html>
간략한 코드 설명은 아래와 같다.
<head>
<head>
<script src="./asset/lib/phaser.min.js"></script>
<meta charset="utf-8" />
<title>Webpack App</title>
</head>- <script> : head 내에 Phaser JS 게임 프레임워크의 압축 파일을 포함한다.
- <meta> : 문자 인코딩 방식을 UTF-8로 설정한다.
- <title> : 브라우저 탭에 표시될 페이지 제목을 설정한다.
<body>
웹 페이지의 본문 콘텐츠를 포함한다. 사용자가 실제로 보는 콘텐츠가 들어가는 부분이다.
<body>
<script src="src/index.js"></script>
<script>
if ("serviceWorker" in navigator) {
window.addEventListener("load", () => {
navigator.serviceWorker
.register("service-worker.js")
.then((registration) => {
console.log("Service Worker registered: ", registration);
})
.catch((registrationError) => {
console.error(
"Service Worker registration failed: ",
registrationError
);
});
});
}
</script>
</body>- <script src="src/index.js"> : index.js 파일을 포함한다.
- index.js : Phaser 환경 설정 (화면 크기, 물리 엔진 설정 등)을 하고 프레임워크 객체를 생성한다.
- <script> : 서비스 워커를 등록한다. 서비스 워커는 웹 애플리케이션의 백그라운드에서 실행되며 오프라인 지원, 백그라운드 동기화 등을 가능하게 하는 기술이다.
- if("serviceWorker" in navigator) : navigator객체는 브라우저에서 제공되는 API를 나타낸다. 즉, serviceWorker가 브라우저에서 지원되는지를 확인한다.
- window.addEventListener("load",() => {..}) : 웹 페이지가 로드된 후 실행되는 이벤트 리스너이다. 페이지가 모두 로드된 후 서비스 워커를 등록한다.
- navigater.serviceWorker.register(...) : service-worker.js 파일을 서비스 워커로 등록한다.
- service-worker.js : 게임에서 필요한 자원을 미리 캐시하고 이를 통해 오프라인 기능을 구현한다.
- .then(...) : 서비스 워커가 성공적으로 등록되면, 등록된 정보를 콘솔에 출력한다.
- .catch(...) : 서비스 워커 등록에 실패하면 오류 메세지를 출력한다.
서비스 워커
웹 서비스에서도 백그라운드 동기화, 푸시 알림, 서버 자산 업데이트 등이 가능하도록 지원하는 웹 응용 프로그램, 브라우저, 네트워크 사이의 프록시 서버 역할을 하는 도구다.
서비스 워커는 브라우저가 백그라운드에서 실행하는 스크립트로, 웹 페이지와는 별개로 작동하며 사용자나 웹 페이지의 인터랙션이 필요하지 않은 기능만 제공한다. 따라서 서비스 워커의 수명 주기는 웹 페이지와는 별개로 돌아간다.
Phaser에서는 서비스 워커를 등록해 오프라인 기능을 지원하고, 게임 리소스를 캐시한다. 즉, 페이지가 오프라인일 때도 캐시된 자원을 사용해 게임을 정상적으로 실행할 수 있게 하기 때문에 네트워크 상태와 관계 없이 게임을 즐길 수 있다.
Error!
index.html에 Phaser 라이브러리를 넣을 때 CDN 방식으로 아래와 같이 입력했다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/3.80.1/phaser.min.js"></script>설정 후 npm run serve로 실행을 하는데 계속 phaser을 실행할 수 없다는 에러가 발생했다.
또한, 검색해보니 CDN 부분을 body에 넣어야 한다고도 하고 head에 넣어야 한다고도 하고 말이 많았다. CDN을 사용할 경우, 외부 사이트에 접근해 데이터를 가지고 오는 방식이라서 여러가지 신경써야 하는 부분이 많은 것 같았다. (보안이라던가 시스템 안정성이라던가 속도라던가...)
앞으로는 파일이 존재한다면 직접 받아 사용해야 할 것 같다.
참고 : https://co1nam.tistory.com/67
phaser.min.js
Phaser 프레임워크의 압축 버전이다. 게임 개발을 위한 기본 기능을 제공한다.
Phaser 홈페이지에서 다운 받을 수 있다. 아래 경로를 통해서 phaser.min.js를 받아 프로젝트에 넣으면 된다. 하단에는 CDN 경로도 제공하지만 필자는 위와 같은 오류가 발생해서 사용하지 않았다.
홈페이지 경로 : https://phaser.io/download/stable
'Phaser' 카테고리의 다른 글
| Web Game - 벌레 잡기 ~diff.js~ (1) | 2025.04.28 |
|---|---|
| Web Game - 벌레 잡기 ~intro.js~ (0) | 2025.04.25 |
| Web Game - 벌레 잡기 ~index.js~ (0) | 2025.04.23 |
| Web Game - 벌레 잡기 ~Setting~ (1) | 2025.03.27 |
| WEBPACK이란? (0) | 2024.10.02 |