效能提示

一般

• 僅在需要時進行最佳化！PixiJS 能夠處理大量的內容
• 注意場景的複雜度。加入的物件越多，速度就會越慢
• 順序會有幫助，例如 sprite / graphic / sprite / graphic 就比 sprite / sprite / graphic / graphic 慢
• 一些比較舊的行動裝置執行的速度較慢。將選項 useContextAlpha: false 和 antialias: false 傳入 Renderer 或 Application 可以提升效能
• 裁剪預設為停用狀態，應在應用程式層級執行此動作，或將物件設定為 cullable = true 會比較好。如果以 GPU 為主，效能會提升；如果以 CPU 為主，效能會下降

精靈圖

• 盡可能使用精靈圖集來最小化總體紋理
• 精靈圖最多可批次處理 16 種不同的紋理（依硬體而定）
• 這是一種最快的內容呈現方式
• 在較舊的裝置上使用較小的低解析度紋理
• 將延伸碼 @0.5x.png 加入 50% 縮小精靈圖集，以便 PixiJS 會自動將其視覺上放大兩倍
• 繪製順序很重要

圖形

• 圖形物件在未持續變更時速度最快（不包含轉換、透明度或色調！）
• 當圖形物件小於特定大小（100 點或更小）時，會被批次處理
• 小型圖形物件與精靈圖一樣快（矩形、三角形）
• 使用數百個圖形複合物件可能會很慢，這種情況下請改用精靈圖（您可以建立紋理）

紋理

• 紋理會由紋理垃圾收集器自動管理
• 您也可以透過使用 texture.destroy() 來自行管理它們
• 如果您計畫一次銷毀多個紋理，請在其銷毀過程中加入隨機延遲，以避免發生凍結
• 如果您計畫自行刪除大量紋理，請延遲銷毀紋理

文字

• 避免每一幀都變更，因為代價可能很高（每次都會繪製到畫布上，然後上傳到 GPU）
• 位元圖文字在動態變更文字時會提供更好的效能
• 文字解析度與渲染器解析度相同，降低解析度可以減少記憶體用量，請自行設定 resolution 屬性

遮罩

• 若使用過多遮罩會相當花費效能：例如，使用超過 100 個遮罩會大幅降低效能
• 與軸對齊的矩形遮罩是最快的（因為使用剪刀矩形）
• 圖形遮罩是次快的（因為使用模板緩衝區）
• 精靈遮罩是第三快的（使用濾鏡）。它們很花費效能。請不要在場景中使用過多！

濾鏡

• 釋放記憶體：container.filters = null
• 如果您知道它們的大小：container.filterArea = new Rectangle(x,y,w,h)。這可以加速執行，因為代表物件不需要測量
• 濾鏡很花費效能，如果使用過多會開始降低效能！

混合模式

• 不同的混合模式將導致批次中斷（取消最佳化）
• ScreenSprite / NormalSprite / ScreenSprite / NormalSprite 將會是 4 次繪製呼叫
• ScreenSprite / ScreenSprite / NormalSprite / NormalSprite 將會是 2 次繪製呼叫

事件

• 如果物件沒有互動式的子物件，請使用 interactiveChildren = false。事件系統隨後就可以避免透過物件進行爬取
• 如上所述，設定 hitArea = new Rectangle(x,y,w,h) 應該可以讓事件系統避免透過物件進行爬取