phaser ui comps

Компоненты пользовательского интерфейса Phaser 3, построенные Adobe Animate

Что это такое?

Создайте свой пользовательский интерфейс в [Abode Animate] (https://www.adobe.com/ru/products/animate.html), экспорт в json и растровые карты с предоставленными [jsfl script] (https://github.com/xense/phaser-ui-comps/blob/master/jsfl/exportophas.jslophas.jslophas. позиционирование магических чисел в вашем коде.

ComponentClip Bultive Shust с предоставленным JSON и Atlases, а UIComponentPrototype поможет контролировать их, переключать состояния, прослушать клики, перетаскивание и другие события.

Кроме того, UIComponentPrototype и его занятия не возражают, если у них есть реальный экземпляр клипа в текущем состоянии или вообще, так что ничего плохого не происходит, например, если вы удалите какой -то экземпляр кнопки в вашем окне в анимированном документе и сохраняет его экземпляр UIComponentPrototype .

Все растровые карты экспортируются в файлы PNG с той же структурой папок, что и в библиотеке документов Animate. Упакуйте их в атлазы, используя TexturePacker или другой инструмент, который вам нравится.

Где и как использовать?

Основная структура репо

Документы, учебные пособия, примеры

Живой пример

Проблемы, ошибки, идеи новых компонентов

Пример документа «Аниматическое документ»

Экспорт -анимный документ

Чтобы запустить сценарий JSFL в Animate Select `Команды> запустить команду ', перейдите к скрипту и нажмите« Открыть ».

Как установить?

Чтобы установить последнюю версию из 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 использует underscore.js В папке /Dist есть две сборки, одна с включенным в подчеркивание и другие без нее, поэтому вам нужно загрузить его перед загрузкой PhaserComps

Простое использование

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