Loader

phaser.io
Phaser - The fast, fun and free HTML5 Game Framework
https://phaser.io/phaser3/api/loader
Desktop and Mobile HTML5 game framework. A fast, free and fun open source framework for Canvas and WebGL powered browser games.

一覧へ戻る

概要

LoaderはPhaserにおいて、外部のアセットをキャッシュに読み込む機能を提供します。Phaser2ではLoaderはゲーム全体で利用されるグローバルなものでしたが、Phaser3では状態ごとに個別のLoaderを持ちます。これにより、他の状態ですでに読み込み中だった場合でも、ある状態の開始時にその状態に必要なアセットの読み込みを制御できるようになりました。

LoaderはBaseLoaderクラスで構成されます。読み込みのキュー、ファイルの追加、イベントの処理、そして読み込み実行などを管理増します。filetypesフォルダーによって、BaseLoaderは異なるフォーマットのファイルに対応します。以下が含まれます。

  • AnimationJSON File
  • AtlasJSON File
  • Binary File
  • BitmapFont File
  • GLSL File
  • HTML File
  • Image File
  • JSON File
  • SpriteS heet
  • SVG File
  • Text File
  • XML File

BaseLoaderは、addFileという読み込みメソッドのみを提供します。状態(State)はそれぞれ用のLoaderシステムを持ち(state/systems/Loaderで見つけられます)、読み込みしやすいような公開APIを提供します。imageやjson、atlasといったメソッドを持ち、Phaserのコード内で判読がしやすくなるでしょう。StateのLoaderシステムはthis.loadで提供されるので、this.load.imageなどのように呼び出せて、BaseLoaderが内部的に処理します。

読み込みには、バイト単位の進捗通知などの様々なイベントが発生します。

Phaser3では、新しく、Loaderメソッドに設定オブジェクトを渡せるようになりました。

Examples

古典的な手法や、新しい設定オプションを利用するなど、様々な方法でイメージを読み込む例を以下に示します。

//  古典的な読み込み方
this.load.image('bunny', 'assets/sprites/bunny.png');

//  オブジェクトでの読み込み指定
this.load.image({ key: 'bunny', texture: 'assets/sprites/bunny.png' });

//  オブジェクトの配列が使えます
this.load.image([
    { key: 'bunny', texture: 'assets/sprites/bunny.png' },
    { key: 'atari', texture: 'assets/sprites/atari400.png' },
    { key: 'logo', texture: 'assets/sprites/phaser2.png' }
]);

//  XHR設定を含むオブジェクトベースの読み込み方
this.load.image({
    key: 'bunny',
    texture: 'assets/sprites/bunny.png',
    xhr: {
        user: 'root',
        password: 'th3G1bs0n',
        timeout: 30,
        header: 'Content-Type',
        headerValue: 'text/xml'
    }
});

//  ファイル名からキーを自動生成:

//  デフォルトパスから bunny.png を読み込む
//  '.png'はデフォルト拡張子
this.load.image({ key: 'bunny' });

//  デフォルトパスから　bunny.jpg　を読み込む
//  'ext' プロパティーでjpgを指定
this.load.image({ key: 'bunny', ext: 'jpg' });

//  ----------------------
//  Texture Atlas Examples
//  ----------------------

//  古典的な読み込み方
//  this.load.atlas(key, textureURL, atlasURL, textureXhrSettings, atlasXhrSettings)

this.load.atlas('level1', 'assets/level1/items.png', 'assets/level1/items.json');

//  オブジェクトを利用した読み込み方
this.load.atlas({ key: 'level1', texture: 'assets/level1/items.png', data: 'assets/level1/items.json' });

一覧へ戻る

Print Friendly, PDF & Email