SuperAPI AI 工具集

pixijs-scene-sprite

前端与建站

查看项目

更新于 10-16 03:42

技能介绍

用途:在 PixiJS v8 中绘制图像,覆盖四类精灵:Sprite(默认图像叶子节点)、AnimatedSprite(基于纹理帧的逐帧动画,是 Sprite 子类)、NineSliceSprite(可缩放的 UI 面板,保留角落美术)、TilingSprite(在某区域重复纹理,用于滚动背景与视差)。需先熟悉 pixijs-scene-core-concepts。

主要能力与选择:单个图像定位用 Sprite;角色帧动画用 AnimatedSprite,可经 Assets 加载精灵表后传 sheet.animations['walk'];可缩放 UI 按钮/面板用 NineSliceSprite,设置边框宽度后设 width/height;滚动重复背景用 TilingSprite,动画 tilePosition 实现滚动;成百上千相同精灵应使用 ParticleContainer;绘制形状或路径用 Graphics。

使用方式:先 await Assets.load(...) 加载纹理,再 new Sprite({ texture, anchor, tint }),随后设置位置并 addChild 到 app.stage。示例:const texture = await Assets.load("bunny.png"); const sprite = new Sprite({ texture, anchor: 0.5, tint: 0xff8888 }); sprite.x = app.screen.width / 2; sprite.y = app.screen.height / 2; app.stage.addChild(sprite);。位置依赖实时渲染器尺寸时应在构造后设置,字面量位置可经 x/y 直接写入选项。

限制与注意:所有精灵类均为叶子节点,不能有子节点,需用 Container 分组。Sprite.from(id) 只读缓存不拉取,须先 await Assets.load(...),或把返回的 Texture 直接传给 new Sprite(texture)。纹理加载后修改帧或换源不会自动通知精灵,需设置 texture.dynamic = true 或手动调用 sprite'onViewUpdate'。Sprite.anchor 为归一化 [0,1],只移动纹理绘制原点;Container.pivot 为像素空间,同时移动变换原点与视觉位置,居中应使用 anchor.set(0.5)。NineSlicePlane 在 v8 已更名 NineSliceSprite 并改用选项对象构造:new NineSliceSprite({ texture, leftWidth, topHeight, rightWidth, bottomHeight })。各变体构造选项与 SpriteOptions、AnimatedSprite、TilingSprite、Texture 等 API 细节见对应 references 文件。