Using Canvas for a responsive UI

Creating a UI on Unity involves more than just adding components to the screen and positioning them where you like; with so many screen aspect ratios and sizes available on TVs, monitors, tablets, and smartphones, we need to make sure our UI will look great on all screen sizes. To this end, we employ a concept called responsiveness, which is very common in web design and enables the design or UI to adapt itself to the screen size, while always ensuring a base position and dimension that is in proper proportion relative to the screen aspect ratio.

This may sound confusing and feel like a lot of work, but Unity has great tools to help us design and configure the best-looking UI for our game. Before diving into these tools, let us first review the UI of one of the games that we are using as inspiration for our own project, Dragoncraft, which is Warcraft III by Blizzard. Here is a basic recreation of what its interface looks like:

...