Saving/loading sprite states? (positions/colours etc.)

[imbiss4]

Hi, so I am trying to use Pixi for a browser-based drag/drop floorplan application, where people can add assets (like walls, chairs and tables) to the canvas, label them and so on. From what I have tried it can accomplish this no problem. I can work which each element as a sprite.

Where I'm struggling is figuring out how to dynamically save and load the layout and it's children sprites. I have tried to create a layout, then store app.stage.children and then load it back into a new blank canvas, but I am having all kinds of issues with the circular data etc. 

I have found threads like this:

https://github.com/pixijs/pixijs/issues/3798

And it's promising but fairly old. Does anyone have any ideas on the best way to accomplish this? Right now it's looking like the most likely solutions is to loop through the children, extract needed data, then upon load go and re-add each sprite and it's properties. Any easier way? Bearing in mind the data will need to be stored in a database.

Appreciate any help. 

 

[ivan.popelyshev]

Usually when persistance introduced, issues are getting x3 times harder to track. That's why PixiJS doesnt deal with persistence - custom plugins do. If you dont see those plugins at https://github.com/pixijs/pixijs/wiki/v5-Resources and https://github.com/pixijs/pixijs/wiki/v6-Resources - that means no one cared enough to actually maintain those plugins and track them.

Here is the plugin that doesnt save stuff, but allows a component approach, post is still in the first page of this subforum: https://github.com/WLDragon/oixi2

[Jammy]

Hi.

I have one tip for this, toJSON. You might find something better but this is how I do it.

Extend what you want like this for example.

Now whenever you serialize these objects you will just get x,y back. Extend where you need and add to toJSON() where you need.

StageThing extends PIXI.Sprite {
  toJSON() {
    return {
      x: this.x,
      y: this.y
    }
  }
}

It will mean you have to ensure when you reload the object, just re-assign the properties

StageThing extends PIXI.Sprite {
	constructor(saveData) {
		this.x = saveData.x;
		this.y = saveData.y;
	}
}
onLoad(itemData){
	new StageThing(itemData)
}

Jammy.

[ivan.popelyshev]

Btw, add "rotate" there and see how without proper rounding files are looking like shit. That's usually first problem of persistence. That's when people first time ask themselves "do i really want to make it open-source later?"

[Jammy]

Yes it's true, I feel like anything "general purpose" for this would mean lots of configuration to decide how values are processed and stored, everyones solution has to be suitable for their needs and with JS these days 1 size fits all is far from the reality.

On the case of storing values and also trimming values and converting values, my setup looks like this, to give others an idea of what conversions I use to keep things a little tidier in save files.

toJSON() {
		return {
			codename: this.codename,
			spriteName: this.spriteName,
			sprite: this.sprite,
			data: Object.assign({inventory: this.inventory}, this.data),
			x: Math.floor(this.x),
			y: Math.floor(this.y),
			class: this.class,
			scale: parseFloat(this._container.scale.x.toFixed(2)),
			rotation: parseFloat(this._container.rotation.toFixed(2))
		};
}