Back to Details

pixijs

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese
Entry point for the PixiJS v8 skill collection. PixiJS is the fastest library available for the web, working across all devices and allowing you to create rich, interactive graphics and cross-platform applications using WebGL, WebGPU, and Canvas as a fallback.
PixiJS v8技能集合的入口。PixiJS是目前Web端速度最快的库之一，可在所有设备上运行，支持使用WebGL、WebGPU，并以Canvas作为降级方案，创建丰富的交互式图形和跨平台应用。

How to use this skill

如何使用本技能

  1. Find the specialized skill in the router below that best matches the task.
  2. Load that skill's 
    SKILL.md
    and follow its guidance.
  3. If no sub-skill fits (the task references a specific class, function, option, or API surface not listed below), WebFetch 
    https://pixijs.download/release/docs/llms.txt
    . That file is the auto-generated, always-current index of the full PixiJS API and guides. Each entry links to a 
    .html.md
    page you can WebFetch for the detailed content.
For the long-form description and trigger keywords of every skill, see references/index.md.
  1. 在下方的技能路由表中找到最匹配任务的专业技能。
  2. 加载该技能的
    SKILL.md
    并遵循其指引。
  3. 如果没有匹配的子技能（任务涉及以下未列出的特定类、函数、选项或API内容），请WebFetch 
    https://pixijs.download/release/docs/llms.txt
    。该文件是自动生成的、实时更新的完整PixiJS API和指南索引。每个条目都链接到一个
    .html.md
    页面，你可以通过WebFetch获取详细内容。
如需查看所有技能的详细描述和触发关键词，请参阅references/index.md。

Skill router

技能路由表

Foundations

基础模块

