【Phaser.jsでSvelteゲームアプリを作る②】Phaser3のローカル保存したアセットファイルを読み込む

※ 当ページには【広告/PR】を含む場合があります。

2024/07/20

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

【Phaser3でSvelteゲームアプリを作る③】シューティングゲームの土台となる最初のプロジェクトを作成

前回はPhaserゲーム開発をSvelteアプリで始める準備までを解説してみました。

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

高度なHTMLゲームをPhaser.js＋Svelteアプリの手順をじっくり

そして今回からは具体的なPhaserの使い方をゆっくり解説していきます。

とりあえず今回のお題として、

開く/閉じる

            
            1. ローカルフォルダに保存した画像などのリソースを読み込む
2. 簡単なPhaserのシーン(Scene)の作り方

を以降で解説していきます。

JavaScriptとHTMLで「レトロ風RPG」を作ろう全コード解説

JavaScriptとCanvasでアニメーションとゲーム制作！～描き、動かし、操作する～

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

Scratch3のゲームプロジェクトからアセットファイルを取り込む

まずはScratchで過去に作ったゲームの移植、というアイデアでPhaserゲーム開発を進めていきます。

最初にやるべきは、ゲームづくりに欠かせない

「資材集め」

から始めましょう。

例えば、以下の以前作ったScratchプロジェクトに入ります。

「Scratchシューティングゲーム」のプロジェクトリンク

トップメニューから

[ファイル] > [コンピューターに保存する]

より、プロジェクトをsb3形式で保存し、ローカルのフォルダに保存します。

sb3ファイル(圧縮形式)なので、適当な解凍ソフトで解凍すると、プロジェクトで利用された画像ファイルがすべて入っている状態なのが分かります。

使う予定の画像ファイル選んで、

src/assets

というフォルダを作成し、ローカルのPhaserプロジェクトに保存しましょう。

これでローカルから画像を読み出す準備ができました。

JavaScriptとHTMLで「レトロ風RPG」を作ろう全コード解説

JavaScriptとCanvasでアニメーションとゲーム制作！～描き、動かし、操作する～

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

簡単な画像を読み出すシーンを作成する

「シーン(Scene)」

とはPhaserゲームの最小構成のプログラム要素であり、複数のシーンを統合することで、本格的で複雑なPhaserゲームになります。

それではPhaserで画像を読み込んでみるだけの

「シーン」

を作成してみましょう。

まずは、プロジェクトの

src

フォルダに新たに

scenes

というフォルダを作ります。

そこに

loadImages.js

というシーンとなるjsファイルを作成してみましょう。

開く/閉じる

            
            .
├── index.html
├── package.json
├── src
│   ├── App.svelte
│   ├── app.css
│   ├── assets
│   │   ├── cat.svg
│   │   ├── scean1-0.png
│   │   └── ...他の画像は省略
│   ├── scenes (★)
│   │   └── loadImages.js (★)
│   └── main.ts
├── svelte.config.js
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts

使う画像は何でも構わないのですが、スプライト画像(動的オブジェクト)用に、以下の

cat.svg

を、

また、背景画像(静的オブジェクト)用には、

scene1-0.png

を使います。

シーンファイル(jsファイル)を作成する

Phaserで新しくシーンを作る際には、

「お約束」

となるテンプレートコードがあります。

例えば、

hogeScene

というシーンオブジェクトを追加したい場合には、以下のようなファイルをあらかじめ定形構文で追加します。

開く/閉じる

            
            import Phaser from "phaser";

export default class <シーンのクラス名> extends Phaser.Scene {
    constructor () {
        super({ key: '<シーン名>' });
    }

    preload () {
        //...リソースの読み込み
    }

    create () {
        //...シーンの初期化
    }

    update() {
        //...フレームごとの更新処理
    }
}

これらのクラスメソッド(コンストラクタと3つのメソッド)はそれぞれ担当する機能は違います。

今回は

constructor

、

preload

、

create

の部分を使います。

先程追加していた

loadImage.js

を、

catScene

というクラス名で以下の内容で編集しておきます。

開く/閉じる

            
            import Phaser from "phaser";

export default class catScene extends Phaser.Scene {
    constructor () {
        super({ key: 'loadImages' });
    }

