Pixi.js学习（一） Pixi的安装与配置

最新推荐文章于 2025-03-26 15:01:14 发布

原创最新推荐文章于 2025-03-26 15:01:14 发布

· 2.3k 阅读

15 ·

版权

齐尹秦

文章标签：

#学习 #javascript #前端 #开发语言

Pixi.js学习专栏收录该内容

8 篇文章

订阅专栏

前言

Pixi是一个非常快的2D sprite渲染引擎，可以帮助我们显示、动画和管理交互式图形，这样就可以轻松地使用JavaScript和其他HTML5技术制作游戏和应用程序。

此系列文章需要：HTML ，JavaScript 基础知识

学习目的：使用Pixi制作一个小游戏

操作系统：

版本   Windows 11 家庭中文版
版本   23H2
安装日期   ‎2024/‎5/‎28
操作系统版本   22631.3593
体验   Windows Feature Experience Pack 1000.22700.1003.0

一、Pixi 下载与安装

Pixi官网：Pixi.js中文网

第一步：下载pixi.mini.js文件

官方下载网址：Releases · pixijs/pixijs · GitHub

CSND下载链接：

https://download.youkuaiyun.com/download/qq_56376552/89379295?spm=1001.2014.3001.5501

记住当前下载路径，后面需要用到。

二、Pixi.js HBuilderX 集成环境

2.1 HBuilderX 集成环境的安装与配置：

此步骤过长，因此另开一篇文章

文章链接：优快云

2.2 测试集成环境准备：

鼠标点击左上方的文件点击新建点击项目：

鼠标点击 普通项目 选择 基本HTML项目

输入项目名称：测试环境

最后点击右下角的创建

此时在项目管理器生成一个名为：测试环境 的项目鼠标点击一下展开此项目：

将之前一、Pixi 下载与安装下载的 pixi.min.js 文件

移动到 HbuilderX 测试环境项目 中 js 文件夹下

具体操作：

文件资源管理器中点击 复制：

返回 HbuilderX 点击粘贴

此时 pixi.min.js 文件 已经存在于测试环境项中

2.3 编写程序测试集成环境：

在index.html文件 <body></body> 新加以下代码：

<script src='../js/pixi.min.js'></script>
	<script type="text/javascript">
			
		var app=new PIXI.Application(800,600);
		document.body.appendChild(app.view);
			
	</script>

如图所示：

运行方式一：

工具栏运行选择 保存自动刷新浏览器(仅内置浏览器) 运行代码：

等待内置浏览器下载完成：

再点击预览

可以看到生成了一个 800 X 800 的小黑块

运行环境正常

运行方式二：

工具栏 运行>运行到浏览器>Edge 运行代码：

可以看到同样生成了一个 800 X 800 的小黑块

运行环境正常

三、 VS Code集成环境

3.1 下载安装 Node.js

Node.js 官方下载网站：Node.js — Run JavaScript Everywhere

第一步：点击：Downloads Node.js(LTS)下载：

第二步：点击 Next

双击刚刚下载的文件安装Node.js

勾选 I accept... 点击 Next

点击 Change 更改到你想要的路径 然后点击 Next

然后点击 Next

勾选同意 Automatically install。。。（自动安装所需要的工具）

然后点击 Next

最后点击 insteall

点击是

等待进度条走完

点击 finish 至此Node.js安装完成：

3.2 下载安装VS Code

此步骤过长，因此另开一篇文章

文章链接：优快云

3.3 配置 VS Code

为VS Code 安装所需扩展

chinese 扩展

点击左边工具栏扩展

在左上方搜索栏搜索 Chinese 并回车

点击 install

下载完成以后点击 重启 VS Code

以同样的步骤安装：Live Server 插件（轻量级web服务器）

和 Code Runner 插件：（可以运行JavaScript和其它语言代码）

安装完成以后会在扩展中显示

插件安装完毕

3.4 创建测试环境项目：

VSCode中创建测试项目比较复杂故不再创建项目

直接使用上文在HBuilderX中创建的测试项目

测试项目优快云下载地址：

https://download.youkuaiyun.com/download/qq_56376552/89379339?spm=1001.2014.3001.5501

下载测试环境.zip 压缩包放到桌面并解压：

打开 VS Code 工具栏点击文件 将文件夹添加到工作区

选择桌面测试环境点击添加

信任此文件夹点击是

在左边工具栏中找到资源管理器 index.html

运行方式一：

点击运行 启动调试

点击 web应用 Edge

运行结果

可以看到生成了一个 800 X 800 的小黑块

运行环境正常

运行方式二：

在 index.html 页面右键

点击 open with the sever

同意 vscode 通过防火墙以后直接运行

可以看到同样生成了一个 800 X 800 的小黑块

运行环境正常

总结：

本文 Pixi的安装与配置就此结束，

如有错误或者网址更新，步骤更改，文章错误欢迎私信作者进行更正，

感谢您的观看。

Pixi.js学习 （一） Pixi的安装与配置

目录：

前言

一、Pixi 下载与安装

二、Pixi.js HBuilderX 集成环境

2.1 HBuilderX 集成环境的安装与配置：

2.2 测试集成环境准备：

2.3 编写程序测试集成环境：

运行方式一：

运行方式二：

三、 VS Code集成环境

3.1 下载安装 Node.js

3.2 下载安装VS Code

3.3 配置 VS Code

3.4 创建 测试环境项目：

运行方式一：

运行方式二：

总结：

Pixi.js学习（一） Pixi的安装与配置

3.4 创建测试环境项目：