Can PixiJS be used solely as a rendering engine for use in an Entity Component System architecture?

[githubaccount256]

Hello, thank you for developing such an amazing library.

I was wondering if Pixi could be used as a more low-level rendering engine. For my game I have developed an ECS. That is, each of my entities is nothing more than a bag of components, and each component is simply a plain old data object of fields. For example, my components look like this:

class HealthComponent extends Component {
   current: number;
   max: number
}

class PositionComponent extends Component {
   x: number;
   y: number;
}

class TextureComponent extends Component {
   data: Texture;
}

and my entities look like this:

let player = new Entity();
player.components.push(new HealthComponent());
player.components.push(new PositionComponent());
player.components.push(new TextureComponent());

I then have systems like RenderSystem, CollisionSystem, MovementSystem which just contain functions that iterate over the relevant entities and draw them, update them, etc.

My issue is that PIXI seems perhaps a bit too high level for this, and I'm not sure if there exists anything in the PIXI library to accommodate this need. That is, it seems that PIXI asks you to create Sprites, insert them into Containers, update the sprite object's x and y properties each game update, etc., but even that is too high level for my purposes.

Ideally PIXI could just be used as a rendering engine, and I could avoid the whole high-level process of adding sprites to stages. That is, I could do something like this every frame (pseudocode):

app.renderer.render(myPlayerTexture, myPlayerLocation, etc..);
app.renderer.render(myGraphicsObject, etc..);

Initially I thought that was what https://pixijs.download/v4.6.1/docs/PIXI.WebGLRenderer.html#render did, but I've tried calling it with several different parameters, and each time the resulting canvas is just blank.

Sorry, this is getting a bit long-winded. Let me be more precise. I have the following questions:

1. Is it possible to integrate an Entity Component System with PIXI and instead use PIXI as a low-level renderer of graphics primitives and textures?
2. If so, is it a good idea?
3. If so, how should one do it? Are there any patterns or tutorials available? I'm not sure why when I tried to use renderer.render it was blank every time.

[bigtimebuddy]

@githubaccount256 my apologies. I migrated this to a discussion because it was a more open-ended question than a specific bug. But now I don't see @SukantPal's responses. I think GitHub borked the converting to Discussions.

[ShukantPal]

:(

[bigtimebuddy]

I filed a ticket with GitHub. Hopefully they can fix/undo this.

[ShukantPal]

The original issue still exists: #7202

[githubaccount256]

@SukantPal @bigtimebuddy

Ah, cool, I haven't seen this discussion feature before. Neat, yeah, this is definitely more of a discussion and deserved to be closed, so thanks for that.

Hmm, so, I guess now I'm just not sure what I should do. I'm very much attracted to PIXI due to its features and performance, but it's looking like an Entity Component System is more conducive to this "immediate" mode drawing style.

I'm trying to decide if maybe I should use another library, just use plain canvas instead, or try to use PIXI in this unintended (?) style in a way to immediately draw graphics. Or maybe there's a "clean" way to integrate Pixi.js with an ECS style? Although I'm struggling to think of it..

Do you have any idea of the performance differences between these approaches? I suppose I could use just some general advice on how to handle this situation. All I know is that I definitely want to use an Entity Component System, if for no other reason than I find the concept interesting and I'd like to try my hand developing a game with this sort of architecture, if only for experiment's sake.