Update scene graph via state

[dmko]

I'm toying around with the idea of rendering out via react or some other "view-from-state" methodology. Whatever it is - in this scenario, state is managed via logic before it gets pushed to the view and state is 100% pure simple plain object data.

Is there a good way to work with this and pixi?

e.g. imagine I end up with objects like this (just illustrative, I haven't cracked the exact format yet):

state: { 
  background: bgTexture, 
  spriteLayers: [
    [{texture: personTexture, x:1,y:2,scale:1}, {texture: enemyTexture, x: 100,y: 100, scale: .5}],
    [{texture: tree, x:50,y:50,scale:1}, {textureFrames: clouds, x: 75,y: 75, scale: 1, frame: 10}]
  ]
}

It wouldn't be a 1:1 mapping to pixi, and I'd be throwing in other non-pixi metadata (e.g. physics info like velocity), but it should be able to translate directly into a representation via pixi

Each tick the entire object would be updated and re-passed to the renderer.

I'm not sure if I'll actually build anything with this right now, but I'd love to hear some approaches - even if just for putting in the back of my mind.

A naive approach might be to completely wipe the Stage and just re addChild everything from scratch every frame... but I guess that's wildly less efficient than just moving objects that have changed, etc.

I guess I'm looking for a sort of vDom implementation for PIXI type of thing...

Thanks!

[ivan.popelyshev]

PIXI development is going fast because it doesnt have any persistance of the data. Formats that we support (spritesheet, spine, animate) are serious pain.

Instead of making general format we dump this problem on user,  people make their own format and editor for it. Like that one: https://github.com/GreyRook/POM

You have to dedicate really big amount of time to this thing. But if you do, please make rotations in degrees, I already won that battle for pixi-v5

[dmko]

Whoa that is awesome - didn't realize some work has already been done

I hear you about format support issues. To be clear, I'm not suggesting a standard format (though that would be awesome!) - I'm more interested in, like how I can take my own simple data and efficiently re-render everything every frame.

Would it be awful to removeChild the highest node and then re-create everything? Right now I'm only thinking visually - not considering touch events and things like that.

I guess if I'm going that route I might as well just break my teeth over WebGL since it would be a repaint, but I'm still just curious about the best way to do something like this with PIXI

(p.s. this is of course my experimentation come off of some other discussions wrt to sodiumfrp and react... couldn't find the links here but anyway this is kindof a separate thread)

(p.p.s. glad to hear about the rotation thing! did advanced blend modes make it in too, especially ability to erase? I'm not really following pixi development closely, love the work you're all doing though!)

[ivan.popelyshev]

You have to map it to pixi objects, otherwise it will just reset optimizations of static transforms and some other stuff.

Yeah, about erase and advanced blendmodes, I want it to be in v5, so far that branch is not working on iphone, i dont know why. However there's workaround: 

 

In general, pixi development goes forward, and while I dont know what others are doing, I'm very busy with new plugins: https://github.com/gameofbombs/pixi-super-atlas, https://github.com/pixijs/pixi-projection

and new fork https://github.com/gameofbombs/gobi , no demos yet, but its faster for big number of objects.