POM - PIXI Object Model

[Infernal]

Hello Guys!

at Grey Rook we had the need to have non-code descriptions of the PIXI stage and animations, you know, like HTML.

So we created POM - PIXI Object Model.

It is JSON and if you know PIXI you know POM:

{
    "type":"sprite",
    "values": {
        "position": {
            "x":100,
            "y":100
         },
    "source":"image.png"
    }
}

We built all our tooling around this, one of our clients has nearly 3k animations using it,

with over 99% of them sharing the exact same JavaScript and are pure JSON!

We want to share some of the internal tools and helpers we wrote with the PIXI community.

We are starting with POM - the most central piece.

So please let us know if there is interest!

The documentation is a bare minimum and we are going to improve it - let us know what you are looking for!

http://greyrook.github.io/POM/

Details

Our scene is composed of elements, like Containers, Sprites, Graphics, or any other custom element you come up with.

What attributes these elements have is represented as JSON data, like the example above.

 

All you have to do is pass the data representation to the manager and let it create the scene for you.

It works like a factory, where you can register any custom Element you want, as long as it has the methods for processing the JSON data.

 

We extracted POM out of our internal source tree and open sourced it.

If there is interest more is to follow, for example our tweenJS-based AnimationManager, that takes JSON data of timelines and creates all the tweens for you,

aswell as synchronize animations that use our custom tweens for controlling videos, and checking their buffering status.

 

We hope this is useful for others too, so we can build it and make it awesome together.

For a start we have created a minimal project page where you can find the information we have collected so far,

we are currently mostly looking into improving our documentation, test coverage and examples.

 

Why

We built an online animation editor where users can create (and animate) scenes direcly in the browser and view them again anywhere else in a player.

For this we mostly use PIXI (and TweenJS), the backbone of the project is our PIXI Object Model (POM) and its' manager.

 

About us

We are Grey Rook Entertainment, a software development and graphic design company from Mülheim an der Ruhr in Germany,

designing and manufacturing interactive HTML5 expieriences, and connecting them with the real world.

Edited May 21, 2018 by samme
text format

[ivan.popelyshev]

So awesome! Forked & created an issue.

That's first step to editor!

1. I`m working on v4.1 branch that will add many new parameters to all objects, even 3d transforms. For example, sprites have size that actually override texture parameters and does not affect scale. I'll make sure to create PR for PIXI Object Model.

2. I will check if its possible to add Spine animations to that model.

 

[PixelPicoSean]

Awesome +1, this can totally be the model layer of any editor for PIXI based projects as you said. So you're also going to open source your homebrew animation editor?

[FlorianLudwig]

(I also work at Grey Rook)

Hey,

thanks for the great replies  

@ivan.popelyshev i commented on your issue / feature request and I agree, we should have rotation in degrees!

pixi v4

I suggest we keep compatibility to v3 for some time.  We internally will take some time to move to v4 - test a lot of stuff before we can move our content and I would like to throw away our internal POM version and built upon the foss one asap.

open sourcing the editor

Sorry i have to disappoint you on this - currently it is not planned.  It is a really big code base - client and server (There is a lot more than one might think at first, for example just think asset management - you upload a file in what ever you like format and it gets converted. Upload a tiff and you get a png, pxr, dds. Upload multiple numbered tiffs and you also get a mp4 and webm. acutally multiple mp4 for different browsers, etc. etc. etc). And some of the code we cannot legally open source. So cleaning it up for a open source release takes a lot of manpower that we currently cannot justify, business wise. Sorry.

But we will move bottom up - open sourcing one thing at a time.  And hoping it is still useful for you guys!

[ivan.popelyshev]

@FlorianLudwig 

Arturs Sefers (meta2d.com) is working on open-source editor that supports multiple engines (both 2d and 3d) so im gonna to help him and add pixi to it

[FlorianLudwig]

@ivan.popelyshev would be great if we could share some resources / code along the way.  Didn't know about meta2d till just now, I took a quick look but could not find anything about the editor.

Using some shared file formats would be great as we would built tools that can work together.  As said, we will release more of our code and it all builts ontop of the POM idea.  So it really is the center piece.