PixiJS 实战教学大纲
📚 系列概述
PixiJS 是一个高性能的 2D 渲染库，底层基于 WebGL（可回退到 Canvas），广泛应用于游戏开发、数据可视化、交互式应用等领域。
本系列教程将从基础到高级，全面讲解 PixiJS 的核心概念、API 使用和最佳实践。
🎯 学习目标
完成本系列学习后，你将能够：
- 理解 PixiJS 架构：掌握显示对象体系、渲染管线
- 熟练使用核心 API：Sprite、Graphics、Text、Container
- 实现交互功能：事件处理、拖拽、碰撞检测
- 掌握性能优化：批处理、对象池、纹理管理
- 开发实际项目：游戏、可视化、编辑器
📖 章节目录
第1章：PixiJS 概述与快速入门
- 1.1 PixiJS 简介与定位
- 1.2 与其他库对比（Three.js、Phaser、Fabric.js）
- 1.3 安装与配置
- 1.4 第一个 PixiJS 应用
- 1.5 版本选择（v7 vs v8）
- 1.6 开发工具与调试
第2章：Application 与渲染器
- 2.1 Application 类详解
- 2.2 渲染器类型（WebGL/WebGPU/Canvas）
- 2.3 渲染器配置选项
- 2.4 屏幕与视口管理
- 2.5 渲染控制
- 2.6 多渲染器场景
第3章：显示对象体系
- 3.1 DisplayObject 基类
- 3.2 继承体系结构
- 3.3 可见性控制
- 3.4 层级管理
- 3.5 包围盒计算
- 3.6 销毁与内存回收
第4章：Container 容器与场景图
- 4.1 Container 基础
- 4.2 子对象管理
- 4.3 场景图结构
- 4.4 遍历与查找
- 4.5 剔除优化
- 4.6 分层管理
第5章：Sprite 精灵与纹理
- 5.1 Sprite 基础
- 5.2 锚点（anchor vs pivot）
- 5.3 Texture 系统
- 5.4 纹理创建方式
- 5.5 精灵图集（Spritesheet）
- 5.6 九宫格（NineSliceSprite）
第6章：Graphics 图形绘制
- 6.1 Graphics 基础
- 6.2 样式设置
- 6.3 基础图形绑制
- 6.4 路径绑制
- 6.5 孔洞绘制
- 6.6 性能考量
第7章：Text 文本渲染
- 7.1 Text 基础
- 7.2 TextStyle 样式
- 7.3 富文本
- 7.4 BitmapText
- 7.5 字体加载
- 7.6 文本测量
第8章：Transform 变换系统
- 8.1 Transform 类
- 8.2 本地与世界变换
- 8.3 变换矩阵
- 8.4 坐标转换
- 8.5 变换更新机制
- 8.6 自定义变换
第9章：交互与事件系统
- 9.1 事件系统概述
- 9.2 启用交互
- 9.3 事件类型
- 9.4 事件传播
- 9.5 点击区域
- 9.6 拖拽实现
第10章：纹理管理与资源加载
- 10.1 Assets 系统
- 10.2 加载器
- 10.3 Bundle 分组
- 10.4 纹理缓存
- 10.5 RenderTexture
- 10.6 内存管理
第11章：滤镜与特效
- 11.1 Filter 基础
- 11.2 内置滤镜
- 11.3 自定义滤镜
- 11.4 滤镜性能
- 11.5 pixi-filters 扩展
- 11.6 后处理效果
第12章：遮罩与混合模式
- 12.1 遮罩类型
- 12.2 遮罩应用
- 12.3 Alpha 遮罩
- 12.4 混合模式
- 12.5 遮罩性能
- 12.6 复杂遮罩
第13章：Ticker 与动画
- 13.1 Ticker 机制
- 13.2 帧率控制
- 13.3 动画实现
- 13.4 GSAP 集成
- 13.5 时间轴
- 13.6 性能监控
第14章：性能优化实践
- 14.1 批处理
- 14.2 对象池
- 14.3 纹理优化
- 14.4 剔除策略
- 14.5 缓存优化
- 14.6 移动端优化
第15章：高级特性与扩展
- 15.1 自定义渲染
- 15.2 Geometry 与 Mesh
- 15.3 粒子系统
- 15.4 Spine 动画
- 15.5 框架集成（Vue/React）
- 15.6 WebGPU 与未来
📊 学习路径
基础入门（第1-3章）
│
▼
核心组件（第4-7章）
│
▼
进阶技能（第8-10章）
│
▼
高级特性（第11-13章）
│
▼
优化与扩展（第14-15章）🔧 环境要求
- Node.js: 16.0+
- 浏览器: Chrome 90+、Firefox 90+、Safari 14+
- PixiJS 版本: v7.x 或 v8.x
📦 配套资源
- 完整代码示例
- 练习题与答案
- 实战项目模板
📝 文档约定
- 代码示例：使用 TypeScript，兼容 JavaScript
- 版本说明：主要基于 PixiJS v7，标注 v8 差异
- ASCII 图示：用于说明概念和结构
开始学习之旅吧！ 🚀