Advanced Japanese display using a custom content processor

Page updated :

About Japanese display

Text drawing in MonoGame uses SpriteFont as well as XNA. SpriteFont is the same as XNA, so see Show alphanumeric characters and Learn more about font styles.

If you use SpriteFont, you must specify the characters that you want to use in advance. Because it is only an alphanumeric symbol or about 100 characters, it is possible to do the character specification and the build time almost without cost, because it becomes thousands of characters when it comes to Japanese, the build time will be tremendously long. The build time can be shortened to some extent by specifying only the characters to be used, but it is troublesome to specify the characters to be used in reverse, and it becomes more troublesome if there is a change in the character to be used.

In response to this problem, the "GD"site has been customized to make Japanese drawing in XNA smoother (by the way, The Site's Yuichi Ito - MSFT is one of the XNA Framework developers). This makes it easier to specify the characters to use, reducing build times, decorating characters, and so on. See the link for more information.

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

However, the WPF font processor presented at the destination is for XNA, so monogame cannot be used as is. So I'd like to port this to MonoGame.

Download the WPF Font Processor

Open the following site:

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

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

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

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

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

Creating a WPF Font Processor Project

I'd like to create a WPF Font Processor DLL that works with "Any CPU", but i'll create it from a regular class library because i can only create x86 when I create a project in the Content Pipeline Extension Library in the XNA Framework.

クラス ライブラリの作成

Once you've created a project, you don't need "Class1.cs", so delete it.

「Class1.cs」の削除

Then add a reference.

参照の追加

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

「PresentationCore」にチェック

Then check "WindowsBase". Press the OK button to confirm now, and then reopen the reference manager.

「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 added references.

追加された参照を確認

Then add the source code in the WpfFontPipeline folder from the downloaded project to the project you are currently editing.

ソースコードを追加

The state you added.

追加した状態

Ensure that the build configuration is Release and Any CPU.

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

Build to see if it was built successfully.

ビルド結果

Make sure that the DLL is created.

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

Create a game project

Create a MonoGame project. The platform doesn't matter.

MonoGame のプロジェクトを作成

You put the DLL you just created in the Content folder. The DLL location doesn't matter where it is, but in that case it requires 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.mgcb" to not open it, please start "MonoGame Plipeline" from the Start menu.

References を開く

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

Save the project, exit monogame pipeline, and reopen it because it still does not reflect the DLL after it is configured.

DLL のファイル名を入力

Createa sprite font. Select Edit → Add → New Item from the menu.

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

Select SpriteFont Description from the items to add them. (By the way, 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 you added, you will notice that the WPF Font Processor can be selected from the Processor.

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

Because each parameter can be set, I tried to set it as shown in the figure for the time being. Unfortunately, you cannot change colors in the current version of MonoGame Pipeline.

各パラメータ設定

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

ビルド完了

Now, i'm drawing using spritefont, but the code is exactly the same as XNA. You can draw text using the code introduced in Show alphanumeric characters. Of course, Japanese is also possible.

I want to put only the code that I added once.

The definition part of the field. Adding SpriteFont.

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 confusing, but there's a blue gradient on the text and a border.

It became easy to draw Japanese in such a feeling, and it came to be able to draw the character with the decoration.

テキストの描画結果

Finally, you can't change the color of a character decoration on monogame pipeline, but you can open the file directly and learn how to do that.

Once you have saved and closed the project, open the .mgcb file in a text file.

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

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

色情報を直接編集

After you save the text, open and build monogame pipeline again. If you do it, you'll see that the color has changed.

色変更したテキスト