如何使火焰中的粒子淡出？

Question

我能够使用下面的代码创建一个在点击时显示文本的粒子。有可能让这个粒子淡出吗？ （在这个问题中，“淡出”是指调整不透明度。）

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

void main() {
  runApp(const FooApp());
}

class FooApp extends StatelessWidget {
  const FooApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: GameWidget.controlled(gameFactory: TextGame.new),
    );
  }
}

class TextGame extends FlameGame {
  @override
  Future<void> onLoad() async {
    super.onLoad();

    await add(
      ButtonComponent(
        position: Vector2(size.x * 0.5, size.y * 0.5),
        onPressed: () {
          add(
            ParticleSystemComponent(
              position: Vector2(size.x * 0.5, size.y * 0.5),
              particle: AcceleratedParticle(
                lifespan: 2.0,
                speed: Vector2(0, 50),
                child: ComponentParticle(
                  component: TextComponent(
                    anchor: Anchor.center,
                    text: "Taped!",
                  ),
                ),
              ),
            ),
          );
        },
        button: TextComponent(
          text: 'B',
          textRenderer: TextPaint(
            style: const TextStyle(
              fontSize: 88,
              color: Colors.white,
            ),
          ),
        ),
        anchor: Anchor.center,
      ),
    );
  }
}

---

参考资料：

• https://docs.flame-engine.org/latest/flame/rendering/articles.html
• https://flame.tnantoka.com/examples/text/#text
• https://flame.tnantoka.com/examples/button/#button

Answer 1

是的！您可以实现自己的自定义粒子并使用其更新方法来更改不透明度。

例如，您可以扩展

CircleParticle

并提供一个实现来缓慢降低不透明度直至达到零。

class MyParticle extends CircleParticle {
  MyParticle({required super.paint});

  @override
  void update(double dt) {
    super.update(dt);

    final newAlpha = (paint.color.a - 0.5 * dt).clamp(0.0, 1.0);
    paint.color = paint.color.withValues(alpha: newAlpha);
  }
}

您还可以尝试与其他粒子组合，使用 Flutter 曲线实现非线性行为等等。

作为一个更完整的示例，这个实现会发射一阵红色粒子，然后逐渐消失。