Codebug
darake Update:

Flutter Flameで独自フォントを設定して使う方法

Flutter Flame

Flutter Flame でゲーム制作をする時に、独自フォントを使いたい場合がある。

今回は、Flameで独自フォントを設定して使う方法を解説する。

Flameで独自フォントを使う方法

Flameで独自フォントを使うには、以下の手順をやるとよい。

1. Google Fontsなどからフォントをダウンロードする

まず、Google Fontsなどから使いたいフォントをダウンロードする。

今回は、NotoSansJPを使う。

Noto Sans Japanese - Google Fonts

フォントは、プロジェクトのassets/fontsディレクトリ内に保存するとよい。

NotoSansはRegularとかBoldとか色々あるが、使うものだけ保存すればよい。

2. pubspec.yamlにフォントを登録する

pubspec.yamlにフォントを登録する。 pubspec.yamlに登録することで、Flutter側が良い感じにフォントを読み込んでくれるようになる。

例えば、以下のようにする。

flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  assets:
    - assets/images/
    - assets/fonts/

  fonts:
    - family: NotoSans
      fonts:
        - asset: assets/fonts/NotoSansJP-Regular.ttf

公式ドキュメントを読むと、他にも色々と設定できるようだが、フォントで そんなに凝ったことをやらないので、上記のようなものでよいだろう。

もし、BoldとかItalicとかも使いたい場合は、以下のようにする。

  fonts:
    - family: NotoSans
      fonts:
        - asset: assets/fonts/NotoSansJP-Regular.ttf
        - asset: assets/fonts/NotoSansJP-Bold.ttf
          weight: 700
        - asset: assets/fonts/NotoSansJP-Italic.ttf
          style: italic

3. FlameのTextPaintでフォントを指定して使う

ここまで来ると、後はコードを書くだけ。 雰囲気としては以下のように使うとOK。

library;

import 'package:flutter/material.dart';

  @override
  Future<void> onLoad() async { 
    final textPaint = TextPaint(
        style: TextStyle(
            fontFamily: 'NotoSans', // pubspec.yaml で定義したフォント名
            fontSize: 16,
            color: Colors.white,
        ),
        );

    final textComponent = TextComponent(
        text: 'Hello, Flame!',
        position: Vector2(100, 100),
        textRenderer: textPaint,
        );

    add(textComponent);
  }

Flameでは標準では、日本語テキストが上手く表示できない。 このように独自フォントを追加することで、日本語テキストも問題なく表示できるようになる。

試したけどできなかったこと。

google_fontsというライブラリがあるのでそれを使え、という記事もあるが、 ボクの環境では上手く行かなかった。

何かやり方が不味いのか？

一応参考までに。

参考文献