Camera oscillation using the new API

[Skyost]

Current bug behavior

The camera seems to oscillate when following a movable component.

not.working.mp4

On the above video you can see that's the camera movement is not fluid. There seems to be a delay between the player position update and the viewport position update.

Expected behavior

The camera should behave like before (ie. no oscillation).

working.mp4

Steps to reproduce

Okay, so it's a little bit hard to tell you how to reproduce this bug because I can't share the assets I'm using. But, here's what I've done so far :

1. Create a movable PositionComponent (with a velocity vector that updates its position).
2. Make it small enough so that the camera can follow it through the world.
3. Move it.

Flutter doctor output

[√] Flutter (Channel stable, 3.10.4, on Microsoft Windows [version 10.0.22621.1702], locale fr-FR)
    • Flutter version 3.10.4 on channel stable at C:\Users\Hugo\AppData\Roaming\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 682aa387cf (9 days ago), 2023-06-05 18:04:56 -0500
    • Engine revision 2a3401c9bb
    • Dart version 3.0.3
    • DevTools version 2.23.1

[√] Windows Version (Installed version of Windows is version 10 or higher)

[!] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
    • Android SDK at C:\Users\Hugo\AppData\Local\Android\sdk
    • Platform android-33, build-tools 32.1.0-rc1
    • Java binary at: D:\Projets\Jetbrains IDEs\apps\AndroidStudio\ch-0\222.4459.24.2221.10121639\jbr\bin\java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-b2043.56-9586694)
    X Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/windows#android-setup for more details.

[X] Chrome - develop for the web (Cannot find Chrome executable at .\Google\Chrome\Application\chrome.exe)
    ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.

[√] Visual Studio - develop for Windows (Visual Studio Community 2022 17.5.5)
    • Visual Studio at C:\Program Files\Microsoft Visual Studio\2022\Community
    • Visual Studio Community 2022 version 17.5.33627.172
    • Windows 10 SDK version 10.0.19041.0

[√] Android Studio (version 2022.2)
    • Android Studio at D:\Projets\Jetbrains IDEs\apps\AndroidStudio\ch-0\222.4459.24.2221.10121639
    • Flutter plugin version 74.0.2
    • Dart plugin version 222.4582
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-b2043.56-9586694)

[√] Connected device (2 available)
    • Windows (desktop) • windows • windows-x64    • Microsoft Windows [version 10.0.22621.1702]
    • Edge (web)        • edge    • web-javascript • Microsoft Edge 114.0.1823.43

[√] Network resources
    • All expected network resources are available.

! Doctor found issues in 2 categories.

More environment information

• Flame version : latest (1.8.0)
• Platform affected : all tested (windows & web)

[Skyost]

I'm reporting it because I think it's an issue due to the new camera API (mainly because it doesn't occur when the camera doesn't have to move & it wasn't occuring with the old API). But if you don't think so, feel free to close the issue.

[ufrshubham]

@Skyost can you swap the assets with some placeholder assets and share a reproducible example? Or even a stripped down example with just simple shapes?

I am suspecting that this jitter wasn't visible in the old camera because in your videos, the old camera isn't moving horizontally.

As a workaround, you can have a intermediate PositionComponent that smoothly follows the player movement. Then camera can be made to follow that intermediate component. This would make the camera move smoothly and should ideally avoid any jitters.

[Skyost]

Yeah, sure, sorry for the delay. I'll do that on my free time, on wednesday. Btw, it's not moving horizontally because of #2564.

[Skyost]

@ufrshubham Here is it ! https://gist.github.com/Skyost/fe57eac9b49162a8382a5a973ec88d94

[ufrshubham]

@Skyost just tested our the example you shared and was able to reproduce the issue. Lucky for you #2572 fixes this. So next release of flame should fix this issues.

It was happening because of the default priorities of camera component and the component it was following. Setting camera on a higher priority value would have been an ideal fix. But setting the whole world to a negative priority works too. Not sure if you were trying to fix this exact problem with that PR @wolfenrain?🙂

[wolfenrain]

@Skyost just tested our the example you shared and was able to reproduce the issue. Lucky for you #2572 fixes this. So next release of flame should fix this issues.

It was happening because of the default priorities of camera component and the component it was following. Setting camera on a higher priority value would have been an ideal fix. But setting the whole world to a negative priority works too. Not sure if you were trying to fix this exact problem with that PR @wolfenrain?🙂

Yep,that was the exact reason why. The camera has to always do it's thing AFTER whatever world it is looking at

[Skyost]

Great ! Then I think this issue can be closed safely 👍