テキスト

TextComponent

文字列を表示するにはTextComponentを使います。

textRendererを設定することで、サイズや色やフォントを変更できます。

描画する

それではやってみます。

まずはフォントを用意します。 （ここは Flame 特有のものではなく普通の Flutter の手順です）

今回は Google Fonts からダウンロードしたDotGothic16を使います。 このフォントは日本語対応のドット絵風フォントで、ゲーム開発に重宝します。

ダウンロードしたフォントは assets/fonts/DotGothic16-Regular.ttf に保存します。

pubspec.yamlにフォントを指定します。

flutter:
  uses-material-design: true

  fonts:
    - family: DotGothic16
      fonts:
        - asset: assets/fonts/DotGothic16-Regular.ttf

準備したフォントを指定して TextComponent を作ります。

import 'package:flame/components.dart';
import 'package:flame/game.dart';
import 'package:flutter/material.dart';

class TextGame extends FlameGame {
  @override
  Future<void> onLoad() async {
    super.onLoad();

    await add(
      TextComponent(
        position: Vector2(size.x * 0.5, size.y * 0.5),
        anchor: Anchor.center,
        text: 'Hello',
        textRenderer: TextPaint(
          style: const TextStyle(
            color: Colors.white,
            fontSize: 48,
            fontFamily: 'DotGothic16',
          ),
        ),
      ),
    );
  }
}

これでテキストが表示されるようになりました。