René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"[Tutorial] Create a 9:16 game aspect ratio in Unity to let the UI showing correctly","articleBody":"Thank you for your interest about this project. I did not expect that much attention on YouTube in last year when I uploaded.\r\n\r\n###Background\r\n\r\nI 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. \r\n\r\nMoreover, 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.\r\n\r\n###Steps\r\n\r\nHere I am using the UnityChan project as a demo. The procedure is applicable to the Live2D unity project.\r\n\r\n1. After importing a package, your UI should look like this, with widgets, buttons leaving their ideal position.\r\n\u003cimg width=\"749\" alt=\"game_ui_ratio_setting_0\" src=\"https://user-images.githubusercontent.com/40860474/168620544-39ebb2e1-2d06-4546-bc2f-6daae5bf704a.png\"\u003e\r\n\r\n2. Click the aspect ratio area. A drop-down menu should be shown.\r\n\u003cimg width=\"749\" alt=\"game_ui_ratio_setting_1\" src=\"https://user-images.githubusercontent.com/40860474/168620605-68651a16-0275-47de-96f9-3ebb049c2a40.png\"\u003e\r\n\r\n3. Click the \"+\" button at the bottom of the drop-down menu\r\n\u003cimg width=\"745\" alt=\"game_ui_ratio_setting_2\" src=\"https://user-images.githubusercontent.com/40860474/168620830-18fc0041-c1cf-4063-a3a0-247a9f76d59f.png\"\u003e\r\n\r\n4. A menu is shown for you to input the custom 9:16 aspect ratio. Following the picture bellow to input them. Press \"OK\".\r\n\u003cimg width=\"748\" alt=\"game_ui_ratio_setting_3\" src=\"https://user-images.githubusercontent.com/40860474/168620909-8970c9dc-b463-4281-a2f4-a34fa1d967bd.png\"\u003e\r\n\r\n5. Apply the newly input aspect ratio and you can see the UI components are back to their right position.\r\n\u003cimg width=\"747\" alt=\"game_ui_ratio_setting_4\" src=\"https://user-images.githubusercontent.com/40860474/168621112-eb8bdfc2-aed4-4c3b-90ae-771c64e773f5.png\"\u003e\r\n\r\n###Add-ons\r\n\r\nIf 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. \r\n\r\n(Hint: the meaning is height = width of the panel (Cell size X of Grid Layout Group) * \"Cell Ratio\")\r\n\r\n\u003cimg width=\"472\" alt=\"game_ui_ratio_setting_5\" src=\"https://user-images.githubusercontent.com/40860474/168622996-c505caf8-9613-4a49-9fa5-145f2104d115.png\"\u003e\r\n\r\nThank you for your interest on this project.\r\n\r\nI hope you can enjoy this project.\r\n\r\nmmmmmm44\r\n\r\n","author":{"url":"https://github.com/mmmmmm44","@type":"Person","name":"mmmmmm44"},"datePublished":"2022-05-16T15:02:45.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":0},"url":"https://github.com/14/VTuber-Python-Unity/issues/14"}