Jump to content

Get Renderer size from deep nested element


Recommended Posts

Hi, I have this set up (simplified of course)

|--- FIrst Main Container
|------ FIrst Child Container
|------ Second Child Container
|--- Second Main Container
|------ FIrst Child Container
|------ Second Child Container

I need to find the dimensions of the renderer (PIXI APP) in one of the child containers, for positioning purposes in a pointer event. Unfortunately this.parent.parent returns null.

One alternative I found is using getBounds()

function pointerDownHandler(e) {
    console.log( this.parent.getBounds() );

Using the left, right, top and bottom properties returned by the PIXI Rectangle gives me the dimensions of the renderer. The follow up question is: Is this a safe way to get the renderer dimensions or I might run into some calculations problems at some point?


Link to comment
Share on other sites

well, you can embed it into stage...

app.stage.screen = app.renderer.screen;

it'll be updated automatically in case of resize. That way you'll have that size in parent's parent's parent's parent.

Also, usually app is global. Or there is something global that has such things as renderer, its size, e.t.c.

The cause why pixi doesnt store it in stage is trivial: there might be multiple renderers with different sizes. Renderer and Stage are not connected at all. Of course its good to have something that can fit the screen like in Flash or in Phaser, but, historiclaly, pixi didnt have that code, all devs just keep using their own stuff. 

For the architecture, the best way is to copy Application class like here: https://github.com/pixijs/pixi.js/wiki/v5-Custom-Application-GameLoop into your own class, and write a component to it that manage sizes of canvas and other stuff , and deals with pointer events adjustment too.

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...