Resizing canvas/UI elements to fit game screen? Ahh!!!

Updated on April 19, 2018 in [A] GUI
Share on Facebook0Tweet about this on TwitterShare on Google+0Share on Reddit0
9 on April 18, 2018

Hi there, I recently downloaded an asset package with 3 different bars for health, mana and shield. I exported that project, and imported it into my game, and I know this has happened before but the canvas and the 3 bars that it contains in the top left are enormous, many many times bigger than the game view.
I have researched and tried every setting I can find, but can only resize every individual element of the bars (background, bar, icon, text) separately in which case they move apart from each other, and even then changing the font does not resize the text to fit the resized elements. Furthermore, when I start the game the elements do resize a little on their own, but appear large, and to the left of the game view, and behind any other objects in the scene regardless of their Z position value.
I am really close to being able to use my game to make some good things, but this is really, really holding me up, and suggestions would be GREATLY appreciated.
<3

  • Liked by
Reply
0 on April 18, 2018

Could you show us a picture of the canvas?

 

  • Liked by
Reply
Cancel
0 on April 18, 2018


  • Liked by
Reply
Cancel
0 on April 18, 2018

https://www.dropbox.com/s/bhxtfkyz97evzih/healthbarconundrum.jpg?dl=0
https://www.dropbox.com/s/2brkattn2ep0ddr/healthbar%20conundrum.jpg?dl=0

  • Liked by
Reply
Cancel
0 on April 18, 2018

The first pic is what it looks like when double clicking on any of the health bars in the heiarchy. The game is waaaaay down in the middle and is not even visible until zooming way in. The top red bar is what happens when you try to manually change the height and width of each individual element in the health bar in a complete fail of an attempt to properly resize it.
The second pic is inside the game view is in game view after pressing play.
Ideally I want them stuck to the top left of the screen, and if there was a 2 player it would be on the top right.
Thaaanks! 🙁 😛

 

  • Liked by
Reply
Cancel
0 on April 18, 2018

Ok, I thought it might be this. Unity’s UI canvas is separate of the 3D world. It’s only seen through the camera. What does look like when you press play and look through the main camera instead of the editor window?

 

  • Liked by
Reply
Cancel
0 on April 18, 2018

the main editor window? do you mean looking either through scene or game? it looks pretty much the same both ways…I will upload a pic 🙁

 

  • Liked by
Reply
Cancel
0 on April 18, 2018

https://www.dropbox.com/s/n4q8n6qifqi7iou/healthbar%20conundrum%203.jpg?dl=0

Thanks a lot for the replies again, and so quick! I always assume it’ll be a day or two before anyone responds if they do, so don’t check back for hours.
This community is great

  • Liked by
Reply
Cancel
1 on April 19, 2018

Hi, unity canvas is set to world space by default and is usually huge and separate from your scene, this is usually the recommended setting, you just have to scale the elements and see if the fit in the game window. Another way is to change your render mode to Camera space and drag your main camera into the public field to shrink the canvas space to your camera. Also you can make your canvas scale depending on screen size.

See Link: https://trello.com/c/OPVQ0gI7/12-canvas-ref

Wise
on April 19, 2018

Canvas are set to Screen-Space Overlay by default, not World-Space. However, either or, without changing any settings, it will look HUGE in the editor. For Screen-Space and Camera-Space, this doesn’t matter because the UI is just drawn on top of everything else.

 

@simplicitydown, Can you post what it looks like in play mode in the game view?

Show more replies
  • Liked by
Reply
Cancel