Flutter高性能2D渲染插件StageXL的使用

发布于 1周前 作者 caililin 来自 Flutter

Flutter高性能2D渲染插件StageXL的使用

StageXL 是一个用于 HTML5 和 Dart 的快速且通用的 2D 渲染引擎。它为 2D 游戏和其他图形丰富的应用提供了广泛的功能。基于 WebGL 的引擎经过高度优化，以减少发送到 GPU 的绘制调用数量，从而提供顶级性能。自动回退到基于 Canvas2D 的引擎保证了与较旧浏览器或过时硬件的兼容性。

StageXL 提供的一些功能包括：纹理图集支持、绘制调用批处理、像素遮罩、像素过滤器、像素混合、纹理过滤、分层显示列表、精灵表动画、丰富的动画框架、音频和视频支持、交互事件、二维对象的三维变换、资源管理、文本渲染等。

扩展库

StageXL 提供了一整套内置功能。对于更高级的用例，可能需要一个具有特定功能的扩展库。以下是部分流行的 StageXL 扩展库：

获取帮助

最简单的方法是提问。我们正在积极跟踪以下网站，并尽快回答问题。我们希望在 StackOverflow 上有更多的常见问题解答，以便其他开发者能够快速找到答案，因此欢迎您在 StackOverflow 上提出您的问题。

示例

我们正在制作更多示例以涵盖更广泛的用例。请查看 StageXL 示例存储库了解我们的最新进展。如果您想学习特定功能，不要犹豫，发送示例请求。

支持 StageXL

我们鼓励任何人提交拉取请求或发现的问题。我们会尽快查看它们。

路线图

除了改进现有功能并尽可能提高性能外，我们一直在思考接下来要添加的新功能。请向我们发送您的想法和需求，使您最关心的事情成为现实。我们将在不久的将来处理一些事情：

  • 支持 Flutter（这发生在独立仓库中）
  • 新的 StageXL 主页，提供更多文章/博客文章。
  • 将函数从位置参数更改为命名参数。
  • 添加使用 Web Workers 的能力。

Adobe Flash 遗产

StageXL 最初作为 Adobe Flash 开发者及其产品的简易迁移路径到 HTML5。因此，StageXL 提供了您多年来在 Flash 中使用的相同显示列表 API。此外，对于熟悉 ActionScript 的人来说，Dart 编程语言很容易上手。

浏览器支持

Chrome Safari Firefox Edge
v53+ v10+ v63+ v79+

某些功能仅适用于较新的浏览器，例如 WebGL，但我们打算为大多数功能提供回退方案。

示例代码

import 'package:flutter/material.dart';
import 'package:stagexl/stagexl.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('StageXL 示例')),
        body: Center(
          child: StageXLWidget(),
        ),
      ),
    );
  }
}

class StageXLWidget extends StatefulWidget {
  [@override](/user/override)
  _StageXLWidgetState createState() => _StageXLWidgetState();
}

class _StageXLWidgetState extends State<StageXLWidget> {
  late Stage stage;
  late RenderLoop renderLoop;

  [@override](/user/override)
  void initState() {
    super.initState();

    // 初始化 StageXL
    stage = Stage(
      viewId: 'stage', // 使用 Canvas 元素的 ID
      transparent: true,
      antialias: true,
    );

    // 创建渲染循环
    renderLoop = RenderLoop(stage);

    // 设置背景颜色
    stage.backgroundColor = Color.Black;

    // 添加舞台更新监听器
    renderLoop.addStageListener((event) {
      stage.update(stage.time);
      stage.render();
    });

    // 创建一个简单的图形
    var graphics = Graphics()
      ..lineStyle(4, Color.White)
      ..beginFill(Color.Red)
      ..drawRect(0, 0, 100, 100);

    // 创建一个 Sprite 并添加图形
    var sprite = Sprite()
      ..x = 100
      ..y = 100
      ..addChild(graphics);

    // 将 Sprite 添加到舞台上
    stage.addChild(sprite);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return HtmlElementView(viewType: 'stage');
  }
}

