ゲームにジョイスティックを追加するにはJoystickComponentを使います。
このページでは簡単な例として、円をジョイスティックで動かせるようにします。
目次
円を描写する
円の描写方法は以前に以下の記事で解説していますので、説明は割愛します。
Seeds
【Flutter x Flame】円を表示する | Seeds
ゲーム内に円を描写するにはCircleComponentを使います。 四角形を表示する時に使うRectangleComponentと使い方は似ています。 円を描写する import ‘package:flame/compon…
コードは次のようになります。
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は、ジョイスティックの現在の位置から前回の位置までの変化量です。
コードを実行すると次のように円が動かせるようになります。
Comment