flame-engine / flame

A Flutter based game engine.
https://flame-engine.org
MIT License
9.27k stars 908 forks source link

Add support Trails (Trail Renderer and Trail module for particles system) #1653

Open RocksteadyDog opened 2 years ago

RocksteadyDog commented 2 years ago

Hello, Flame is awesome!

It would be cool to add support for trails, like in Unity.

Trail Renderer: https://docs.unity3d.com/Manual/class-TrailRenderer.html

Trails module for Particle Systems https://docs.unity3d.com/Manual/PartSysTrailsModule.html

Thank you.

spydon commented 2 years ago

Good idea!

st-pasha commented 2 years ago

The problem here is that Flutter's Path doesn't support any kind of path effects: there are no along-path gradients, no across-path gradients, no way to change stroke width along the path, not even path patterns such as dashed/dotted. So I'm not sure how this could be implemented in practice.

spydon commented 2 years ago

The problem here is that Flutter's Path doesn't support any kind of path effects: there are no along-path gradients, no across-path gradients, no way to change stroke width along the path, not even path patterns such as dashed/dotted. So I'm not sure how this could be implemented in practice.

The rendering wouldn't necessarily have to be with path, I think we fairly easily could just render particles along a path for example. We'll have to make sure to get in performant though, because I remember that when I played around with trails for the Padracing game some of the solutions became very inefficient.

ASGAlex commented 2 years ago

I have made "trail" implementation using combinations of Component, Picture and Image. Here is the algorithm, in general:

  1. We adds "trail" components into special map-sized PositionComponent while object moving
  2. At update() all added components are painted into Picture. After component has been painted, it removed from list
  3. Picture periodically being saved into Image to avoid performance degradation due to hight count of painting commands into Paint object
  4. Finally, the special component renders Image at first and then Picture.

The algorithm is still not lightweight, but much more performant rather then if you will create individual object for every trail part.

It might be improved if to devide the map into pieces and repaint only visible parts.

This is a link to my working implementation: https://github.com/ASGAlex/battletank_game_v2/blob/43029fb25d82f9dd5cfe12823ba56e2bd3519d92/lib/packages/back_buffer/lib/back_buffer.dart It supports fading-out old track parts by time.