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

信息

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

¥PixiJS React requires React 19 or higher.

使用 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 布局库（由 Facebook 的 Yoga 引擎提供支持）为 PixiJS 添加弹性框样式的布局。它引入了一种声明式方法，使用熟悉的类似 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 构建，可实现标准化、可靠的布局。

    ¥Built on Yoga for standardized, reliable layouts

  • 完全可选：仅在需要时应用布局

    ¥Fully opt-in: apply layout only where you need it

  • 任何 PixiJS 对象现在都可以感知布局。

    ¥Any PixiJS object can now be layout-aware

  • 支持 PixiJS React

    ¥Supports PixiJS React

  • 新的 Web 风格功能：objectFit、objectPosition 和溢出滚动

    ¥New web-style features: objectFit, objectPosition, and overflow scrolling

Spine 集成​

¥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:

  • 按钮

    ¥Buttons

  • 滑块

    ¥Sliders

  • 进度条

    ¥Progress bars

  • 列表

    ¥Lists

  • 滚动框

    ¥Scrollbox

  • 单选按钮组

    ¥Radio Groups

  • 复选框

    ¥Checkboxes

  • 开关

    ¥Switches

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