前のページはこちら

onLoadとupdate

円を作る

先ほど作ったゲームに、「CircleMan」という新しい生命を誕生させてみます。見た目は単純な円ですが、立派なキャラクターです。

libフォルダcircle_man.dartを作成します。コードは次の通りです。

import 'package:flame/components.dart';

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

  @override
  Future<void> onLoad() async {
    print("円が生まれた");
  }

  @override
  void update(double dt) {
    super.update(dt);
    position.x = position.x + 1;
    position.y = position.y + 1;
  }
}

今度はCircleComponentを継承しています。これは単純な円の役割を与えるコンポーネントです。また、これを継承するためにcomponents.dartパッケージをインポートしています。

円は単純な生成方法として、superで親クラスのradius（半径）の数値を与える事で生成時に指定した半径の白い円が誕生します。

yourworldと同じく、こちらもonLoadとupdateのライフサイクルメソッドがあります。updateの中で、自身の位置情報であるpositionのメンバ変数xとyに1ずつ加算を行っています。

ゲームに円を登録する

your_game.dartに先ほどのサークルマンを追加します。

ヘッダ追加

ヘッダに先ほどのcircle_man.dartのファイルをインポートさせます。

import 'circle_man.dart';

YourGameクラスのonLoadで円を追加する

YoreGameクラスのonLoadメソッドを下記のように書き換ます

下2行が追加されたコードで、

  • 先ほど作成したCircleManクラスのインスタンス_circleManを生成
  • それをaddでYourGameクラス自身に追加している

を行っています。

  @override
  Future<void> onLoad() async {
    print("ゲームが生まれた");
    final CircleMan _circleMan = CircleMan();
    add(_circleMan);
  }

実行

実行するとゲームが生まれた時に左上に円が出現し、ゆっくりと右下移動していきます。この仕組みとしては下記となります。

  • YourGameのonLoadでCircleManクラスのオブジェクト_circleManを追加した
  • CircleManクラス自体がupdateで右下(x+1,y+1)に位置を加算させ、移動している

ちなみにYourGameクラスのupdateの方に間違ってaddの処理を書くとこのよう円が生成され続けます。