本文简介

带尬猴，我是德育处主任

当今的Web开发中，图形和动画已经成为了吸引用户注意力的重要手段之一。而 Pixi.js 作为一款高效、易用的2D渲染引擎，已经成为了许多开发者的首选~~（我吹的）~~。本文将为工友们介绍PixiJS的基础知识和使用方法，希望可以和工友们**快速光速入门**，掌握 Pixi.js 的用法。

实际工作中我还没有用上 Pixi.js，本文只是记录我的学习过程。将我认为入门时需要掌握的知识点记录下来。所以，你们懂的，太难的问题我回答不上，或者我会用拆特鸡皮蹄敷衍你。

环境搭建

本文将使用原生三件套的方式讲解如何使用 Pixi.js，你可以根据自己的需求搭建环境。

我使用 VS Code 开发，并在 VS Code 安装了 Live Server插件^[2] 方便启动本地服务。

创建好项目后就需要安装 Pixi.js，常用的方式有 CDN 和 NPM，选其中一种就行。

本文使用 Pixi.js 7.2 版本

CDN

本文为了和各位工友一起快速上手 Pixi.js ，所以会使用 CDN 的方式引入 Pixi.js。

<script src="https://pixijs.download/release/pixi.js"></script>
复制代码

在实际项目开发中，你最好还是将 Pixi.js 保存到你的项目中再引入。

根据你的项目需求选择对应的 Pixi.js 版本：

眨个眼就学会了 Pixi.js相关推荐

使用Pixi.js编写JavaScript网页小游戏
Pixi.js中文网https://pixijs.huashengweilai.com/PixiJSOfficial site for PixiJS, The HTML Creation Engine ...
(原)用pixi.js 实现方块阵点击后原地自转效果
源码各位,请教一个问题,我这个还有BUG,我是想实现,点击一下可以停止转动,然后再点一下重新转动.而不是一直加速,有没有什么好办法? PS:问题已经解决,谢谢评论的大神@Antineutrino ...
PIXI.JS兼容微信小游戏
来自:PIXI兼容微信小游戏 - 天之道利而不害 - 博客园 PIXI兼容微信小游戏首先导入官方的weapp-adapter,然后导入pixi.min.js,微信小程序使用ES6的module引用模 ...
数独动态解题演示小网站 - 基于Vue/pixi.js/Flask
解数独不难,但如果能动态演示解题步骤就更好了. 参考:最难数独的快速解法 - python https://www.jianshu.com/p/1b2ee6539d4b 功能读取公开网站的数独题目 ...
pixi.js 制作流星雨效果
pixi.js 制作流星雨效果 //创建流星们creatShootingStart(){let startNum = 25;//个数this.startSp = [];//星星们的集合//流星消失的 ...
pixi.js 总结
我的博客简单简洁可能表达不清. 如有想法, 敬请留言.谢谢! 群:881784250 https://github.com/ccaleb/endless-runner/tree/master/jav ...
pixi.js v5 快速了解
pixi.js 追求简单, 性能,高价值. pixi.js v5比v4代码减少了20%,更加模块化,更加优雅 pixi.js一步一脚印,版本持续稳定的更新, 深入学习pixi.js的话,你将收获很多 ...
Pixi.js TypeScript Webpack
创建项目,使用npm init初始化项目,也可使用npm init -y使用默认配置初始化项目. $ mkdir pixits $ npm init 创建文件结构 $ mkdir pixits &am ...
uniapp引入使用pixi.js遇到的坑
如果没有package.json的话,就先初始化一下 npm init -y 然后npm下载 npm install --save pixi.js 检查一下是什么版本 npm ls pixi.js 我 ...

眨个眼就学会了 Pixi.js

环境搭建

CDN

眨个眼就学会了 Pixi.js相关推荐

最新文章

热门文章