Pixi.js: Saving / loading scenes

[hsdk123]

Hi, is it currently possible with pixi.js to save and load the current scene of objects? (something along the lines of serialisation)

[ivanpopelyshev]

That one is the only i know: https://github.com/GreyRook/POM

[hsdk123]

I feel this would be something great if supported officially as a tool by pixi.js - serialization would really be a boost for ex. game development.

[DennisSmolek]

I'm actually doing a lot of this as I decided to migrate away from fabric for an online editor.

With the ES6 syntax it's actually not too hard to setup. You first have to figure out what "types" of objects you want to use in your app. Your option this is to extend PIXI or create your own class.

I chose to create my own classes like Rectangle, Circle, Img, Group

And you also need an id which we use Firebase so it generated keys for us, or you can do something like Date.now() * Math.random()

these classes all inherit a base export() function which is really just a boosted version of JSON.stringify()

This is an early working version at the most basic level:

// Generate a snapshot of the current pixi stage
    public generateExport(target = this.stage.children) {
        return JSON.stringify(target, (key, value) => {
            //blocked properties from the export. stops circular references
            let banned = ['scope'];

            if(key.substr(0,1) !== '_' && banned.indexOf(key) == -1) {
                if(key == 'parent') {
                    if (value && value.id) {
                        return value.id;
                    }
                    else {
                        return null;
                    }
                }
                return value;
            }
        });
    }

The reason you need this is there are circular references that can be a real pain.
I then have JsonDiffPatch which l use to create a history state for undo/redo changes.

So then you need a builder script, well you just have a class/object/switch to generate the items as you go over the JSON model.

It's pretty raw at the moment but it the base level it's working. I could post it up once it gets more polish if it would help at all.

[englercj]

I also did some scene saving/loading work. The general idea was to just serialize the properties, replacing references with a unique ID of the object. Similar to what @DennisSmolek did. Just a custom serialize function passed into JSON.stringify

[aJamDonut]

I extend pixi sprite for my game objects when so exporting them i will be using toJSON to just extract the properties i need, and then when loading from JSON i'll just recreate the objects as if it was the first time and put in the previous properties. It will take longer to code than Dennis' answer but I couldn't get that solution to work (posting more code would be much appreciated)

`this.toJSON = function() {

    return {
        x: this.x,
        y: this.y
    }

}`

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.