PixiJS快速上手教程5分钟用PixiJS v8跑通你的第一个旋转小兔子【免费下载链接】pixijsThe HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.项目地址: https://gitcode.com/gh_mirrors/pi/pixijsPixiJS v8 是当前最快、最灵活的 HTML5 2D WebGL 渲染引擎帮你用几行代码就能在浏览器里跑起动画。本 PixiJS 入门教程带你用 5 分钟搭建项目加载官方经典的旋转小兔子素材完成你的第一个 PixiJS 动画场景零图形基础也能轻松上手。为什么选择 PixiJS 作为你的第一个 2D 引擎如果你想在网页里做游戏、做交互视觉、做数据可视化PixiJS 几乎是最省心的选择。相比自己写 Canvas它帮你处理好了最复杂的部分双渲染后端自动使用 WebGL同时已支持下一代 WebGPU追求极致性能场景图模型用容器 精灵的层级结构组织画面像搭积木一样直观内置资源加载器一行Assets.load()就能加载图片、音频、精灵表✋完整的事件系统鼠标、触摸、滚轮开箱即用️动态纹理与滤镜模糊、位移、混合模式等特效内置齐全上图中这种一张大图切出多帧做动画的精灵表Sprite Sheet正是 PixiJS 的核心能力之一后面你会用到它的简化版——单张图片做旋转动画。安装 PixiJS最快配置方法准备工作只需 30 秒。确保已安装 Node.js然后在你的项目目录中执行npm install pixi.js如果你打算从零搭建一个完整项目官方提供了脚手架命令npm create pixi.jslatest 如果网络较慢可以直接克隆本仓库阅读全部源码与官方示例git clone https://gitcode.com/gh_mirrors/pi/pixijs所有示例都集中在 examples/ 目录边读边改是最快的学习方式。安装完成后你可以在浏览器控制台确认版本import { VERSION } from pixi.js; console.log(VERSION); // 8.x.x5分钟跑通PixiJS v8 第一个旋转小兔子下面这段代码是整个教程的核心它和仓库中 sprite_transform_rotation.ts 官方示例完全一致。虽然代码不长但覆盖了 PixiJS 的四大核心概念Application、纹理、精灵、Ticker 动画。import { Application, Assets, Sprite } from pixi.js; (async () { // 1️⃣ 创建应用并初始化 const app new Application(); await app.init({ background: #1099bb, resizeTo: window }); document.body.appendChild(app.canvas); // 2️⃣ 加载小兔子纹理 const texture await Assets.load(bunny.png); // 3️⃣ 创建精灵并摆到画面中心 const bunny new Sprite(texture); bunny.anchor.set(0.5); // 锚点设为中心绕自身旋转 bunny.x app.screen.width / 2; bunny.y app.screen.height / 2; app.stage.addChild(bunny); // 加入舞台 // 4️⃣ 注册每帧回调让兔子旋转 app.ticker.add((time) { bunny.rotation 0.1 * time.deltaTime; }); })();用 Vite 或任意本地服务器打开页面一只小兔子就会在屏幕中央平稳地转圈圈 逐行拆解四大核心概念概念对应代码一句话理解Applicationnew Application()应用的总管家封装了渲染器、舞台、心跳纹理 TextureAssets.load(...)一张贴图是图片进入 GPU 的形式精灵 Spritenew Sprite(texture)贴了图的矩形对象画面里的演员Tickerapp.ticker.add(...)每帧触发一次的心跳驱动一切动画这里有两个 v8 的贴心设计值得注意app.stage自动创建Application初始化时已自带一个根容器stage源码见 Application.ts无需手动 new Containerawait app.init()是异步的v8 把初始化拆成了构造 init两步方便按需配置这是和 v7 最大的用法差异之一理解 Ticker让动画平滑的关键代码里的time.deltaTime容易被新手忽略但它决定了动画的质量。deltaTime表示距上一帧的时间倍数60 帧时它约为 1如果某帧卡顿掉到 30 帧它就变成 2。把旋转量乘以它就等于告诉浏览器这一帧欠的进度补上从而得到帧率无关的平滑动画——不同设备上看这只兔子转起来的体感速度是一致的。Ticker 的完整实现可以看 Ticker.ts它还能按优先级注册多个回调后面做复杂游戏循环时会经常用到。把兔子放大调整锚点、缩放与容器小兔子默认只有 26×37 像素转起来有点小气改两行代码就行bunny.scale.set(8); // 放大 8 倍 bunny.anchor.set(0.5); // 必须否则围绕左上角转飞出去了新手高频坑anchor不设为0.5就做旋转对象会绕着自己的左上角公转而不是自转。当你需要背景 前景这样的分层画面时就引入Container容器把背景图和兔子分别放进同一个容器再对容器整体做变换子对象会跟随运动。上图这类横版素材1024×680就很适合作为场景背景仓库中 bg_plane.jpg 可直接参考使用。容器用法完整示例见 container_transform_pivot_basic.ts——那里面用 25 只小兔子排成方阵整个方阵一起旋转效果非常酷。跑起来之后常见问题排查Q1页面空白控制台报 CORS 错误本地直接双击 HTML 打开file://协议会导致纹理加载失败。请起一个本地服务器例如npx viteQ2兔子不转或转速忽快忽慢检查是否用了time.deltaTime参与运算直接写bunny.rotation 0.1在不同刷新率的屏幕上速度会不一致。Q3想换背景色初始化时改background参数即可支持#1099bb、[r, g, b]数组等形式颜色值的更多写法见 color/ 模块。下一步沿着 PixiJS 示例路线图继续旋转兔子只是起点。本仓库的 examples/ 目录就是最棒的自学路线图推荐按这个顺序进阶️加载与精灵assets_async.ts 学会并发加载多种资源交互事件events_click.ts、events_dragging.ts 让兔子可点击、可拖拽️动画序列animated-sprite_animation.ts 用精灵表播放逐帧动画就是开头那张战斗机图的玩法✍️矢量绘制graphics_basic_shapes.ts 用代码画图形不需要任何图片素材滤镜特效filters_blur.ts 给兔子加上模糊、发光等效果更深层的原理例如渲染循环与场景图架构仓库的 render-loop.md 和 scene-graph.mdx 两篇概念文档值得通读。从npm install pixi.js到兔子旋转起来你只用了 5 分钟——而这 5 分钟里学到的 Application、Texture、Sprite、Ticker 四个概念正是 PixiJS v8 全部能力的地基。现在换一张你自己的图片开始你的第一个 PixiJS 项目吧 【免费下载链接】pixijsThe HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.项目地址: https://gitcode.com/gh_mirrors/pi/pixijs创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考