この章では、ライフサイクルの他のメソッドであったり、生成や破棄、親子関係といったもう少し突っ込んだ学習をしていきます。

今回も、単純な形のYourGameとCircleManだけのプロジェクトを準備します。

新規プロジェクトの作成とflameパッケージ追加

新規プロジェクトを作成後、pubspec.yamlに下記のflameパッケージを追加しpub getをして適用させます。

dependencies:
//(略)
  flame: 1.0.0

dartファイルの準備×2

libフォルダに新規のyour_game.dartファイルとcircle_man.dartを作成します。コードは下記をコピペしてください。

your_game.dart

import 'package:flame/game.dart';
import 'circle_man.dart';

class YourGame extends FlameGame {
  @override
  Future<void> onLoad() async {
    final CircleMan _circleMan = CircleMan();
    add(_circleMan);
  }
}

circle_man.dart

import 'package:flame/components.dart';

class CircleMan extends CircleComponent {
  CircleMan() : super(radius: 20.0);
}

main.dartの編集

maiin.dartを下記のように編集します。

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

Future<void> main() async {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  YourGame yourGame = YourGame();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: const Color.fromRGBO(0, 0, 0, 1),
        appBar: AppBar(
          title: Text('Flame学習帳'),
        ),
        body: GameWidget(game: yourGame));
  }
}

実行すると、このようにサークルマンが左上に鎮座した状態となります。

次のページはこちら

onGameResize