Advanced Japanese display using a custom content processor

Page updated :

About Japanese display

Text drawing in MonoGame uses SpriteFont as well as XNA. For SpriteFont, see Displaying Alphanumeric Characters and Font Style Details, as it is the same as XNA.

If you use SpriteFont, you must specify the characters you want to use in advance. If it is only alphanumeric symbols, it can be done with almost no cost as a character specification and build time because it is about 100 characters, but when it comes to Japanese, it becomes thousands of characters, so the build time becomes extremely long. If you specify only the characters to be used, the build time can be shortened to some extent, but it is troublesome to specify the character to be used in reverse, and it becomes even more troublesome if there is a change in the character to be used.

In response to this problem, "Ninari GD"site has been customized to make Drawing Japanese in XNA more smoothly (by the way, the site-run Yuichi Ito - MSFT is one of the XNA Framework developers). This makes it easier to specify the characters to use, shorten build time, decorate characters, and more. For more information, please refer to the link.

WPF フォントプロセッサーで作成されたテキストの描画

However, the "WPF font processor" presented in the page is for XNA and cannot be used as is in MonoGame. So I'd like to port this to MonoGame.

Download the WPF Font Processor

Open the following sites:

ひにけにGD - 真・簡単(かもしれない)日本語表示

Scroll down to two links, and click the link above to download the project that contains the sort code. The lower one is only a DLL, so you don't have to download it.

プロジェクトをダウンロード

Please extract the downloaded file so that you can retrieve the contents.

ダウンロードされたファイル

Create a WPF Font Processor Project

I'd like to create a WPF font processor DLL that works with "Any CPU", but for some reason when I create a project with the "Content Pipeline Extension Library" of the XNA Framework, I can only create it in x86, so I'll create it from a regular class library here.

クラス ライブラリの作成

When you create a project, you don't need "Class1.cs", so delete it.

「Class1.cs」の削除

Next, add a reference.

参照の追加

Because you draw text in WPF, you need a WPF-related reference. First, check "PresentationCore" from "Framework".

「PresentationCore」にチェック

Next, check "WindowsBase". Now press the OK button to confirm and open the Reference Manager again.

「WindowsBase」にチェック

Select Browse on the left and click the Browse button below.

「参照」ボタンをクリック

Open the following folder path:

  • C:\Program Files(x86)\MSBuild\MonoGame\v3.0\Tools\

From there, add the following two DLLs:

  • MonoGame.Framework.dll
  • MonoGame.Framework.Content.Pipeline.dll

2つの DLL を追加

Make sure it is checked and click the OK button.

チェックされていることを確認

Review the references that have been added.

追加された参照を確認

Add the source code from the "WpfFontPipeline" folder from the project you downloaded to the project you are currently editing.

ソースコードを追加

The state you added.

追加した状態

Verify that the build configuration is "Release" and "Any CPU".

ビルド構成が「Release」「Any CPU」になっていることを確認

Perform a build to see if it was built successfully.

ビルド結果

DLL is created.

DLL が作成されていることを確認

Create a game project

Create a project for MonoGame. It doesn't matter what platform it is.

MonoGame のプロジェクトを作成

Place the DLL you just created in the Content folder. It doesn't matter where the DLL is, but in that case you'll need a relative or absolute path, so i'll leave it here for now.

 DLL を Content フォルダに配置

Open Content.mgcb and open References with Content selected.

If you double-click "Content.mmcb" to not open it, start "MonoGame Pipeline" from the Start menu.

References を開く

In the text box, type the file name of the DLL you just created, or the path relative to or absolute path from Content.mgcb.

After you set it up, the DLL still does not reflect, so once you save the project, exit monoGame Pipeline and reopen it.

DLL のファイル名を入力

Creates a sprite font. Select "Edit" >Add→New Item from the menu.

スプライトフォントを作成

Select "SpriteFont Description" from among the items to add it. (Incidentally, after adding SpriteFont, I opened the SpriteFont file to make it easier to see at run time and changed the font name and size.)

「SpriteFont Description」を選択

If you select the SpriteFont that you added, you will see that the WPF Font Processor is available from the Processor.

「WPF フォントプロセッサー」が選択できる

Since each parameter can be set, this time I tried to set it as shown in the figure for the time being. Unfortunately, you can't change the color in the current version of MonoGame Pipeline.

各パラメータ設定

Try to build. 6860 characters were built because it included up to JIS level 2. Still, the time is about nine seconds, so you can see that it's pretty fast.

ビルド完了

Now, we're drawing using this SpriteFont, and the code is exactly the same as XNA. You can draw text by using the code introduced in "Display alphanumeric characters" as it is. Of course, Japanese is also possible.

I'd like to put only the code that I added once.

The definition part of the field. "SpriteFont" has been added.

GraphicsDeviceManager graphics;
SpriteBatch spriteBatch;

SpriteFont font;

Loading and creating font data in the LoadContent method.

protected override void LoadContent()
{
  // Create a new SpriteBatch, which can be used to draw textures.
  spriteBatch = new SpriteBatch(GraphicsDevice);

  // TODO: use this.Content to load your game content here

  // フォントデータの読み込み
  font = Content.Load<SpriteFont>("Font");
}

Drawing with Japanese in the Draw method.

protected override void Draw(GameTime gameTime)
{
  GraphicsDevice.Clear(Color.CornflowerBlue);

  // TODO: Add your drawing code here
  spriteBatch.Begin();

  spriteBatch.DrawString(font, "真・簡単(かもしれない)日本語表示",
                    new Vector2(50, 50), Color.White);

  spriteBatch.DrawString(font, @"・OpenTypeフォント対応
・処理速度の高速化
・JIS漢字追加機能
・文字装飾",
              new Vector2(50, 150), Color.White);

  spriteBatch.End();

  base.Draw(gameTime);
}

When executed, the text is drawn. It's a little hard to understand, but the letters have borders and blue gradations inside.

It became easy to draw Japanese like this, and it became possible to draw the character with the decoration.

テキストの描画結果

Finally, you can't change the color of the text decoration on monoGame Pipeline, but you can open the file directly and modify it.

Once you have saved and closed the project, open the .mccb file as a text file.

「.mgcb」ファイルをテキストファイルで開く

If you scroll down, there is color information in the target parameter, so please edit it directly there.

色情報を直接編集

After saving the text, open monoGame Pipeline again and build it. You can see that the color has changed when you run it.

色変更したテキスト