🤛🏿 👴🏿 👩🏿‍🚀 最初のPhaserゲームを作成します。パート2-リソースの読み込み 🎫 🤰🏿 🐡

フェイザー

リファクタリング分

まず、以前に作成したコードをより正確に整理しましょう。

まず、 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'); // <= } }

これで、ブラウザの左上隅に黄色のアスタリスクが表示されます：

スクリーンショット1

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'); })); } }

そしてこれを入手してください：

スクリーンショット2

このレッスンで終わりました。

Githubレポ ： https : //github.com/SuperPaintman/phaser-typescript-tutorial

コンテンツへ

最初のPhaserゲームを作成します。パート2-リソースの読み込み

目次

リファクタリング分

リソースの読み込み

スプライト作成

More articles:

最初のPhaserゲームを作成します。 パート2-リソースの読み込み

目次

リファクタリング分

リソースの読み込み

スプライト作成

More articles:

最初のPhaserゲームを作成します。パート2-リソースの読み込み