Flutterアプリジャイロセンサーの値でキャラクターを動かす方法

2023年5月9日2023年5月12日

URLをコピーしました！

ツチノコテックアカデミア

Flutterアプリでジャイロセンサーの値を取得する方法 | ツチノコテックアカデミアセンサーの値を取得する方法についてはこちらの書籍を大いに参考にしました。03.センサー｜Flutter実践入門 (zenn.dev) まずはセンサーを取り扱うパッケージを導入します。…

前回の記事ではFlutterアプリでジャイロセンサーの値を取得する方法を紹介しました。
今回はその値を使って画面上に表示した画像を動かす方法を紹介します。

画像の座標データを管理するクラスを用意する

まずは表示させる画像の座標を保持し、操作する機能を持つクラスを定義します。


class Player {
  // 座標
  static double posX = 0.0;
  static double posY = 0.0;

  // ジャイロの値
  static double gyros_x = 0.0;
  static double gyros_y = 0.0;

  // ジャイロの値をセットするメソッド
  void setgyros(double GyrosX, double GyrosY) {
    gyros_x = GyrosX;
    gyros_y = GyrosY;
    gyros_z = GyrosZ;
  }

　// 座標をセットするメソッド
  void setPos(double x, double y) {
    posX = x;
    posY = y;
  }

  //傾きに応じて座標を変更
  void move() {
    posX += gyros_y;
    posY += gyros_x;
  }
}

画像を表示するウィジェットを用意する

Stackは複数の子要素を重ねて表示させるウィジェットであり、Alignは一つの子要素を指定した座標に表示させるウィジェットです。
Alignの座標を動的に変更することでStackの範囲の中を移動させることができます。


  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('つちのこあつめ'),
        ),
        body:Container(
            中略
            child: Stack(children:[
              // プレイヤーを表示させるAlign
              Align(
                alignment: Alignment(Player.posX, Player.posY),
                child: Image.asset(
                  'assets/images/plyaer.png',
                  scale: 2.0,
                ),
              ),
            ])),
     )
   }

センサーの値で座標を変化させる

前回紹介したジャイロセンサーのリスナーの中で座標の更新処理をすることで、センサーが値を取得するたびに移動させることができるようになります。

 // プレイヤーを生成
 final Player _player = Player();
 @override
  void initState() {
    super.initState();

    // 初期位置
    _player.setPos(0.0,0.0);

    // ジャイロセンサーの値を取得するリスナーを登録
    gyroscopeEvents.listen(
      (GyroscopeEvent event) {
        if (mounted) {
          setState(() {
            _player.setgyros(event.x, event.y, event.z);
            _player.move();
          });
        }
      },
    );
 }

FlutterではsetStateを呼び出さないと画面が再描画されないため注意が必要です。