在大多数情况下，我们选择将图片用Texture Packer生成json文件，再将json加载到纹理缓存中，根据图片的帧ID生成精灵，此为前提
首先，生成pixi对象，加载到DOM中去
let app = new PIXI.Application({
width: 256, // default: 800
height: 256, // default: 600
antialias: true, // default: false
transparent: false, // default: false
resolution: 1 // default: 1
})
然后document.appendChild(app.view)加载到dom树中
此时可以使用app.renderer.backgroundColor = 0x031639来改变背景色
app.renderer.autoResize = true
app.renderer.resize(512,512)
用来在保证宽高格式正确的情况下改变大小
如果想让canvas占据整个窗口，把下面这些代码放在css文档里
app.renderer.view.style.position = 'absolute'
app.renderer.view.style.display = 'block'
app.renderer.autoResize = true
app.renderer.resize(window.innerWidth,window.innerHeight)
同时把padding和margin都设置成0
* {padding: 0; margin: 0}
所有的精灵都得加载舞台上才能显示，也就是app.stage，使用
PIXI.loader.add('images/treasureHunter.json').load(setup)来加载纹理贴图集，再用
let id = PIXI.loader.resources['images/treasureHunter.json'].textures
let sprite = new PIXI.Sprite(id['framId.png'])
这样我们就从纹理贴图集中创建好了精灵，再把精灵加到舞台上
app.stage.addChild(sprite)
就能从界面上看到创建的精灵了
这里有几个问题：
1.精灵肯定不止一个，不能堆叠在一起，所以得设置一下他的位置
sprite.x =11
sprite.y = 22
或者sprite.position.set(11,22)
同理：调整大小是这样：sprite.width = 520；sprite.height = 520
进行缩放是这样：sprite.scale.x = 2；sprite.scale.y = 1或者sprite.scale.set(2,1)
旋转是这样：sprite.rotation = 0.5
设置锚点是这样： sprite.anchor.x = 0.5;sprite.anchor.y=0.5 或者sprite.anchor.set(0.5,0.5) 注意sprite.pivot.set(32,32)也可以设置锚点
2.精灵太多时便于管理以及场景切换我们可以使用容器Container
let animals = new PIXI.Container()
然后把精灵放在容器里
animals.addChild(cat)
animals.addChild(dog)
最后把容器放在舞台上就可以了
app.stage.addChild(animals)
使用容器的visible属性可以把容器隐藏，来达到切换的效果，比如animals.visible = false
当我们使用容器的时候就要注意局部位置和全局位置的问题，使用
cat.getGlobalPosition().x 可以获得cat精灵的全局位置
cat.toLocal(cat.position,dog).x 可以获得猫相对于狗的局部位置
3.精灵显示出来了肯定要让他动起来
如何让精灵动起来呢，使用Pixi的ticker，也就是一个叫游戏循环的东西。往前翻，我们再加载纹理缓存的时候用的是
PIXI.loader.add(...).load(setup)
也就是说当我们加载完了回去调用一个setup函数，我们可以在setup中去调用Pixi给我们提供的ticker，为了更好的调整速度，我们给我们的精灵添加两个速度属性：vx,vy
function setup(){
//注意这里我们加载完了缓存，因为使用纹理贴图集，所以我们在这还得创建一下精灵
let id = new PIXI.loader.resoures('images/treasureHunter.json').textures
cat = new PIXI.Sprite(id['framId.png'])
cat.vx = 0
cat.vy = 0
app.stage.addChild(cat)
//为了更好的缓存游戏状态我们多创建一个state函数
state = play
//调用ticker,1秒钟1次
spp.ticker.add(delta => gameLoop(delta))
}
function gameLoop(delta){
//这里就可以存放更新游戏状态
state(delata)
}
function play(delta) {
//移动1px每帧
cat.vx = 1
cat.x += cat.vx
}
这样就实现了精灵的移动，delta代表帧的部分延迟，ticker是60帧的
4.监视加载进程
PIXI.loader.add(...).load(setup).on('progress',loadProgressHandler)
function loadProgressHandler(loader,resource) {
console.log('loading:' + resource.url)
console.log('progress:' + loader.progress + '%')
}
5.键盘响应
教程建议我们自定义一个keyboard函数来监听和捕捉键盘事件
function(keyCode) {
let key = {}
key.code = keyCode
key.isDown = false
key.isUp = true
key.press = undefined
key.release = undefined
//监听捕捉按下去
key.downHandler = event => {
if(event.keyCode === key.code) {
if(key.isUp && key.press) key.press()
key.isDown = true
key.isUp =false
}
event.preventDefault()
}
//监听捕捉弹起来
key.upHandler = event => {
if(event.keyCode === key.code){
if(key.isDown && key.release) key.release()
key.isDown = false
key.isUp = true
}
event.preventDefault()
}
window.addEventListener('keydown',key.downHandler.bind(key),false)
window.addEventListener('keyup',key.upHandler.bind(key),false)
return key
}
这样我们只要定义键盘对象
let keyObject = keyboard(assiiKeyCodeNumber)
在给他赋值press和release方法就行
keyObject.press = () => {}
keyObject.release = () => {}
5.有Pixi绘制图形
和Canvas Drawing API几乎一致，所有形状的初始化都是先创造出一个Pixi的Graphics对象
let rectangle = new PIXI.Graphics()
rectangle.lineStyle(4,0xFF3300,1) //4px宽alpha为1的红色轮廓
rectangle.beginFill(0x66CCFF) //画笔的颜色
rectangle.drawRect(0,0,64,64) //矩形的范围
rectangle.endFill() //结束绘制
rectangle.x = 170
rectangle.y = 170
app.stage.addChild(rectangle)
这样就能画出一个矩形
画圆用drwaCircle(x,y,radius)
画椭圆用drwaEllipsd(x,y,width,height)
画圆角矩形用drawRoundedRect(x,y,width,height,cornerRadius)
画线段和多边形参考教程
6.显示文本
let style = new PIXI.TextStyle({
})
let message = new PIXI.Text('hello',style)
message.position.set(54,96)
app.stage.addChild(message)