phaser ui comps

Komponen Phaser 3 UI, dibangun oleh Adobe Animate

Apa itu?

Bangun UI Anda di [Abode Animate] (https://www.adobe.com/ru/products/animate.html), mengekspor ke json dan bitmaps dengan skrip yang disediakan [jsfl] (https://github.com/xense/phaser-ui-pomps/blob, land canpport/xense/phaser-ui-pomps/blob/passer.master/xport/pport/phaser-ui-comps memposisikan angka ajaib dalam kode Anda.

ComponentClip membangun dirinya dengan JSON dan Atlases yang disediakan, dan UIComponentPrototype akan membantu mengendalikannya, beralih status, mendengarkan klik, seret, dan acara lainnya.

Selain itu, UIComponentPrototype dan kelas anak -anak tidak keberatan, jika mereka memiliki instance klip nyata dalam keadaan saat ini atau sama sekali, jadi tidak ada hal buruk yang terjadi, misalnya, jika Anda menghapus beberapa instance tombol di jendela Anda dalam dokumen Animate dan menyimpannya contoh UIComponentPrototype .

Semua bitmap diekspor ke file PNG dengan struktur folder yang sama seperti di pustaka dokumen hidup. Kemasi ke atlas menggunakan TexturEpacker atau alat lain yang Anda sukai.

Di mana dan bagaimana cara menggunakannya?

Repo Kerangka Kerja Utama

Dokumen, tutorial, contoh

Contoh langsung

Masalah, bug, ide komponen baru

Contoh Dokumen Animasi

Ekspor Dokumen Animasi

Untuk menjalankan skrip JSFL di Animate Select `Commands> Run Command`, Navigasi ke skrip, dan klik Buka.

Bagaimana cara menginstal?

Untuk menginstal versi terbaru dari NPM secara lokal dan menyimpannya di file package.json Anda:

npm install --save phaser-ui-comps

atau jika Anda menggunakan benang

yarn add phaser-ui-comps

Atau Anda dapat mengunduh versi Minified dari https://github.com/xense/phaser-ui-comps/tree/master/dist

Atau gunakan versi CDN jsdelivr

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

Catatan! PhaserComps menggunakan underscore.js Ada dua build di folder /dist, satu dengan garis bawah disertakan dan lainnya tanpa itu, jadi Anda perlu memuatnya sebelum memuat phasercomps

Penggunaan sederhana

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