MENU

【Flutter x Flame】テキストを表示する

記事内に商品プロモーションが含まれる場合があります

ゲーム内にテキストを描写するにはTextComponentを使います。

目次

テキストを描写する

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

void main() {
  final game = SampleGame();
  runApp(
      GameWidget(game: game)
  );
}

class SampleGame extends FlameGame {

  @override
  Future<void> onLoad() async {

    await add(
      TextComponent(
        text: 'Hello Flame!',
      ),
    );
  }
}

これでゲーム内にテキストが表示されました。

テキストの色や位置を変更する

TextComponentには位置やサイズなどを設定するプロパティを持っているので、それらを設定することでテキストをカスタマイズできます。

プロパティ概要
position位置座標
size大きさ
angle角度
anchor描画の基準点(デフォルトは左上)
textRendererテキストスタイル
TextComponent(
    text: 'Hello Flame!',
    position: Vector2(size.x * 0.5, size.y * 0.5), // 画面の中央に
    anchor: Anchor.center, // 基準点を中心に(デフォルトは左上が基準点)
    textRenderer: TextPaint(
      style: const TextStyle(
        color: Colors.yellow,
        fontSize: 48,
      ),
    ),
),

別のクラスにTextComponentを継承させて使う

以下はGameTitleというクラスを作成し、TextComponentを継承して使う例です。

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

void main() {
  final game = SampleGame();
  runApp(
      GameWidget(game: game)
  );
}

class SampleGame extends FlameGame {

  @override
  Future<void> onLoad() async {

    await add(
        GameTitle(
          position: Vector2(size.x * 0.5, 0),
          anchor: Anchor.topCenter,
          textRenderer: TextPaint(
            style: const TextStyle(
              color: Colors.yellow,
              fontSize: 48,
            ),
          ),
        )
    );
   }
}


class GameTitle extends TextComponent {
  GameTitle({
    required Vector2 position,
    required Anchor anchor,
    required TextPaint textRenderer,
  }) : super(
    text: "Flame Fantasy",
    position: position,
    anchor: anchor,
    textRenderer: textRenderer,
  );
}
Share
  • URLをコピーしました!

Comment

コメントする

目次