best approach for UI?

Hi!

I’m porting an old game written in webGL to unity and so far is running great, the only problem I’m having now is adapting it to different screen sizes (I’m targeting mobile only). It’s a word game where I have a board with letters, a label for the currently selected word, a label for the current score and a progress bar.

This is what I’m doing right now:

Basically the board is a game object, the tiles are also game objects, the current word + score + progress bar are all UI elements.

I’ve tried many different approaches:

  • Canvas in world space mode (and also as a child of the board)
  • Canvas in screen space mode attached to main camera
  • Many different anchors

but nothing seems to work to maintain the labels to different proportions. Is there a way to “attach” a UI element to a particular game object?

I ask this because at the beginning of the game, in order to maintain the right aspect ratio, I’m doing the following:

  • change the camera ortographic size in order to maintain the proportion of my target width and height (640x960), I fill the rest with a background color
  • Use the scale factor of the screen size related to the target width to scale everything in the board accordingly

This works perfect for all in-game elements (tiles, powerups, etc), but fails miserably for UI elements. I could try to use a bitmap font for the labels, but they don’t look as good as the new UI elements. And I would also like to use the new UI for other in-game things, like tutorial, dialogs, etc.

Anyone has any pointers on how I can achieve this using the new UI elements? Or should I just be using only 2d sprites? After playing a lot with the new UI elements, I’m not 100% convinced this is a good use case for them anymore…

In the end I just created everything using game objects. Works better, and it gave me the opportunity to improve my bitmap font rendering code :slight_smile:

I did end up using the new UI for the tutorial HUD though.