반응형
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는 이미지를 생성하고 이미지의 크기 및 색깔 및 중력을 줄지 안 줄지 이런 설정하는 곳 이빈다.
반응형
'IT지식' 카테고리의 다른 글
ChatGpt(새로운 직업 프롬프트 엔지니어)에 대해!! (0) | 2024.02.08 |
---|---|
Git 커맨드로 간단하게 사용하기 (1) | 2024.02.05 |
[scss]Font적용 하는 법(React) (0) | 2023.11.09 |
[Ionic]하이브 프레임워크 Ionic 이란? (0) | 2023.10.10 |
[git]merge/commit/checkout 사용법 (0) | 2023.08.24 |
댓글