티스토리 뷰

Study/NodeJS

[Node.js + Phaser3] Hello Phaser? (1)

Hoon's Blog 2022. 2. 17. 03:37

 

What is Phaser?
Phaser is an HTML5 game framework which aims to help developers make powerful, cross-browser HTML5 games really quickly. It was created specifically to harness the benefits of modern browsers, both desktop and mobile. The only browser requirement is the support of the canvas tag.

 

목표

: NodeJS 사용 Phaser3 예제 따라하기

 

목표

 

 

 프로젝트 생성 & Hello World

 

 

1. 프로젝트 생성

 

Node.js and NPM

 

EJS 선택

 

2. 프로젝트 생성 완료 및 확인

생성 후 Run(Shift + F10)
http://localhost:3000/

 

 

Phaser & Example Download

 

1. Phaser download

Phaser 공식사이트
다운로드

 

Download phaser 클릭 후 js 또는 min.js 클릭

 

 

2. phaser.min.js 추가 및 예제 다운로드

 

공식사이트 튜토리얼 페이지

 

공식 사이트 튜토리얼 페이지 - https://phaser.io/tutorials/making-your-first-phaser-3-game/part1
예제 다운로드 - Requirements > Download this zip file

 

phaser.min.js & 예제 이미지 붙여넣기

 

앞서 다운받은 phaser.min.js를 javascripts 폴더로, 예제의 assets 폴더의 이미지들을 images에 복사

 

 

예제 실행 (튜토리얼 기준 - part3.html)

 

예제 내용 : images에 추가한 sky 이미지 출력

 

1. index.ejs 수정

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Making your first Phaser 3 Game - Part 3</title>
    <script src="javascripts/phaser.min.js"></script>
    <style type="text/css">
        body {
            margin: 0;
        }
    </style>
</head>
<body>

<script type="text/javascript">

	var config = {
		type: Phaser.AUTO,
		width: 800,
		height: 600,
		scene: {
			preload: preload,
			create: create,
			update: update
		}
	};

	var game = new Phaser.Game(config);

	function preload ()
	{
		this.load.image('sky', 'images/sky.png');
		this.load.image('ground', 'images/platform.png');
		this.load.image('star', 'images/star.png');
		this.load.image('bomb', 'images/bomb.png');
		this.load.spritesheet('dude', 'images/dude.png', { frameWidth: 32, frameHeight: 48 });
	}

	function create ()
	{
		this.add.image(400, 300, 'sky');
	}

	function update ()
	{
	}

</script>

</body>
</html>

 

2. 결과 확인

http://localhost:3000/

 

 다음글

 

 

저작자표시 비영리 변경금지

'Study > NodeJS' 카테고리의 다른 글

[Node.js + Phaser3] Hello Phaser? (3)  (0) 2022.02.17
[Node.js + Phaser3] Hello Phaser? (2)  (0) 2022.02.17
[Node.js] Linux 서버에 Nodejs 설치  (1) 2020.03.09
[Node.js] Git 사용 & 서버 배포  (0) 2020.03.09
[Node.js] Simple Express Preject  (1) 2020.02.19
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/04   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30
글 보관함