このページではFlmaeを使って、ドラッグ操作でキャラクターを移動させる方法を紹介します。
目次
ゲーム画面を作成
まずは簡単なゲーム画面とプレイヤーを作成します。
プレイヤーは簡易的なものとして、キューブを用意しました。
import 'package:flame/components.dart';
import 'package:flame/game.dart';
import 'package:flutter/material.dart';
void main() {
final game = SampleGame();
runApp(
GameWidget(game: game)
);
}
class SampleGame extends FlameGame {
late Player player;
@override
Future<void> onLoad() async {
player = Player()
..x = size.x / 2
..y = size.y / 2
..width = 50
..height = 50
..anchor = Anchor.center;
add(player);
}
}
class Player extends PositionComponent {
static final _paint = Paint()..color = Colors.white;
@override
void render(Canvas canvas) {
canvas.drawRect(size.toRect(), _paint);
}
}実行すると画面の中心にプレイヤー（キューブ）が表示されているのが確認できます。
このキューブをドラッグ操作で動かせるようにします。
PanDetectorを使ってドラッグ操作を追加する
ドラッグ操作を実装したい場合は、Flame側でPanDetectorというmixinが用意されているので、こちらを使うだけで簡単に実装できます。
まずはmixinを追加
import 'package:flame/input.dart'; // 追加
class SampleGame extends FlameGame with PanDetector {
・・・
}ドラッグ操作の情報はonPanUpdateメソッドで取得できます。
import 'package:flame/events.dart'; // 追加
class SampleGame extends FlameGame with PanDetector{
late Player player;
@override
Future<void> onLoad() async {
player = Player()
..x = size.x / 2
..y = size.y / 2
..width = 50
..height = 50
..anchor = Anchor.center;
add(player);
}
@override
void onPanUpdate(DragUpdateInfo info) {
// 指の移動量
print(info.delta.global);
}
}DragUpdateInfoにはドラッグイベントに関する情報が含まれます。その中のdeltaは前回のドラッグイベントから現在のイベントまでの間に指が移動した変位を表します。
info.delta.globalは、ドラッグの変位をグローバル座標系で表したもので、つまりは画面全体に対する指の移動量を表します。
この移動量を使って、プレイヤーを移動させます。
プレイヤーを移動させる
プレイヤークラスに移動処理moveメソッドを追加します。
class Player extends PositionComponent {
static final _paint = Paint()..color = Colors.white;
@override
void render(Canvas canvas) {
canvas.drawRect(size.toRect(), _paint);
}
// 追加
void move(Vector2 delta) {
position.add(delta);
// position += delta;でもok
}
}DragUpdateInfoで取得した移動量を現在のプレイヤーのポジションに加算します。
あとはonPanUpdateからmoveメソッドを呼び出します。
class SampleGame extends FlameGame with PanDetector{
late Player player;
@override
Future<void> onLoad() async {
player = Player()
..x = size.x / 2
..y = size.y / 2
..width = 50
..height = 50
..anchor = Anchor.center;
add(player);
}
@override
void onPanUpdate(DragUpdateInfo info) {
player.move(info.delta.global);
}
}これでドラッグ操作でプレイヤーを動かせるようになりました。
全体のコード
import 'package:flame/components.dart';
import 'package:flame/events.dart';
import 'package:flame/game.dart';
import 'package:flame/input.dart';
import 'package:flutter/material.dart';
void main() {
final game = SampleGame();
runApp(
GameWidget(game: game)
);
}
class SampleGame extends FlameGame with PanDetector{
late Player player;
@override
Future<void> onLoad() async {
player = Player()
..x = size.x / 2
..y = size.y / 2
..width = 50
..height = 50
..anchor = Anchor.center;
add(player);
}
@override
void onPanUpdate(DragUpdateInfo info) {
player.move(info.delta.global);
}
}
class Player extends PositionComponent {
static final _paint = Paint()..color = Colors.white;
@override
void render(Canvas canvas) {
canvas.drawRect(size.toRect(), _paint);
}
void move(Vector2 delta) {
position.add(delta);
}
}
Comment