I have a custom painter that I'm using to build a small game engine for fun. I have the following code that is supposed to call the draw function of my custom painter 60 times per second:
SceneRenderChangeNotifier repaintNotifer = SceneRenderChangeNotifier();
preformSetup()
{
...
Timer timer = Timer.periodic(Duration(milliseconds: (1000 / _sceneToRender.frameRate).toInt()),
(Timer t) => forceUpdate(false));
}
forceUpdate(bool callFromDebug)
{
repaintNotifer.notifyChanges();
}
I then pass that repaint notifier to my custom painter.
While this seems to work okay on android / IOS, it's very choppy on web. I thought that maybe my draw function was running too slowly on web, but by putting in a stopwatch I can see that it takes about 1.4 milliseconds for my draw function to complete each frame which should be plenty low enough for 60 FPS.
I put in logging and it's a a range of 18 - 24ms from the end of my paint function to the start of the next paint function call. This leads me to believe the large gap between calls to paint is what's causing the bad performance.
In the docs for custom painters, they say:
The most efficient way to trigger a repaint is to either:
Extend this class and supply a repaint argument to the constructor of the CustomPainter, where that object notifies its listeners when it is time to repaint.
Extend Listenable (e.g. via ChangeNotifier) and implement CustomPainter, so that the object itself provides the notifications directly.
I feel like I'm doing option #1 here, is option #2 much better for web? Or is there a better way in general to make the canvas redraw on an interval?
Any help would be greatly appreciated