PixiJS学习之Sprite类的使用详解.docx

第

PixiJS学习之Sprite类的使用详解

目录Sprite一些属性tintblendModeanchorSpriteSheet

Sprite

pixijs的Sprite类用于将一些纹理（Texture）渲染到屏幕上。

Sprite直译为精灵，是游戏开发中常见的术语，就是将一个角色的多个动作放到一个图片里，通过裁剪局部区域得到当前的角色状态图。

Sprite的纹理通常为图片。

创建Sprite不用new关键字，而是用PIXI.Sprite.from(url)，传一个图片地址字符串。

constwatermelon=PIXI.Sprite.from(./fe_watermelon.jpg);

watermelon.x=50;

watermelon.y=50;

app.stage.addChild(watermelon);

加载图片是异步的，如果图片较大，或网速不好，加载完成的时机就会比较晚了。

加载慢，其他不需要加载的普通图形（比如矩形）才不会等你，会先绘制。然后等到图片加载好后，再更新图形树绘制新的画面。

模拟网速慢，导致图片加载迟缓的效果：

一些属性

tint

tint（大概是色相的意思）会给图片着色：

img.tint=0x00FF00;

可以看到，西瓜变得更绿了。

这在游戏中可以利用绿色的tint表示角色中毒，或者用灰色的tint表示天色已晚。

blendMode

然后是渲染模式blendMode，目前只支持4种（基于WebGL）：

NORMAL：正常，即没有滤镜效果；ADD：给下面的像素叠加RGB通道；MULTIPLY：正片叠底，效果是：像是很多张幻灯片叠在一起，因为密度大导致颜色加深；SCREEN：滤色，效果是发亮；

anchor

上一节讲解修改图形属性时，我们提到了通过pivot修改变形（transform）的中心，但对于Sprite来说，额外提供了一个特殊的anchor属性。

这个属性的值范围为0～1，表示相对图片宽高位置的百分比，比如设置为(0.5,0.5)就是取宽高一半的位置作为旋转中心，也就是图片的中点。

img.anchor.set(x,y);

SpriteSheet

SpriteSheet是管理多个Sprite的类，就是前面说的将多个角色的状态放在一起。

优点是：

加快加载速度：因为多个sprit放在一个图片上了；提高批渲染效率：pixijs快的秘诀是使用尽量少的drawcall（CPU通知GPU绘制，比GPU绘制还耗时），将多个sprite放在一起有助于批渲染。

constatlasData={

//如何裁剪图片中的内容来生成多个sprite

frames:{

enemy1:{

frame:{x:0,y:0,w:32,h:32},

sourceSize:{w:32,h:32},

spriteSourceSize:{x:0,y:0,w:32,h:32},

enemy2:{

frame:{x:32,y:0,w:32,h:32},

sourceSize:{w:32,h:32},

spriteSourceSize:{x:0,y:0,w:32,h:32},

//图片元信息

meta:{

image:images/spritesheet.png,

format:RGBA8888,

size:{w:128,h:32},

scale:1,

//如果使用动画，动画帧对应的sprit

animations:{

enemy:[enemy1,enemy2],

//创建spritesheet

constspritesheet=newPIXI.Spritesheet(

PIXI.BaseTexture.from(atlasData.meta.image),

atlasData

//生成材质，这是异步的

awaitspritesheet.parse();

//播放动画

constanim=newPIXI.AnimatedSprite(spritesheet.animations.enemy);

anim.anim