Flutter, Flame を使った画像表示（その１）

今回の目標

前回、Flame を導入したため、まずはどうやって画像を表示できるのか調べます。

用意するもの

• 前回、環境を構築したパソコン
• 画像（今回はいらすとやさんの農家の画像を使いました）
  https://www.irasutoya.com/2018/06/blog-post_89.html

画像を表示するコンポーネントを調べる

Flame のサンプルコードから画像表示の仕組みを調べます。
サンプルの main 関数 は dashbook のみとなっているため、どうやって画像を表示しているか調べます。
サンプルの中には SpriteComponent, PositionComponent, TimerComponent, RectangleComponent などのコンポーネントがあります。
今回、画像表示に使うのは一番最初の SpriteComponent になります。

main 関数の修正

今回は main 関数の他に、前述の画像を表示する Nouka クラスを作成しました。
普通に FlutterProject を作成すると、main のクラスは Widget build で表示する形になっています。それをゴッソリ消して、以下のようにします。

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

import 'nouka.dart';

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

class MyApp extends FlameGame {
  @override
  Future<void> onLoad() async {
    final nouka = Nouka();
    add(nouka);
  }
}

今回は画像を表示するだけなので細かい事の説明は省きます。
FlameGame を継承した MyApp クラスの onLoad にて、Nouka クラスを宣言します。
宣言した Nouka クラスを add 関数に入れるだけで終わりです。

画像を表示するクラスの作成

以下のように書くことで画像が表示されます。

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

class Nouka extends FlameGame {

  @override
  Future<void> onLoad() async {
    await super.onLoad();

    final image = await loadSprite('nouka_renkon_syukaku.png');

    add(
      SpriteComponent(
        sprite: image,
        position: size / 2,
        size: image.srcSize / 10,
      ),
    );
  }
}

images フォルダにダウンロードした画像を配置して、onLoad にて、表示したい画像の読み込みと、その画像を add することで完了です。
position, size は Vector2 型になります。
元画像のサイズは画面レイアウトに対してかなり大きかったため、10分の1 にしています。
ポジションは適当に決めています。初期位置を調整する場合はここを変更すれば良いです。

結果

以上のコードをビルドすると、以下のような画像表示になります。
（使用している端末は LG style L-03K になります）

寂しくレンコンを持ち上げている画像が表示されれば完了です。