onGameResize

ライフサイクルに関して、onLoadやupdate以外のものも使ってみましょう。今回は画面の描画サイズが変わった時に呼ばれるonGameResizeを利用していきます。

コードの追加

circle_man.dartのCircleManクラスにこちらを追加しましょう。

//このコードを追加 
 @override
  void onGameResize(Vector2 gameSize) {
    print("画面のサイズが変わったので通知が来た");

    position.x = gameSize.x / 2;
    position.y = gameSize.y / 2;

  }

ブラウザで実行してみます。そしてブラウザの大きさを変えてみてください。円が常に画面の中央に再描画されているのが確認できます。

onGameResizeのタイミングと引数

ログを見ながらブラウザの大きさを変えると「画面のサイズが変わったので通知が来た」というメッセージが出現しているのが確認できます。

onGameResizeは画面サイズが変わると呼ばれるライフサイクルのメソッドです。

onGameResizeメソッドではVector2型のサイズ情報が受け取れます。今回はgameSizeという名前で受け取っていました。

このパラメータはサイズが変わった際の、画面サイズ全体の大きさとなります。

ですので、gameSizeのx,yそれぞれの半分の値は画面の中央になります。

これをCircleMan自体のポジションのx,yに設定する事で、画面の中心に円が移動しました。

position.x = gameSize.x / 2;
position.y = gameSize.y / 2;

ちなみに、gameSizeもpositionも同じVector2なのでこの書き方も可能でした。

position = gameSize / 2;