Setting up the UI Canvas

mobile devices come in many different screen sizes and resolutions in zepeto world, unity's canvas is used to express ui elements, so unity has the same limitations the following guide provides a neutral set up to present your ui for as many devices as possible therefore, although it is not possible to express a ui that fits exactly on all mobile devices, we aim to place ui elements in similar positions on most devices canvas settings in vertical screen mode 1\ canvas settings for portrait screen mode are set as below ui scale mode scale with scren size reference resolution x 750 y 1334 screen match mode match width or height match width 2\ safearea settings create an object called safearea as a child of the canvas object in the inspector panel, click the add component button to add the zepeto screen safe area component 👍 tips the zepeto screen safe area component moves the ui that is covered by the notch area and home bar of certain terminals to the inside of the screen on the ios screen ui objects affected by zepeto screen safe area can be included as sub objects 3\ set the upper right button area set the button area on the upper right to automatically align left and right whenever elements are added as sub objects through layout group create a new object under safearea and set the following components rect transform posx 22, posy 22 horizontal layout group spacing 20 child alignment upper left content size filter horizontal fit preferred size 4\ button settings create a button object as a child of the button area the buttons are automatically aligned and apply the following settings width 62 height 62 5\ check on device now, if you build the world and check it on your mobile device, you will see a button located in the upper right corner as shown in the following image ❗️ caution since the left home button and chat button are buttons displayed in the native environment of the zepeto app, the exact location and size cannot be matched through canvas 6\ setting the top left ui in order to set ui elements in the left area of the screen, only a few changes in the right area set in step 3 are required here are the settings you need to change recttransform posx 22, posy 22 horizontal layout group spacing 20 child alignment upper left canvas settings in horizontal screen mode 1\ canvas settings for landscape mode are set as below ui scale mode scale with screen size reference resolution x 750, y 1334 screen match mode match width or height match width 2\ safearea settings create an object called safearea as a child of the canvas object in the inspector panel, click the add component button to add the zepeto screen safe area component 👍 tips the zepeto screen safe area component moves the ui that is covered by the notch area and home bar of certain terminals to the inside of the screen on the ios screen ui objects affected by zepeto screen safe area can be included as sub objects 3\ set the upper right button area set the button area on the upper right to automatically align left and right whenever elements are added as sub objects through layout group create a new object under safearea and set the following components rect transform posx 22, posy 22 horizontal layout group spacing 20 child alignment upper left content size filter horizontal fit preferred size 4\ button settings create a button object as a child of the button area the buttons are automatically aligned and apply the following settings width 62 height 62 5\ check on device now, if you build the world and check it on your mobile device, you will see a button located in the upper right corner as shown in the following image ❗️ caution since the left home button and chat button are buttons displayed in the native environment of the zepeto app, the exact location and size cannot be matched through canvas 6\ setting the top left ui in order to set ui elements in the left area of the screen, only a few changes in the right area set in step 3 are required here are the settings you need to change recttransform posx 22, posy 22 horizontal layout group spacing 20 child alignment upper left