Pixi.js 游戏开发教程
Pixi.js 是基于 WebGL 的超快 2D 渲染引擎,支持 Canvas 回退,广泛应用于游戏、交互式内容与广告。本教程共 28 章,从零基础到完整游戏项目,涵盖渲染、动画、物理、UI、网络等核心主题。
🟢 基础入门(第 1-10 章)
| 章节 | 标题 | 难度 |
|---|---|---|
| 01 | Pixi.js 简介与环境搭建 | 🟢 |
| 02 | Application 与渲染流程 | 🟢 |
| 03 | Sprite 与纹理 | 🟢 |
| 04 | 容器与场景图 | 🟢 |
| 05 | 图形绘制(Graphics) | 🟢 |
| 06 | 文本渲染(Text / BitmapText) | 🟢 |
| 07 | 动画基础(Ticker) | 🟢 |
| 08 | 输入交互(事件系统) | 🟢 |
| 09 | 精灵表与帧动画(Spritesheet) | 🟡 |
| 10 | 资源加载与管理(Assets) | 🟡 |
🟡 进阶开发(第 11-20 章)
| 章节 | 标题 | 难度 |
|---|---|---|
| 11 | 容器嵌套与变换 | 🟡 |
| 12 | 视口与相机系统 | 🟡 |
| 13 | 碰撞检测 | 🟡 |
| 14 | Tilemap 地图(Tiled 集成) | 🟡 |
| 15 | 粒子系统(@pixi/particle-emitter) | 🟡 |
| 16 | 滤镜系统(Filters) | 🟡 |
| 17 | 场景管理与切换 | 🟡 |
| 18 | UI 系统(按钮 / 血条 / 对话框) | 🟡 |
| 19 | 物理引擎集成(Matter.js) | 🔴 |
| 20 | 声音集成(Howler.js) | 🟡 |
🔴 高级主题与项目(第 21-28 章)
| 章节 | 标题 | 难度 |
|---|---|---|
| 21 | 性能优化 | 🔴 |
| 22 | 移动端适配与触控 | 🟡 |
| 23 | 多人网络(WebSocket) | 🔴 |
| 24 | 存档系统(LocalStorage) | 🟡 |
| 25 | 调试与测试 | 🟡 |
| 26 | 构建与发布(Vite / Webpack) | 🟡 |
| 27 | 完整项目:横版卷轴射击游戏 | 🔴 |
| 28 | 完整项目:塔防游戏 | 🔴 |
技术栈速查
| 需求 | 推荐方案 |
|---|---|
| 渲染引擎 | Pixi.js v8 |
| 物理引擎 | Matter.js / Planck.js |
| 声音 | Howler.js |
| 地图编辑 | Tiled |
| 构建工具 | Vite |
| 粒子效果 | @pixi/particle-emitter |