phaser ui comps

Phaser 3 componentes de la interfaz de usuario, construidos por Adobe Animate

¿Qué es?

Build your UI in [Abode Animate](https://www.adobe.com/ru/products/animate.html), export to JSON and bitmaps with provided [JSFL script](https://github.com/xense/phaser-ui-comps/blob/master/jsfl/ExportToPhaser.jsfl) , and you can forget about lots of positioning magic numbers en tu código.

ComponentClip se construye con JSON y atlas proporcionados, y UIComponentPrototype ayudará a controlarlos, cambiar los estados, escuchar hacer clic, arrastrar y otros eventos.

Además, UIComponentPrototype y sus clases de niños no les importa, si tienen una instancia de clip real en el estado actual o en absoluto, por lo que no sucede nada malo, por ejemplo, si elimina alguna instancia de botón en su ventana en un documento animado y mantiene su instancia UIComponentPrototype .

Todos los mapas de bits se exportan a archivos PNG con la misma estructura de carpetas que en la biblioteca de documentos animados. Empáralos a atlas con TexturePacker u otra herramienta que desee.

¿Dónde y cómo usar?

Repo del marco principal

Documentos, tutoriales, ejemplos

Ejemplo

Problemas, errores, nuevas ideas de componentes

Ejemplo de documento animado

Documento animado de exportación

Para ejecutar el script JSFL en Animate Seleccione `Comandos> Ejecutar comando ', navegue al script y haga clic en abrir.

¿Cómo instalar?

Para instalar la última versión desde NPM localmente y guárdela en su archivo package.json :

npm install --save phaser-ui-comps

o si estás usando hilo

yarn add phaser-ui-comps

O puede descargar la versión minificada de https://github.com/xense/phaser-ui-comps/tree/master/dist

O use la versión JSDelivr CDN

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

¡Nota! PhaserComps usa subscore.js Hay dos compilaciones en la carpeta /Dist, una con un guión bajo incluido y otros sin ella, por lo que debe cargarlo antes de cargar PhaserComps

Uso simple

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