An Implementation of VTuber (Both 3D and Live2D) using Python and Unity. Providing face movement tracking, eye blinking detection, iris detection and tracking and mouth movement tracking using CPU only.
MIT License
499
stars
84
forks
source link
[Tutorial] Create a 9:16 game aspect ratio in Unity to let the UI showing correctly #14
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.
After importing a package, your UI should look like this, with widgets, buttons leaving their ideal position.
Click the aspect ratio area. A drop-down menu should be shown.
Click the "+" button at the bottom of the drop-down menu
A menu is shown for you to input the custom 9:16 aspect ratio. Following the picture bellow to input them. Press "OK".
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 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.
After importing a package, your UI should look like this, with widgets, buttons leaving their ideal position.
Click the aspect ratio area. A drop-down menu should be shown.
Click the "+" button at the bottom of the drop-down menu
A menu is shown for you to input the custom 9:16 aspect ratio. Following the picture bellow to input them. Press "OK".
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