【Phaser.jsでSvelteゲームアプリを作る②】Phaser3のローカル保存したアセットファイルを読み込む
※ 当ページには【広告/PR】を含む場合があります。
2024/07/20
![合同会社タコスキングダム|TacosKingdom,LLC.](/articles/article113/__8.jpg)
1. ローカルフォルダに保存した画像などのリソースを読み込む
2. 簡単なPhaserのシーン(Scene)の作り方
Scratch3のゲームプロジェクトからアセットファイルを取り込む
[ファイル] > [コンピューターに保存する]
![合同会社タコスキングダム|タコキンのPスクール](/articles/article113/__1.jpg)
src/assets
![合同会社タコスキングダム|タコキンのPスクール](/articles/article113/__2.jpg)
簡単な画像を読み出すシーンを作成する
src
scenes
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.svg
![合同会社タコスキングダム|タコキンのPスクール](/articles/article113/__3.png)
scene1-0.png
![合同会社タコスキングダム|タコキンのPスクール](/articles/article113/__4.png)
シーンファイル(jsファイル)を作成する
hogeScene
import Phaser from "phaser";
export default class <シーンのクラス名> extends Phaser.Scene {
constructor () {
super({ key: '<シーン名>' });
}
preload () {
//...リソースの読み込み
}
create () {
//...シーンの初期化
}
update() {
//...フレームごとの更新処理
}
}
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>
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
![合同会社タコスキングダム|タコキンのPスクール](/articles/article113/__5.jpg)
preload
load
preload (){
this.load.setBaseURL("src/assets");
this.load.image('cat', 'cat.svg');
this.load.image('scene1', 'scene1-0.png');
}
setBaseURL
package.json
image
スプライト画像を回転する
Phaser.GameObjects.Sprite
setAngle
setRotation
角度
ラジアン
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);
}
}
![合同会社タコスキングダム|タコキンのPスクール](/articles/article113/__6.jpg)
スプライト画像を拡大・縮小する
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);
}
}
![合同会社タコスキングダム|タコキンのPスクール](/articles/article113/__7.jpg)
まとめ
参考サイト
記事を書いた人
ナンデモ系エンジニア
これからの"地方格差"なきプログラミング教育とは何かを考えながら、 地方密着型プログラミング学習関連テーマの記事を不定期で独自にブログ発信しています。
カテゴリー