phaser ui comps

Composants Phaser 3 UI, construits par Adobe Animate

Qu'est-ce que c'est?

Construisez votre interface utilisateur dans [Animate Animate] (https://www.adobe.com/ru/products/animate.html), exportez vers JSON et bitmaps avec fourni [script jsfl] (https://github.com/xense/phaser-ui-comps/blob/master/jsfl/exporttophaser.jsfl), et vous pouvez faire un position Nombres magiques dans votre code.

ComponentClip Build lui-même avec des JSON et des atlas fournis, et UIComponentPrototype aidera à les contrôler, à changer les états, à écouter le clic, le glisser et d'autres événements.

De plus, UIComponentPrototype et ses classes d'enfants ne vous dérangent pas, s'ils ont une véritable instance de clip dans l'état actuel ou pas du tout, donc rien de mal se produit, par exemple, si vous supprimez une instance de bouton dans votre fenêtre dans un document d'animation et gardez son instance UIComponentPrototype .

Tous les bitmaps sont exportés vers des fichiers PNG avec la même structure de dossier que dans la bibliothèque de documents Animate. Emballez-les dans Atlas à l'aide de TexturePacker ou d'un autre outil que vous aimez.

Où et comment utiliser?

Repo du cadre principal

Docs, tutoriels, exemples

Exemple en direct

Problèmes, bugs, nouvelles idées de composants

Animer l'exemple de document

Exporter un document animé

Pour exécuter le script JSFL dans Animate Sélectionnez `Commandes> Exécuter Commande ', accédez au script et cliquez sur Ouvrir.

Comment installer?

Pour installer la dernière version à partir de NPM localement et enregistrer dans votre fichier package.json :

npm install --save phaser-ui-comps

ou si vous utilisez du fil

yarn add phaser-ui-comps

Ou vous pouvez télécharger la version mini-dimensionnée à partir de https://github.com/xense/phaser-ui-comps/tree/master/dist

Ou utilisez la version jsdelivr cdn

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

Note! PhaserComps utilise un sous-ore.js Il y a deux versions dans le dossier / dist, une avec un soulignement inclus et autre sans lui, vous devez donc le charger avant de charger Phasercomps

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