What is the optimal render loop in Dart 2?
Well, after a month of beating my face against this, I finally figured out the right question and that got me to this: Flutter Layers / Raw
// Copyright 2015 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
// This example shows how to perform a simple animation using the raw interface
// to the engine.
import 'dart:math' as math;
import 'dart:typed_data';
import 'dart:ui' as ui;
void beginFrame(Duration timeStamp) {
// The timeStamp argument to beginFrame indicates the timing information we
// should use to clock our animations. It's important to use timeStamp rather
// than reading the system time because we want all the parts of the system to
// coordinate the timings of their animations. If each component read the
// system clock independently, the animations that we processed later would be
// slightly ahead of the animations we processed earlier.
// PAINT
final ui.Rect paintBounds = ui.Offset.zero & (ui.window.physicalSize / ui.window.devicePixelRatio);
final ui.PictureRecorder recorder = ui.PictureRecorder();
final ui.Canvas canvas = ui.Canvas(recorder, paintBounds);
canvas.translate(paintBounds.width / 2.0, paintBounds.height / 2.0);
// Here we determine the rotation according to the timeStamp given to us by
// the engine.
final double t = timeStamp.inMicroseconds / Duration.microsecondsPerMillisecond / 1800.0;
canvas.rotate(math.pi * (t % 1.0));
canvas.drawRect(ui.Rect.fromLTRB(-100.0, -100.0, 100.0, 100.0),
ui.Paint()..color = const ui.Color.fromARGB(255, 0, 255, 0));
final ui.Picture picture = recorder.endRecording();
// COMPOSITE
final double devicePixelRatio = ui.window.devicePixelRatio;
final Float64List deviceTransform = Float64List(16)
..[0] = devicePixelRatio
..[5] = devicePixelRatio
..[10] = 1.0
..[15] = 1.0;
final ui.SceneBuilder sceneBuilder = ui.SceneBuilder()
..pushTransform(deviceTransform)
..addPicture(ui.Offset.zero, picture)
..pop();
ui.window.render(sceneBuilder.build());
// After rendering the current frame of the animation, we ask the engine to
// schedule another frame. The engine will call beginFrame again when its time
// to produce the next frame.
ui.window.scheduleFrame();
}
void main() {
ui.window.onBeginFrame = beginFrame;
ui.window.scheduleFrame();
}
Sean Vikoren
http://vikoren.com/resume Vote up flexible formatting for Dart! https://github.com/Dart-Code/Dart-Code/issues/914#issuecomment-455198682
Updated on December 08, 2022Comments
-
Sean Vikoren over 1 year
I am looking for ideas regarding an optimal/minimal structure for the inner render loop in Dart 2, for a 2d game (if that part matters).
Clarification / Explanation: Every framework / language has an efficient way to: 1) Deal with time. 2) Render to the screen (via memory, a canvas, an image, or whatever).
For an example, here is someone that answered this for the C# language. Being new to Flutter / Dart, my first attempt (below), is failing to work and as of right now, I can not tell where the problem is.
I have searched high and low without finding any help on this, so if you can assist, you have my eternal gratitude.
There is a post on Reddit by ‘byu/inu-no-policemen’ (a bit old). I used this to start. I suspect that it is crushing the garbage collector or leaking memory.
This is what I have so far, but it crashes pretty quickly (at least in the debugger):
import 'dart:ui'; import 'dart:typed_data'; import 'dart:math' as math; import 'dart:async'; main() async { var deviceTransform = new Float64List(16) ..[0] = 1.0 // window.devicePixelRatio ..[5] = 1.0 // window.devicePixelRatio ..[10] = 1.0 ..[15] = 1.0; var previous = Duration.zero; var initialSize = await Future<Size>(() { if (window.physicalSize.isEmpty) { var completer = Completer<Size>(); window.onMetricsChanged = () { if (!window.physicalSize.isEmpty) { completer.complete(window.physicalSize); } }; return completer.future; } return window.physicalSize; }); var world = World(initialSize.width / 2, initialSize.height / 2); window.onBeginFrame = (now) { // we rebuild the screenRect here since it can change var screenRect = Rect.fromLTWH(0.0, 0.0, window.physicalSize.width, window.physicalSize.height); var recorder = PictureRecorder(); var canvas = Canvas(recorder, screenRect); var delta = previous == Duration.zero ? Duration.zero : now - previous; previous = now; var t = delta.inMicroseconds / Duration.microsecondsPerSecond; world.update(t); world.render(t, canvas); var builder = new SceneBuilder() ..pushTransform(deviceTransform) ..addPicture(Offset.zero, recorder.endRecording()) ..pop(); window.render(builder.build()); window.scheduleFrame(); }; window.scheduleFrame(); window.onPointerDataPacket = (packet) { var p = packet.data.first; world.input(p.physicalX, p.physicalY); }; } class World { static var _objectColor = Paint()..color = Color(0xa0a0a0ff); static var _s = 200.0; static var _obejectRect = Rect.fromLTWH(-_s / 2, -_s / 2, _s, _s); static var _rotationsPerSecond = 0.25; var _turn = 0.0; double _x; double _y; World(this._x, this._y); void input(double x, double y) { _x = x; _y = y; } void update(double t) { _turn += t * _rotationsPerSecond; } void render(double t, Canvas canvas) { var tau = math.pi * 2; canvas.translate(_x, _y); canvas.rotate(tau * _turn); canvas.drawRect(_obejectRect, _objectColor); } }
-
Jon Scalet over 4 yearsDefinitely could see how this would take some head banging to figure out. Helpful, thanks!