Set Cotainer bounding boxes

[user711]

So I have a "radar" on one side of my stage which shows the current position of the player on the map.

It does not display all of the map, just a small sector, additionally the map radar follows the rotation of the player and shows some enemies.

 

Basically I've got a huge map texture (2048x2048) and the radar should only display a 256x256 segment, inside my gameLoop the mapTexture would be moved so that current player position is in the containers center, then all enemies get drawn onto it, and finally I rotate the whole radar container to match players rotation.

 

But PIXI.Container is just a base object. I've found this example: https://github.com/pixijs/pixi.js/issues/2051

Unfortunately it is very old (still uses renderer.render()) and I couldn't get it to work. So my question is now: how would one achive this the most efficient way without handling all "off-screen" player/objects? Overriding PIXI.Container.prototype.addChildAt and removing the call to calculateBounds()? Using an updated version of the issues' example? 

[ivan.popelyshev]

You have to use whatever you can to scan visible objects and setting "renderable=false" for not visible. Culling was never a part of pixiJS, it can be done so many ways that its up to you to make the one suitable for your project.

As for showing a copy of stage in minimap, well, I'm afrait you'll find so many edge cases that the only good solution will be to copy a part of stage somehow. I hope you already have a representation of game objects that does not depend on pixi objects.

[ivan.popelyshev]

This is reference code from my old pixijs fork: https://github.com/gameofbombs/pixi.js/blob/master/src/core/display/Camera2d.js#L332 . It wont work for you because its a different version of pixi.

Pixi game developers have different implementations and you have to ask each one to show you whatever they have, only to see that yeah, everyone is different and it cant be applied in your project directly.

[user711]

Hi @ivan.popelyshev,

thanks for replying.

Well I already figured out a pretty straight forward way to do this but as it seems there may be a bug in pixi.js:

https://github.com/pixijs/pixi.js/issues/5098

If you want to test it yourself I'll link it directly: https://codepen.io/anon/pen/gdgJmY?editors=0010

[ivan.popelyshev]

I replied in issues. The behaviour is expected. I dont understand what do you want to do there.

[ivan.popelyshev]

Also objects that dont fit the screen affect only vertex shader performance, they dont affect pixels (fragments). That means you can just render big container every time, and.. i cant properly explain that. Pixels are culled, geometries arent, so you have to make your own geometry culler.

[user711]

In my example BaseTexture is 200x200px. My "cut-out" (RenderTexture) is 100x100. I've illustrated it with the image below.

In the default case you'll see section A. How do I display section B, C or D without altering the original container? Or in general: how do I control the coordinates/position the RenderTexture cuts out?

 

EDIT: I've found something that may confirm my initial thought: changing frame.width and frame.height and then calling _updateUvs() works, frame.x and frame.y does not work as intended: https://codepen.io/anon/pen/YOZjJG?editors=0010

I've further found a workaround to my question: basically use a second RenderTexture to display a section of the first RenderTexture, then move around the (hidden) sprite of the first RenderTexture: https://codepen.io/anon/pen/mGWjKR?editors=0010