Jump to content

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


Recommended Posts

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. 

 

Link to post
Share on other sites

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

Link to post
Share on other sites

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.

Link to post
Share on other sites

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

 

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...