flame-engine / flame

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

Unsupported effects on `TileComponent` with `flame_tiled` #2244

Open Nonudian opened 1 year ago

Nonudian commented 1 year ago

Problem to solve

I'm currently working on a mobile game, where there are an isometric staggered Tiled map (loaded with a TiledComponent) and one sprite character. This character follows a preset path on this map, and the game camera follows him.

However, the map is obviously larger than the phone screen, and thus I would like to crop/prune the map dynamically at runtime, i.e. makes all the tiles that are out of screen disappearing, with a cool animation (and conversely, since the camera moves, makes tiles newly inside the screen appearing).

In this way, the problem I encounter is that the majority of effects, except all position based effects, are unsupported. So it's actually impossible to handle a change of color, opacity, glow, scaling, and a lot of effects with TiledComponent and TileStack. And that's the same with IsometricTileMapComponent.

The code part below doesn't work so.

await stack.add(
  SequenceEffect(
    [
      OpacityEffect.to(0.2, EffectController(duration: 0.75)), //unsupported
      MoveEffect.by(Vector2(12, 0), NoiseEffectController(duration: 5, frequency: 100)), //supported
    ],
    infinite: true,
  )..onComplete = stack.removeFromParent,
);

Proposal

I think it could be pretty interesting to make available unsupported effects and working with Tiled map. I don't know the scope and the difficuly implementing that, so that's rather a suggestion.

spydon commented 1 year ago

For TiledComponent and IsometricTileMapComponent you can add different transformational effects, like the MoveEffect. TileStack implements PositionProvider, so you should be able to add MoveEffects to that one too.

The OpacityEffect is a bit more tricky, because that one is not applied directly to the canvas, but the thing drawn on the canvas have to use the opacity field (and the component has to expose is).