✏️

【備忘録】Ebitengineで日本語を描画する方法

2023/12/29に公開

はじめに

Ebitengineで何かを作ってみようと思い、ツアーのコードをいじっているときに日本語の描画に関して躓いたので、調べた結果を残しておきます。

tl;dr

textを使ってください。
サンプルコードは以下を参照してください。

https://ebitengine.org/ja/examples/font.html

Ebitengineとは

Ebitenginとは日本人の星一さんが開発しているオープソースのGo製2Dゲームエンジンです。

https://ebitengine.org/ja/

困ったこと

公式ページのGetting Startedの通りに実行すると、次のように表示されます。

そこで、次に日本語を表示してみます。

func (g *Game) Draw(screen *ebiten.Image) {
-	ebitenutil.DebugPrint(screen, "Hello, World!")
+       ebitenutil.DebugPrint(screen, "こんにちは、世界!")
}

すると、このように何も表示されません。

原因

デフォルトのフォントが日本語に対応していないことが原因のようです。
日本語に対応したフォントを適用させることで、日本語を描画できるようになります。

方法

Goで文字列を描画するには、標準ライブラリのgolang.org/x/image/fontなどを用いるようです。自分の好きなフォント(TTFファイル)を用意して、それらを読み込んで利用できるようです。

Ebitengineにはそれらを内部で使用した文字列描画パッケージtextがあります。

サンプルコードは以下のページにあります。
必要最低限のコードを抜き出すと、次のようになります。

https://ebitengine.org/ja/examples/font.html

main.go
package main

import (
	"image/color"
	"log"

	"golang.org/x/image/font"
	"golang.org/x/image/font/opentype"

	"github.com/hajimehoshi/ebiten/v2"
	"github.com/hajimehoshi/ebiten/v2/examples/resources/fonts"
	"github.com/hajimehoshi/ebiten/v2/text"
)

const (
	screenWidth  = 640
	screenHeight = 480
)

var (
	mplusNormalFont font.Face
)

func init() {
	tt, err := opentype.Parse(fonts.MPlus1pRegular_ttf)
	if err != nil {
		log.Fatal(err)
	}

	const dpi = 72
	mplusNormalFont, err = opentype.NewFace(tt, &opentype.FaceOptions{
		Size:    24,
		DPI:     dpi,
		Hinting: font.HintingVertical,
	})
	if err != nil {
		log.Fatal(err)
	}
}

type Game struct{}

func (g *Game) Update() error {
	return nil
}

func (g *Game) Draw(screen *ebiten.Image) {
	text.Draw(screen, "こんちには、世界!", mplusNormalFont, 0, 30, color.White)
}

func (g *Game) Layout(outsideWidth, outsideHeight int) (int, int) {
	return screenWidth, screenHeight
}

func main() {
	ebiten.SetWindowSize(screenWidth, screenHeight)
	ebiten.SetWindowTitle("Font (Ebitengine Demo)")
	if err := ebiten.RunGame(&Game{}); err != nil {
		log.Fatal(err)
	}
}

実行結果は以下です。
きれいに描画できていますね。

コードから分かるように、github.com/hajimehoshi/ebiten/v2/examples/resources/fontsにM PLUS 1pというフォントのTTFファイルが最初から用意されているようです。自分の好きなフォントを使用したい場合は、ここを変更すれば良いです。

まとめ

日本語の描画に困っていたところ、公式ページに記述がありました。ドキュメント等はしっかりと読むべきですね...

参考記事

https://zenn.dev/hajimehoshi/articles/205c04b5fad03d

Discussion