libGDXで日本語を表示

libGDXの標準フォントでは日本語を表示することができません。日本語を表示するためにはひと手間必要になります。
今回は日本語を表示するための方法を紹介します。

話は変わりますが先日libGDXのバージョンが1.9.7になりました。
1.9.7 リリースノート
https://github.com/libgdx/libgdx/blob/master/CHANGES
セットアップツールから言語の選択でKotlinがサポートされました。しかしながら、HTML5がサブプロジェクトから外れるのが残念です。
以上、余談でした。

それでは日本語を表示する方法の紹介です。
以下のサイトを参考にしました。

Bitmap-fonts
https://github.com/libgdx/libgdx/wiki/Bitmap-fonts

まず日本語表示に対応したフォントを用意します。
注意したいのがライセンスです。再配布やゲーム作成に厳しいライセンスは避けておきます。
今回は2017年4月に発表されたNoto Serif CJKを使います。
以下のサイトからNoto Serif CJK JPをダウンロードし解凍します。

Google Noto Fonts
https://www.google.com/get/noto/#serif-jpan

次にBitmap Font Generatorをダウンロードし実行します。

Bitmap Font Generator
http://www.angelcode.com/products/bmfont/

起動したらOptionsからFont settingsを開き、以下の設定を行いOKを押します。

Font : Noto Serif CJK JP
Add font file : 先ほどダウンロードしたNotoSerifCJKjp-Regular.otf
Size(px) : 32

OptionsからExport Optionsを開き、以下の設定を行いOKを押します。

Width : 2048
Height : 2048
Bit depth : 32
Presets : White text with alpha
Textures : png

ビットマップフォントに保存する文字を選択します。
今回はフォントファイルに含まれるすべての文字を選択するため、Select chars from fileを選択します。

OptionsからSave bitmap font as…で保存します。
今回はfontという名前で保存します。
保存に成功するとfont.fnt、font_0.png、font_1.png、font_2.png、font_3.png、font_4.pngというファイルが出力されます。

このファイルをassets/font/defaultにコピーします。

最後にMainScreenクラスを書き換えます。

core\src\com\mygdx\game\MainScreen.java

package com.mygdx.game;


import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.Screen;
import com.badlogic.gdx.graphics.Color;
import com.badlogic.gdx.graphics.GL20;
import com.badlogic.gdx.graphics.g2d.BitmapFont;
import com.badlogic.gdx.scenes.scene2d.Stage;
import com.badlogic.gdx.scenes.scene2d.ui.Label;
import com.badlogic.gdx.scenes.scene2d.ui.ScrollPane;
import com.badlogic.gdx.scenes.scene2d.ui.Skin;
import com.badlogic.gdx.scenes.scene2d.ui.Table;

public class MainScreen implements Screen {

    private MyGdxGame game;
    private Stage stage;
    private Table container;

    private BitmapFont bitmapFont;

    public MainScreen(MyGdxGame game) {
        this.game = game;
        this.stage = new Stage();
        Skin skin = new Skin(Gdx.files.internal("skin/default/uiskin.json"));
        Gdx.input.setInputProcessor(this.stage);

        this.container = new Table();
        this.stage.addActor(container);
        this.container.setFillParent(true);

        // BitmapFontを初期化
        this.bitmapFont = new BitmapFont(Gdx.files.internal("font/default/font.fnt"), false);
        // LabelStyleを生成
        Label.LabelStyle labelStyle = new Label.LabelStyle(this.bitmapFont, Color.YELLOW);

        Table table = new Table();
        final ScrollPane scroll = new ScrollPane(table, skin);
        table.pad(10).defaults().expandX().space(4);
        for (int i = 0; i < 100; i++) {
            table.row();
            // labelStyleを引数にする
            table.add(new Label(i + " 行目です。 ", labelStyle));
        }
        container.add(scroll).expand().fill().colspan(4);
        container.row().space(10).padBottom(10);
    }

    @Override
    public void show() {

    }

    @Override
    public void render(float delta) {
        Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
        this.stage.act(Gdx.graphics.getDeltaTime());
        this.stage.draw();
    }

    @Override
    public void resize(int width, int height) {
        this.stage.getViewport().update(width, height, true);
    }

    @Override
    public void pause() {

    }

    @Override
    public void resume() {

    }

    @Override
    public void hide() {

    }

    @Override
    public void dispose() {
        this.stage.dispose();
        // BitmapFontを解放
        this.bitmapFont.dispose();
    }
}

書き変えたら実行してみます。

(クリックすると大きな画像で表示されます)

日本語が表示されました。

まとめ

本当にNoto Serif CJKがキレイだったので意外でした。
今回は日本語表示のためにすべての文字をビットマップフォントにしましたが、ファイルの容量が大きいため必要な文字だけを選択するのが良いです。