Jump to content

Set Cotainer bounding boxes


Recommended Posts

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? 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...