MENU

【Flutter x Flame】キャラクターをドラッグ操作で動かす

記事内に商品プロモーションが含まれる場合があります

このページでは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);
  }
}
Share
  • URLをコピーしました!

Comment

コメントする

目次