你知道吗?从未见过一个强者,拥有一个简单的过往,解决不了的问题那就交给时间吧。努力是一个缓慢积累的过程,如果耐不住性子,沉不住气,获得的只能是焦虑,而非想要的结果。平心静气,韬光养晦,才能以图来日。
前言
上一篇文章PixiJS (一)、PixiJS 是什么?能做什么?不能做什么?🔥🔥 我们已经详细的介绍了PixiJS,本文开始安装和使用,直接进入主题吧。
你好 PixiJS
下面就先写一个简易的 PixiJS 的小例子🌰 ,咱们先了解一下,否则都第二篇文章了,小伙伴们还不知道 PixiJS 的例子长啥样。那么编写一个 PixiJS 应用程序需要哪几个步骤呢?
创建一个HTML文件
PixiJS 是一个运行在网页上的 JavaScript 库,所以首先需要一个HTML文件。PixiJS 可以渲染到很复杂的应用程序中,但是这里咱们只是写一个简单的例子,所以又一个空白的 HTML 文件就行
<!DOCTYPE html>
<html lang="en">
<head>
<title>PixiJs</title>
</head>
<body>
<h1> Hello PixiJS</h1>
</body>
</html>
加载PixiJS库
在我们有了一个空白页面以后,而我们需要创建一个 PixiJs 应用,需要先加载 PixiJs 库。这里咱们先引入一个官网的CDN。
<html lang="en">
<head>
<script src="https://pixijs.download/release/pixi.js"></script>
<title>PixiJs</title>
</head>
<body>
<h1> Hello PixiJS</h1>
</body>
</html>
创建应用程序
接下来就是启动 PixiJS,首先用一个脚本标记代替行 < h1 > Hello PixiJS
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://pixijs.download/release/pixi.js"></script>
<title>PixiJs</title>
</head>
<body>
<h1> Hello PixiJS</h1>
<script>
// 创建一个新的 PIXI.Application 实例
let app = new PIXI.Application({ width: 640, height: 360, backgroundColor: 0x1099bb });
</script>
</body>
</html>
JavaScript标签中其实就是创建了一个新的 PIXI.Application 实例,那 PIXI.Application 是什么呢?Pixi的介绍是:
方便创建一个 new PIXI.Application 类 这个类会自动创建渲染器, ticker 和 root 容器
详细介绍:PIXI.Application
将生成的视图添加到DOM中
创建完 PIXI.Application 类以后,他会以画布元素的形式呈现出来。接下来需要将这个 Canvas 元素添加到 web 页面的 DOM 中。
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://pixijs.download/release/pixi.js"></script>
<title>PixiJs</title>
</head>
<body>
<h1> Hello PixiJS</h1>
<script>
// 创建一个新的 PIXI.Application 实例
let app = new PIXI.Application({ width: 640, height: 360, backgroundColor: 0x1099bb });
// 将实例添加到 DOM 中
document.body.appendChild(app.view);
</script>
</body>
</html>
将文本添加到舞台
把 ”Hello PixiJS“ 用一个PIXI的文本对象创建出来,加入样式最后添加在画布上。
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://pixijs.download/release/pixi.js"></script>
<title>PixiJs</title>
</head>
<body>
<!-- <h1> Hello PixiJS</h1> -->
<script>
// 创建一个新的 PIXI.Application 实例
let app = new PIXI.Application({ width: 640, height: 360, backgroundColor: 0x1099bb });
// 将实例添加到 DOM 中
document.body.appendChild(app.view);
// 创建一个文本样式
const skewStyle = new PIXI.TextStyle({
fontFamily: 'Arial',
dropShadow: true,
dropShadowAlpha: 0.8,
dropShadowAngle: 2.1,
dropShadowBlur: 4,
dropShadowColor: '0x111111',
dropShadowDistance: 10,
fill: ['#ffffff'],
stroke: '#004620',
fontSize: 60,
fontWeight: 'lighter',
lineJoin: 'round',
strokeThickness: 12,
});
// 创建一个文本类型
const skewText = new PIXI.Text('Hello PixiJS', skewStyle);
// 将文本倾斜
skewText.skew.set(0.1, -0.1);
// 定义文本在舞台(app)中的位置
skewText.x = 10;
skewText.y = 100;
// 将文本添加到舞台(app)中
app.stage.addChild(skewText);
</script>
</body>
</html>
详情请查看:
PIXI.Text
PIXI.TextStyle
到此咱们的 Hello PixiJS 就算OK了。下面再尝试添加一下图片👇👇
将图片添加到舞台
下面将补充一下将图片添加到画布并且让它旋转起来。
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://pixijs.download/release/pixi.js"></script>
<title>PixiJs</title>
</head>
<body>
<!-- <h1> Hello PixiJS</h1> -->
<script>
// 创建一个新的 PIXI.Application 实例
let app = new PIXI.Application({ width: 640, height: 360, backgroundColor: 0x1099bb });
// 将实例添加到 DOM 中
document.body.appendChild(app.view);
// 创建一个文本样式
const skewStyle = new PIXI.TextStyle({
fontFamily: 'Arial',
dropShadow: true,
dropShadowAlpha: 0.8,
dropShadowAngle: 2.1,
dropShadowBlur: 4,
dropShadowColor: '0x111111',
dropShadowDistance: 10,
fill: ['#ffffff'],
stroke: '#004620',
fontSize: 60,
fontWeight: 'lighter',
lineJoin: 'round',
strokeThickness: 12,
});
// 创建一个文本类型
const skewText = new PIXI.Text('Hello PixiJS', skewStyle);
// 将文本倾斜
skewText.skew.set(0.1, -0.1);
// 定义文本在舞台(app)中的位置
skewText.x = 10;
skewText.y = 100;
// 将文本添加到舞台(app)中
app.stage.addChild(skewText);
// 创建一个图像精灵
const luFei = PIXI.Sprite.from('https://img1.baidu.com/it/u=2082729884,1583333066&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=711');
// 把精灵的原点设置为图片的中心点
luFei.anchor.set(0.5);
// 把精灵缩小0.5倍
luFei.scale.set(0.5);
// 把精灵定位在画布的中心
luFei.x = app.screen.width / 2;
luFei.y = app.screen.height / 2;
// 把图像精灵添加到舞台(app)上
app.stage.addChild(luFei);
// 为舞台添加一个更新循环的方法
app.ticker.add(() => {
// 让图像精灵每次更新旋转0.01度
luFei.rotation += 0.01;
});
</script>
</body>
</html>
详情请查看:
PIXI.Sprite
PIXI.Ticker
本章完