Flame第一歩

Flameはウィジェット！

Flame

FlutterはmainファンクションとrunAppファンクション以外は全てウィジェット（Widget）として構成される。

FlameはそのFlutter上で動作する2D用のゲームエンジンでFlutterのウィジェットとして実現されている。

なのでFlutter上で通常のウィジェットと一緒に存在できる。

まず、最初にFlameを使って実行してみよう。

公式ページのリンクは次にある。

Flame Engin

次のコマンドでFlutterプロジェクトを作成する。

flutter create first_flame

プロジェクトフォルダに移動し、Flameパッケージを追加する。その後はVSCode起動。

cd firts_flame
flutter pub add flame
code .

上のイメージはpubspec.yamlの内容だ。dependenciesにflameが追加されていることがわかる。

公式ページには余計なコメントは削除するようにとしているけど、そのままにしている。

次にやるのは/testの下にあるwidget_test.dartファイルを削除する。

エラーが表示されてめんどになるから。

/libの下にあるmain.dartファイルを開いてサンプルコードを削除する。

GameWidget

runAppのパラメータはWidgetを渡す必要があるが、FlameではGameWidgetを渡す。GameWidgetのパラメータはFlameGameクラスを相続したクラスを渡す。

ゲームはこのFlameGameクラスを相続したクラスに実現していく。

次は基本的なコードだ。

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

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

上のコードだけで実行できるが、何も表示されない。

FlameGame

今回はFlameGameクラスを相続したクラスを作成して画面に文字列を表示するところまでやってみよう。

/libの下にgamesフォルダを作成してその下にmy_game.dartファイルを作成しよう。

中身はまだないが、次のクラスを追加する。

import 'package:flame/game.dart';

class MyGame extends FlameGame {}

画面に文字列表示するのは２つ方法がある。TextComponentを使うのとTextRendererを使う方法だ。Componentは今後よく出てくる概念でFlutterがWidgetで構成されているようにFlameの中ではComponentというもので構成される。

今回はTextComponentを使ってみよう。

その前に背景色を変えてみよう。

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

class MyGame extends FlameGame {
  @override
  Color backgroundColor() => Colors.orangeAccent;
}

次にmain.dartを以下のように修正する。

import 'package:first_flame/games/my_game.dart';
import 'package:flame/game.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(GameWidget(game: MyGame()));
}

上のイメージはWebで実行したものだ。

my_game.dartに戻り、テキストを表示してみよう。

import 'dart:async';

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

class MyGame extends FlameGame {
  @override
  Color backgroundColor() => Colors.orangeAccent;

  @override
  Future<void> onLoad() async {
    await super.onLoad();
    add(
      TextComponent(
        text: 'Hello Flame!',
        position: Vector2(size.x / 2, size.y / 2),
        anchor: Anchor.center,
        textRenderer: TextPaint(
          style: const TextStyle(
            fontSize: 30,
            color: Colors.blueAccent,
            fontWeight: FontWeight.w600,
          ),
        ),
      ),
    );
  }
}

簡単にコード説明をするとonLoadメソッドの中に初期化などを入れるが、今回は文字列出力できるように入れている。

addはこれからよく現れるもので何かコンポーネントを作ったら、Gameに追加する必要があるのでaddで追加するのだ。

ここではTextComponentを追加している。

textのところは見ての通り、表示する文字列だ。positionはTextComponentを表示する位置を指定している。

sizeはこのクラスが持つサイズでxとyを持っていてこのクラスはFlameGameクラスから相続されて現在表示されているサイズを持っている。

それぞれ２で割っているので画面中央に表示することになる。正確にいうと次のanchorと合わせて画面中央に表示することになる。

anchorは該当コンポーネントの基準点を表すもので通常は上の左になり、positionが上の左になるが、Anchor.centerにしているのでコンポーネントの中央を基準点にしている。

textRendererはスタイルなどを指定している。

簡単であるが、これがFlameだ。

次回からはFlameのDocに説明されていることを整理していく。