Pex Textbook 1.1.0 documentation

読み込んだ画像を swf 内に表示してみよう

«  シーンの情報を設定しよう   ::   Contents   ::   Talk シーンの SWF 仕様  »

読み込んだ画像を swf 内に表示してみよう

今回で最後です. Pex のムービークリップ置換機能を使って表示する画像を設定していきます.

デモサンプル

../_images/talk_step04.png

Link: こちら

コード

(function() {

    var TALK_SWF = "swf/talk.swf";

    var TalkManager = function() {
        var that = this;

        this._images = {};
        this._loadingCounter = 0;
        this._loadImageCallback = null;
        // 画像を読み込む
        this.loadImage();

        // swf を読み込む
        var canvas = document.getElementById("canvas");
        var option = {
            stopOnStart: true,
            enableTouch: true,
            enableButton: true
        };
        this._pex = new Pex(TALK_SWF, canvas, option);
        this._api = this._pex.getAPI();
        this._api.ready(function() {
            // 画像読み込みが終わっていれば ready を実行
            if (that.isLoadedImage()) {
                that.onready && that.onready();
            }
            // 終わっていなければ画像読み込み完了コールバックに ready を登録
            else {
                that._loadImageCallback = that.onready;
            }
        });
    };
    TalkManager.prototype = {
        // 準備完了時コールバック
        onready: function() {
            this.setup();
            this.start();
        },
        // 画像読み込み
        loadImage: function() {
            this._loadImage("bg");
            this._loadImage("chara");
        },
        // swf 再生
        start: function() {
            this._api.engineStart();
        },
        // swf 停止
        stop: function() {
            this._api.engineStop();
        },
        // セットアップ
        setup: function() {
            // 情報をセットアップ
            this._setupData("scene");
            this._setupData("serif");
            this._setupData("name");

            // 画像をセットアップ
            for (var key in this._images) {
                var image = this._images[key];
                this._api.replaceMovieClip(key, image, image.width, image.height, true);
            }
        },

        _setupData: function(type) {
            var dataList = TALK_DATA[type];
            for (var i=0,len=dataList.length; i<len; ++i) {
                var key = type + (i+1);
                var value = dataList[i] || "";
                this._api.setVariable("", key, value);
            }
        },
        // 画像読み込み完了判定
        isLoadedImage: function() {
            return (this._loadingCounter === 0);
        },

        _loadImage: function(type) {
            var imageList = TALK_DATA[type];
            var that = this;
            var onloadImage = function() {
                --that._loadingCounter;
                if (that._loadingCounter <= 0) {
                    if (that._loadImageCallback) that._loadImageCallback();
                }
            };

            for (var i=0,len=imageList.length; i<len; ++i) {
                var key = type + (i+1);
                var path = imageList[i];
                var image = new Image();
                image.src = path;
                image.onload = onloadImage;
                this._images[key] = image;
                ++this._loadingCounter;
            }
        },
    };

    var main = function() {
        var talkmanager = new TalkManager();
    };

    window.addEventListener("DOMContentLoaded", main, false);

})();

解説

Pex の API である replaceMovieClip というメソッドを使うことで 表示する画像を JavaScript 側から設定することができます.

// 画像をセットアップ
for (var key in this._images) {
    var image = this._images[key];
    this._api.replaceMovieClip(key, image, image.width, image.height, true);
}

replaceMovieClip の引数は

  • key ... 置換対象となるムービークリップのパス
  • image ... 置換後に表示させたい画像
  • width ... 画像の幅
  • height ... 画像の高さ

を指定します.

実行してみてください. 一気に見た目が派手になりましたね.

注意点としては, replaceMovieClip を呼び出した時点で 引数として渡す img 要素の画像読み込みが終わっている必要があります.

var TalkManager = function() {
    var that = this;

    this._images = {};
    this._loadingCounter = 0;
    this._loadImageCallback = null;
    // 画像を読み込む
    this.loadImage();
// 画像読み込み完了判定
isLoadedImage: function() {
    return (this._loadingCounter === 0);
},

_loadImage: function(type) {
    var imageList = TALK_DATA[type];
    var that = this;
    var onloadImage = function() {
        --that._loadingCounter;
        if (that._loadingCounter <= 0) {
            if (that._loadImageCallback) that._loadImageCallback();
        }
    };

    for (var i=0,len=imageList.length; i<len; ++i) {
        var key = type + (i+1);
        var path = imageList[i];
        var image = new Image();
        image.src = path;
        image.onload = onloadImage;
        this._images[key] = image;
        ++this._loadingCounter;
    }
},

以上, 『Pex で会話シーンを作ろう』でした. 参考になれば幸いです.

«  シーンの情報を設定しよう   ::   Contents   ::   Talk シーンの SWF 仕様  »