您好,登錄后才能下訂單哦!
本文小編為大家詳細(xì)介紹“PixiJS的Sprite類如何使用”,內(nèi)容詳細(xì),步驟清晰,細(xì)節(jié)處理妥當(dāng),希望這篇“PixiJS的Sprite類如何使用”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來學(xué)習(xí)新知識吧。
pixijs 的 Sprite 類用于將一些紋理(Texture)渲染到屏幕上。
Sprite 直譯為 “精靈”,是游戲開發(fā)中常見的術(shù)語,就是將一個角色的多個動作放到一個圖片里,通過裁剪局部區(qū)域得到當(dāng)前的角色狀態(tài)圖。
Sprite 的紋理通常為圖片。
創(chuàng)建 Sprite 不用 new 關(guān)鍵字,而是用 PIXI.Sprite.from(url)
,傳一個圖片地址字符串。
const watermelon = PIXI.Sprite.from('./fe_watermelon.jpg'); watermelon.x = 50; watermelon.y = 50; app.stage.addChild(watermelon);
加載圖片是異步的,如果圖片較大,或網(wǎng)速不好,加載完成的時機(jī)就會比較晚了。
加載慢,其他不需要加載的普通圖形(比如矩形)才不會等你,會先繪制。然后等到圖片加載好后,再更新圖形樹繪制新的畫面。
模擬網(wǎng)速慢,導(dǎo)致圖片加載遲緩的效果:
tint (大概是 “色相” 的意思)會給圖片著色:
img.tint = 0x00FF00;
可以看到,西瓜變得更綠了。
這在游戲中可以利用綠色的 tint 表示角色中毒,或者用灰色的 tint 表示天色已晚。
然后是渲染模式 blendMode,目前只支持 4 種(基于 WebGL):
NORMAL:正常,即沒有濾鏡效果;
ADD:給下面的像素疊加 RGB 通道;
MULTIPLY:正片疊底,效果是:像是很多張幻燈片疊在一起,因為密度大導(dǎo)致顏色加深;
SCREEN:濾色,效果是發(fā)亮;
上一節(jié)講解 “修改圖形屬性” 時,我們提到了通過 pivot 修改變形(transform)的中心,但對于 Sprite 來說,額外提供了一個特殊的 anchor 屬性。
這個屬性的值范圍為 0~1,表示相對圖片寬高位置的百分比,比如設(shè)置為 (0.5, 0.5)
就是取寬高一半的位置作為旋轉(zhuǎn)中心,也就是圖片的中點(diǎn)。
img.anchor.set(x, y);
SpriteSheet 是管理多個 Sprite 的類,就是前面說的將多個角色的狀態(tài)放在一起。
優(yōu)點(diǎn)是:
加快加載速度:因為多個 sprit 放在一個圖片上了;
提高批渲染效率:pixijs 快的秘訣是使用盡量少的 draw call(CPU 通知 GPU 繪制,比 GPU 繪制還耗時),將多個 sprite 放在一起有助于批渲染。
const atlasData = { // 如何裁剪圖片中的內(nèi)容來生成多個 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, }, // 如果使用動畫,動畫幀對應(yīng)的 sprit animations: { enemy: ["enemy1", "enemy2"], }, }; // 創(chuàng)建 spritesheet const spritesheet = new PIXI.Spritesheet( PIXI.BaseTexture.from(atlasData.meta.image), atlasData ); // 生成材質(zhì),這是異步的 await spritesheet.parse(); // 播放動畫 const anim = new PIXI.AnimatedSprite(spritesheet.animations.enemy); anim.animationSpeed = 0.1666; anim.play(); app.stage.addChild(anim);
讀到這里,這篇“PixiJS的Sprite類如何使用”文章已經(jīng)介紹完畢,想要掌握這篇文章的知識點(diǎn)還需要大家自己動手實踐使用過才能領(lǐng)會,如果想了解更多相關(guān)內(nèi)容的文章,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。