    preload (){
        this.load.setBaseURL("src/assets");
        this.load.image('cat', 'cat.svg');
        this.load.image('scene1', 'scene1-0.png');
    }

    create () {
        this._bg = this.add.image(400, 300, 'scene1');
        this._cat = this.add.sprite(400, 300, 'cat');
    }
}

このシーンをメインコードである

App.svelte

内のscriptに追加します。

開く/閉じる

            
            <script>
import Phaser from "phaser";
//👇シーンのインポート
import catScene from "./scenes/loadImages.js";

new Phaser.Game({
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { x: 0, y: 300 },
            debug: true
        }
    },
    input: {
        keyboard: true
    },
    scene: [catScene], //👈シーンを指定
});
</script>

これでサーバーを立ち上げみましょう。

開く/閉じる

            
            $ yarn dev

以下のような画面が出たら最初のシーンの完成です。

ローカルから画像などのリソースを読み込む際のポイントなるのは、

preload

メソッド内の

load

プロパティの使い方です。

開く/閉じる

            
            preload (){
    this.load.setBaseURL("src/assets");
    this.load.image('cat', 'cat.svg');
    this.load.image('scene1', 'scene1-0.png');
}

ここで重要なことが

setBaseURL

メソッドでリソースファイルのある場所(フォルダ)を指定することです。

フォルダパスはNodejsプロジェクトのルート(

package.json

が存在するフォルダ)から見た、相対的なパスになります。

リソースへのパスが正しく通ると、

image

メソッドの第2引数からファイル名を指定するだけで画像がPhaserアプリ側に登録されるようになります。

スプライト画像を回転する

画像を表示させただけだと内容として少し寂しいので、ちょっとだけPhaserゲームプログラミングをやってみましょう。

Phaseでは、ゲーム作成に必要な多種多様なクラスと、それに属するクラスメソッドが用意されていて、それをうまく組み合わせる形でプログラムを作成していくスタイルで作業が進みます。

公式のAPIリファレンスを覗くだけでも分かる通り、これらのPhaserライブラリの膨大な機能全てを覚えることはかなり困難です。

Phaser - HTML5 Game Framework

ただ、単純なゲームであれば使うクラスとメソッドはかなり限られてくるため、”主力のスタメンメソッド”を覚えれば、後はどうにかなると思います。

例えば、スプライト画像を回転させたいとしましょう。

スプライトを担当するクラスは、

Phaser.GameObjects.Sprite

クラスです。

対象となるPhaserクラスをAPIリファレンスで引くと、

Class: Sprite

の中にぎっしりと説明書きが書かれています。

このクラスのメソッドで、「スプライトの回転」を行うものを探すと、

setAngle

と

setRotation

の2つが見つかります。

この２つの違いは回転の大きさを指定するのに、

角度

か

ラジアン

かのそれぞれで指定すると言う仕様のようです。

この場合、角度のほうが感覚的にわかりやすいので、

setAngle

の方を使います。

先ほどの

loadImage.js

で、

create

関数パートを以下のように追記してみます。

開く/閉じる

            
            export default class catScene extends Phaser.Scene {

    //...中略

    create () {
        this._bg = this.add.image(400, 300, 'scene1');
        this._cat = this.add.sprite(400, 300, 'cat');
        //👇30度回転
        this._cat.setAngle(30);
    }
}

実行させてみると、スプライトが30度分回転していることが見てとれます。

スプライト画像を拡大・縮小する

さらに、画像を拡大・縮小したい場合、

setScale

か

setDisplaySize

の２つのメソッドが候補として見つかります。

setScale

では拡大縮小を倍率で指定するのに対して、

setDisplaySize

は実画像サイズで指定することが出来きるので、直接使う分には

setDisplaySize

の方が使いやすいです。

開く/閉じる

            
            export default class catScene extends Phaser.Scene {

    //...中略

    create () {
        this._bg = this.add.image(400, 300, 'scene1');
        this._cat = this.add.sprite(400, 300, 'cat');
        this._cat.setAngle(30);
        //👇画像を幅30px/高さ30pxに指定
        this._cat.setDisplaySize(30, 30);
    }
}