phaser ui comps

由Adobe Animate構建的Phaser 3 UI組件

這是什麼？

在[Abode Animate]（https://www.adobe.com/ru/products/animate.html）中構建UI，並用提供的[JSFL腳本]（httpsf：//github.com/xense/xense/phapeer-plaster-comps/ploase-comps/blob/blob/master/master/master.jsportt and yous.jsfl）代碼中的魔術數字。

ComponentClip通過提供的JSON和ATLASE構建自身， UIComponentPrototype將有助於控制它們，切換狀態，收聽點擊，拖動和其他事件。

此外， UIComponentPrototype及其子類不介意，如果他們在當前狀態或根本有一個真實的剪輯實例，因此，如果您在Animate文檔中刪除了窗口中的某些按鈕實例並將其保留為UIComponentPrototype實例。

所有位圖都將導出到具有與動畫文檔庫相同的文件夾結構的PNG文件。使用TexturePacker或您喜歡的其他工具將它們打包到地圖集。

在哪里以及如何使用？

主框架存儲庫

文檔，教程，示例

現場示例

問題，錯誤，新組件的想法

動畫文檔示例

導出動畫文檔

要在Animate中運行JSFL腳本選擇“命令> RUN命令”，請導航到腳本，然後單擊“打開”。

如何安裝？

要從本地NPM安裝最新版本，然後將其保存在您的package.json中。

npm install --save phaser-ui-comps

或者如果您正在使用紗線

yarn add phaser-ui-comps

或者，您可以從https://github.com/xense/phaser-ui-comps/tree/master/master/dist下載Minified版本

或使用JSDELIVR CDN版本

 < script src =" https://cdn.jsdelivr.net/npm/[email protected]/dist/phaser-ui-comps-with-underscore.min.js " > </ script >

筆記！ phaserComps使用下劃線。 JS /dist文件夾中有兩個構建，一個構建包括下劃線，其他沒有它，因此您需要在加載phaserComps之前加載它

簡單用法

 < script src =" path/to/scripts/phaser.js " > </ script >
< script src =" path/to/scripts/phaser-ui-comps-with-underscore.min.js " > </ script > 

 const COMPONENT_CONFIG = "comp-config" ;
const TEXTURE_CONFIG = "my_texture" ;


var game = new Phaser . Game ( {
    type : Phaser . AUTO ,
    parent : "phaser-example" ,
    width : 800 ,
    height : 600 ,
    scene : {
        preload : preload ,
        create : create
    }
} ) ;


function preload ( ) {
    this . load . json ( COMPONENT_CONFIG , "assets/my_component.json" ) ;
    this . load . multiatlas ( TEXTURE_CONFIG , "assets/atlases/my_atlas.json" , "assets/atlases/" ) ;
}

function create ( ) {
    let clip = new PhaserComps . ComponentClip (
        this , 
        this . cache . json . get ( COMPONENT_CONFIG ) , 
        [ TEXTURE_CONFIG ]
    ) ;
    
    let component = new PhaserComps . UIComponents . UIComponentPrototype ( ) ;
    component . appendClip ( clip ) ;
}