phaser ui comps

ส่วนประกอบ phaser 3 ui สร้างโดย adobe antiMi

มันคืออะไร?

สร้าง UI ของคุณใน [Abode Animate] (https://www.adobe.com/ru/products/animate.html) ส่งออกไปยัง json และบิตแมปด้วย [jsfl สคริปต์] (https://github.com/xense/phaser-ui-comps/blob/master/master/master วางตำแหน่งมายากลในรหัสของคุณ

ComponentClip สร้างตัวเองด้วย JSON และ ATLASES ที่ให้ไว้และ UIComponentPrototype จะช่วยควบคุมพวกเขาสลับสถานะฟังคลิกลากและกิจกรรมอื่น ๆ

นอกจากนี้ UIComponentPrototype และชั้นเรียนเด็กไม่รังเกียจหากพวกเขามีอินสแตนซ์คลิปจริงในสถานะปัจจุบันหรือเลยดังนั้นจึงไม่มีอะไรเลวร้ายเกิดขึ้นตัวอย่างเช่นหากคุณลบอินสแตนซ์ปุ่มบางส่วนในหน้าต่างของคุณในเอกสารเคลื่อนไหวและเก็บอินสแตนซ์ UIComponentPrototype

บิตแมปทั้งหมดจะถูกส่งออกไปยังไฟล์ PNG ที่มีโครงสร้างโฟลเดอร์เดียวกันกับในไลบรารีเอกสารเคลื่อนไหว แพ็คพวกเขาไปยัง Atlases โดยใช้ Texturepacker หรือเครื่องมืออื่น ๆ ที่คุณชอบ

ใช้ที่ไหนและอย่างไร?

เฟรมเวิร์ก repo หลัก

เอกสารการสอนตัวอย่าง

ตัวอย่างสด

ปัญหาข้อบกพร่องความคิดส่วนประกอบใหม่

ตัวอย่างเอกสารเคลื่อนไหว

ส่งออกเอกสารเคลื่อนไหว

ในการเรียกใช้สคริปต์ JSFL ใน Animate เลือกคำสั่ง `> เรียกใช้คำสั่ง 'นำทางไปยังสคริปต์และคลิกเปิด

จะติดตั้งได้อย่างไร?

ในการติดตั้งเวอร์ชันล่าสุดจาก NPM ในเครื่องและบันทึกไว้ในไฟล์ package.json ของคุณ:

npm install --save phaser-ui-comps

หรือถ้าคุณใช้เส้นด้าย

yarn add phaser-ui-comps

หรือคุณสามารถดาวน์โหลดเวอร์ชัน minified ได้จาก https://github.com/xense/phaser-ui-comps/tree/master/dist

หรือใช้เวอร์ชัน JSDELIVR CDN

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

บันทึก! phasercomps ใช้ UnderScore.js มีสองสร้างในโฟลเดอร์ /dist หนึ่งที่มีขีดเส้นใต้รวมอยู่ด้วยและอื่น ๆ โดยไม่ต้องใช้ดังนั้นคุณต้องโหลดก่อนที่จะโหลด phasercomss

การใช้งานง่ายๆ

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