フォント画像での文字列(テキスト)描画のプラグインを作った

今回のサンプル
 サンプルの全ファイル

(追記 2011/05/03)
新しいバージョンをリリースしました。

文字列(テキスト)描画のプラグインに文字列変更対応版のクラスを追加 - 強火で進め
http://d.hatena.ne.jp/nakamura001/20110502/1304348628

(追記 2011/05/01)
クラス名などにFontという名称を使っていましたがこれだと特徴を正しく反映してなかったのでTextに変更しました。
(追記ここまで)

enchant.js の最新版でフォント画像が追加されました。せっかくなのでこのフォントを使って文字列(テキスト)を描画出来るプラグインを作成しました。

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

使い方

早速、使い方を説明します。

必要なファイルの準備

1. フォントの画像ファイルの準備。
font0.png、font1.png、font2.png のいずれかのファイルを font.png にリネームし、game.js と同じフォルダに置きます。

2. プラグインのファイルをコピー。
プラグインのファイル draw.text.js を game.js と同じフォルダに置きます。

記述

1. HTMLでのJSファイルの読み込み。
HTMLファイルでJSファイルを以下の順番で読み込みます。

        <script type="text/javascript" src="enchant.js"></script>
        <script type="text/javascript" src="draw.text.js"></script>
        <script type="text/javascript" src="game.js"></script>

2. プラグインの読み込み。
game.js で通常は先頭に enchant(); と記述しますが代わりに enchant('draw'); と記述します。
3. オブジェクトの生成。
以下の記述で生成出来ます。 Text の引数は(X位置, Y位置, 描画文字列)と成っています。

        var text = new Text(5, 5, "Hello,World!");
        game.rootScene.addChild(text);

後で描画位置を変更したい場合は text.x = 100; などと通常の Sprite と同様に設定して下さい。

なお、描画文字列については以下の仕様が有ります。ご注意下さい。

日本語には対応していません。エラーとなります。
フォント画像に存在する範囲の文字だけしか描画されません。 \n など範囲外のものは空白に置き換わります。
文字列は1行で描画されます。長文になっても次の行へ流れこむ(ワードラップする)事は有りません。

プラグインの解説

プラグインの仕組みを解説します。プラグインを使うだけの場合は必須の知識では無いので興味が有る方だけお読み下さい。

以下のコメントは enchant.js からの引用。 enchant('ui') と記述すると ui クラスのプラグインが組み込まれるというルールの様です。

/**
 * グローバルにライブラリのクラスをエクスポートする.
 *
 * 引数に何も渡さない場合enchant.jsで定義されたクラス及びプラグインで定義されたクラス
 * 全てがエクスポートされる. 引数が一つ以上の場合はenchant.jsで定義されたクラスのみ
 * がデフォルトでエクスポートされ、プラグインのクラスをエクスポートしたい場合は明示的に
 * プラグインの識別子を引数として渡す必要がある.
 *
 * @example
 *   enchant();     // 全てのクラスがエクスポートされる
 *   enchant('');   // enchant.js本体のクラスのみがエクスポートされる
 *   enchant('ui'); // enchant.js本体のクラスとui.enchant.jsのクラスがエクスポートされる
 *
 * @param {...String} [modules] エクスポートするモジュール. 複数指定できる.
 */

バーチャルパッドのソース(ui.enchant.js)を見ると以下の様な記述と成っています。 enchant. の後の文字をココに指定する様です。

enchant.ui = { assets: ['pad.png'] };
enchant.ui.Pad = enchant.Class.create(enchant.Sprite, {

その為、今回自作したプラグインでは以下の様に記述しました。

enchant.draw = { assets: ['font.png'] };
enchant.draw.Text = enchant.Class.create(enchant.Sprite, {

主な処理の解説

        for(i=0; i<txt.length; i++) {
            charCode = txt.charCodeAt(i);

文字列から1文字づつ、文字コードを取得。

            if (charCode >= 32 && charCode <= 127) {
                charPos = charCode - 32;
            } else {
                charPos = 0;
            }

有効な文字コードは 32~127 の間のもののみ。もし、それ以外の場合は 0 とする。
有効な文字コードの場合は - 32 し、 0 からスタートする値に変換。

            x = charPos % this.widthItemNum;
            y = Math.floor(charPos / this.widthItemNum);

文字画像の文字単位でのX位置、Y位置を算出。

this.widthItemNum に設定してある16は文字画像の横1列に存在する文字の数。今回は16文字存在する為、16。

Y位置は charPos / this.widthItemNum を Math.floor() で小数点以下を切り捨てで整数化した物を使用。

            // drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
            this.image.draw(game.assets['font.png'], 
                x*this.fontSize, y*this.fontSize, this.fontSize, this.fontSize,
                i*this.fontSize, 0, this.fontSize, this.fontSize);

this.image.draw() の引数は以下の様に成っています。

this.image.draw(画像データ, 
    転送先画像のX位置, 転送先画像のY位置, 転送先画像の幅, 転送先画像の高さ,
    転送元画像のX位置, 転送元画像のY位置, 転送元画像の幅, 転送元画像の高さ);

強火で進め

このブログではプログラム関連の記事を中心に書いてます。

フォント画像での文字列(テキスト)描画のプラグインを作った

使い方

必要なファイルの準備

記述

プラグインの解説

主な処理の解説

関連情報