SkillLoad when...
pixijs-applicationCreating or configuring a PixiJS 
Application
, calling 
app.init()
, accessing 
app.stage
/
renderer
/
canvas
/
screen
, resize/ticker plugins, 
app.destroy()
.
pixijs-core-conceptsUnderstanding the renderer pipeline, choosing WebGL/WebGPU/Canvas, render loop internals, systems and pipes.
pixijs-createScaffolding a new project with the 
create-pixi
CLI (bundler-vite, creation-web, framework-react templates).
pixijs-environmentsRunning PixiJS in Web Workers, Node/SSR, or strict-CSP contexts (
DOMAdapter
, 
WebWorkerAdapter
, 
pixi.js/unsafe-eval
).
pixijs-migration-v8Upgrading from v7 to v8 or fixing v7 patterns (
beginFill
/
endFill
, 
@pixi/*
packages, 
BaseTexture
, 
DisplayObject
).
pixijs-scene-core-conceptsUnderstanding the scene graph as a whole: containers vs leaves, transforms, render order, masking, 
RenderLayer
.
技能加载场景...
pixijs-application创建或配置PixiJS 
Application
、调用
app.init()
、访问
app.stage
/
renderer
/
canvas
/
screen
、尺寸调整/ticker插件、
app.destroy()
。
pixijs-core-concepts理解渲染器流水线、选择WebGL/WebGPU/Canvas、渲染循环内部机制、系统与管道。
pixijs-create使用
create-pixi
CLI搭建新项目（bundler-vite、creation-web、framework-react模板）。
pixijs-environments在Web Workers、Node/SSR或严格CSP环境中运行PixiJS（
DOMAdapter
、
WebWorkerAdapter
、
pixi.js/unsafe-eval
）。
pixijs-migration-v8从v7升级到v8或修复v7相关代码模式（
beginFill
/
endFill
、
@pixi/*
包、
BaseTexture
、
DisplayObject
）。
pixijs-scene-core-concepts整体理解场景图：容器与叶子节点、变换、渲染顺序、遮罩、
RenderLayer
。

Scene Objects

场景对象

SkillLoad when...
pixijs-scene-containerWorking with 
Container
: 
addChild
/
removeChild
, transforms, 
zIndex
, bounds, 
toGlobal
/
toLocal
, 
destroy
.
pixijs-scene-spriteDrawing images: 
Sprite
, 
AnimatedSprite
, 
NineSliceSprite
, 
TilingSprite
.
pixijs-scene-graphicsDrawing vector shapes or paths: 
Graphics
, 
GraphicsContext
, 
fill
/
stroke
, 
FillGradient
, SVG.
pixijs-scene-textRendering text: 
Text
, 
BitmapText
, 
HTMLText
, 
SplitText
, 
TextStyle
.
pixijs-scene-meshCustom geometry: 
Mesh
, 
MeshSimple
, 
MeshPlane
, 
MeshRope
, 
PerspectiveMesh
.
pixijs-scene-particle-containerRendering thousands of lightweight sprites: 
ParticleContainer
, 
Particle
, 
dynamicProperties
.
pixijs-scene-dom-containerOverlaying HTML elements on the canvas: 
DOMContainer
, 
pixi.js/dom
.
pixijs-scene-gifDisplaying animated GIFs: 
GifSprite
, 
GifSource
, 
pixi.js/gif
.
技能加载场景...
pixijs-scene-container操作
Container
：
addChild
/
removeChild
、变换、
zIndex
、边界、
toGlobal
/
toLocal
、
destroy
。
pixijs-scene-sprite绘制图像：
Sprite
、
AnimatedSprite
、
NineSliceSprite
、
TilingSprite
。
pixijs-scene-graphics绘制矢量图形或路径：
Graphics
、
GraphicsContext
、
fill
/
stroke
、
FillGradient
、SVG。
pixijs-scene-text渲染文本：
Text
、
BitmapText
、
HTMLText
、
SplitText
、
TextStyle
。
pixijs-scene-mesh自定义几何体：
Mesh
、
MeshSimple
、
MeshPlane
、
MeshRope
、
PerspectiveMesh
。
pixijs-scene-particle-container渲染数千个轻量级精灵：
ParticleContainer
、
Particle
、
dynamicProperties
。
pixijs-scene-dom-container在画布上叠加HTML元素：
DOMContainer
、
pixi.js/dom
。
pixijs-scene-gif显示动画GIF：
GifSprite
、
GifSource
、
pixi.js/gif
。

Utilities

工具类

SkillLoad when...
pixijs-assetsLoading resources: 
Assets.init
, 
Assets.load
, bundles, manifests, spritesheets, caching.
pixijs-colorCreating or converting colors: 
Color
class, hex/rgb/hsl, 
tint
, 
premultiply
.
pixijs-eventsHandling pointer/mouse/touch/wheel input: 
eventMode
, 
FederatedEvent
, 
hitArea
, 
cursor
, drag.
pixijs-mathPoints, vectors, matrices, shapes, hit testing: 
Point
, 
Matrix
, 
Rectangle
, 
toGlobal
/
toLocal
.
pixijs-tickerPer-frame logic or controlling the render loop: 
Ticker
, 
deltaTime
, 
UPDATE_PRIORITY
, 
maxFPS
.
技能加载场景...
pixijs-assets加载资源：
Assets.init
、
Assets.load
、资源包、清单、精灵表、缓存。
pixijs-color创建或转换颜色：
Color
类、hex/rgb/hsl、
tint
、
premultiply
。
pixijs-events处理指针/鼠标/触摸/滚轮输入：
eventMode
、
FederatedEvent
、
hitArea
、
cursor
、拖拽。
pixijs-math点、向量、矩阵、图形、碰撞检测：
Point
、
Matrix
、
Rectangle
、
toGlobal
/
toLocal
。
pixijs-ticker每帧逻辑或控制渲染循环：
Ticker
、
deltaTime
、
UPDATE_PRIORITY
、
maxFPS
。

Advanced

进阶模块

SkillLoad when...
pixijs-accessibilityScreen reader or keyboard navigation: 
AccessibilitySystem
, 
accessibleTitle
, 
tabIndex
.
pixijs-blend-modesCompositing with blend modes: 
add
, 
multiply
, 
screen
, 
overlay
, 
pixi.js/advanced-blend-modes
.
pixijs-custom-renderingWriting custom shaders, uniforms, or batchers: 
Shader.from
, 
GlProgram
/
GpuProgram
, 
UniformGroup
, custom 
Filter
.
pixijs-filtersApplying visual effects: 
BlurFilter
, 
ColorMatrixFilter
, 
DisplacementFilter
, 
Filter.from
, 
pixi-filters
.
pixijs-performanceProfiling or optimizing FPS, draw calls, GPU memory: culling, 
GCSystem
, 
cacheAsTexture
, object pooling.
技能加载场景...
pixijs-accessibility屏幕阅读器或键盘导航：
AccessibilitySystem
、
accessibleTitle
、
tabIndex
。
pixijs-blend-modes使用混合模式合成：
add
、
multiply
、
screen
、
overlay
、
pixi.js/advanced-blend-modes
。
pixijs-custom-rendering编写自定义着色器、uniforms或批处理程序：
Shader.from
、
GlProgram
/
GpuProgram
、
UniformGroup
、自定义
Filter
。
pixijs-filters应用视觉效果：
BlurFilter
、
ColorMatrixFilter
、
DisplacementFilter
、
Filter.from
、
pixi-filters
。
pixijs-performance分析或优化FPS、绘制调用、GPU内存：剔除、
GCSystem
、
cacheAsTexture
、对象池。

Fallback: canonical PixiJS docs

降级方案：官方PixiJS文档

If the task references a class, function, option, or API surface not covered by any sub-skill above, WebFetch 
https://pixijs.download/release/docs/llms.txt
. It's the auto-generated index of the full PixiJS API and guides, regenerated on every release. Each entry links to a 
.html.md
page you can WebFetch for the detailed content. Use this fallback whenever the router table doesn't point at an obvious match.
如果任务涉及上述子技能未覆盖的类、函数、选项或API内容，请WebFetch 
https://pixijs.download/release/docs/llms.txt
。这是自动生成的完整PixiJS API和指南索引，每次发布都会重新生成。每个条目都链接到一个
.html.md
页面，你可以通过WebFetch获取详细内容。当路由表没有明确匹配项时，请使用此降级方案。