Is it possible to customize (e.g., through inheritance) and create custom effects in Flutter Flame? For example, in Siv3D, you can create a custom effect like a circle appearing at a clicked location and then disappearing. Can similar custom effects be created in Flame as well? (Note: I'm interested in creating custom effects, not specifically a circle effect).

Reference to custom effect in Siv3D: /

Siv3D(C++):
Note: This is just one of many other samples.

# include <Siv3D.hpp>

struct RingEffect : IEffect
{
  Vec2 m_pos;

  ColorF m_color;

  // このコンストラクタ引数が、Effect::add<RingEffect>() の引数になる
  explicit RingEffect(const Vec2& pos)
      : m_pos{ pos }
      , m_color{ RandomColorF() } {}

  bool update(double t) override
  {
      // 時間に応じて大きくなる輪を描く
      Circle{ m_pos, (t * 100) }.drawFrame(4, m_color);

      // 1 秒未満なら継続する
      return (t < 1.0);
  }
};

void Main()
{
  Effect effect;

  while (System::Update())
  {
      ClearPrint();

      // アクティブなエフェクトの数
      Print << U"Active effects: {}"_fmt(effect.num_effects());

      if (MouseL.down())
      {
          // エフェクトを追加する
          effect.add<RingEffect>(Cursor::Pos());
      }

      // アクティブなエフェクトのプログラム IEffect::update() を実行する
      effect.update();
  }
}

References:

• .html
• /reputeless/books/siv3d-documentation
• /

Is it possible to customize (e.g., through inheritance) and create custom effects in Flutter Flame? For example, in Siv3D, you can create a custom effect like a circle appearing at a clicked location and then disappearing. Can similar custom effects be created in Flame as well? (Note: I'm interested in creating custom effects, not specifically a circle effect).

Reference to custom effect in Siv3D: https://siv3d.github.io/ja-jp/tutorial3/effect/

Siv3D(C++):
Note: This is just one of many other samples.

# include <Siv3D.hpp>

struct RingEffect : IEffect
{
  Vec2 m_pos;

  ColorF m_color;

  // このコンストラクタ引数が、Effect::add<RingEffect>() の引数になる
  explicit RingEffect(const Vec2& pos)
      : m_pos{ pos }
      , m_color{ RandomColorF() } {}

  bool update(double t) override
  {
      // 時間に応じて大きくなる輪を描く
      Circle{ m_pos, (t * 100) }.drawFrame(4, m_color);

      // 1 秒未満なら継続する
      return (t < 1.0);
  }
};

void Main()
{
  Effect effect;

  while (System::Update())
  {
      ClearPrint();

      // アクティブなエフェクトの数
      Print << U"Active effects: {}"_fmt(effect.num_effects());

      if (MouseL.down())
      {
          // エフェクトを追加する
          effect.add<RingEffect>(Cursor::Pos());
      }

      // アクティブなエフェクトのプログラム IEffect::update() を実行する
      effect.update();
  }
}

References:

• https://docs.flame-engine.org/latest/flame/effects.html
• https://zenn.dev/reputeless/books/siv3d-documentation
• https://siv3d.github.io/ja-jp/

• flutter
• dart
• flame

1 Answer 1

Yes, you can create custom effects. For the circle example though you would want to use a CircleComponent that you then add a SizeEffect or ScaleEffect to + a RemoveEffect.

But since you wanted to know about custom effects, here is a custom effect that sets the strokeWidth or a paint on a Component that is using the HasPaint mixin:

/// The strokeWidth of your paint will go from 0 to thickness.
class ColorThicknessEffect extends ComponentEffect<HasPaint> {
  ColorThicknessEffect(
    this.thickness,
    EffectController controller, {
    void Function()? onComplete,
    super.key,
  })  : assert(
          thickness >= 0,
          'Thickness should be greater than 0',
        ),
        super(controller, onComplete: onComplete);

  final double thickness;
  late double _originalThickness;

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

    _originalThickness = target.paint.strokeWidth;
  }

  @override
  void apply(double progress) {
    target.paint.strokeWidth = thickness * progress;
  }

  @override
  void reset() {
    super.reset();
    target.paint.strokeWidth = _originalThickness;
  }
}