phaser ui comps

Phaser 3 UI -Komponenten, erstellt von Adobe Animate

Was ist das?

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 Positionieren Sie magische Zahlen in Ihrem Code.

ComponentClip bauen sich mit vorgesehener JSON- und Atlasen aus, und UIComponentPrototype hilft, sie zu steuern, Zustände zu wechseln, Klick-, Drag- und andere Ereignisse anzuhören.

Darüber hinaus macht UIComponentPrototype und seine UIComponentPrototype nichts aus.

Alle Bitmaps werden in PNG -Dateien mit derselben Ordnerstruktur wie in der Animed -Dokumentbibliothek exportiert. Packen Sie sie mit TexturePacker oder einem anderen, das Sie mögen, in Atlasen ein.

Wo und wie benutzt man?

Hauptgerüst Repo

Dokumente, Tutorials, Beispiele

Live -Beispiel

Probleme, Fehler, neue Komponenten -Ideen

Beispiel für Dokument

Exportieren von Dokument

Um das JSFL -Skript in Animate auszuführen, wählen Sie `Befehl> Befehl aus, navigieren Sie zum Skript und klicken Sie auf Öffnen.

Wie installiere ich?

So installieren Sie die neueste Version von NPM lokal und speichern Sie sie in Ihrer package.json -Datei:

npm install --save phaser-ui-comps

oder wenn Sie Garn verwenden

yarn add phaser-ui-comps

Oder Sie können eine minimierte Version von https://github.com/xense/phaser-ui-comps/tree/master/dist herunterladen

Oder verwenden Sie JSDelivr CDN -Version

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

Notiz! PhaserComps verwendet unterstrich.js Es gibt zwei Builds im Ordner /dist, einen mit unterstrichenem und anderem ohne sie. Sie müssen ihn also laden, bevor Sie PhaserComps laden

Einfache Verwendung

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