目次
0 。 仕事の準備
1 はじめに
2 。 リソースの読み込み[
]
３ 。 ゲーム世界の創造
4 。 （ wip ）グループ
5 。 （ wip ）物理学の世界
6 。 （ wip ）管理
７ 。 （ wip ）目標の追加
8 。 （ wip ）最終タッチ
PhaserをTypeScriptと組み合わせて使用する一連のチュートリアルを続けましょう。 このチュートリアルでは、 Phaserでのリソースの読み込みと、前の部分のコードを少し「コーム」します。
前の記事のように、コード内のコメントをスキップしないでください。
この記事で記述された完全なコードは、 part-2
タグ付きのGithubリポジトリにあります 。
さあ始めましょう！
リファクタリング分
まず、以前に作成したコードをより正確に整理しましょう。
まず 、 src/states
ディレクトリを作成し、 src/states/state.ts
ファイルをその中にsrc/states/state.ts
ます。
'use strict'; /** Imports */ import App from '..'; abstract class State extends Phaser.State { // `game` . // , `App` - , TypeScript // , , // `this.game`. game: App; } export default State;
抽象クラスState
を作成し、 Phaser.State
から継承しPhaser.State
。 これは、一見すると、 TypeScriptが州のメソッドでthis.game
プロパティを正しく処理するために奇妙な操作が必要です。 デフォルトでは、 game
プロパティのタイプはPhaser.Game
であるため、 TypeScriptはApp
に追加したフィールドについては何も知りません（この一連の記事では、カスタムフィールドをApp
追加しませんが、事前に同様の抽象クラスをPhaser.Game
ても問題ありません） ）
ほとんどの場合、「App
に追加できるプロパティは何ですか？」という質問があります。 なぜなら 各状態にはApp
へのプロパティリンクがありますthis.game
、たとえば、すべての状態のグローバルな依存関係をAppに追加したり、ストレージオブジェクトへのリンク、WebSocket接続などを追加したりできます。
次に 、 MainState
をsrc/states/main.state.ts
し、その時点でsrc/states/main.state.ts
なメソッド（ preload
とupdate
）を削除します。
'use strict'; /** Imports */ import State from './state'; // export default class MainState extends State { create(): void { } }
src/index.ts
で、このsrc/index.ts
のインポートを10
行10
追加します。
// ... import MainState from './states/main.state'; // ...
BootState
に、それぞれsrc/states/boot.state.ts
とsrc/states/preloader.state.ts
PreloaderState
にBootState
とBootState
を作成します：
'use strict'; /** Imports */ import State from './state'; // `preloader`; // ; // ; export default class BootState extends State { create(): void { // `this.game` - `App`, // . this.game.state.start('preloader'); // `preloader` } }
そして
'use strict'; /** Imports */ import State from './state'; // (core) : // * , // * // * / // * .. export default class PreloaderState extends State { preload(): void { console.debug('Assets loading started'); } create(): void { console.debug('Assets loading completed'); this.game.state.start('main'); // `main` } }
上記のように、ゲームのリソースをロードするにはPreloaderState
が必要です（当然、ゲームに多数のリソースがある場合、対応する状態の前にそれらをロードする必要があり、重要なpreloader
のみをpreloader
にロードする必要があります。しかし、この場合、開始する前にすべてのリソースをロードしますゲーム）。
preload(): void
が最初に呼び出され、 create(): void
がすべてのリソースがロードされた後にcreate(): void
になりcreate(): void
。
一般的に言えば、言明はかなり主観的な問題です。 任意の数（Prepreloader
、Prepreloader
など）を追加できますが、私の経験では、少なくとも3つのスタイルが必要です。
BootState
アセンブリ情報を初期化して表示します。PreloaderState
リソースのロード用。MainState
ゲームのメインループ用。
4番目に 、これらの状態をsrc/index.ts
プラグインします。
// ... import BootState from './states/boot.state'; import PreloaderState from './states/preloader.state'; import MainState from './states/main.state'; // ... export default class App extends Phaser.Game { constructor(config: Phaser.IGameConfig) { super(config); // this.state.add('boot', BootState); this.state.add('preloader', PreloaderState); this.state.add('main', MainState); this.state.start('boot'); // `boot` } } // ...
this.state.start('main');
を置き換えたことに注意してくださいthis.state.start('main');
this.state.start('boot');
。
リソースの読み込み
再構築が完了したので、ゲームに必要なリソースをロードします。 これを行うには、 preload(): void
（ this.game.load
メソッド内でthis.game.load
メソッドを呼び出します。
各状態には、接続先のApp
this.game
へのリンクがあります。
Phaser自体は、ゲームの開始時にこのメソッドを呼び出し、定義したすべてをダウンロードします。
PhaserはPhaser.Loader
介してリソースを魔法のようにロードします。 this.game.loadにコールバックやPromisをthis.game.load
する必要はありません。ダウンロード自体を監視します。
src/states/preloader.state.ts
次のコードを追加します。
'use strict'; /** Imports */ import State from './state'; // Webpack require' URL , // `dist/asserts/images`. // , : // `const skyImage = '/assets/images/sky.png';` // ( "" Webpack', ). const skyImage = require('assets/images/sky.png'); const platformImage = require('assets/images/platform.png'); const starImage = require('assets/images/star.png'); const dudeImage = require('assets/images/dude.png'); export default class PreloaderState extends State { preload(): void { console.debug('Assets loading started'); this.game.load.image('sky', skyImage); // <= this.game.load.image('platform', platformImage); // <= this.game.load.image('star', starImage); // <= this.game.load.spritesheet('dude', dudeImage, 32, 48); // <= } create(): void { console.debug('Assets loading completed'); this.game.state.start('main'); // `main` } }
リソース自体は、assets/images
ディレクトリのGithubリポジトリにあります。同じディレクトリ（assets/images
）のローカルプロジェクトに追加する必要もあります。
行20-23
3つの画像と1つのスプライトの4つのリソースをロードします。 最初の引数（キー） this.game.load.image()
およびthis.game.load.spritesheet()
に注意してください。これは、このリソースにアクセスするために将来使用する識別子です（キーには任意の文字列を使用できます）。
3
および4
this.game.load.spritesheet()
引数は、スプライトシート内の1つの画像の高さと幅です。
スプライト作成
ゲームにスプライトを追加するには、次のコードを追加しcreate(): void
をcreate(): void
必要がありcreate(): void
（ MainState
）：
'use strict'; /** Imports */ import State from './state'; // export default class MainState extends State { create(): void { this.game.add.sprite(0, 0, 'star'); // <= } }
これで、ブラウザの左上隅に黄色のアスタリスクが表示されます：
this.game.add.sprite()
の最初の引数はx
軸、2番目はy
軸、3番目は画像の読み込み時に指定したものと同じキーです。
画面上の要素の描画順序は、作成の順序に対応しています。 したがって、星の背後に背景を追加する場合は、星のスプライトの前にこのスプライトを最初に作成する必要があります。
実際、Zインデックスを手動で設定し、それによってゲームワールドの要素をソートする機会がありますが、最初はPhaserがこれを行い、後続の各要素にZインデックス+ 1を設定します。
最後に、もう少し星を追加しましょう。
'use strict'; /** Imports */ import State from './state'; // export default class MainState extends State { create(): void { const map = [ 'XX XX XXX XXX ', 'XXXXXXX X', 'XXXX XXXX XXX XXX ', 'XXXXXX XX ', 'XXXX XXX XX ' ].map((line) => line.split('')); // // map.forEach((line, y) => line.forEach((char, x) => { if (char !== 'X') { return; } // `X`, . // 24 - . // 22 - . this.game.add.sprite(x * 24, y * 22, 'star'); })); } }
そしてこれを入手してください：
このレッスンで終わりました。
Githubレポ ： https : //github.com/SuperPaintman/phaser-typescript-tutorial