SuperAPI AI 工具集

pixijs-rendering

前端与建站

查看项目

更新于 10-15 21:49

技能介绍

用途:用于搭建 PixiJS v8 渲染层,适用于新建 v8 项目、修复空白画布、组织显示列表、加载纹理、用 ticker 做动画或处理指针输入。出现 import { Application } from 'pixi.js' 且依赖 pixi.js v8 时可使用;Phaser 场景/加载器模型应改用 phaser-core,3D 场景用 threejs-scene-setup,v7 及更早代码需先迁移。

主要能力与用法:

  1. 异步启动。v8 中 new Application() 为空构造,配置放在 await app.init({...}),完成后把 app.canvas(不是 app.view)挂到 DOM。打包器遇顶层 await 报错时,用 (async () => { ... })() 包裹。
  2. 资源加载。用 await Assets.load(url) 得到 Texture;多个资源可注册 manifest/bundle,再用 Assets.loadBundle 按名加载,v8 无 v7 Loader。
  3. 场景图。一切挂在 app.stage 之下;用 Container 组织相关对象,子级变换相对父级,绘制顺序即插入顺序。
  4. 动画。app.ticker.add((ticker) => {...}),用 ticker.deltaTime(帧倍率,60fps 约 1)或 ticker.deltaMS 缩放运动,保证与帧率无关。
  5. 指针事件。设 eventMode = 'static'(或 'dynamic'),再 obj.on('pointerdown', ...);拖拽需用 globalpointermove,因为 v8 的 pointermove 仅在指针位于对象上方时触发。
  6. 渲染组。对大型静态子树设 isRenderGroup: true,让 GPU 缓存变换,改动前后需实测确认屏幕像素。

限制与坑:init 前 app.stage、app.renderer、app.canvas、app.screen 均未定义;app.view 在 v8 改名为 app.canvas;Loader、同步构造、beginFill/endFill 等 v7 写法需迁移,旧选项传入构造函数会被忽略并给弃用警告。ticker 回调参数是 Ticker 对象而非数字,直接当 delta 用会得到 NaN。点击无效多为 eventMode 仍为默认 'passive'。Texture.from(url) 只读 Assets 缓存,需先 Assets.load。WebGPU 的 preference 只是提示,应按 app.renderer.name 分支。像素画模糊可设 texture.source.scaleMode = 'nearest'。removeChild 不释放显存,需 sprite.destroy() 与 Assets.unload;同标签页销毁重建出现闪烁时用 app.destroy({ releaseGlobalResources: true })。资源管线、Graphics/Text/TilingSprite/ParticleContainer 与滤镜细节见 references/assets-and-display.md。