Configuration de l'interface utilisateur Canvas

les appareils mobiles se présentent sous de nombreuses tailles d'écran et résolutions différentes dans le monde zepeto, le canvas de unity est utilisé pour exprimer les éléments de l'interface utilisateur, donc unity a les mêmes limitations le guide suivant fournit une configuration neutre pour présenter votre interface utilisateur sur le plus grand nombre possible d'appareils par conséquent, bien qu'il ne soit pas possible d'exprimer une interface utilisateur qui s'adapte exactement à tous les appareils mobiles, nous visons à placer les éléments de l'interface utilisateur à des positions similaires sur la plupart des appareils paramètres du canvas en mode écran vertical 1\ les paramètres du canvas pour le mode écran portrait sont définis comme ci dessous mode d'échelle de l'ui échelle avec la taille de l'écran résolution de référence x 750 y 1334 mode de correspondance de l'écran correspondre à la largeur ou à la hauteur correspondre à la largeur 2\ paramètres de safearea créez un objet appelé safearea en tant qu'enfant de l'objet canvas dans le panneau inspecteur, cliquez sur le bouton ajouter un composant pour ajouter le composant zepeto screen safe area 👍 conseils le composant zepeto screen safe area déplace l'interface utilisateur qui est couverte par la zone de notch et la barre d'accueil de certains terminaux à l'intérieur de l'écran sur l'écran ios les objets ui affectés par zepeto screen safe area peuvent être inclus en tant qu'objets enfants 3\ définir la zone du bouton supérieur droit définissez la zone du bouton en haut à droite pour s'aligner automatiquement à gauche et à droite chaque fois que des éléments sont ajoutés en tant qu'objets enfants via le layout group créez un nouvel objet sous safearea et définissez les composants suivants transform rect posx 22, posy 22 groupe de mise en page horizontal espacement 20 alignement des enfants haut gauche filtre de taille de contenu ajustement horizontal taille préférée 4\ paramètres du bouton créez un objet bouton en tant qu'enfant de la zone de bouton les boutons sont automatiquement alignés et appliquent les paramètres suivants largeur 62 hauteur 62 5\ vérifiez sur l'appareil maintenant, si vous construisez le monde et que vous le vérifiez sur votre appareil mobile, vous verrez un bouton situé dans le coin supérieur droit comme indiqué dans l'image suivante ❗️ avertissement puisque le bouton d'accueil gauche et le bouton de chat sont des boutons affichés dans l'environnement natif de l'application zepeto, l'emplacement exact et la taille ne peuvent pas être correspondus via canvas 6\ configuration de l'interface utilisateur en haut à gauche pour configurer les éléments de l'interface utilisateur dans la zone gauche de l'écran, seules quelques modifications dans la zone droite définie à l'étape 3 sont nécessaires voici les paramètres que vous devez modifier recttransform posx 22, posy 22 groupe de mise en page horizontal espacement 20 alignement des enfants haut gauche paramètres du canevas en mode écran horizontal 1\ les paramètres du canevas pour le mode paysage sont définis comme ci dessous mode d'échelle ui échelle avec la taille de l'écran résolution de référence x 750, y 1334 mode de correspondance de l'écran correspondre à la largeur ou à la hauteur correspondre à la largeur 2\ paramètres de safearea créer un objet appelé safearea comme enfant de l'objet canevas dans le panneau inspecteur, cliquez sur le bouton ajouter un composant pour ajouter le composant zepeto screen safe area 👍 conseils le composant zepeto screen safe area déplace l'interface utilisateur qui est couverte par la zone de l'encoche et la barre d'accueil de certains terminaux à l'intérieur de l'écran sur l'écran ios les objets ui affectés par zepeto screen safe area peuvent être inclus en tant que sous objets 3\ définir la zone du bouton supérieur droit définissez la zone du bouton en haut à droite pour s'aligner automatiquement à gauche et à droite chaque fois que des éléments sont ajoutés en tant que sous objets via le layout group créez un nouvel objet sous safearea et définissez les composants suivants rect transform posx 22, posy 22 groupe de mise en page horizontal espacement 20 alignement des enfants haut gauche filtre de taille de contenu ajustement horizontal taille préférée 4\ paramètres du bouton créez un objet bouton en tant qu'enfant de la zone de bouton les boutons sont automatiquement alignés et appliquent les paramètres suivants largeur 62 hauteur 62 5\ vérifiez sur l'appareil maintenant, si vous construisez le monde et que vous le vérifiez sur votre appareil mobile, vous verrez un bouton situé dans le coin supérieur droit comme indiqué dans l'image suivante ❗️ avertissement puisque le bouton d'accueil gauche et le bouton de chat sont des boutons affichés dans l'environnement natif de l'application zepeto, l'emplacement exact et la taille ne peuvent pas être correspondus via canvas 6\ configuration de l'interface utilisateur en haut à gauche pour configurer les éléments de l'interface utilisateur dans la zone gauche de l'écran, seules quelques modifications dans la zone droite définie à l'étape 3 sont nécessaires voici les paramètres que vous devez modifier recttransform posx 22, posy 22 groupe de mise en page horizontal espacement 20 alignement des enfants haut gauche