Phaser 3 | サンプルコードで利用している基本構造
Phaser 3の記事で紹介しているサンプルコードに使っている全体的な基本構造です。
Phaser 3ではベースになるスクリプトの構造に様々な書き方があり、極力共通で使えるコードになるように考慮はしていますが、内容によってはサンプルコードが正常に動かないケースもあるかもしれません。
ゲームスクリプトの全体像を紹介しておくことで、問題の解決に繋がればと思います。
※上記の動作サンプルは、この記事で紹介しているコード内容のみです。タイトル後はなにもありません。
サンプルコードで利用している基本構造
index.html
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<title>サンプルコードの基本構造</title>
<script src="//cdn.jsdelivr.net/npm/phaser@3.20.1/dist/phaser.min.js"></script>
</head>
<body>
<div id="canvas"></div>
<script type="module" src="game.js"></script>
</body></html>game.js
//変数
let Game = {};
let Data = {};
//Game Size
Game.width = 800;
Game.height = 400;
//Title_Scene
class Title_Scene extends Phaser.Scene {
constructor() {
super({
key: 'Title_Scene'
});
}
preload() {
}
create() {
//Game Title
let title = this.add.text(Game.width / 2, Game.height / 3 * 1, 'GAME TITLE', {font: '40px Arial'}).setOrigin(0.5);
//Start Button
let start = this.add.text(Game.width / 2, Game.height / 3 * 2, 'START', {font: '20px Arial'}).setInteractive().setOrigin(0.5).setTint(0xff00ff, 0xffff00, 0x0000ff, 0xff0000);
start.on('pointerdown', function(pointer) {
this.scene.start('Game_Scene');
}, this);
}
}
//Game Scene
class Game_Scene extends Phaser.Scene {
constructor() {
super({key: 'Game_Scene'});
}
preload() {
}
create() {
}
update() {
}
}
//config
let config = {
type: Phaser.AUTO,
parent: 'canvas',
width: Game.width,
height: Game.height,
pixelArt: true,
scale: {
mode: Phaser.Scale.FIT,
autoCenter: Phaser.Scale.CENTER_HORIZONTALLY
},
physics: {
default: 'arcade',
arcade: {
gravity: {
y: 300
}
}
},
scene: [Title_Scene, Game_Scene]
};
let game = new Phaser.Game(config);変数「Game」と「Data」について
最初に変数「Game」と「Data」を作成しています。
「Game」はオブジェクトとゲームで利用するデータの格納用に、「Data」はゲームをセーブ・ロードする時に使うデータを格納する用としています。
//変数
let Game = {};
let Data = {};ゲームサイズについて
configにてレスポンシブ表示に切り替えていますが、ゲーム内でのサイズの扱いはここで決めた数値を基準値となります。
//Game Size
Game.width = 800;
Game.height = 400;シーンについて
ゲーム内のひとつのシーンは以下のように記述しています。
シーンのコードは他にも記述方法もありますが、thisの扱いや、関数の呼び出しなどで詰まった経験から最終的にはこれが一番使いやすいと判断しました。
//Game Scene
class Game_Scene extends Phaser.Scene {
constructor() {
super({key: 'Game_Scene'});
}
preload() {
}
create() {
}
update() {
}
}configのscaleについて
mode: Phaser.Scale.FIT
レスポンシブ表示用、ゲームの公開場所によっては無いほうが良いケースもあります。
autoCenter: Phaser.Scale.CENTER_HORIZONTALLY
左右中央揃え。モバイル専用ゲームなら不要ですが、PC表示時にウィンドウサイズで左右中央揃えにしたい時用。
pixelArt: true
ドットがぼやけるのを防ぐ設定、Scaleをレスポンシブにしている時にフォントが少し荒くなるのが難点。
configのphysicsについて
default: 'arcade’
どの物理演算を使うかなどの設定、普通の2Dゲームでよく使われている。
arcade{gravity:y: 300}
ゲームシーン全体に重力を設定。横スクロールアクションなどで便利。
configのsceneについて
ゲームで利用するシーンを記述しておく、最初に記述したシーンがゲーム開始時に呼び出される。
ゲームの開始
ゲームの開始コード、configが読み込まれている必要がある。
let game = new Phaser.Game(config);