●ここでは以下2つの最新情報について取り扱っていくことにします。 mbTextスクリプト …Game Maker 7/6/5.3Aで日本語描画できるScript jFont Maker …mbTextスクリプトのためのフォント画像を自動作成するツール
GM6で日本語をゲーム画面に描画しようとすると文字化けするので、全角・半角文字が混在するテキストを描画できるようなスクリプトを書きました。 使うにあたってGMLの知識は特に必要ないです。 それと、「jFont Maker」というツールも作ってみました。このツールを使えば、日本語テキスト描画のために使う文字一覧スプライト画像を、簡単に生成・保存することができます。
2006/08/12最新安定版 (mbText 1.4.0、jFont Maker 2.2.0)
※mbText 1.4.0以降は、メモリ節約のために全角文字スプライトのサブイメージ数が24から22に変更されました。以前のバージョン(mbText1.3.1 + jFont Maker 2.0.0)をお使いの方は、最新版にバージョンアップされることをお勧めします。
var z, h; z = sprite_add_alpha(working_directory + "/Zenkaku_20px.png", 22, false, true, 0, 0); h = sprite_add_alpha(working_directory + "/Hankaku_20px.png", 1, false, true, 0, 0); mbtext_setfont(z, h, 20);
第二水準文字を追加したバージョンです。 全角スプライトのサブイメージ数が22→40になりますので、メモリ使用量がめっさ増えます。
商用ゲームでもフリーゲームでもご自由にお使いください。
動作は一切保証されません。 十分なテストを行った上でお使いください。
http://gamemaker.jpn.org/dlfiles/mbsprite_specifications.txt
を描画できます。
つまり、「第二水準以上の漢字 および 半角カナ」以外は全て描画できるということです。
全角・半角文字が混ざっているようなテキストでも問題ありません。
「\n」で強制改行できます。
文字のスプライト画像を作ってGame Makerから読み込み、mbTextスクリプトで描画します。 以下の「準備」、「テキスト描画の仕方」を参照してください。 説明が長いようですが、単に細かく説明しているだけなので難しいことはありません。
まず、「jFont Maker」を用いて半角文字用と全角文字用のスプライト画像を作成する必要があります。 ここではフォントサイズを20とした例を示します。
jFont Makerを起動し、「- モード -」を全角文字に設定します。 背景色と文字色は好きなように設定してください。 対応フォントは「MS ゴシック」「MS 明朝」のような等幅フォントです。
[スプライト]メニューの「画像を生成して保存」を押して、スプライト用の画像を保存しましょう。
次にGame Makerで「全角文字用のスプライト」を新規作成します。スプライト名は「spr_zen20」など、分かりやすいように設定してください。 スプライト設定画面では、
そして[Edit Sprite(スプライトを編集)]ボタンを押し、Sprite Editor(スプライトエディタ)画面を出してください。この画面のメニューから、[File(ファイル)]-[Create From Strip(ストリップ画像から生成)]を選択します。ここで先ほどjFont Makerで作成した画像を読み込んでください。するとLoading a strip image(ストリップ画像の読込)画面が出ますので、ここで...
number of images(イメージの数): 22 images per row(一列あたりのイメージ数): 1 image width(イメージの幅): スクリーンショットの赤丸の部分を参照 image height(イメージの高さ): スクリーンショットの赤丸の部分を参照 以降すべて: 0
と設定してから「OK」ボタンを押してください。 すると全ての全角文字が、「サブイメージ0」?「サブイメージ21」の画像として読み込まれます。 成功したらスプライト編集画面を閉じます。先ほどjFont Makerで作成した画像ファイルはもう削除してもかまいません。
jFont Makerで「- モード -」を半角文字に設定し、画像を生成してください。
[スプライト]メニューから、生成した画像を保存します。
次にGame Makerで「半角文字用のスプライト」を新規作成します。スプライト名は「spr_han20」など、分かりやすいように設定します。先ほどと同じように、スプライト設定画面では
半角スプライトは単純な一枚絵なので、[Load Sprite(スプライトの読込)]ボタンを押して画像を読み込むと完了です。
これで文字スプライトの準備が整いました。
Game Makerのメニュー[Scripts]-[Import Scripts...]から、「mbtext_scripts.gml」を読み込みます。 するとScriptsに「mbtext_draw」 「mbtext_setfont」の二つが追加されます。
これで全ての準備が整いました。
Drawイベント内で、[Execute a piece of code]アクションを実行します。 コードの内容は次のように、簡単なものです。
{ mbtext_setfont(spr_zen20, spr_han20, 20); mbtext_draw("描画するテキスト", x位置, y位置); }
mbtext_setfont関数のほうは一度実行すれば十分なので、Createイベントで実行してもかまいません。
改行するには"\n"を入れてください。例えば以下のようにします。
{ mbtext_draw("ここは1行目\nここは2行目\n\nここは4行目", x, y); }
mbtext_draw関数はパラメータが全部で6つあるので、以下の関数の説明を読んでください。
テキスト描画用のフォント(スプライト)とサイズを設定する。 mbtext_draw()を呼び出す前に必ずこの関数を実行しておくこと。 引数 spr_zen :全角文字用のスプライト spr_han :半角文字用のスプライト size :全角1文字あたりの横幅(ピクセル数)。 半角文字の横幅はこの1/2。 スプライトに合わせて正確に指定しないと描画できなくなる。※第1パラメータと第2パラメータの順序を間違えないように注意!
説明 全角・半角テキストを描画する関数。 引数 text :描画する文字列。(タブ文字は無視される) "\n"は改行として扱われるので "\n"を表示するには、代わりに"\\n"を使う。 pos_x :描画を開始するx座標 (指定無しで0) pos_y :描画を開始するy座標 (指定無しで0) width :描画領域の最大幅。この幅を超えそうになると自動で改行される。 0以下の値を指定すると無制限 (指定無しで無制限)。 widthが1文字の幅を下回っていたなら、何も描画されない。 sep_x :横隣の文字との間を何ピクセル空けるか (指定無しで0) sep_y :上下の文字との間を何ピクセル空けるか (指定無しで0) 戻り値 テキストを描画した領域の高さを返す。(1文字も描画していない場合0)
「普通」「高品質」「ClearType」の三種類から選ぶことができます。 ただし「高品質」の場合は文字のサイズを大きくしないと有効にならないようです。 「普通」はどんな文字・サイズでも適用することができます。
アンチエイリアスの「柔らかさ」の意味は、数値をずらしながらプレビューを見れば分かります。
「輪郭線」チェックボックスをONにすると、文字の周りに輪郭線を付けることができます。 (仕様により、文字の見た目は2ピクセルほど小さくなります。) 輪郭線ONの時のオススメ設定は、「サイズ16、アンチエイリアス無効」です。
[ファイル]メニューの「フォント設定をエクスポート」機能を使えば、フォント設定を別ファイルに保存しておくことができます。 この設定情報は、「フォント設定をインポート」からいつでも読み込んで復帰させることができます。
基本的に、スプライト設定画面のTransparentにチェックを入れるだけでOKだと思いますが、一応[Sprite Editor(スプライトエディタ)]の[Show Preview(プレビュー表示)]を見てから全てのサブイメージの背景がきちんと透けているか確認してください。 うまく透けていないようであれば、そのサブイメージの一番左下のドットを背景色で塗ってください。
以下のようにします。 詳細についてはmbtext_draw_test関数の先頭のコメントを参照してください。
{ var text, text_width, text_height; text = "描画したいテキスト\n何行でもOK"; mbtext_setfont(spr_z, spr_h, 20); text_height = mbtext_draw_test(text, 0, 0, MAX_WIDTH, SEP_X, SEP_Y); text_width = global.mbtext_textarea_width; //以上で、text_widthおよびtext_heightに描画領域の幅と高さが代入される }