見出し画像

GameMaker製のゲームを日本語化する方法 日本語フォント実装 ~後編~

はじめに

記事の執筆途中でUndertalemodtoolの情報更新がありました
こちらのリンクからGUI-windows-latest-isBundled-true-isSingleFile-true.zipをダウンロードして、以降は新しいUndertaleModToolでdata.winを開いてください。

中編では、日本語フォントの導入を行う一番手っ取り早い手法として、font_add()関数を用いてTTFを直接読み込む手法での日本語フォント導入を行いました。 
後編ではひと手間かかるが、自由度の高い実装方法を紹介いたします。

Gamemakerのフォント形式の確認

UndertalemodToolを用いて、data.win内のフォント形式を確認します。
先ほどインストールしたUndertaleModToolからdata.winを開き、Fontsの階層を開きます。参考としてfntAltTinyをエクスポートしましょう。
OptionsのResource UnpackersからExportFontData.csxを選択。

fntAltTinyに☑をおこない、OKを押します。


Export_Fontsのフォルダが新しく作成され、データが格納されます。

ビットマップフォントを構成するための要素として、フォントが配置された画像ファイルと、文字の位置を示したCSVファイル。二つがデータが出力されていることがわかります。

画像ファイル

fntAltTiny.png

CSVファイル

glyphs_fntAltTiny.csv


日本語フォントでも同様に
・画像ファイル
・CSVファイル

を作成することで、フォントを作成することができます。

次項から、作成方法を説明します。

フォントの用意

フォントは中編で用いたPixelMplus10を用います。
TTFファイルを開いてあらかじめwindows上にインストールしておいてください。

Bmfontのダウンロード

Bmfont 正式名称( Bitmap Font Generator)をダウンロードしてください。

Downloadsの下部のテキストをクリック。

ビットマップフォントの作成

ダウンロードしたBmfontを用いてビットマップフォントを作成いたします。

BmfontでArialを指定した画像

Bmfontを開くとこのようになっています。
左側の16x16マスに収まっている文字一つ一つがGlyph、右側の表で出力するGlyphを指定しています。

次にBmfontの左上のOptionsからFont Settingsを開きます

Font Settings

主要な設定を上から説明すると、
Font:インストールしたフォントを指定
Size:ゲーム上で使用するサイズ
Match char height:☑
Height%:100に指定
Font smoothing:フォントにアンチエイリアスをかけるオプションです。後述に比較画像を記載します。
他の設定は画像と同じ設定で構いません。

次に、OptionsからExport Optionsを開きます。

Export Settings

主要な設定は次の通り。
Padding:GlyhpとGlyhpの間隔。0で構いません
Spacing:Glyhpの周りのスペース。1としましょう。
Force offsets to zero:☑
Width,Height:出力する画像の横幅と縦幅。画像では1024ですが、設定数値は後述します。
Bit depth:32に●
Presets:White text with alpha
Font Descriptor:Textに●
Texturer:pngを選択。

設定が終わったらOKで元の画面に戻りましょう。


次に出力を行う範囲を選択します。

右側の表から出力を行うテキストを選択し、右クリック(Select marked subset)で☑をつけましょう。全てのGlyphを選択をする場合は、一番上の項目を選択したあと、Shiftを押しながら一番下の項目を選択することで全選択できます。

項目の中には、ゲーム上で使わないであろう文字も含まれていますので、フォントデータを圧縮したい場合は、必要な文字だけを記述したテキストを用意し、左上のEditからSelect char from fileを選択することで実装できます。

次にOptionsからVisualiseを選択して、出力される画像を見てみましょう。なお、すべてのGlphysを出力をする設定にしています。

Visualizeで表示したPreview画像

Export Optionsで設定したWidth,Height 1024x1024の幅に、フォントがびっしりと詰まっています。
ここで注目したいのが、左上に表示されているPreview 1/1 の数値です。こちらが1/2.3…2以上になっている場合はWidthとHeightのサイズを拡大する必要があります。GemeMakerは複数の画像からフォントを作成することが不可能であるため、1枚の画像にフォントが収まるようにWidthとHeightの数値を変更してください。
ちなみに、1024のように2のべき乗である必要はありません。

次に拡大画像を見てみると、Font settingsでFont smoothingに☑を入れた為、フォントにアンチエイリアスがかかっていることがわかります。

Font Smoothingを☑した場合。

こちらは、Font Smoothingの☑を外した状態。フォントがくっきりと表示されています。

Font Smoothingの☑を外した場合。

ゲームに実装した際の描画で、Font Smoothingにを入れるかを決定しましょう。なお、Risk of Rainの日本語化MODでは☑を外してアンチエイリアスがかからない設定にしています。

では実際に出力を行います。OptionsからSave bitmap font as・・・を選択。保存場所と名前を指定されるので、ゲームのローカルフォルダに専用のフォルダを作成して保存しましょう。FontMakerというフォルダにJapaneseと名前を付けて格納しました。こちらの名称は現時点では指定はありません。

.fnt ファイルと、pngファイルの二つが出力された。

これにてBmfontを使った操作は以上です。

画像ファイルの作成は完了しましたので、fntファイルを、CSVファイルへ変換を行っていきます。

データ構造を変換

まず、.fntファイルの拡張子を.csvに変更して、Excel・Googleスプレッドシート等のcsvが開けるソフトで開きます。

japanese.fntをjapanese.csvに変換してExcelで開く。

