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.

[ShukantPal]

You can directly use @pixi/core and not touch any display objects. You can throw out Application as well; renderer.render would not be used at all either (since it expects a DisplayObject to render).

The rendering loop would do something like:

• Emit the 'prerender' event (if desired)
• renderer.renderTexture.bind(null); renderer.renderTexture.clear(): Bind & clear the canvas
• renderer.batch.setObjectRenderer(renderer.plugins.batch): Activate the batch renderer
• For each mesh/entity in your scene, you would generate the vertex-data, UVs, etc. and pass them to the batch renderer (see IBatchableElement)

renderer.batch.render({
  vertexData: <<Float32Array>>,
  uvs: <<Float32Array>>,
  indices: <<Uint16Array>>,
  _tintRGB: 0xffffff,
  _texture: <<Texture>>,
  worldAlpha: 1
});

• renderer.batch.flush(): Finally flush the batched rendering data
• Emit the 'postrender' event (or do renderer.gl.flush() if undesirable)

[githubaccount256]

Hi @SukantPal thanks for the prompt reply!

Eek, this is a bit awkward now. I know I asked for something low-level, but I'm worried this might now be too low level! Sorry for being annoying.

That is, I'm a bit of a noob and am not sure exactly how to get the values in the parameters for renderer.batch.render. I generally have two types of things that I render in my game: images from PNGs, and drawn graphics.

One of them is just imported from an external asset, and the other is drawn, similar to how the canvas2d API does it, with PIXI's Graphics API.

Do you know if it's possible to easily convert these values to one's that are requested by renderer.batch.render? That is, how do I take a Texture loaded from the TextureLoader and then obtain those parameter values? Similarly, can I still use PIXI Graphics to draw lines and rectangles and such?

I was hoping there would be a method in PIXI that just let you avoid the whole "adding sprites and graphics to containers" thing, and just render them directly on the screen at a specified location instead. Does that not exist? Thanks again for your help!

[ShukantPal]

Heya @githubaccount256, no problem. This is the case for retained vs immediate mode for graphics libraries. PixiJS is designed to be a retained mode library - you give it your scene graph.

I wouldn't recommend using it as an immediate mode library; however, if you want to it would look something like:

• Emit 'prerender' on renderer event (if desired)
• renderer.renderTexture.bind(null); renderer.renderTexture.clear(): Same as last time
• For each of your Graphics objects, graphics.updateTransform(); graphics.render(renderer): Update transform and render the graphics. DO NOT ADD GRAPHICS AS A CHILD OR PARENT OF SOMETHING ELSE :)
• renderer.batch.flush(): Flush the batch renderer
• Emit postrender or do renderer.gl.flush()