Moving from Phaser 3 to Pixi.js : Is there any equivalent of the "Phaser.Scene" abstraction?

[yourdevalongtheriverup]

I am currently in the process of moving a hobby project from Phaser 3 to Pixi.js (while also attempting to abstract the specific graphics engine/library away). I have only looked very briefly at Pixi.js, but from what I can tell, given the way my project is structured, it seems likely that the move should not be hard (and I can always back out or try another approach if it turns out to be hard). The main doubt I have is reg. the Phaser.Scene abstraction - I haven't quite seen anything in Pixi.js that seems equivalent to it. I could roll my own if needed, but I would like to use any existing abstraction in Pixi.js that is similar to Phaser.Scene if there is such an abstraction in Pixi.js .

Do you know of something like that in Pixi.js?

[ivan.popelyshev]

There's no Scene

what else you can expect:

1. no animation manager. Even if you use GSAP tweens, no one actually tracks when element leaves the stage so animations will run till end consuming CPU . Spine animations also better to update from your own code. The only abstraction that helps you is Ticker, no need to use plain RAF.

2. no ECS of any kind. Here's kinda-ECS minimal architecture on top of pixi: https://codesandbox.io/s/pxiijs-basic-ecs-architecture-yql4n  , btw it has basic Scene in it. Pixi Runner certainly helps.

3. no resize manager. Said demo has stupid 720x1280 css resize, but if you want something better - well, you have to make your own logic for FIT, or SCALE or whatever.

4. no physics integration, at all. Wanna integrate - see the demo  https://codesandbox.io/s/pixijs-physics-integration-fie1l , you can add other physics libs same way.

Basically , you have to write your own engine on top of pixi

[ivan.popelyshev]

There are many plugins though: https://github.com/pixijs/pixijs/wiki/v5-Resources , that might help

[yourdevalongtheriverup]

Thank you very much for the detailed answer, and for the example, I have spent some time looking at it. I think I will have to roll my own "scene-like" abstraction for Pixi.js, which is OK. Some more assistance reg. resource management would not be bad, but I would guess/hope that it would not be too difficult to roll some primitive resource handling classes oneself, at least for basic needs.

Pixi.js may be a little bit more "lower-level" than what I would have liked, but I think it fits my project well - for instance, I have my own non-engine physics/collision handling, so lack of physics integration is actually a benefit for my project. And Pixi.js being much more focused has a number of nice parts to it.

The documentation seems less filled out here and there, and some of it seems older, but the source repository has multiple different contributors, and the project seems healthy, among many other aspects. And Typescript is very, very nice to have (though Phaser 3 also supports Typescript - good thing about both Pixi.js and Phaser).

I think I will start out with the most recent version, which seems to be Pixi.js v6.

As an aside, I am a bit confused about the line reg. "obsolete containers" in https://pixijs.io/examples/#/plugin-layers/zorder.js, I couldn't see anything reg. obsolescence or deprecation at https://pixijs.download/dev/docs/PIXI.Container.html . If it is in fact deprecated, might it make sense to add some sort of deprecation annotation to the documentation and/or source code?

[ivan.popelyshev]

"obsolete" only those three, because its only for the test really those bunnies dont need to be separated to two parts, but it shows that even if you separated them - you can sort them with parentLayer.  

the idea is that you group objects by transform/adding/removal in pixi containers, not visual layers. Visual layers can be added somewhere else and you can specify where the object will be drawn.

Yes, that's completely different approach to layering than in phaser and other renderers, its only for pixi and only if you use `@pixi/layers` plugin. Its very fast and gives dexterity others cant give you.

Edited June 11, 2021 by ivan.popelyshev

[yourdevalongtheriverup]

Thank you for the answer, that explains why "obsolete" was there - might "superfluous" instead of "obsolete" be a more accurate word in that context?

The extra flexibility that it sounds like `@pixi/layers` gives you sounds very nice, though I will have to look into it more to understand it better.