【Phaser.jsでSvelteゲームアプリを作る①】SvelteアプリにPhaser3をインストールする

『Phaser.js』

は海外で人気のJavascript製HTMLゲーム開発フレームワークです。

Phaser - Open Source HTML5 Game Framework

これまでこのブログでは『Scratch』を使って簡単なゲームの作成テクニックを色々と説明してきました。
主に小学生向けのプログラミング教育にも利用されるScratchでは、「コードを文字で直接書かなくて良い(ノーコード)」というだけで、やはり"Javascript製HTMLゲーム開発フレームワーク"の一つと言えます。
現在の日本のプログラミング教育界隈の視点から話をすると、例えば「高校生プログラミング教育」というワードで検索した場合、おそらくScratch学習後のプログラミングテーマは大きく2つのコースに進む傾向にあります。

開く/閉じる

            + 『Unity』で簡単な2D/3Dゲーム・Webページ制作
+ 『Python』を使ったロボット・AIプログラミング

ここで著者的に思うことは、Scratchを十分に修得した後で、これ以上Scratchでやれることがなくなったレベルの小学生もしくは中学生に対して、「Unity」/「Python」はガラリと変わる言語環境の違いによって、思わぬ

"躓き体験"

を生みやすいように感じます。
ここでいう「言語環境の違い」とは、Scracthでプログラミングの勉強で慣れ親しんだノウハウや体験からの主観的なズレ、のようなものです。
例えるなら、学校のプールで1km泳げるようになったので、次は実際の海に出て頑張って遠泳してみたい、という話なら、「水の中」という練習環境で共通していますが、海での遠泳ではなく、山でロッククライミングしてみたい...となると練習してしてきた環境と全く異なるようなものです。
ここまで極端に違うということはありませんが、まずUnityは「C#」であり、直接HTMLには埋め込むことができず、ゲームとして動かすには実行バイナリに変換しないといけません。
バイナリ形式を出力するようなプログラミング言語を理解するには、何かしらのOSの扱いに慣れてきて、C言語の基礎を学んだ大学生程度から学び始める方が、効果的に学習できるように思います。
初心者に適しているとされるPythonもまた、直接のHTML駆動のプログラムとしては動かないですし、実行環境のセットアップやバージョン管理に初心者なら割と面食らってしまいます。
Pythonでのプログラミングは、プログラミング言語として見れば文法も決して難しくはない部類なので、結構クセの強い扱い方をするため、依然として「事前の環境作り」が面倒です。
特に致命的とも思えるのは、GUI周りのライブラリのサポートの弱さで、Python系のアプリで良く採用されるQtでの開発は苦痛を伴います。
対して、Javascriptはプログラミング初心者が学ぶときにこのような"デメリット"が少ないのが魅力です。
ブラウザ一つあれば動くことが保証される「HTMLアプリ」を作る限り、こういったOS側の複雑な仕組みを全てブラックボックス化できて、より純粋に「プログラミング学習」に集中することが出来ます。
もちろん「ノーコード」のScratchと、「コードを文字で書く」Javascriptとでは、習得難易度にとんでもなく差があります。
ただ、せっかくScratchを頑張って学習してきた生徒たちにとっては、本格的なプログラミングの第一歩として、

「Scratch --> Phaser」

へと進むほうが学習コストが最小化できるのではないか、と考えているところです。
...ハイ。
いつものように前置きが長くなりましたが、この記事では、Phaser.jsを使ってモダンなHTMLゲームを作って、Javascriptプログラミングを楽しく学習することを目指すことがテーマで、連載する内容の第1回目になります。
今回は、とりあえず軽量なJavascriptフレームワークの「Svelte」にPhaser.jsをインストールして動作確認するまでを解説していきます。

【Html&Cssアプリ】Html/JavascriptとSassを使った四択クイズゲームの作り方

SvelteアプリにPhaserをインストールする

まずは空のSvelteアプリを作った後で、Phaserをインストールすることにします。
SvelteアプリはNode.jsが使えるならば、即時セットアップすることが可能です。
Svelteアプリの作成方法は以下のブログで説明しているので、この記事の説明はスキップします。

参考｜【Svelte Framework入門】Viteを使って素早くSvelteアプリ開発環境を始めてみる

Svelteアプリの最初のデモプログラムをブラウザで起動すると、以下のような状態になっています。
500x408

この状態からPhaserゲームになるように仕込んでいくのですが、Phaserゲームの実体は

canvas要素

が１つ自動生成され、そこに画像が表示されるように動いているだけです。
通常、Svelteアプリ開発で少なくとも一つは必要になるHTML要素が、Phaserゲームで動かす場合には不要になります。
ということで、無駄なファイルを削ってプロジェクト自体を先にスリム化しておきましょう。
Svelte/Viteプロジェクトの初期構造はおおよそ以下のような配置になっています。
177x479

