【犬夜叉專場】遊戲場景對白動畫的實現及優化(上)

語言: CN / TW / HK

本文正在參與 “效能優化實戰記錄”話題徵文活動

介紹

我們本期要用pixi.js實現一個場景對白的動畫,很多遊戲都有此類業務場景,比如敘述或者回憶一段故事背景,比起一大段直白的文字來說,這種方式有很強的帶入感。接下來,我先看下,最終完整的實現動畫效果:

VID_20211013_154225.gif

上面的這個場景,是日漫犬夜叉中被折斷鐵碎牙的一個故事片段,結合文字和圖片組成的動畫是不是很快就瞭解到他的鐵碎牙是如何斷掉的了。

因為篇幅過長,所以,我們有重點的分為兩篇來講述,分別為優化篇和實現篇。我們今天反其道而行,先說怎麼優化所用到的資源,從而達到效能一開始就是最佳。觀察剛才的動畫,你會發現,他存在9張背景圖和字型資源。因為我的本次是用pixi.js實現的H5網頁,所以,載入速度對使用者的影響至關重要。而影響載入速度很大一部分就是這兩類資源。後面將會講述如何優化這兩類資源的。

優化篇

字型資源

問:為什麼字型資源不能直接使用呢?

答:並不是不可以用,只是字型資源尤其是中文字型資源都比較大,一來使用者浪費使用者流量,二來使用者等待時間也很長。

就如,我們要做的犬夜叉案例來說吧,他用了華康少女體這種字型,光這一個字型就要佔20多兆,簡直恐怖

微信截圖_20211013125626.png

問:那我們又想使用他怎麼辦呢?預設字型真的很難看!!

答:我們可以使用點陣圖字型來呈現,當然我們要先挑選要使用到的字型,完全不會用到的直接不要了,這樣只留下要用的,字型資源自然就小了。

介紹大家一個專門剝離字型的工具了——BMFont字型編輯器。他可以把要用的字型都剝離出來,然後我們可以在pixi.js載入使用。接下來,我們就簡單介紹一下他的使用吧。

  1. 從官網下載,開啟exe

  2. 在記事本先寫一段要用的文字,記住儲存必須用utf-8編碼不然後面就會亂碼。

    微信截圖_20211013113457.png

  3. Options->Font Settings把要用的字型匯入並選擇他。

    微信截圖_20211013162746.png

  4. Edit->Select chars from file把剛才的檔案匯入,就會發現自動給你找到對應的文字了,著實很方便。

    微信截圖_20211013114042.png

  5. Options->Export Options 我們去設定匯出32位然後還要選擇是png點陣圖的形式。

    微信截圖_20211013120552.png

  6. Options->Save bitmap font as... 我們匯出來了,看看大小吧

    微信截圖_20211013125648.png

23M的資源我們縮到了50k,縮小了差不多是470多倍,這下就可以秒載入字型資源了~

我們先看看怎麼在pixi.js用這個字型資源吧,具體怎麼實現這個案例在實現篇中,下期會將,我們先展示一個位圖文字實現示例:

js this.app.loader .add('hk', 'font/hk/font.fnt') .load(()=>{ const text = new PIXI.BitmapText("散魂鐵爪", { fontName: '華康少女字型', fontSize: 36, tint: 0x000000, letterSpacing: 5, align: "left", }); text.position.set(100, 100) this.app.stage.addChild(text) });

我們先載入對應的字型,完成後文字繪製到介面當中,如下圖,發現我們想要的華康少女字型就出來了~

微信截圖_20211013164453.png

圖片資源

問:圖片資源我們從什麼方面去優化呢?

答:我們從兩個方面去優化他,一個是讓他請求次數變少減少伺服器壓力。第二個是資源大小讓他縮減,這樣載入起來更快。

我們看到了剛才的動畫有9張背景圖,先考慮如何怎麼把他們合併這個場景就請求一次圖片就完成了。

再介紹給大家一個合併圖片資源的神器——TexturePackerGUI

這個使用特別簡單,就是把圖片拖入設定好相應配置匯出精靈圖就行。

微信截圖_20211013130148.png

就這樣我們合成了一張大圖片和一個json檔案,回頭我們也是通過pixi.js載入json,然後就能拿到這個這張大圖中幾個小圖的位置了。

js this.app.loader .add("stage", "assets/stage.json") .load((res) => { let bgImg = new PIXI.Sprite(res.resources.stage.textures["6.png"]); bgImg.anchor.set(0, 0); bgImg.position.set(0, -5) bgImg.scale.set(1.23) this.app.stage.addChild(bgImg); })

同樣的,我們載入json得到對應的資料後就可以生成圖片精靈供我們去使用了。

微信截圖_20211013171418.png

還沒結束,我們合成的那張大圖依然可以壓縮優化他,就用業內都知道的tinypng就可以完美的減少60%到80%的空間,趕緊去試試吧~

結語

通過剛才的學習,感想如何?字型和圖片資源的優化是H5遊戲和動畫及其重要的一部分,我期望大家對網頁優化也是如此減少請求次數,減少資源大小,一切為伺服器和使用者去周全的考慮。好了,至於開頭的案例犬夜叉動畫怎麼完整的去實現,就在下集,敬請關注~ 對你有幫助別忘點個贊喲~