phaser ui comps

Componentes da interface do usuário do Phaser 3, construídos por Adobe Animate

O que é?

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 posicionando números mágicos em seu código.

ComponentClip Construa -se com JSON e Atlases fornecidos, e UIComponentPrototype ajudará a controlá -los, trocar os estados, ouvir clicar, arrastar e outros eventos.

Além disso, UIComponentPrototype e suas aulas infantis não se importam, se elas tiverem uma instância de clipe real no estado atual ou, portanto, nada de ruim acontece, por exemplo, se você remover alguma instância do botão na janela do documento animado e manter a instância do UIComponentPrototype .

Todos os bitmaps são exportados para arquivos PNG com a mesma estrutura de pastas que na biblioteca de documentos Animate. Leve -os em atlas usando texturepacker ou outra ferramenta que você gosta.

Onde e como usar?

Principal de repo

Documentos, tutoriais, exemplos

Exemplo ao vivo

Questões, bugs, novas idéias de componentes

Animar exemplo de documento

Exportar documento animado

Para executar o script JSFL em Animate Select `Commands> Run Command`, navegue até o script e clique em Abrir.

Como instalar?

Para instalar a versão mais recente do NPM localmente e salvá -la no seu arquivo package.json :

npm install --save phaser-ui-comps

ou se você estiver usando fios

yarn add phaser-ui-comps

Ou você pode baixar a versão minificada em https://github.com/xense/phaser-ui-comps/tree/master/dist

Ou use a versão JSDelivr CDN

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

Observação! PhaserComps usa subscore.js Existem duas construções na pasta /dist, uma com sublinhamento incluído e outro sem ela, então você precisa carregá -lo antes de carregar o PhaserComps

Uso simples

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