ゲーム内にテキストを描写するには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,
);
}
Comment