JavaScriptゲームエンジン Phaser 調査
naga3JavaScriptゲームエンジン調査
Phaser
公式サイト https://phaser.io/
リポジトリ https://github.com/photonstorm/phaser Star 31.2k
Wikipedia https://en.wikipedia.org/wiki/Phaser_(game_framework)
活発に開発が行われている。
phina.js
公式サイト http://phinajs.com/
リポジトリ https://github.com/phinajs/phina.js Star 288
Wikipedia https://ja.wikipedia.org/wiki/Phina.js
日本製。最新版は 2016/4/21
Kiwi.js
公式サイト https://www.kiwijs.org/
リポジトリ https://github.com/gamelab/kiwi.js Star 1.2k
最新版は 2015/11/16
enchant.js
公式サイト 消滅
Wikipedia https://ja.wikipedia.org/wiki/Enchant.js
事実上開発が停止している。
naga3Introduction
直接HTMLを起動すると file:// で動作するため、ブラウザで大幅な制限がかけられる。
画像・音声ファイル・JSONなどのリソースをセキュリティに引っかからないように読み込むために、まずWebサーバーを立ち上げる。
とりあえず有名な http-server を使う。
npm install -D http-server
Download
npm install phaser@3.55.2
Hello World
<!DOCTYPE html>
<html>
<head>
<script src="node_modules/phaser/dist/phaser.js"></script>
</head>
<body>
<script>
var config = {
type: Phaser.AUTO,
width: 800,
height: 600,
physics: {
default: 'arcade',
arcade: {
gravity: { y: 200 }
}
},
scene: {
preload: preload,
create: create
}
};
var game = new Phaser.Game(config);
function preload ()
{
this.load.setBaseURL('http://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(400, 100, 'logo');
logo.setVelocity(100, 200);
logo.setBounce(1, 1);
logo.setCollideWorldBounds(true);
emitter.startFollow(logo);
}
</script>
</body>
</html>
Making your first Phaser 3 game
boilerplate
var config = {
type: Phaser.AUTO,
width: 800,
height: 600,
scene: {
preload: preload,
create: create,
update: update
}
};
var game = new Phaser.Game(config);
function preload ()
{
}
function create ()
{
}
function update ()
{
}
GameConfig
type: Phaser.AUTO はWEBGLがあればそれを使ってくれて、なければCANVASを使う。
Scene
preload, create, update 関数内での this は Scene オブジェクトを指す。
naga3APIドキュメント
naga3Part 2 - Loading Assets
config.scene.preload でゲーム準備の関数を登録する。画像の読み込みなど。
画像は中央が (0, 0)
setOrigin で変更することもできる。
naga3Part 3 - World Building
physics で物理演算のシステムを組み込める。
this.physics.add.staticGroup() で固定オブジェクト。
configにも物理演算を組み込むことを伝える必要がある。
platformはゲームの土台くらいの意味。
naga3Part 4 - The Platforms
Arcade PhysicsにはDynamicとStaticの二種類のボディがある。
地面はStatic、キャラクターはDynamicにする。
platforms.create(400, 568, 'ground').setScale(2).refreshBody();
スケーリングしたときは refreshBody でエンジンに伝える必要がある。
naga3Part 5 - Ready Player One
this.physics.add.sprite(100, 450, 'dude');
左上から (100, 450) の位置にPhysics Spriteを追加する。デフォルトでDynamic Physicsボディとなる。
setBounce は跳ね返り係数を設定する。1でフルに跳ね返る。
this.anims.create でアニメーション設定。spritesheetの何番目やフレームレートなどを指定。
naga3Part 6 - Body Velocity: A world of physics
物理システムは Arcade Physics, Impact Physics, Matter.js Physics などがある。
Arcade Physicsはコンパクトで軽量。
Physics Spriteを作成するとArcade Physics Bodyへの参照となるbodyプロパティが生える。
player.body.setGravityY(300)
configのgravityは世界全体の重力。それにplayerの重力を追加する感じ。
this.physics.add.collider(player, platforms);
衝突判定する。platformsは地面全体を含んだstaticGroupなので、地面全体と衝突判定できる。
naga3Part 7 - Controlling the player with the keyboard
cursors = this.input.keyboard.createCursorKeys();
ビルトインのカーソルキーマネージャを使う。
update が毎フレームのループ。
setVelocityX, setVelocityY で速度設定。
player.body.touching.down で下の地面に触れているかをチェックできる。
naga3Part 8 - Stardust
stars.children.iterate
startsグループで繰り返しの処理を書ける。ここではランダムに跳ね返りを設定している。
this.physics.add.overlap(player, stars, collectStar, null, this);
プレイヤーと星が重なったときにcollectStar関数を呼び出す。 disableBody で星を消す。
naga3Part 9 - A score to settle
naga3Part 10 - Bouncing Bombs
this.physics.pause();
物理エンジンが止まる。
player.setTint(0xff0000);
プレイヤーを赤くする。
stars.countActive(true)
表示されている星の数を数える。