# Pixi v5+fairyGUI

---

## v5.1 to v5.3

### release note
* [v5.2.0](https://github.com/pixijs/pixijs/releases/tag/v5.2.0)
* [v5.3.0](https://github.com/pixijs/pixijs/releases/tag/v5.3.0)

### 取得 v5.3.x library
:::info
[官方github](https://github.com/pixijs/pixijs/tree/v5.3.x) 並未直接提供 library 輸出後的檔案
這裡先自行開空白專案, 然後安裝 pixi, 把相關檔案取出來

npm install pixi.js@5.3.11

再去 node_module 裡面把 pixi.js, pixi.js.map, pixi.js.d.ts 這三個檔案抓出來
:::

### 升級疑難排解
:::danger
{font:"30px JLC_numbers", align: "left" }

:::success
{fontName:"JLC_numbers", fontSize:30, align: "left" }

:::

:::danger
PIXI.Texture.fromCanvas(canvas)

:::success
PIXI.Texture.from(canvas)

:::

:::danger
PixiJS Deprecation Warning: PIXI.Loader#on is completely deprecated, use PIXI.Loader#onProgress.addDeprecated since v5.0.0

:::success
改用 loader.onProgress.add(callback)

:::

:::danger
loader.once('complete', this.exist, this);

:::success
loader.onComplete.once(callback);
:::

:::danger
移除 listener 的方法

:::success

const bindingObj = loader.onComplete.add(()=>{});
loader.onComplete.detach(bindingObj);

:::

---

## 設定 tsconfig

:::info
加上 typings 資料夾, text editor 才能辨認 d.ts
:::

"exclude": [
    "node_modules",
    "libs/*"
  ],
"include": [
    "typings/*",
  ]

---

## 開始導入 fairyGUI

:::info
使用 [第三方版本 v5.3.x](https://github.com/kevinchen2046/fairygui-pixijs-v5)
:::

### 必要 library
| library | 目標資料夾 | 用途 |
| -- | -- | -- |
| [rawinflate.js](https://github.com/imaya/zlib.js/blob/develop/bin/rawinflate.min.js) | libs | runtime 解壓縮 fui 檔案 |
| fairygui.js | libs | |
| fairygui.d.ts | typings | |

### 修正第三方 fairygui 的 bug
:::warning
fairygui.js 這裡的用法有誤: detach() 是用來解除事件, 而且必須要丟 signal 物件進去

但實際上這段在父類別 PIXI.Loader 是觸發完成的事件

AssetLoader.prototype._onComplete = function () {
    AssetLoader.addResources(this.resources);
    //this.onComplete.detach(this);
    this.onComplete.dispatch(this, this.resources);
};

:::

---

## 合併 library

### 必要 package

| package | 用途 |
| -- | -- |
| webpack-merge-and-include-globally | 將所有 js lib 和專案合併在同一個檔案 |
| @babel/runtime | 上述套件需要使用 |
| uglify-js | 合併 js 進行最小化 |

### 設定 jsconfig

{
    "javascript": [
        "./libs/rawinflate.min.js",
        "./libs/pixi.js",
        "./libs/fairygui.js"
    ]
}

### webpack 設定所有 library 合併成單一檔案
:::info
此部分會透過 webpack-merge-and-include-globally 和 @babel/runtime
將所有外部 js library 打包成單一檔案, 並且解決無法辨認相依 js 的問題
:::

* webpack.config 設定範例

const MergeIntoSingle = require('webpack-merge-and-include-globally');
const json = require('./jsconfig.json');

const config = {
    plugins: {
        new MergeIntoSingle({
            files: {
                "game.bundle.js": json.javascript
            },
            transform: {
                "game.bundle.js": code => require("uglify-js").minify(code).code
            }
        })
    }
}

---

## fairyGUI 設定

* project type 選擇 pixi
* publish 的 package format 不能勾選 binary format, 否則 runtime 解壓縮會失敗

---

## sample

private fguiInit() {
    fgui.GRoot.inst.attachTo(this.game["_app"], {
        designWidth: 1280,
        designHeight: 720,
        scaleMode: fgui.StageScaleMode.FIXED_WIDTH,
        orientation: fgui.StageOrientation.LANDSCAPE,
        alignV: fgui.StageAlign.TOP,
        alignH: fgui.StageAlign.LEFT
    });
 
    this.loadFguiRes();
}
 
private loadFguiRes() {       
    const loader = new fgui.utils.AssetLoader();
    loader.add("Package1", "assets/fgui/test.fui", { loadType:PIXI.LoaderResource.LOAD_TYPE.XHR, xhrType: PIXI.LoaderResource.XHR_RESPONSE_TYPE.BUFFER })
    .load((loader, resources)=>{
        fgui.UIPackage.addPackage("Package1");
        const obj = fgui.UIPackage.createObject("Package1", "Component1");
        fgui.GRoot.inst.addChild(obj);
    });
}

---

###### tags: `PixiJS`