Is there no way to get the renderer's CURRENT width?

[forleafe]

I'm having a load of trouble with Pixijs right now. I have a game with click and drag mechanics, and I'm wanting it so you can't drag the sprite outside of the bounds of the renderer. my renderer resizes dynamically. For the freaking life of me, I can't figure out how to grab the current size my renderer so I can use it in conditionals. I'm trying to use:
 

"renderer.view.style.width" but console.log returns it as undefined....wat?

I tried using renderer.width, console.log returns that also as undefined. To make matters more hair rippingly frustrating, earlier today both of those pieces of code returned actual values. now none of them return anything. I can't even explain why that's happening.

Any help with how to keep me from dragging my sprite off the stage, or figure out how I can obtain the renderer's size would be wonderful. Thanks so much. And sorry if I sound ranty.

[Exca]

renderer.width should work. Which version of pixi are you using? I tested with 4.0.3.

[forleafe]

I have the version 4, the latest stable release. I literally downloaded it from the github a few days ago.

Attached is a screenshot of me trying a few different commands and getting strange results. You can see that renderer.width returns the ORIGINAL value of the width (not it's current value) followed by undefined, which I'm worried would throw off my code if I tried using this for conditionals. I also tried renderer.view.style.width and that returned a blank space followed by undefined. And yesterday the same code, unchanged, all returned undefined. I can't begin to understand why this is so finicky...

 

[Exca]

How are you resizing your renderer?

Do you have a fiddle or paste of your code somewhere?

[forleafe]

https://jsfiddle.net/jer3m7ek/

 

Here it is man. The method I'm using to resize it is at the very beginning. Basically just taking the browser viewport height, and doing a little bit of math to find the width.

This is my first real game project. So if I've done something wrong so far with my code and you happen to see it, please let me know!

[Exca]

You are only setting the css scale for the renderer on resize. You should use renderer.resize(width, height) to set the renderer to correct resolution.

[forleafe]

Screenshotted along with my code window.... I have no idea why, but this killed my code. Nothing ends up rendering anymore? No relevant errors get thrown either. Unless that one down there is why.

[Exca]

You dont have newHeight set when calculating the newWidth. Change the order of newWidth & newHeight calculation to make it work.

[Edit]
The newWidth is set to NaN which when resizing gets interpreted as 0. This means that your canvas will be 0xnewHeight. Which causes no errors but displays only a blank page.

[forleafe]

I'm so sorry this is being a pain... That worked, but with some problems. First off my scaling code for the container object broke, I'll have to look at that later. The bigger issue though is that renderer.width is now returning undefined.

[forleafe]

wait... that's odd... on a second examination I clicked the "logged" tab on the console, and it's showing me the values. Weird... I don't know why it returns the correct value followed by undefined. I'm wondering if I can still use this for doing conditionals?

 

[xerver]

Note that the `undefined` that you are seeing is the return value of `console.log()`. That function returns undefined, that is why you see the number (it was printed to console) then undefined (the return value of the command you ran).

[Exca]

You can use those renderer sizes to calculate limits if you want and you should round/ceil/floor the numbers to get integers.

If you want your game items to stay relational to screen size (ship for example always takes 1/4th of a screen width) then you have three options.

- Either keep the renderer size static and resize the canvas with css transform. (might look better in some cases + performs better with high resolution)
- Use dynamic renderer size and scale the container you keep your items in. (performs better in resolutions lower than what you would use in above solution, will most likely look better in pixel graphic game).
- Scale each of the asset separately and do needed calculations in positioning etc.

[forleafe]

The second option, using a dynamic renderer and scaling the container sounds perfect, and is close to what I've already coded. But I really can't seem to figure out how exactly to go about it? I'm guessing renderer.resize(); can be used to scale my renderer dynamically like you're talking about, but how would I make my container scale cleanly along with it?

[ivan.popelyshev]

"renderer.width / renderer.resolution" is the current virtual width. Just "width" returns you physical pixels. But most of the time , "renderer.resolution==1"