Skip to main content

One post tagged with "gl2D"

View All Tags

PixiJS 更新 - v8.13.0

· 6 min read
Zyie
Zyie
PixiJS Admin

此版本提供了若干新功能、性能改进，以及超过 20 个错误修复，以保持 PixiJS 的顺畅运行。

🌐 This release delivers several new features, performance improvements, and over 20 bug fixes to keep PixiJS running smoothly.

让我们来看一下这次版本中发生了哪些变化，并展望一下接下来的内容，同时分享一些令人兴奋的公告！

🌐 Let's take a look at what's changed in this release and look ahead to what's coming next, with some exciting announcements to share!

v8.13.0 新功能​

🌐 What's New in v8.13.0

本次发布的一些亮点包括：

🌐 Some highlights from this release include:

  • SVG 填充规则支持 - 引擎现在可以渲染 SVG 子路径填充规则，提高了与矢量资源的兼容性（感谢 @creativoma）。

  • 文本缓存 - 文本纹理缓存（在 8.10.0 中暂时移除）现已恢复。现在，只有当文本对象使用相同的 TextStyle 实例（而不仅仅是等效设置）时，纹理才会被共享。这使缓存更稳定、错误率更低，并且在渲染许多相同样式的文本元素时可以显著提升性能。

    const textStyle = new TextStyle({ fontSize: 24, fontFamily: 'Verdana', fill: 0xffffff });
    const COUNT = 25000;

    for (let i = 0; i < COUNT; i++) {
      const bunny = new Text({ text: 'hello', style: textStyle });
      bunny.x = (i % 100) * 105;
      bunny.y = Math.floor(i / 100) * 25;
      container.addChild(bunny);
    }

  • 文本测量的LRU缓存 - 重复的字符串现在通过LRU（最近最少使用）缓存重用先前的测量，从而减少重复工作并提高性能。

  • 弃用消息控制 - 现在你可以抑制弃用警告，或在不支持颜色的环境中移除其颜色格式（感谢 @mayakwd）。

    import { deprecation } from 'pixi.js';
    deprecation.quiet = true; // Suppresses warnings
    deprecation.noColor = true; // Removes color formatting

  • 20多个修复 - 对文本、渲染、交互等方面进行了改进。非常感谢所有提供修复和报告问题的朋友们！

你可以在 GitHub 上查看完整的发行说明。

🌐 You can see the full release notes on GitHub.

PixiJS 的下一步是什么​

🌐 What's Next for PixiJS

接下来，我们很高兴分享一些我们正在为未来版本开展的较大计划。

🌐 Next up, we're excited to share some of the bigger initiatives we're working on for future releases.

gl2D 文件格式​

🌐 gl2D File Format

我们目前正在开发一种名为 gl2D 的新二维场景开放格式。

🌐 We're currently working on a new open format for 2D scenes called gl2D.

gl2D 是一种基于 JSON 的场景描述格式，受 glTF 启发，但专为 2D 渲染设计。它提供了一种结构化的方法来描述：

🌐 gl2D is a JSON-based scene description format, inspired by glTF but designed specifically for 2D rendering. It provides a structured way to describe:

  • 场景 - 节点的集合（例如：菜单、游戏玩法、制作名单）。
  • 节点 - 容器、精灵、文本等。
  • 资源 - 纹理、精灵表、视频、字体、渐变等。

为什么选择 gl2D？​

🌐 Why gl2D?

目前，没有标准的方法来描述二维场景。每个引擎或工具都使用自己的格式，这意味着资源和布局无法轻松共享。这种碎片化导致了重复工作、手动转换以及有限的互操作性。

🌐 Right now, there's no standard way to describe a 2D scene. Every engine or tool uses its own format, which means assets and layouts can't be shared easily. This fragmentation leads to duplicated work, manual conversions, and limited interoperability.

gl2D 的设计旨在通过以下方式解决此问题：

🌐 gl2D is designed to address this by:

  • 提供一个共同的基础——这样2D场景可以在不同工具和引擎之间共享。
  • 减少重复 - 开发者和设计师无需在多个工具中重建相同的场景。
  • 高效的资源管理 - 诸如纹理、字体或渐变等资源只需定义一次，就可以在多个节点中重复使用，从而保持文件更小并提高渲染效率。
  • 以网页为先的设计 - gl2D 的设计考虑了互操作性，因此它不仅可以与 PixiJS 配合使用，还可以与 Phaser 等生态系统中的其他引擎协同工作。
  • 启用新的工作流程 - 从设计工具导出或在 Pixi 上构建编辑器变得更加简单。

示例​

🌐 Example

{
  "asset": {
    "version": "1.0",
    "generator": "PixiJS"
  },
  "scene": 0,
  "scenes": [
    {
      "name": "MainScene",
      "nodes": [0]
    }
  ],
  "nodes": [
    {
      "type": "container",
      "name": "Root",
      "children": [1],
      "translation": [100, 100]
    },
    {
      "type": "sprite",
      "name": "Hero",
      "texture": 0,
      "translation": [50, 0]
    }
  ],
  "resources": [
    { "type": "texture", "source": 0 },
    { "type": "image_source", "uri": "/textures/hero.png" }
  ],
  "extensionsUsed": []
}

Figma 插件集成​

🌐 Figma Plugin Integration

除了 gl2D，我们还在开发一个 Figma 插件，让你可以将设计直接同步到 PixiJS。

🌐 Alongside gl2D, we're building a Figma plugin that will let you sync designs directly into PixiJS.

这意味着：

🌐 This means:

  • 不再需要手动从设计文件重建布局。
  • 在 Figma 中创建的场景可以导出为 gl2D，并用最少的设置加载到 PixiJS 中。
  • 可以使用 Figma 的自动布局功能和 PixiJS 布局将场景创建为完全响应的布局，以适应不同的屏幕尺寸。
  • 设计师和开发者可以并行工作，在 Figma 中所做的更改可以直接流入你的 PixiJS 项目，无需额外步骤。

我们的目标是让设计与实现之间的交接无缝衔接，这样团队可以更多地专注于迭代，而不是转换。

🌐 Our aim is to make the handoff between design and implementation seamless, so teams can focus more on iteration and less on translation.

获取最新的 PixiJS​

🌐 Get the Latest PixiJS

通过 npm 安装：

🌐 Install via npm:

npm install pixi.js@8.13.0

或者通过 CDN 使用：

🌐 Or use via CDN:

开发版本：

生产构建：

文档: https://pixijs.download/v8.13.0/docs/index.html

总结​

🌐 Wrapping Up

这就结束了我们的八月更新。如果你有兴趣参与，我们一直在寻找对未解决问题提供帮助的人。

🌐 That wraps up our August update. If you're interested in contributing, we're always looking for help on open issues.

再次感谢所有为此次发布做出贡献的人！我们迫不及待想看看你们用 PixiJS 创造的作品。

🌐 Thanks again to everyone who contributed to this release! We can't wait to see what you create with PixiJS.


创作愉快！

🌐 Happy creating!

PixiJS 团队