I have a 2D tile game that properly scales itself to fit the current available UI; that works fine.
My question is, as I add more and more elements to the UI, it becomes increasingly complicated to position and scale each element without making a mistake.
What I would like is the ability to group everything into a Canvas and Panel or Quad or some parent object that I scale and then have everything within it scale accordingly.
Simply making these N items (logo, player score, high score, continue button, and so on) all children of the background quad doesn’t seem to accomplish it. So, before I go too far down this road, can someone explain the right design approach?
Currently, I have a 2048x1536 background and draw all of my UI to fit that; I scale the background quad based on the orthographic size of the camera and the screen height as follows and do the same to position and size everything else. I’d rather do it exactly once on a parent container and let the other items within it just automagically size with the parent if possible. Or whatever the right way is!
scale = Screen.width / nativeResolution.x; // Ratio of actual size to design size
pixelsToUnits *= scale; // Units per pixel
var rawCameraHeight = Screen.height / 2.0f;
var scaledCameraHeight = rawCameraHeight / pixelsToUnits;
camera.orthographicSize = scaledCameraHeight;