phaser ui comps

مكونات واجهة مستخدم Phaser 3 ، التي بنيت بواسطة Adobe Ameator

ما هذا؟

قم ببناء واجهة المستخدم الخاصة بك في [Abode animate] (https://www.adobe.com/ru/products/animate.html) ، والتصدير إلى json و bitmaps مع [jsfl script] وضع الأرقام السحرية في الكود الخاص بك.

ComponentClip يبني نفسه مع JSON و itlases ، وسيساعد UIComponentPrototype على التحكم فيها ، وتبديل حالات ، والاستماع إلى النقر ، والسحب والأحداث الأخرى.

بالإضافة إلى ذلك ، لا تمانع في نمط UIComponentPrototype ، ولا تمانع في فصول الأطفال ، إذا كان لديهم مثيل مقطع حقيقي في الحالة الحالية أو على الإطلاق ، لذلك لا شيء سيء يحدث ، على سبيل المثال ، إذا قمت بإزالة بعض مثيل الزر في نافذتك في مستند تحويلي والحفاظ عليه هو مثيل UIComponentPrototype .

يتم تصدير جميع نقامات الصورة النقطية إلى ملفات PNG مع نفس بنية المجلد كما في مكتبة المستندات المتحركة. قم بتعبئة أطلس باستخدام TexturePacker أو أي أداة أخرى تريدها.

أين وكيف تستخدم؟

الإطار الرئيسي ريبو

مستندات ، دروس ، أمثلة

مثال مباشر

القضايا ، الأخطاء ، أفكار المكونات الجديدة

مثال وثائق تحريك

وثيقة تحريك التصدير

لتشغيل البرنامج النصي JSFL في ANIMATION SELECT `أوامر> Run Command` ، انتقل إلى البرنامج النصي ، وانقر فوق فتح.

كيفية التثبيت؟

لتثبيت أحدث إصدار من NPM محليًا وحفظه في ملف package.json الخاص بك:

npm install --save phaser-ui-comps

أو إذا كنت تستخدم الغزل

yarn add phaser-ui-comps

أو يمكنك تنزيل إصدار مصغر من 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 INTERSCORE.JS هناك تبنيان في مجلد /dist ، أحدهما مع إدراج السطح وغيره بدونه ، لذلك تحتاج إلى تحميله قبل تحميل phaserps

استخدام بسيط

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