PixiJS的Sprite類如何使用

本文小編為大家詳細介紹“PixiJS的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類如何使用”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。