通过一个简单的demo 对Pixi有个了解,然后介绍下Pixi的几个核心模块,后面陆续更新具体模块的知识,后续所有文章demo 均以
Typescript
作为开发语言
快速产出一个可见效果demo
创建一个画布,添加一个精灵,并让精灵可以持续动起来
- 初始化画布的大小
确定画布的大小,demo是继承了Application,所以只要调用
super({
width?,
height?,
backgroudColor?
...
})
复制代码
当然option 可以为{},Application有默认的宽度和高度(800*600
),最关键的一步document.body.append(this.view)
创建canvas 并添加到html中
- 创建一个精灵
创建一个精灵有很多中方法,这里先说一种,下面会详细介绍,PIXI.Sprite.from(spritePath)
- 添加到舞台
stage.addChild(displayObj)
- 让精灵动起来
class App extends PIXI.Application {
bunnySprite = PIXI.Sprite.from('assets/bunny.png')
constructor() {
super({
width: 800,
height: 600,
backgroundColor: 0x1099bb
})
this.bootStrap()
}
bootStrap() {
document.body.append(this.view)
this.renderComponent()
this.startCustomTicker()
}
renderComponent() {
this.stage.addChild(this.bunnySprite)
}
startCustomTicker() {
let elapsed = 0.0;
let time = Date.now()
this.ticker.add((delta) => {
elapsed += delta;
this.bunnySprite.x = 100.0 + Math.cos(elapsed / 50.0) * 100.0;
});
}
}
复制代码
知识点
创建Sprite的方法
- let sprite = new PIXI.Sprite(PIXI.Texture.from(imgPath))
- let sprite = PIXI.Sprite.from(imgPath)
- 多个ticker的场景,this.ticker.add(() => {})
import * as PIXI from 'pixi.js'
class App extends PIXI.Application {
bunnySprite = PIXI.Sprite.from('assets/bunny.png')
bunnySprite2 = new PIXI.Sprite(PIXI.Texture.from('assets/bunny.png'))
constructor() {
super({
width: 800,
height: 600,
backgroundColor: 0x1099bb
})
this.bootStrap()
this.renderComponent()
this.startCustomTicker()
}
bootStrap() {
document.body.append(this.view)
}
renderComponent() {
this.stage.addChild(this.bunnySprite)
this.stage.addChild(this.bunnySprite2)
}
startCustomTicker() {
let elapsed = 0.0;
let time = Date.now()
this.ticker.add((delta) => {
elapsed += delta;
this.bunnySprite.x = 100.0 + Math.cos(elapsed / 50.0) * 100.0;
});
this.bunnySprite2.y = 200
this.ticker.add((delta) => {
elapsed += delta;
this.bunnySprite2.x = 100.0 + Math.cos(elapsed / 50.0) * 100.0;
});
}
}
(window as any).debugApp = new App()
复制代码
- 其他
pixi 核心模块
pixi 是一个模块化的渲染引擎,pixi中的展示,更新,生成的现实对象都是依赖于pixi的模块化组件。 另外,pixi提供了基于模块化自定义工具 PixiJs Customize Tool
主要组件
这里只是简单的介绍,对pixi整体模块有个大概的印象,后面会展开对每个模块详细的分析
组件 | 描述 |
---|---|
sdfs | sdfs |
Renderer@pixi/core |
pixi的核心就是这个renderer,它负责展示场景图,并将其绘制在屏幕上,基于webgl |
Container@pixi/display |
创建场景图的主要现实对象display object,我们常用的sprite, graphyics,text都是基于container<br |
Loader@pixi/loader |
加载器,异步的,用来夹在图片,音频等资源 |
Ticker@pixi/ticker |
Ticker提供了基于时钟的定期的callback,项目的中更新逻辑一般情况下会在每个时钟 周期(每一帧)作出响应,同一时间可以以欧多个ticker存在 |
Application@pixi/app |
Application是一个简单的封装,把Loader, Ticker and Renderer等做一层封装,方便项目的 开发 |
Interaction@pixi/interaction |
事件交互的封装,包含了touch,click相关的事件, |
Accessibility@pixi/accessibility |
用于实现键盘和屏幕阅读器的可访问性的工具 |