プロジェクトの開発の理想はTypescriptやCSSプリプロセッサの利用ですが、プログラミング教育目的を考慮するとシンプルなJavascript/CSSの構成を目指します。

開く/閉じる

            .
├── README.md
├── index.html
├── package.json
├── public
│   └── vite.svg
├── src
│   ├── App.svelte
│   ├── app.css
│   ├── assets
│   │   └── svelte.svg
│   ├── lib
│   │   └── Counter.svelte
│   ├── main.ts
│   └── vite-env.d.ts
├── svelte.config.js
└── vite.config.ts

ではまず

Phaser.js

をNPMインストールします。

開く/閉じる

            $ yarn add phaser

インストールしたら、とりあえず無駄な初期ファイルを削除して整理します。

src/assetes/svelte.svg

や

src/lib/Counter.svelte

は削除しておきます。

assets

フォルダ・

lib

フォルダは後々リソースを追加で使うのでそのまま残しておいても良いでしょう。

開く/閉じる

            .
├── README.md
├── index.html
├── package.json
├── public
│   └── vite.svg
├── src
│   ├── App.svelte
│   ├── app.css
│   ├── assets
│   ├── lib
│   ├── main.ts
│   └── vite-env.d.ts
├── svelte.config.js
└── vite.config.ts

App.svelteの書き換え

Svelteアプリのメイン要素にあたる

App.svelte

を以下のように内容を書き換えます。

開く/閉じる

            <script>
import Phaser from "phaser";

//👇Phaserゲームの基本設定・開始
new Phaser.Game({
    type: Phaser.AUTO, //👈レンダリングタイプ(CANVAS/WEBGL/AUTO)
    width: 800, //👈画面幅
    height: 600, //👈画面高さ
    //👇物理エンジンの設定
    physics: {
        default: 'arcade', //👈使用する物理エンジン
        arcade: {
            gravity: { x: 0, y: 300 }, //👈重力方向と強さ
            debug: true //👈デバッグモードON
        }
    },
    input: {
        keyboard: true //👈キーボード入力の有効化
    },
});
</script>

もはやHTML要素が

script

タグだけとなりましたが、

new Pahser.Game(...)

により自動でHTMLに

canvas

要素が生成される仕組みになっているので、これだけでゲームとして機能します。

app.cssの書き換え

通常のWebページ仕様ではなく画面が単一なPhaserゲームとして見せるには、余計なCSSスタイルを取り除きシンプルに直します。
必要最低限のスタイルだけを残して他は消去しています。

開く/閉じる

            :root {
    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
    line-height: 1.5;
    font-weight: 400;

    color-scheme: light dark;
    color: rgba(255, 255, 255, 0.87);
    background-color: #242424;
}

body {
    margin: 0;
}

index.htmlの書き換え

HTMLアプリの場合、タイトル等が

index.html

に付いています。
そのままでも動くのですが、見栄えのためとりあえず以下のように変更しておきます。

開く/閉じる

            <!doctype html>
<html lang="jp">
    <head>
        <meta charset="UTF-8" />
        <link rel="icon" type="image/svg+xml" href="/vite.svg" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>はじめてのPhaser</title>
    </head>
    <body>
        <div id="app"></div>
        <script type="module" src="/src/main.ts"></script>
    </body>
</html>

何もしない空のPhaserゲームを立ち上げてみる

以上のファイルを書き換え、一旦サーバーを起動してみましょう。

開く/閉じる

            $ yarn dev

500x432

指定した画面サイズで真っ黒いスクリーンが表示されるだけのPhaserゲームが問題なく起動していればOKです。

【Html&Cssアプリ】Html/JavascriptとSassを使った四択クイズゲームの作り方

まとめ

以上、今回はPhaserとSvelteを組み合わせたアプリ作成の事前の開発環境づくりのみを簡単に解説してみました。
シリーズ構成でPhaserゲームづくりの手順をじっくり・ゆっくりと解説していく予定です。
題材としては、Scratchで一通りアプリ作成を解説していた「シューティングゲーム」をPhaser版として移植させていきます。

【アプリ・リリースノート】簡単なシューティングゲームを作ろう〜『タコのおさんぽ弾道(仮)』まとめ

Scratch版シューティングミニゲーム『タコのおさんぽ弾道(仮)』のまとめ記事

なお、内容の更新は著者的に時間が取れるタイミングでの不定期連載ですので、状況によっては遅れてしまう場合があります...その際にはご容赦ください。