Unityでスマホゲームを作ることは当然できますが、ブラウザゲームならもっと手軽に作成できるだろうと思いたち、良さげなゲームエンジンを探していました。
見つけたのが「Phaser3」というゲームエンジンです。
Unityと比べるとWeb上の情報は少ないですが、開発が活発なゲームエンジンとのことです。
新しいゲームエンジンの使い方を覚えるには、簡単なゲームを作るのが一番ということで、昔懐かしのマルバツゲームを作ることにしました。
本記事では、作成したマルバツゲームのコード解説を行い、Phaser3に興味を持っておられる方向けに、Phaser3の使い方を簡単にご紹介できればと思います。
本記事で学べるPhaser3の使い方は下記です。コーディングが楽なTypeScriptを利用します。
- 画像表示
- ボタン表示、リスナー設定
- シーン切り替え
- 背景色の変更
- 線の描写
- 画面タップ検知
目次
タイトル画面の作成
どんなに簡単なゲームでもタイトル画面があるとテンションがあがりますよね。
構成は、シンプルにロゴ画像表示、スタートボタンの配置とします。
画像表示
画像を表示する際には、preloadメソッドで画像をロードしておき、createメソッドやupdateメソッドで使用する形になります。
title-scene.ts
…
preload(): void {
// タイトルロゴをロード
this.load.image('title_img', 'assets/title_logo.png');
}
create() {
// タイトルロゴ表示
const title_logo = this.add.image(300, 100, 'title_img');
title_logo.setDisplaySize(600, 255);
}
…
ボタン表示、リスナー設定
ボタンはCSSのボタンを利用できます。さすがブラウザのゲームエンジンです。
あらかじめ、ボタンをjsxで作成しておき、それをインポートして利用します。
スタイルは、bulma.min.cssを利用しています。
play-button.jsx
import React from "../jsx-dom-shim";
const playbtn = (
<button class="button is-warning is-large">
<span>Play</span>
</button>
);
export default playbtn;
title-scene.ts
import playbtn from "../jsx/play-button.jsx";
export class TitleScene extends Phaser.Scene {
…
create() {
…
// Playボタンの表示、設定
const pb = this.add.dom(300, 400, playbtn);
pb.addListener("click").on("click", () => {
// ボタン押下時の処理
…
});
}
}
シーン切り替え
利用するシーンはあらかじめ、メインの「game.ts」にインポートしておきます。
game.ts
…
import { TitleScene } from "./scenes/title-scene";
import { GameScene } from "./scenes/game-scene";
…
シーン切り替え方法です。
単純に切り替えると味気ないので、フェードアウト→フェードインで切り替えるようにします。
fadeOut／Inメソッドの500の部分はミリ秒で、フェードアウト、インに要する時間を指定します。
その後の「255, 255, 255」の部分はフェードアウト後の色をRGBで指定しています。
この場合はホワイトアウトします。
以下は、タイトル画面からゲーム画面への切り替えです。
title-scene.ts
…
this.cameras.main.fadeOut(500, 255, 255, 255);
this.cameras.main.once(Phaser.Cameras.Scene2D.Events.FADE_OUT_COMPLETE, () => {
this.scene.start('GameScene');
});
…
game-scene.ts
…
create() {
…
// フェードイン
this.cameras.main.fadeIn(500, 255, 255, 255);
…
}
…
ゲーム画面の作成
続いて、実際のマルバツゲームの機能を作っていきます。
背景色の変更
Phaser3では、シーンの背景色は、デフォルトで黒です。
マルバツゲームでは、運動会で地面に「井」の字を描いた思い出をイメージして、背景色を茶色(＃b98c46)にします。
game-scene.ts
…
create(){
// 背景色を変更
this.cameras.main.setBackgroundColor("#b98c46");
…
}
…
線の描写
次に、線の描写機能を使って「井」の字を描写します。
game-scene.ts
…
create(){
…
// 線を引く
const l1 = this.add.line(0, 0, 50, 270, 1150, 270, 0x8d6449).setLineWidth(5);
const l2 = this.add.line(0, 0, 50, 540, 1150, 540, 0x8d6449).setLineWidth(5);
const l3 = this.add.line(0, 0, 200, 150, 200, 1500, 0x8d6449).setLineWidth(5);
const l4 = this.add.line(0, 0, 400, 150, 400, 1500, 0x8d6449).setLineWidth(5);
…
}
…
画面タップ検知
続いて、画面タップ検知の方法です。
まず、createメソッドでマウス入力を有効にしておきます。
そして、updateメソッドでタップを検出します。
game-scene.ts
…
create(){
…
// マウス入力を有効にする
this.input.mouse.enabled = true;
…
}
update(time: number, delta: number): void {
var pointer = this.input.activePointer;
// タップされた場合、pointer.isDownがtrueになる
// タップ位置の座標はpointer.x, pointer.yで取得
…
}
…
マルバツゲームに必要となる主な機能は、以上です。
ゲームの実行方法
ブラウザゲームを実行するには、Webサーバが必要になります。
Node.js＋webpack＋webpack-dev-serverを利用して、簡単なWebサーバを作成し、実行します。
全ソースコードをGitHubに置きました。
試してみたい方は、zipダウンロードします。
前提条件として、Webサーバ実行端末には、Node.jsがインストールされている必要があります。
ターミナルを起動し、npm -vコマンドでバージョンが出力される状態になればオッケーです。
あとは、下記コマンドで必要なモジュールを導入し、Webサーバを起動します。
cd MaruBatsuGame
npm install
npm run dev
Webブラウザで、「http://localhost:8055」に接続すればゲームが実行できます。
完成したマルバツゲーム
完成したマルバツゲームを本ブログにも載せてみました。
ブラウザゲームは、簡単にWeb公開できるのが魅力ですね。
※ 本ブログのスタイルシートにbulma.min.cssを適用できず、ボタンのスタイルが違いますが、動作に影響はありません。
応用編として、AI五目並べを作りました。
コメント