Html5 Phaser 게임 프레임워크
Phaser Hello World
Phaser는 HTML5 게임을 만들수 있는 게임프레임워크입니다.
Phaser Hello World 소스
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/phaser@3.15.1/dist/phaser-arcade-physics.min.js"></script>
</head>
<body>
<script>
var v_width = $(window).width();
if(v_width < 500){v_width = 500;}
var config = {
type: Phaser.AUTO,
width: v_width,
height: 400,
physics: {
default: 'arcade',
arcade: {
gravity: { y: 200 }
}
},
scene: {
preload: preload,
create: create,
update:update
}
};
var game = new Phaser.Game(config);
function preload ()
{
//http://labs.phaser.io/assets
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');
}
function create ()
{
this.add.image(400, 300, 'sky');
var particles = this.add.particles('red');
var emitter = particles.createEmitter({
speed: 100,
scale: { start: 1, end: 0 },
blendMode: 'ADD'
});
var logo = this.physics.add.image(100, 30, 'logo');
logo.setVelocity(100, 200);
logo.setBounce(1, 1);
logo.setCollideWorldBounds(true);
emitter.startFollow(logo);
}
function update(){}
</script>
</body>
</html>
| 기능 | desc |
|---|---|
| config | 게임구성 설정 Phaser.AUTO(Phaser.CANVAS, Phaser.WEBGL 2가지중 지원되는 것으로 자동설정) scene: 게임 공간이며, 오브젝트, 배경 등 상호작용공간 |
| preload | scene이 호출되기전에 실행 |
| create | scene 생성 |
| update | 프레임별 호출 |
update Methods document : https://newdocs.phaser.io/docs/3.52.0/Phaser.Scene#update
Comments
Login: