Jump to content

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


forleafe
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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

 

Screenshot from 2016-11-18 08-51-29.png

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

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.

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

Loading...
 Share

  • Recently Browsing   0 members

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