Skip to main content

生态系统

PixiJS 本身只是一个渲染引擎。然而，它有一个强大生态系统的基础，包括各种增强和扩展其功能的库和工具。这些工具可以与 PixiJS 无缝集成，使开发者能够轻松创建更丰富、更互动的应用。

🌐 PixiJS itself is just a rendering engine. However, there is a foundation of a robust ecosystem of libraries and tools that enhance and expand its capabilities. These tools integrate seamlessly with PixiJS, empowering developers to create richer, more interactive applications with ease.

核心生态系统库​

🌐 Core Ecosystem Libraries

开发者工具​

🌐 DevTools

使用 DevTools 优化和调试你的 PixiJS 项目。这个浏览器扩展提供对应用性能、渲染层次结构和纹理管理的实时洞察，确保你的项目顺利运行。

🌐 Optimize and debug your PixiJS projects with DevTools. This browser extension offers real-time insights into application performance, rendering hierarchies, and texture management, ensuring your projects run smoothly.

Screenshot from terminal

React 集成​

🌐 React Integration

info

PixiJS React 需要 React 19 或更高版本。

使用 Pixi-React 库简化在 React 应用中使用 PixiJS。这个库提供的绑定允许你将 PixiJS 组件作为 React 元素进行管理，使在 React 的声明式框架中轻松集成强大的图形功能。

🌐 Simplify the use of PixiJS in React applications with the Pixi-React library. This library provides bindings that allow you to manage PixiJS components as React elements, making it easy to incorporate powerful graphics into React's declarative framework.

Screenshot from terminal

布局​

🌐 Layout

使用 PixiJS Layout 库为 PixiJS 添加 Flexbox 风格的布局，该库由 Facebook 的 Yoga 引擎提供支持。它引入了一种声明式方法，通过类似 CSS 的规则来控制 PixiJS 显示对象的位置、对齐和大小。

🌐 Add flexbox-style layouting to PixiJS with the PixiJS Layout library, which is powered by Facebook’s Yoga engine. It introduces a declarative way to control positioning, alignment, and sizing of PixiJS display objects using familiar CSS-like rules.

主要功能包括：

🌐 Key features include:

  • 基于 Yoga 构建，可实现标准化、可靠的布局。
  • 完全自愿选择：仅在需要的地方应用布局
  • 任何 PixiJS 对象现在都可以感知布局。
  • 支持 PixiJS React
  • 新的网页样式功能：objectFit、objectPosition 和溢出滚动

脊柱整合​

🌐 Spine Integration

使用 Spine-Pixi 赋予动画生命。此集成结合了 PixiJS 和 Spine（一款领先的动画工具）的强大功能，为游戏和互动内容创建流畅的骨骼动画。

🌐 Bring animations to life with Spine-Pixi. This integration combines the power of PixiJS and Spine, a leading animation tool, to create smooth, skeletal-based animations for games and interactive content.

Screenshot from terminal

筛选器​

🌐 Filters

使用 PixiJS 过滤器转变你的视觉效果。这一广泛的高性能效果集合包括模糊、发光和颜色调整等选项，为你提供创建视觉惊艳图形的工具。

🌐 Transform your visuals with PixiJS Filters. This extensive collection of high-performance effects includes options like blur, glow, and color adjustments, giving you the tools to create visually stunning graphics.

Screenshot from terminalScreenshot from terminalScreenshot from terminal

声音​

🌐 Sound

使用 PixiJS Sound（一个带有滤镜的 WebAudio API 播放库）为你的项目添加音频。

🌐 Add audio to your projects with PixiJS Sound a WebAudio API playback library, with filters.

用户界面​

🌐 UI

使用 PixiJS UI 简化用户界面的创建。该库提供预制组件：

🌐 Streamline the creation of user interfaces with PixiJS UI. This library offers pre-built components:

  • 按钮
  • 滑块
  • 进度条
  • 列表
  • 滚动框
  • 单选按钮组
  • 复选框
  • 开关

在 PixiJS 中构建交互式界面的所有基本功能。

🌐 All the essentials for building interactive interfaces in PixiJS.

资源包​

🌐 AssetPack

使用 AssetPack 简化资源管理。该工具能够高效地组织、打包和加载资源，减少加载时间并改善项目的资源处理。

🌐 Simplify asset management with AssetPack. This tool organizes, packages, and loads assets efficiently, reducing load times and improving resource handling for your projects.

Screenshot from terminal

PixiJS 用户社区 - 社区驱动的代码库​

🌐 PixiJS Userland - Community-Driven Repositories

PixiJS Userland 是一个专门用于托管社区驱动仓库的空间。该组织允许开发者在与 PixiJS 相关的项目上进行协作，并与更广泛的社区分享他们的作品。

🌐 PixiJS Userland is a dedicated space for hosting community-driven repositories. This organization allows developers to collaborate on PixiJS-related projects and share their work with the wider community.

如果你有一个关于新库或工具的想法，你可以申请访问 PixiJS Userland，以在组织内创建和维护一个仓库。这是一个向不断发展的 PixiJS 生态系统做出贡献并与志同道合的开发者互动的绝佳机会。

🌐 If you have an idea for a new library or tool, you can request access to PixiJS Userland to create and maintain a repository within the organization. This is a great opportunity to contribute to the growing PixiJS ecosystem and engage with like-minded developers.

请注意，用户空间的仓库由社区驱动，可能没有更新到最新的 PixiJS 版本。然而，对于希望增强其 PixiJS 项目的开发者来说，它们提供了丰富的资源和灵感。

🌐 Note that userland repositories are community-driven and may not be up to date with the latest PixiJS releases. However, they offer a wealth of resources and inspiration for developers looking to enhance their PixiJS projects.

生态系统入门​

🌐 Getting Started with the Ecosystem

要探索这些库，请访问它们各自的文档和 GitHub 仓库以获取安装说明和使用指南。此外，PixiJS 通过 PixiJS Create CLI 提供 创建模板，将许多这些库组合成预配置的设置，非常适合特定的用例和平台。

🌐 To explore these libraries, visit their respective documentation and GitHub repositories for installation instructions and usage guides. Additionally, PixiJS offers Creation Templates through the PixiJS Create CLI that combine many of these libraries into pre-configured setups, ideal for specific use cases and platforms.

为了获取灵感，你还可以查看 open-games 仓库，该仓库展示了使用 PixiJS 及其生态系统库构建的各种游戏。

🌐 For inspiration, you can also check out the open-games repository, which showcases a variety of games built with PixiJS and its ecosystem libraries.