Pixijs最適合於優(yōu)化的渲染和資產(chǎn)管理時，最適合高性能的2D Web Games。 1。了解Pixijs是一個渲染庫，而不是完整的引擎，因此請使用Matter.js進行物理和Howler.js進行音頻。 2.通過使用紋理地圖集，最小化過濾器和掩模，以及僅將cacheasbitmap應用於靜態(tài)容器，從而優(yōu)化渲染。 3。使用Pixi的股票器有效地管理遊戲循環(huán)，使用Delta進行幀速率獨立性，並避免進行重大計算。 4。通過使用兩個紋理大小，用Pixi加載器預加載以及卸載未使用的紋理，可以巧妙地處理資產(chǎn)。 5。用容器組織對象並實現(xiàn)對像池以減少垃圾收集。最終技巧包括在低端設備上進行測試，使用最近的鄰居縮放尺度用於像素藝術，監(jiān)視FPS和升級到Pixijs V7，以更好地性能，從而確?？缭O備的快速，流暢的遊戲玩法。

如果您想構建快速，流暢的22D遊戲，這些遊戲跨設備（尤其是Web）運行良好，那麼Pixijs是可用的最好的工具之一。這是一個輕巧的2D渲染庫，利用WebGL（帶有畫布後背）提供高性能圖形。雖然它不是像Phaser這樣的完整遊戲引擎，但Pixijs可以為您提供精細的控制和出色的性能，非常適合2D遊戲，交互式應用程序和可視化。

在構建高性能2D遊戲時，這是如何充分利用Pixijs的方法。

1。了解Pixijs是什麼（並且不是）

Pixijs是渲染引擎，而不是完整的遊戲引擎。這意味著：

• ?它有效地處理渲染精靈，紋理，動畫和過濾器。
• ?它不包括內置物理，音頻管理或遊戲循環(huán)。

您需要攜帶自己的遊戲邏輯，時機和碰撞檢測 - 或Pixijs與輕量級庫中的Pixijs搭配：

• 物理學的Matter.js
• howler.js for音頻
• 使用requestAnimationFrame自定義遊戲循環(huán)

這種模塊化實際上是一種優(yōu)勢：您只包括所需的東西，保持遊戲輕巧和快速。

2。優(yōu)化渲染性能

Pixijs默認情況下是快速的，但是性能瓶頸可以作為您的遊戲量表出現(xiàn)。這是保持一切順利的方法：

使用精靈批處理

Pixijs將類似的精靈（相同的紋理，混合模式）組成批處理，以減少撥打電話。最大化批處理：

• 使用紋理地圖集（SpriteSheets） - 將所有資產(chǎn)包裝到一個圖像中。
• 避免頻繁的紋理開關（例如，不要在同一容器中的不同地圖集中混合精靈）。
• 盡可能保持混合模式一致。

 //加載一個spritesheet
app.loader.add（'Assets/spritesheet.json'）。加載（設置）;

功能設置（）{
  const texture = app.loader.resources ['Assets/spritesheet.json']。紋理;
  const sprite = new pixi.sprite（紋理['hero.png']）;
  App.Stage.Addchild（Sprite）;
}

最小化過濾器和口罩

過濾器（例如模糊或發(fā)光）和口罩價格昂貴。每個過濾器都會迫使呈文通行。

• 很少使用過濾器。
• 使用cacheAsBitmap = true如果它們不經(jīng)常更改，則使用cacheasbitmap = true過濾。
• 避免將過濾器應用於動畫精靈。

明智地使用cacheAsBitmap

如果容器有許多靜態(tài)子女（例如，一個UI面板），則將cacheAsBitmap = true設置為單個紋理。

 container.cacheasbitmap = true; //提高靜態(tài)組的性能

但是，避免在經(jīng)常更新的容器上使用它 - 緩存開銷可能會損害性能。

3。有效地管理遊戲循環(huán)

Pixijs提供了一個用於運行代碼的股票系統(tǒng)：

 app.ticker.add（（delta）=> {
  // delta =自上次幀以來的時間（在tick中）
  player.update（delta）;
  enemies.foreach（e => e.update（delta））;
}）;

最佳實踐：

• 使用delta使運動幀速率獨立。
• 避免在更新循環(huán)中進行大量計算 - 優(yōu)化或節(jié)氣門。
• 為了清楚起見，請考慮按系統(tǒng)（移動，動畫，AI）對更新進行分組。

4。巧妙地處理資產(chǎn)

加載太多紋理或尺寸不大的圖像會殺死性能。

使用適當?shù)馁|地大小

• 兩個尺寸（例如，256x256，512x1024）是GPU處理的最佳選擇。
• 低規(guī)模的大圖像 - 4096x4096紋理使用的內存比512x512多64倍。

預緊並管理紋理

使用Pixi的加載程序預付資產(chǎn)並避免打ic：

 app.loader
  .add（“英雄”，“資產(chǎn)/英雄.png”）
  .add（'bg'，'資產(chǎn)/背景.json'）// spritesheet
  .load（OnAssetsLoaded）;

卸載未使用的紋理以免費內存：

 pixi.texture.removefromcache（紋理）;
texture.destroy（）;

5。利用容器和對像池

與容器一起組織

使用PIXI.Container對遊戲對象進行分組（例如，敵人，子彈）。這有助於：

• 批處理轉換（例如，滾動背景）
• 有效的渲染
• 邏輯分組

使用對像池

避免在循環(huán)中（例如，子彈，顆粒）中new和destroy() 。相反，重用對象：

類Bulletpool {
  構造函數(shù)（max = 100）{
    this.pool = [];
    （讓i = 0; i <max; i）{
      this.pool.push（new bullet（））;
    }
  }

  得到（） {
    返回this.pool.pop（）||新子彈（）;
  }

  釋放（子彈）{
    bullet.reset（）;
    this.pool.push（子彈）;
  }
}

這減少了垃圾收集，並使框架速率保持穩(wěn)定。

最終提示

• 早期對低端設備進行測試 - WebGL性能各不相同。
• 使用PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST用於像素藝術遊戲。
• 用簡單的計數(shù)器或stats.js監(jiān)視FPS。
• 考慮使用Pixijs V7 - 它比以往任何時候都更現(xiàn)代，模塊化和更快。

使用Pixijs構建高性能2D遊戲歸結為智能渲染，資產(chǎn)管理和高效代碼。它不像某些引擎那樣插件，但性能回報值得，尤其是對於需要在移動和臺式機上平穩(wěn)運行的基於網(wǎng)絡的遊戲。

基本上：呈現(xiàn)智能，批處理紋理，重複使用對象，並保持循環(huán)傾斜。

以上是使用Pixijs構建高性能2D遊戲的詳細內容。更多資訊請關注PHP中文網(wǎng)其他相關文章！