Phaser(Javascript라이브러리)

phaser 설명

회사에서 WEB게임을 제작하게 되면서 처음으로 공부하면서 사용하게 된 자바스크립트 라이브러리!!

솔직히 별로 하고 싶지 않았는데 이걸 왜 하고 있나 생각은 들었지만 하다보닌까 옛날에 어릴 적에 문방구나 오락실에서 했던 간단한 게임들을 구현하면서 재미를 느끼게 되었다.

 

간단하게 소개하면 HTML5 캔버스 게임 클라이언트 개발에 쓰이는 라이브러리(엔진)이다

 

- 개발 자료,튜토리얼,커뮤니티

- HTML5게임 제작에 최적화된 UX를 제공

 

이런 분들한테 추천!! 하지만 3D 및 모바일 앱 빌드 등은 지원하지 않는다.

하지만 모바일 앱 빌드는(IONIC)이라는 프레임 워크를 이용하면 가능하다!! 제 글에도 있지만 저도 이 프레임 워크를 이용해서 Phaser만든 웹 게임을 IOS/ANDROID로 빌드해서 배포했다.

 

간단하게 이용 방법!

 

npm i phaser 로 우선 다운

 

import Phaser from 'phaser'

import HelloWorldScene from './HelloWorldScene'

const config = {
	type: Phaser.AUTO,
	parent: 'app',
	width: 800,
	height: 600,
	physics: {
		default: 'arcade',
		arcade: {
			gravity: { y: 200 },
		},
	},
	scene: [HelloWorldScene],
}

export default new Phaser.Game(config)

 

기본 셋팅인데 width/height는 화면 크기 / physics는 물리엔진이고 arcade라는 물리엔진 이용해서 화면 전체에 

gravity(중력) 200 을 준다는 코드 입니다. 

 

scene이 화면을 구성하는 코입니다.

 

// src/HelloWorldScene.js


import Phaser from 'phaser'

export default class HelloWorldScene extends Phaser.Scene {
	constructor() {
		super('hello-world')
	}

	preload() {
		this.load.setBaseURL('https://labs.phaser.io')

		this.load.image('sky', 'assets/skies/space3.png')
		this.load.image('logo', 'assets/sprites/phaser3-logo.png')
		this.load.image('red', 'assets/particles/red.png')
	}

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

		const particles = this.add.particles('red')

		const emitter = particles.createEmitter({
			speed: 100,
			scale: { start: 1, end: 0 },
			blendMode: 'ADD',
		})

		const logo = this.physics.add.image(400, 100, 'logo')

		logo.setVelocity(100, 200)
		logo.setBounce(1, 1)
		logo.setCollideWorldBounds(true)

		emitter.startFollow(logo)
	}
}

 

위에서 HelloWorldScene를 불러오는데 이 코드를 보면 preload는 이미지 등을 불러오는 곳 / create는 이미지를 생성하고 이미지의 크기 및 색깔 및 중력을 줄지 안 줄지 이런 설정하는 곳 이빈다.