更多关于Flutter高性能2D渲染插件StageXL的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter高性能2D渲染插件StageXL的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个关于如何在Flutter应用中使用StageXL插件进行高性能2D渲染的示例代码。StageXL虽然本身是为Dart的Web平台设计的，但可以通过一些技巧在Flutter中结合webview_flutter插件来使用。不过，请注意，这种方法并不是直接在Flutter Canvas上渲染，而是通过嵌入WebView来实现。

首先，你需要添加必要的依赖到你的pubspec.yaml文件中：

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^3.0.4  # 请检查最新版本号

然后，你可以创建一个Flutter应用，并在其中嵌入一个WebView来加载包含StageXL内容的HTML文件。

  1. 创建一个包含StageXL内容的HTML文件（例如，assets/stagexl_example.html）：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>StageXL Example</title>
    <script src="https://unpkg.com/stagexl@latest/release/stagexl.min.js"></script>
</head>
<body>
    <canvas id="stage" width="800" height="600"></canvas>
    <script>
        // 初始化StageXL
        var stage = new StageXL.DisplayState(document.getElementById('stage'));
        var renderLoop = new StageXL.RenderLoop();
        
        // 创建一个简单的显示对象
        var bitmapData = new StageXL.BitmapData(800, 600, true, 0xFFFFFF);
        var bitmap = new StageXL.Bitmap(bitmapData);
        stage.addChild(bitmap);

        // 渲染循环
        renderLoop.addStage(stage);
        renderLoop.start();

        // 示例：绘制一个圆
        bitmapData.graphics.beginFill(0xDE3249);
        bitmapData.graphics.drawCircle(400, 300, 100);
        bitmapData.graphics.endFill();
    </script>
</body>
</html>
  1. 在Flutter项目中加载这个HTML文件：
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'dart:io' show Platform;

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('StageXL in Flutter'),
        ),
        body: WebViewExample(),
      ),
    );
  }
}

class WebViewExample extends StatefulWidget {
  @override
  _WebViewExampleState createState() => _WebViewExampleState();
}

class _WebViewExampleState extends State<WebViewExample> {
  late WebViewController _controller;

  @override
  Widget build(BuildContext context) {
    return WebView(
      initialUrl: Uri.dataFromString(
        '''
        <html>
          <head>
            <title>Local HTML</title>
          </head>
          <body>
            <!-- 这里使用iframe加载本地HTML文件 -->
            <iframe src="file://${_getLocalHtmlFilePath()}" width="100%" height="100%"></iframe>
          </body>
        </html>
        ''',
        mimeType: 'text/html',
        encoding: Encoding.getByName('utf-8')
      ).toString(),
      javascriptMode: JavascriptMode.unrestricted,
      onWebViewCreated: (WebViewController webViewController) {
        _controller = webViewController;
      },
    );
  }

  // 获取本地HTML文件的路径
  String _getLocalHtmlFilePath() {
    if (Platform.isAndroid) {
      return '${Directory.systemTemp.path}/stagexl_example.html';
    } else if (Platform.isIOS) {
      // iOS上加载本地文件稍微复杂一些，通常需要先将文件复制到应用的临时目录
      // 这里为了简化示例，假设文件已经被正确处理并放置在可访问的路径
      return 'path/to/your/ios/stagexl_example.html';
    } else {
      throw UnsupportedError('Platform not supported');
    }
  }
}

注意：

  • 在iOS上，直接从文件路径加载HTML文件可能受到限制。你可能需要将HTML文件作为资源打包进应用，并通过应用内的文件系统访问它。
  • 由于StageXL是为Web设计的，这种方法可能不是性能最优的解决方案，特别是在需要高度交互或复杂动画的应用中。对于原生Flutter渲染，建议使用Flutter提供的Canvas API或其他高性能2D渲染库（如Flame）。

这个示例主要是为了展示如何在Flutter中嵌入和使用StageXL，实际应用中可能需要根据平台差异进行更多的调整和优化。

回到顶部