---

前言

为了提高作者的代码编辑水品，作者在使用博客的时候使用的集成工具为 HBuilderX。

下文所有截图使用此集成工具，读者随意。

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

操作系统：

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

---

一、创建第一个简单的Pixi 项目：

1.1、创建项目目录结构

HBuilderX可直接创建 基本的HTML项目

然后移入 pixi.min.js 文件  如图所示

1.2、创建应用

//1.创建应用窗口

var app = new PIXI.Application(800,600);

//2.将应用窗口添加到页面中

document.body.appendChild(app.view);

注释：

new PIXI.Application();  表示创建一个窗口

参数 800，600 表示窗口的宽和高

app 为当前窗口起的别名。

举例：（只放主要代码）

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

如图所示：

运行结果：

1.3、创建图片元素

//创建图片元素

var plane = new PIXI.Sprite.fromImage("图片路径");

图片路径：1.网络路径。2.本地路径

//将图片元素添加到游戏窗口内部。

app.stage.addChild(plane);

举例：

var hello = new PIXI.Sprite.fromImage("img/hello.jpg");
app.stage.addChild(hello);

如图所示：

运行结果：

1.4、文本元素

在窗口中显示一段文字

//创建文本元素

var score = new PIXI.Text("得分：0");

//在应用窗口中添加元素

app.stage.addChild(score);

1.4.1 文本颜色

颜色：使用十六进制编码表来设置颜色

score.style.fill = "#fcff45";

score：要设置颜色的元素名

style：风格

fill：填充颜色

可以随意敲出来一个颜色，例如"#ff2222",Alt+鼠标左键 进入色卡，设置颜色。

1.4.2 文本位置

//设置文本元素在x轴位置

score.x = 590;

//设置文本元素在y轴位置

score.y = 20;

举例：

var hi = new PIXI.Text("Hello World!") //创建 Hello World! 文本
app.stage.addChild(hi) //添加元素
hi.style.fill="#00ffff" //设置颜色
hi.x=200;//x 坐标
hi.y=250; //y 坐标

如图所示：

运行结果：

二、简单的项目 实战：

2.1 习题一：

在尽量不参考教程的情况下创建下列应用：

1. 生成一个1152 x 720 应用 将应用窗口添加到页面中
2. 创建图片元素 将图片元素添加到应用窗口内部
3. 在窗口中显示 你好，世界！
4. 将颜色设置为 黑色  位置设置为 x：200，y：250

运行截图：

参考代码：

<script type="text/javascript">
		var app=new PIXI.Application(1152,720)
		document.body.appendChild(app.view)
		var h=new PIXI.Sprite.fromImage("img/hello.jpg")
		app.stage.addChild(h)
		var hello=new PIXI.Text("你好，世界！")
		app.stage.addChild(hello)
		hello.style.fill="#000000"
		hello.x=200
		hello.y=250
			
</script>

习题一 项目源码地址：

https://download.csdn.net/download/qq_56376552/89382071?spm=1001.2014.3001.5503

---

总结：

本文 创建Pixi应用和stage 就此结束，

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

感谢您的观看。