脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → PixiJS Sprite类

PixiJS学习之Sprite类的使用详解

 更新时间：2023年02月20日 09:45:55   作者：前端西瓜哥  
Sprite 直译为 “精灵”，是游戏开发中常见的术语，就是将一个角色的多个动作放到一个图片里，通过裁剪局部区域得到当前的角色状态图。本文主要介绍了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 属性。

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

img.anchor.set(x, y);

SpriteSheet

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

优点是：

  • 加快加载速度：因为多个 sprit 放在一个图片上了；
  • 提高批渲染效率：pixijs 快的秘诀是使用尽量少的 draw call（CPU 通知 GPU 绘制，比 GPU 绘制还耗时），将多个 sprite 放在一起有助于批渲染。
const atlasData = {
  // 如何裁剪图片中的内容来生成多个 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
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);

到此这篇关于PixiJS学习之Sprite类的使用详解的文章就介绍到这了,更多相关PixiJS Sprite类内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • jquery实现左右滑动式轮播图

    jquery实现左右滑动式轮播图

    这篇文章主要为大家详细介绍了jquery实现左右滑动式轮播图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-03-03
  • JS/CSS实现字符串单词首字母大写功能

    JS/CSS实现字符串单词首字母大写功能

    这篇文章主要介绍了JS/CSS实现字符串单词首字母大写功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-09-09
  • JavaScript webpack5配置及使用基本介绍

    JavaScript webpack5配置及使用基本介绍

    webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。这篇文章主要介绍了JavaScript webpack5配置及使用基本介绍
    2022-09-09
  • 微信小程序实现搜索指定景点周边美食、酒店

    微信小程序实现搜索指定景点周边美食、酒店

    这篇文章主要为大家详细介绍了微信小程序实现搜索指定景点周边美食、酒店的功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-05-05
  • fetch 使用及如何接收JS传值

    fetch 使用及如何接收JS传值

    这篇文章主和要介绍了fetch 使用及如何接收JS传值,文中给大家提到了fetch基本使用方式和接收js传值的使用方式,需要的朋友可以参考下
    2017-11-11
  • 原生js实现倒计时功能（多种格式调用）

    原生js实现倒计时功能（多种格式调用）

    本文主要介绍了原生js实现倒计时（多种格式调用）的方法，具有一定的参考价值，下面跟着小编一起来看下吧
    2017-01-01
  • JavaScript实现前端倒计时效果

    JavaScript实现前端倒计时效果

    这篇文章主要为大家详细介绍了JavaScript实现前端倒计时效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-02-02
  • 微信小程序表单验证功能完整实例

    微信小程序表单验证功能完整实例

    这篇文章主要介绍了微信小程序表单验证功能,结合完整实例形式分析了微信小程序完成表单验证功能所涉及的视图与逻辑操作技巧,需要的朋友可以参考下
    2017-12-12
  • JS使用getComputedStyle()方法获取CSS属性值

    JS使用getComputedStyle()方法获取CSS属性值

    经常会用到js来获取元素的CSS样式，由于方法众多，在下面的文章中为大家详细整理下
    2014-04-04
  • js获取所有checkbox的值的简单实例

    js获取所有checkbox的值的简单实例

    下面小编就为大家带来一篇js获取所有checkbox值的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05

最新评论