[Tutorial] Create a 9:16 game aspect ratio in Unity to let the UI showing correctly

[mmmmmm44]

Thank you for your interest about this project. I did not expect that much attention on YouTube in last year when I uploaded.

###Background

I changed the game running aspect ratio from a landscape 4:3 to a portrait 9:16 in the view of showing the full body of the model. This is common in vtuber capturing software running on mobile, and for streamer to slowly revealing their new outfits from toe to head.

Moreover, I adjusted the UI panels optimally for this aspect ratio. Yet Unity does not come with this aspect ratio by default. Luckily, the changes are simple and with a few steps you can get a nice-looking UI.

###Steps

Here I am using the UnityChan project as a demo. The procedure is applicable to the Live2D unity project.

1. After importing a package, your UI should look like this, with widgets, buttons leaving their ideal position.

2. Click the aspect ratio area. A drop-down menu should be shown.

3. Click the "+" button at the bottom of the drop-down menu

4. A menu is shown for you to input the custom 9:16 aspect ratio. Following the picture bellow to input them. Press "OK".

5. Apply the newly input aspect ratio and you can see the UI components are back to their right position.

###Add-ons

If you feel uncomfortable with the UI, or want to adjust the height of each columns for landscape 4:3 display, or whether reason, the height of each columns can be adjusted in each of the panel, namely "Setting Panel" (child of "Character Setting Canvas"), and "TCP Panel". There is a script namely "AdjustGridLayoutCellSize" attached. Inside the script there is a parameter called "Cell Ratio". Adjust the value to increase/ decrease the height of the columns.

(Hint: the meaning is height = width of the panel (Cell size X of Grid Layout Group) * "Cell Ratio")

Thank you for your interest on this project.

I hope you can enjoy this project.

mmmmmm44