【Phaser.jsでSvelteゲームアプリを作る②】Phaser3のローカル保存したアセットファイルを読み込む
※ 当ページには【広告/PR】を含む場合があります。
2024/07/20
前回はPhaserゲーム開発をSvelteアプリで始める準備までを解説してみました。
そして今回からは具体的なPhaserの使い方をゆっくり解説していきます。
とりあえず今回のお題として、
1. ローカルフォルダに保存した画像などのリソースを読み込む
2. 簡単なPhaserのシーン(Scene)の作り方
を以降で解説していきます。
Scratch3のゲームプロジェクトからアセットファイルを取り込む
まずはScratchで過去に作ったゲームの移植、というアイデアでPhaserゲーム開発を進めていきます。
最初にやるべきは、ゲームづくりに欠かせない
例えば、以下の以前作ったScratchプロジェクトに入ります。
トップメニューから
[ファイル] > [コンピューターに保存する]1170x536
sb3ファイル(圧縮形式)なので、適当な解凍ソフトで解凍すると、プロジェクトで利用された画像ファイルがすべて入っている状態なのが分かります。
使う予定の画像ファイル選んで、
src/assets262x528
これでローカルから画像を読み出す準備ができました。
簡単な画像を読み出すシーンを作成する
それではPhaserで画像を読み込んでみるだけの
まずは、プロジェクトの
srcscenesそこに
loadImages.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.svg95x100
また、背景画像(静的オブジェクト)用には、
scene1-0.png480x360
シーンファイル(jsファイル)を作成する
Phaserで新しくシーンを作る際には、
例えば、
hogeScene import Phaser from "phaser";
export default class <シーンのクラス名> extends Phaser.Scene {
constructor () {
super({ key: '<シーン名>' });
}
preload () {
//...リソースの読み込み
}
create () {
//...シーンの初期化
}
update() {
//...フレームごとの更新処理
}
}
これらのクラスメソッド(コンストラクタと3つのメソッド)はそれぞれ担当する機能は違います。
今回は
constructorpreloadcreate先程追加していた
loadImage.jscatScene 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>
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
以下のような画面が出たら最初のシーンの完成です。
600x490
ローカルから画像などのリソースを読み込む際のポイントなるのは、
preloadload preload (){
this.load.setBaseURL("src/assets");
this.load.image('cat', 'cat.svg');
this.load.image('scene1', 'scene1-0.png');
}
ここで重要なことが
setBaseURLフォルダパスはNodejsプロジェクトのルート(
package.jsonリソースへのパスが正しく通ると、
imageスプライト画像を回転する
画像を表示させただけだと内容として少し寂しいので、ちょっとだけPhaserゲームプログラミングをやってみましょう。
Phaseでは、ゲーム作成に必要な多種多様なクラスと、それに属するクラスメソッドが用意されていて、それをうまく組み合わせる形でプログラムを作成していくスタイルで作業が進みます。
公式のAPIリファレンスを覗くだけでも分かる通り、これらのPhaserライブラリの膨大な機能全てを覚えることはかなり困難です。
ただ、単純なゲームであれば使うクラスとメソッドはかなり限られてくるため、”主力のスタメンメソッド”を覚えれば、後はどうにかなると思います。
例えば、スプライト画像を回転させたいとしましょう。
スプライトを担当するクラスは、
Phaser.GameObjects.Sprite対象となるPhaserクラスをAPIリファレンスで引くと、
の中にぎっしりと説明書きが書かれています。
このクラスのメソッドで、「スプライトの回転」を行うものを探すと、
setAnglesetRotationこの２つの違いは回転の大きさを指定するのに、
角度ラジアンこの場合、角度のほうが感覚的にわかりやすいので、
setAngle先ほどの
loadImage.jscreate 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度分回転していることが見てとれます。
600x451
スプライト画像を拡大・縮小する
さらに、画像を拡大・縮小したい場合、
setScalesetDisplaySizesetScalesetDisplaySizesetDisplaySize 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);
}
}
実行後に、スプライトのサイズが変わっていたらOKです。
600x449
まとめ
以上、今回はローカルに保存した画像をPhaserのシーンに表示させてみる簡単なゲームを作成してみました。
次回からはシューティングゲーム作成のハウツーを小出しに説明していく予定です。