https://github.com/xense/phaser-ui-comps

Phaser 3 UI Components built by Adobe Animate
https://github.com/xense/phaser-ui-comps

adobe-animate animate flash jsfl phaser phaser-framework phaser-plugin phaser3 phaserio ui ui-builder ui-components user-interface

Last synced: about 6 hours ago
JSON representation

Phaser 3 UI Components built by Adobe Animate

• Host: GitHub
• URL: https://github.com/xense/phaser-ui-comps
• Owner: xense
• License: mit
• Created: 2019-04-02T15:32:49.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-10T17:07:47.000Z (almost 2 years ago)
• Last Synced: 2024-09-18T17:13:28.411Z (9 days ago)
• Topics: adobe-animate, animate, flash, jsfl, phaser, phaser-framework, phaser-plugin, phaser3, phaserio, ui, ui-builder, ui-components, user-interface
• Language: JavaScript
• Homepage: https://xense.github.io/phaser-ui-comps-docs/
• Size: 1.41 MB
• Stars: 60
• Watchers: 7
• Forks: 8
• Open Issues: 18
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
Phaser 3 UI Components, built by Adobe Animate

----

What is it?

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 positioning magic numbers in your code.


`ComponentClip` build itself with provided JSON and atlases, 

and `UIComponentPrototype` Will help to control them, switch states, 

listen to click, drag and other events.

In addition, `UIComponentPrototype` and it's children classes don't mind, 

if they have a real clip instance in current state or at all,

so nothing bad happens, for example, if you remove some button instance in your window in 

Animate document and keep it's `UIComponentPrototype` instance.

All bitmaps are exported to png files with the same folder structure 

as in the Animate document library. Pack them to atlases using

[TexturePacker](https://www.codeandweb.com/texturepacker) or other tool you like.

Where and how to use?


[Main framework repo](https://github.com/xense/phaser-ui-comps)

[Docs, tutorials, examples](https://xense.github.io/phaser-ui-comps-docs)

[Live example](https://xense.github.io/phaser-ui-comps-docs/tutorial-showcase.html)

[Issues, bugs, new components ideas](https://github.com/xense/phaser-ui-comps/issues)

[Animate document example](https://github.com/xense/phaser-ui-comps-docs/raw/master/examples/xfl/UI.fla)

Export Animate document

To run JSFL script in Animate select `Commands > Run Command`, 

navigate to the script, and click Open.


How to install?


To install the latest version from 

[npm](https://www.npmjs.com)

locally and save it in your `package.json` file:

```bash

npm install --save phaser-ui-comps

```

or if you are using [yarn](https://yarnpkg.com)

```bash

yarn add phaser-ui-comps

```

Or you can download minified version from 

[https://github.com/xense/phaser-ui-comps/tree/master/dist](https://github.com/xense/phaser-ui-comps/tree/master/dist)

Or use [jsdelivr cdn](https://www.jsdelivr.com/) version

```html

``` 

*Note!*

*PhaserComps uses [underscore.js](https://underscorejs.org/)

There are two builds in the /dist folder, 

[one](https://github.com/xense/phaser-ui-comps/blob/master/dist/phaser-ui-comps-with-underscore.min.js) 

with underscore included and 

[other](https://github.com/xense/phaser-ui-comps/blob/master/dist/phaser-ui-comps.min.js) 

without it, so you need to load it before loading PhaserComps* 

Simple usage


```html

```

```javascript

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

}

```