Hello World

Flame で何もない画面を動かすところまでです。

公式ドキュメントのチュートリアルにも同様の内容があります。

Flutter 導入

Flutter の導入手順はたくさん日本語情報があるので割愛します。
公式ドキュメントも丁寧です。

個人的には以下の手順がおすすめです。

1. Xcode を入れてシミュレーターで何か動かす
2. Android Studio を入れてエミュレーターで何か動かす
3. Flutter を入れる

Flutter に詳しくなくても Flame をとりあえず使うことはできるので（僕もそう）、
ひとまずWrite your first Flutter appをやる程度で OK だと思います。

Flame 導入

dependenciesにflameを追加して、pub getするだけです。
なお、pub.devからflame: ^1.14.0という文字列がコピーできます。

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.2

  flame: ^1.14.0

GameWidget

Flame のゲームは Flutter の Widget になっています。 以下のように使います。

渡しているgameは次で説明するFlameGameです。

GameWidget(game: game)

game以外の引数は API リファレンスに載っています。overlayBuilderMapはよく使うと思います。

FlameGame

FlameGameがゲームの実態です。 これを継承してゲームを作っていきます。

今回は何もしないのでただ継承するだけです。

import 'package:flame/game.dart';

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

API リファレンスはこちらです。

動かす

先程作ったHelloGameをGameWidgetに渡して動かします。

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

class HelloPage extends StatelessWidget {
  HelloPage({super.key});

  final game = HelloGame();

  @override
  Widget build(BuildContext context) {
    return GameWidget(game: game);
  }
}

$ flutter run

これで動きました。 右の Live Demo エリアに表示されています。

現状は真っ黒なのでわかりづらいですが、 四角形では四角形を描画するのでもう少し Live Demo 感があります。