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 ) ;
}