Dart 2中的最佳渲染循环是什么? [英] What is the optimal render loop in Dart 2?

问题描述

我正在寻找有关2d游戏(如果那部分很重要)的Dart 2内部渲染循环的最佳/最小结构的想法.

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).

说明/解释:每种框架/语言都有一种有效的方法来: 1)处理时间. 2)渲染到屏幕上(通过内存，画布，图像或其他任何东西).

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).

例如，这里有人回答这是针对C#语言的.对Flutter/Dart来说，我的第一次尝试(如下)是失败的，并且到目前为止，我还不能确定问题出在哪里.

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.

"byu/inu-no-policemen"(有点老)在Reddit上发布了一条信息.我用这个开始.我怀疑它正在破坏垃圾收集器或泄漏内存.

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);
  }
}

推荐答案

好吧，经过一个月的努力，我终于找到了正确的问题，这使我明白了这一点: 颤振层/原始

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();
}

这篇关于Dart 2中的最佳渲染循环是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！