Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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 1 month 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-29T23:40:33.641Z (about 2 months 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);
}
```