[question]: Custom Transition Animations and Position Shifting in WorldMapByTiled

[shingo-nakanishi]

How can we help?

I was able to implement screen transitions using WorldMapByTiled. Reference: https://qiita.com/KAZMA_WED/items/c1d33ff4dcd293ade1af

Questions:

• Is it possible to add custom transition animations when using WorldMapByTiled for screen transitions?
  • For example, a simple fade-out or the "Travel Door「旅の扉」(Actually, I don't know the English name)" animation from Dragon Quest(Dragon Warrior in English).
• Can I move to different positions within the same map using WorldMapByTiled?
  • I just want to move the character's position, but I would like to add some kind of transition animation, like the one mentioned earlier, so that it is not noticeable to the player.

[RafaelBarbosatec]

Hi @shingo-nakanishi ! This is a incredible tutorial. I don't knew about that. Thanks for sharing.

So, if you can move you player to other position of the map and adds some animation you can use the lighting resources adds a black animation while you move your player. Like this:

gameRef.lighting.animateToColor(Colors.black);

And after move :

gameRef.lighting.animateToColor(Colors.transparent);

Other way is using the flutter resources. For example, you can criar a dialog that do a face in and fade out in a black screen, then you can show this dialog and move you player.

If you are call another screen (other widget with BonfireWidget) you can use de flutter screen transaction too.

I hope this can help you ☺️

[shingo-nakanishi]

@RafaelBarbosatec

It was a good article. Thanks to this article, I was able to get a good grasp of the concept. It seems that WorldMapByTiled only needs to receive the next map as shown below.

WorldMapByTiled(
        TiledAssetReader(asset: 'maps/map01.tmj'),
        forceTileSize: Vector2(tileSize, tileSize),
        objectsBuilder: {
          'bottomExitSensor': (properties) => ExitMapSensor(
                position: properties.position,
                size: properties.size,
                nextMap: const HalloweenMap02(), // 👈👈👈
              ),
        },
        ...
)

Where should I place gameRef.lighting.animateToColor(Colors.black); ?

[RafaelBarbosatec]

Humm. In this case, a I recommend you create an other widget with your BonfireWidget and your configurations like map ,enemies, etc. This way you can use the flutter navigation: Navigator.of(context).pushNamed('/other-map')

Or you can use the same widget but passing arguments de configurations of map, enemies, etc.

Take a look this example:

https://github.com/RafaelBarbosatec/bonfire/tree/develop/example%2Flib%2Fpages%2Fmini_games%2Fmulti_scenario

You can test this example in the bonfire demo. Select in the menu Mini Games-> Multi Scenarios game:

https://bonfire-engine.github.io/examples/bonfire-v3/

[shingo-nakanishi]

@RafaelBarbosatec

I tried the following, but it resulted in an error.(I moved the character to the right edge.) https://bonfire-engine.github.io/examples/bonfire-v3/

• Chrome: Version 128.0.6613.85 (Official Build) (arm64)
• All Extensions off
• Inkognito mode

[RafaelBarbosatec]

I'll look it. But take a look the code to get a idea