MENU

【Flutter x Flame】ジョイスティックでキャラクターを移動させる

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

ゲームにジョイスティックを追加するにはJoystickComponentを使います。

このページでは簡単な例として、円をジョイスティックで動かせるようにします。

目次

円を描写する

円の描写方法は以前に以下の記事で解説していますので、説明は割愛します。

コードは次のようになります。

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 {

  @override
  Future<void> onLoad() async {
    await add(
      CircleComponent(
        radius: 50
      ),
    );
  }
}

ジョイスティックを追加する

ジョイスティックを描写するために、ゲームにJoystickComponentを追加します。

import 'package:flame/components.dart';
import 'package:flame/game.dart';
import 'package:flame/palette.dart'; // 追加
import 'package:flutter/material.dart';

void main() {
  final game = SampleGame();
  runApp(
      GameWidget(game: game)
  );
}

class SampleGame extends FlameGame {
  late final CircleComponent _ball;
  late final JoystickComponent _joystick;

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

    // ボールの追加
    _ball = CircleComponent(
      position: Vector2(size.x * 0.5, size.y * 0.5), // 画面の中心に
      radius: 50, // 半径 50
      anchor: Anchor.center,
    );

    add(_ball);

    // ジョイスティックの追加
    _joystick = JoystickComponent(
      knob: CircleComponent(
        radius: 20,
        paint: BasicPalette.white.paint()
      ),
      background: CircleComponent(
        radius: 45,
        paint: BasicPalette.white.withAlpha(100).paint(),
      ),
      margin: const EdgeInsets.only(
        left: 20,
        bottom: 36,
      ),
    );

    add(_joystick);
  }
}
プロパティ概要
knobジョイスティックの操作部分(グリグリするところ)
backgroundジョイスティックの背景
margin余白

上記の例の場合、画面の左から20、下から36の余白をあけて、ジョイスティックを配置しています。

ジョイスティックっぽくするために、knob、backgroundにはCircleComponentを使っていますが、RectangleComponentも一応使えます。

コードの実行結果は次のとおりです。

ジョイスティックで円を動かせるようにする

円を動かすには、ジョイスティックで操作した時にupdateメソッド内で位置の変化量を取得し、円のpositionを変更します。

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

void main() {
  final game = SampleGame();
  runApp(
      GameWidget(game: game)
  );
}

class SampleGame extends FlameGame {
  late final CircleComponent _ball;
  late final JoystickComponent _joystick;
  final _moveSpeed = 10.0; // 追加:ボールの移動スピード

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

    // ボールの追加
    _ball = CircleComponent(
      position: Vector2(size.x * 0.5, size.y * 0.5), // 画面の中心に
      radius: 50, // 半径 50
      anchor: Anchor.center,
    );

    add(_ball);

    // ジョイスティックの追加
    _joystick = JoystickComponent(
      knob: CircleComponent(
          radius: 20,
          paint: BasicPalette.white.paint()
      ),
      background: CircleComponent(
        radius: 45,
        paint: BasicPalette.white.withAlpha(100).paint(),
      ),
      margin: const EdgeInsets.only(
        left: 20,
        bottom: 36,
      ),
    );

    add(_joystick);
  }

  // 追加
  @override
  void update(double dt) {
    super.update(dt);
    _ball.position += _joystick.delta * _moveSpeed * dt;
  }
}

_joystick.deltaは、ジョイスティックの現在の位置から前回の位置までの変化量です。

コードを実行すると次のように円が動かせるようになります。

Share
  • URLをコピーしました!

Comment

コメントする

目次