中身はこのようになっています。
例として5行目を説明します。
chara id =1 Glyphが1に対応する文字を指定した時に呼び出される。
X=153、Y=717 画像ファイル上での文字の位置。
width=4、height=3 文字の大きさ(横4px、縦3px)。
xoffset=4、yoffset=4 ゲーム上で描画した際の位置
xadvance=5 次に表示する文字との間隔を表します。
page=0 は、画像が複数に分かれる場合の数値です。
chnl=15 は、チャンネル数。今回は使用しない数値です。

こちらのデータを、1.2.3に従って変換します。
1. 上から4行は削除。
2. 文字は削除し、char id;x;y;width;height;xadvance;xoffsetの数値のみを順番で並び替える。yoffset,page,chnlは数値も削除。
3. 1行目にフォントの情報を入力する。

つまり、5行目
「char id=1    x=153   y=717   width=4     height=3     xoffset=0     yoffset=4     xadvance=5     page=0  chnl=15」

1;153;717;4;3;5;0

と変換します。それを5行目以降すべての行で行います。

2.の変換が行われたら、1行目に行を挿入し、
[フォント名称];[size];False;False;0;0;1;1
を記述します。([]内は可変項目。そのほかは固定文字)
今回であれば、
PixelMplus10;10;False;False;0;0;1;1
となります。[size]はExport Optionで設定した数値です。

変換後のファイル

この変換を自動でおこなうツールをスプレッドシート上で公開しておりますので参考にしてください。

これでCSVファイルが完成しました。早速インポートをしていきましょう。

data.winへインポート

まず、ファイル名を整えます。フォント名を「fnt_pixelMplus10」とする場合、二つのファイルの名称を、
「glyphs_fnt_pixelMplus10.csv」
fnt_pixelMplus10.png」に変更します。

名称を変更し、フォルダに格納

ではdata.winでの操作に移っていきます。

data.winを開いたら、Scripts/Resource Repackers から、ImportFontData.csxを選択します。フォルダを指定されるので、画像ファイルCSVファイルが格納されたフォルダを指定してください。

名称が一致し、適切に配置が行えていたら無事に実装が完了します。エラーが出る場合は、その指示に従いファイルの修正を行ってください。

Fontsの階層にfnt_pixelMplus10が追加された

その後data.winの保存を行ってください。

これで新規に日本語フォントを作成して導入することができました。
もし、サイズを変更したフォントを用意したい場合は、再度bmfontでサイズを変更したデータを出力し、新たにフォントをインポートする必要があります。

今の状態ではフォントをインポートしただけなので、描画されるフォントは変更されていません。そのため、呼び出すフォントを変更します。

呼び出すフォントの変更

前編の記事で解析を行ったところ、ゲーム上で呼び出すフォントを指定するコードは、
draw_set_font(global.fntTinyAlt)
となっていました。そちらの名称を、先ほど新規作成したフォント名称
draw_set_font(fnt_pixelMplus10) 
と書き換かえてdata.winを保存します。

ゲームを起動させます。

フォント実装後のメニュー画面
初期画面

英語のフォントがすべて変更され。ゲームが起動できました。これで日本語フォントの実装は完了です。

しかし、英語のフォントが元のゲームで用いられるフォントとは異なる為、違和感を感じる方もいるのではないでしょうか。そこで、元のフォントデータを取得し、日本語のフォントと結合する例として紹介します。

英語フォントと日本語フォントの結合

なお、本作のメニュー画面に使用されているフォント(FntTinyAlt)はfont_add_sprite_extで読み込ませており、座標データの取得が困難であるため参考として、フォント形式の確認として抜き取ったfntTinyAltと結合します。

・画像ファイルの結合
本解説では画像編集用にAsepriteを用いています。なお、わかりやすい様に背景を黒にしています。

←英語フォント  日本語フォント→

日本語フォントの画像データに英語のフォントを挿入します。
挿入位置は、日本語フォント下部の、空白の位置に挿入します。この時の挿入座標は、100.1000、といったキリのいい数値にしたほうがその後の作業が楽になります。

今回は、X座標0、Y座標+930 の位置に挿入を行いました。

・CSVファイルの結合
英語フォントの.csvファイルを開き、画像ファイルで変更したYの数値を変更します。Yの数値をすべて+930しましょう。その後、英語フォントのID(32~127)までを、日本語フォントのCSVに上書きします。(変更を行った箇所を分かりやすく赤字にしています。)

結合が完了したら再度フォントを登録していきます。

起動確認

英語のフォントが変更された

このように、画像ファイルとCSVファイルの関係性がわかれば、描画位置やフォントを個別に変更することが可能です。

手順が非常に多く、できるだけわかりやすいように説明を行っているつもりですが、抜け等があるかもしれません。また、ゲームによっては上記の手段を行ってもフォントの変更が行えない可能性がありますので悪しからず。


ゲームがGamemaker製であることを確認の上、
フレンドコード 215421291 ibushi_maru 宛 までギフト送付していただけると解析作業ができますのでご検討ください。
返礼として、日本語化実装の検証結果をご連絡いたします。日本語化が実装された場合はその成果ファイルも提出いたします。
※フォントが必ず実装できる保証はございません。



これにて、第一章 日本語フォントの実装
完結です。まとめる内容が多く、だいぶ日付をあけての投稿となってしましました。

続いての第二章では、実際に翻訳を行う際に使用するツールや、一括でテキストを取得する方法を説明していきます。

では。


この記事が気に入ったらサポートをしてみませんか?