番禺 大石网站建设,网站设计与开发公司,短期培训学什么好,没有版权的图片网站大家好#xff0c;我是前端西瓜哥。今天来学习 pixijs 的 Sprite。
Sprite
pixijs 的 Sprite 类用于将一些纹理#xff08;Texture#xff09;渲染到屏幕上。
Sprite 直译为 “精灵”#xff0c;是游戏开发中常见的术语#xff0c;就是将一个角色的多个动作放到一个图片…大家好我是前端西瓜哥。今天来学习 pixijs 的 Sprite。
Sprite
pixijs 的 Sprite 类用于将一些纹理Texture渲染到屏幕上。
Sprite 直译为 “精灵”是游戏开发中常见的术语就是将一个角色的多个动作放到一个图片里通过裁剪局部区域得到当前的角色状态图。
Sprite 的纹理通常为图片。
创建 Sprite 不用 new 关键字而是用 PIXI.Sprite.from(url) 传一个图片地址字符串。
const watermelon 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 属性。
这个属性的值范围为 01表示相对图片宽高位置的百分比比如设置为 (0.5, 0.5) 就是取宽高一半的位置作为旋转中心也就是图片的中点。
img.anchor.set(x, y);SpriteSheet
SpriteSheet 是管理多个 Sprite 的类就是前面说的将多个角色的状态放在一起。
优点是
加快加载速度因为多个 sprit 放在一个图片上了提高批渲染效率pixijs 快的秘诀是使用尽量少的 draw callCPU 通知 GPU 绘制比 GPU 绘制还耗时将多个 sprite 放在一起有助于批渲染。
const atlasData {// 如何裁剪图片中的内容来生成多个 spriteframes: {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,},// 如果使用动画动画帧对应的 spritanimations: {enemy: [enemy1, enemy2],},
};// 创建 spritesheet
const spritesheet new PIXI.Spritesheet(PIXI.BaseTexture.from(atlasData.meta.image),atlasData
);// 生成材质这是异步的
await spritesheet.parse();// 播放动画
const anim new PIXI.AnimatedSprite(spritesheet.animations.enemy);
anim.animationSpeed 0.1666;
anim.play();
app.stage.addChild(anim);结尾
我是前端西瓜哥欢迎关注我学习更多前端知识。
