Flutter, Flame を使った画像表示(その1)
今回の目標
前回、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 {
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 {
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 になります)
寂しくレンコンを持ち上げている画像が表示されれば完了です。
Discussion