PixiJS學(xué)習(xí)之Sprite類的使用詳解
Sprite
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
tint (大概是 “色相” 的意思)會給圖片著色:
img.tint = 0x00FF00;
可以看到,西瓜變得更綠了。
這在游戲中可以利用綠色的 tint 表示角色中毒,或者用灰色的 tint 表示天色已晚。
blendMode
然后是渲染模式 blendMode,目前只支持 4 種(基于 WebGL):
- NORMAL:正常,即沒有濾鏡效果;
- ADD:給下面的像素疊加 RGB 通道;
- MULTIPLY:正片疊底,效果是:像是很多張幻燈片疊在一起,因為密度大導(dǎo)致顏色加深;
- SCREEN:濾色,效果是發(fā)亮;
anchor
上一節(jié)講解 “修改圖形屬性” 時,我們提到了通過 pivot 修改變形(transform)的中心,但對于 Sprite 來說,額外提供了一個特殊的 anchor 屬性。
這個屬性的值范圍為 0~1,表示相對圖片寬高位置的百分比,比如設(shè)置為 (0.5, 0.5)
就是取寬高一半的位置作為旋轉(zhuǎn)中心,也就是圖片的中點(diǎn)。
img.anchor.set(x, y);
SpriteSheet
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);
到此這篇關(guān)于PixiJS學(xué)習(xí)之Sprite類的使用詳解的文章就介紹到這了,更多相關(guān)PixiJS Sprite類內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
js剪切板應(yīng)用clipboardData實(shí)例解析
這篇文章主要為大家詳細(xì)介紹了js剪切板應(yīng)用clipboardData實(shí)例,并分享了四種實(shí)現(xiàn)方法,感興趣的小伙伴們可以參考一下2016-05-05vite添加環(huán)境變量import.meta.env的方法
在不同的文件里面配置不同的環(huán)境變量,可以讓我們的配置更加容易維護(hù)和使用,這里我們說下vite配置環(huán)境變量和模式是怎么配置的,對vite環(huán)境變量相關(guān)知識感興趣的朋友跟隨小編一起看看吧2023-10-10