文字列(テキスト)描画のプラグインに文字列変更対応版のクラスを追加

今回のサンプル
サンプルの全ファイル
※この文字列描画のプラグインはご自身のゲームご自由に使って貰ってOKです。是非、ゲーム作りにお役立て下さい。

以前作成した文字列(テキスト)描画のプラグイン、昨日の「enchant.js ソースコード・リーディング」にて文字列の変更が出来ないという事が発覚しました。

フォント画像での文字列(テキスト)描画のプラグインを作った - 強火で進め
http://d.hatena.ne.jp/nakamura001/20110430/1304181043

変更が出来ないとスコアの部分などで使用出来ないという問題点が有ります。一応は毎回 new すれば出来ない事は無かったのですが無駄にパフォーマンスが犠牲になるので対応版のクラスを追加する事にしました。

この様な記述で使えます。

enchant('draw');

window.onload = function() {
    var game = new Game(320, 320);
    game.onload = function() {
        var text1 = new Text(5, 5, "Hello,World!");
        var text2 = new MutableText(5, 20, game.width, "");
        var count = 0;
        game.rootScene.addChild(text1);
        game.rootScene.addChild(text2);
        game.addEventListener('enterframe', function() {
          text2.setText("count:"+count);
          count++;
        });
    };
    game.start();
};

        var text2 = new MutableText(5, 20, game.width, "");

この MutableText が文字列変更に対応したクラスです。以前の Text クラスも引き続き使用可能です。
引数は (X位置, Y位置, 幅, 文字列) となります。幅は確保されるcanvasのサイズになります。ここに指定した幅より描画される文字列が長い場合は描画結果が途中で切れます。

描画される文字は1文字16ピクセルとなりますので使用する可能性が有る最長の文字列の文字数にx16をしたものを指定して下さい。最長の文字数が予測出来ない場合はゲーム画面の横幅(game.width)を指定するという方法も有ります。

文字列の変更はこの様に行います。

          text2.text = "count:"+count;

設定した文字列はこの様に取得する事も可能です。

          alert(text2.text);