ドキュメント / GameMakerJapan / GM6で日本語テキストを描画しよう(全角文字にも対応)

ドキュメント/GameMakerJapan

GM6で日本語テキストを描画しよう(全角文字にも対応) †

●ここでは以下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）をお使いの方は、最新版にバージョンアップされることをお勧めします。

動作環境 †

• GM7/GM6/GM5のどれでも使えます。
• jFont Maker 2は、Microsoft .NET framework 1.1以上がインストールされていること。 (動かない場合→jFont Maker 1をお使い下さい)

おまけ1. アルファチャンネル付きバージョン: †

• GM7.0でアルファチャンネルがサポートされたので、「アルファチャンネル付き」の文字スプライト画像に対応。 メモリは食いますので、必要な方のみ使ってください。 (↓参考画面。上がアルファチャンネル無し、下がアルファチャンネル有り。)
  

ダウンロード(2009/04/15版) †

jFontMaker2.3.1-alpha.zip

利用例 †

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);

おまけ2. 第二水準追加版 †

第二水準文字を追加したバージョンです。 全角スプライトのサブイメージ数が22→40になりますので、メモリ使用量がめっさ増えます。

ダウンロード(2009/07/09版) †

mbtext-2nd-level-kanji.zip

ライセンス †

商用ゲームでもフリーゲームでもご自由にお使いください。

免責 †

動作は一切保証されません。 十分なテストを行った上でお使いください。

描画できる文字 †

文字スプライトの仕様書 †

http://gamemaker.jpn.org/dlfiles/mbsprite_specifications.txt

• シフトJIS(MS932)文字コードの先頭から第一水準漢字までの領域
• ASCII文字(具体的には、半角英数字と半角記号)

を描画できます。
つまり、「第二水準以上の漢字 および 半角カナ」以外は全て描画できるということです。 全角・半角文字が混ざっているようなテキストでも問題ありません。 「\n」で強制改行できます。

※第二水準以上の漢字の例

「从 仍 仄 仆 仂 仗 仞 仭」

使い方 †

文字のスプライト画像を作ってGame Makerから読み込み、mbTextスクリプトで描画します。 以下の「準備」、「テキスト描画の仕方」を参照してください。 説明が長いようですが、単に細かく説明しているだけなので難しいことはありません。

準備 †

スプライト画像 †

まず、「jFont Maker」を用いて半角文字用と全角文字用のスプライト画像を作成する必要があります。 ここではフォントサイズを20とした例を示します。

全角スプライト †

jFont Makerを起動し、「- モード -」を全角文字に設定します。 背景色と文字色は好きなように設定してください。 対応フォントは「ＭＳ ゴシック」「ＭＳ 明朝」のような等幅フォントです。

[スプライト]メニューの「画像を生成して保存」を押して、スプライト用の画像を保存しましょう。

次にGame Makerで「全角文字用のスプライト」を新規作成します。スプライト名は「spr_zen20」など、分かりやすいように設定してください。 スプライト設定画面では、

• GM_6: の場合、Precise collision checking/Smooth edges/Preload texture/Transparentを全てOFFにします。
• GM_5: の場合、遅延ロード(Load only on use)のみONにします。(テキストの背景をTransparentにしたい場合は後のFAQを参照)

そして[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」など、分かりやすいように設定します。先ほどと同じように、スプライト設定画面では

• GM_6: の場合、Precise collision checking/Smooth edges/Preload texture/Transparentを全てOFFにします。
• GM_5: の場合、遅延ロード(Load only on use)のみONにします。

半角スプライトは単純な一枚絵なので、[Load Sprite(スプライトの読込)]ボタンを押して画像を読み込むと完了です。

これで文字スプライトの準備が整いました。

Scriptをインポートする †

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_setfont(spr_zen, spr_han, size)

説明

テキスト描画用のフォント(スプライト)とサイズを設定する。
mbtext_draw()を呼び出す前に必ずこの関数を実行しておくこと。

引数
 spr_zen  :全角文字用のスプライト
 spr_han  :半角文字用のスプライト
 size     :全角1文字あたりの横幅(ピクセル数)。
           半角文字の横幅はこの1/2。
           スプライトに合わせて正確に指定しないと描画できなくなる。

※第1パラメータと第2パラメータの順序を間違えないように注意!

mbtext_draw(text, pos_x, pos_y, width, sep_x, sep_y)

説明
 全角・半角テキストを描画する関数。

引数
 text  :描画する文字列。(タブ文字は無視される)
         "\n"は改行として扱われるので
         "\n"を表示するには、代わりに"\\n"を使う。
 pos_x :描画を開始するx座標 (指定無しで0)
 pos_y :描画を開始するy座標 (指定無しで0)
 width :描画領域の最大幅。この幅を超えそうになると自動で改行される。
         0以下の値を指定すると無制限 (指定無しで無制限)。
         widthが1文字の幅を下回っていたなら、何も描画されない。
 sep_x :横隣の文字との間を何ピクセル空けるか (指定無しで0)
 sep_y :上下の文字との間を何ピクセル空けるか (指定無しで0)

戻り値
 テキストを描画した領域の高さを返す。(1文字も描画していない場合0)

jFont Maker2の機能 †

★文字のアンチエイリアス †

「普通」「高品質」「ClearType」の三種類から選ぶことができます。 ただし「高品質」の場合は文字のサイズを大きくしないと有効にならないようです。 「普通」はどんな文字・サイズでも適用することができます。

アンチエイリアスの「柔らかさ」の意味は、数値をずらしながらプレビューを見れば分かります。

★輪郭線付きの文字 †

「輪郭線」チェックボックスをONにすると、文字の周りに輪郭線を付けることができます。 (仕様により、文字の見た目は2ピクセルほど小さくなります。) 輪郭線ONの時のオススメ設定は、「サイズ16、アンチエイリアス無効」です。

★フォント設定の保存・取込機能 †

[ファイル]メニューの「フォント設定をエクスポート」機能を使えば、フォント設定を別ファイルに保存しておくことができます。 この設定情報は、「フォント設定をインポート」からいつでも読み込んで復帰させることができます。

FAQ †

テキストの背景を透明にするには？ †

基本的に、スプライト設定画面の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に描画領域の幅と高さが代入される
}