Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

[phina.js-Tips]任意のタイミングでアセットを読み込む(AssetLoader)

More than 1 year has passed since last update.

※これまでのTipsはphina.js Tips集にまとめています。

今回のTips

ゲーム冒頭ロードではなく、任意のタイミングでアセットを読み込む方法について説明します。

AssetLoaderクラスを使ったアセットのロード

GIF.gif

[runstantで動作確認]

デフォルトでは、ゲーム開始直後のLoadingSceneでアセットの読み込みが行われますが、今回は、AssetLoaderクラスを使って、ボタンが押された後に追加のアセットが読み込まれるようにします。

// アセット
var ASSETS_PREV = {
  // 画像
  image: {
    'tomapiko': 'https://rawgit.com/phinajs/phina.js/develop/assets/images/tomapiko.png',
  },
};

var ASSETS_AFTER = {
  // 画像
  image: {
    'nasupiko': 'https://rawgit.com/phinajs/phina.js/develop/assets/images/character/nasupiyo.png',
  },
};
  • 開始時に読み込まれるアセットと追加で読み込むアセットを分けて定義します。

loadメソッドとロード後処理

    // アセットローダー
    var loader = phina.asset.AssetLoader();
    // ボタン
    Button({text: 'PUSH'})
      .addChildTo(this)
      .setPosition(this.gridX.center(), this.gridY.center(4))
      .on('push', function() {
        // アセット追加読み込み
        loader.load(ASSETS_AFTER);
      });

    var self = this;
    // ロード後処理
    loader.on('load', function() {
      Sprite('nasupiko', 64, 64)
        .addChildTo(self)
        .setPosition(self.gridX.center(1), self.gridY.center())
        .setFrameIndex(0);
    });
  • phina.asset.AssetLoader()でインスタンスを作成します。
  • ボタンが押された時にAssetLoaderクラスのloadメソッドに追加アセットを指定して、読み込みを開始します。
  • 追加したアセットを確実に使えるように、アセットが読み込まれた後に発火するAssetLoaderクラスのonloadイベントに処理を書いています。

サンプルコード

// グローバルに展開
phina.globalize();
// アセット
var ASSETS_PREV = {
  // 画像
  image: {
    'tomapiko': 'https://rawgit.com/phinajs/phina.js/develop/assets/images/tomapiko.png',
  },
};

var ASSETS_AFTER = {
  // 画像
  image: {
    'nasupiko': 'https://rawgit.com/phinajs/phina.js/develop/assets/images/character/nasupiyo.png',
  },
};
/*
 * メインシーン
 */
phina.define("MainScene", {
  // 継承
  superClass: 'DisplayScene',
  // コンストラクタ
  init: function() {
    // 親クラス初期化
    this.superInit();
    // 背景
    this.backgroundColor = 'skyblue';
    // スプライト画像作成
    Sprite('tomapiko')
      .addChildTo(this)
      .setPosition(this.gridX.center(-1), this.gridY.center());
    // アセットローダー
    var loader = phina.asset.AssetLoader();
    // ボタン
    Button({text: 'PUSH'})
      .addChildTo(this)
      .setPosition(this.gridX.center(), this.gridY.center(4))
      .on('push', function() {
        // アセット追加読み込み
        loader.load(ASSETS_AFTER);
      });

    var self = this;
    // ロード後処理
    loader.on('load', function() {
      Sprite('nasupiko', 64, 64)
        .addChildTo(self)
        .setPosition(self.gridX.center(1), self.gridY.center())
        .setFrameIndex(0);
    });
  },
});
/*
 * メイン処理
 */
phina.main(function() {
  // アプリケーションを生成
  var app = GameApp({
    // MainScene から開始
    startLabel: 'main',
    // アセット読み込み
    assets: ASSETS_PREV,
  });
  // fps表示
  //app.enableStats();
  // 実行
  app.run();
});
alkn203
javascriptのゲームライブラリphina.jsを愛用している趣味プログラマ。ファミコン世代。 Hobbyist programmer javascript/html5/phina.js/retro games
http://qiita.com/alkn203/items/bca3222f6b409382fe20
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away