Flameの法則 v1.14.0 対応
Hello World ライフサイクル 四角形 直線 デバッグ表示 円 移動 ジョイスティック テキスト テキストボタン オーバーレイ スプライト アニメーション パララックス タップ パーティクル 物理演算 衝突判定 ポリゴン サウンド エフェクト テキストボックス カスタムペインター スクリーンヒットボックス ルーター プライオリティ キーボードイベント キーボードリスナー カメラ スプライトシート 発光 反転 バリュールート 円弧 スプライトウィジェット スケールモード ポーズ タイムスケール 波紋 アニメーションティッカー ローディングビルダー エラービルダー バックグラウンドビルダー パスファインディング タイマー HSVカラー

PR 第8章にFlameが載ってる模様

マルチプラットフォーム対応 最新フレームワーク Flutter 3入門

反転

2023-06-01

flipHorizontally

flipHorizontallyを使うと、コンポーネントを反転させることができます。 右向きしかない素材を左向きにしたい場合などに便利です。

上下反転させるfilpVerticallyもあります。

APIリファレンス https://pub.dev/documentation/flame/latest/components/PositionComponent/flipHorizontally.html

動かす

player1という画像を用意します。

あとはこれをスプライトとして表示し、タップのたびにflipHorizontallyを呼び出します。

flip/game.dart 
import 'package:flame/components.dart';
import 'package:flame/events.dart';
import 'package:flame/game.dart';

class FlipGame extends FlameGame with TapCallbacks {
  late final SpriteComponent _sprite;
  @override
  Future<void> onLoad() async {
    super.onLoad();

    _sprite = SpriteComponent(
      position: Vector2(size.x * 0.5, size.y * 0.5),
      anchor: Anchor.center,
      sprite: await Sprite.load('player1.png'),
      size: Vector2.all(64),
    );
    await add(_sprite);
  }

  @override
  void onTapDown(TapDownEvent event) {
    super.onTapDown(event);

    _sprite.flipHorizontally();
  }
}

これでスプライトを反転できました。

© 2023 tnantoka