xense / phaser-ui-comps

Phaser 3 UI Components, built by Adobe Animate

What is it?

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 or other tool you like.

Where and how to use?

Main framework repo

Docs, tutorials, examples

Live example

Issues, bugs, new components ideas

Animate document example

Export Animate document

How to install?

To install the latest version from npm locally and save it in your package.json file:

npm install --save phaser-ui-comps

or if you are using yarn

yarn add phaser-ui-comps

Or you can download minified version from https://github.com/xense/phaser-ui-comps/tree/master/dist

Or use jsdelivr cdn version

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

Note! PhaserComps uses underscore.js There are two builds in the /dist folder, one with underscore included and other without it, so you need to load it before loading PhaserComps

Simple usage

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