Maison > interface Web > tutoriel HTML > Analyse approfondie du mode de rendu Canvas

Analyse approfondie du mode de rendu Canvas

PHPz
Libérer: 2024-01-17 09:32:13
original
895 Les gens l'ont consulté

Analyse approfondie du mode de rendu Canvas

Explication détaillée du mode de rendu de Canvas, des exemples de code spécifiques sont requis

Dans Unity, Canvas est le composant le plus basique et le plus clé pour l'implémentation de l'interface utilisateur 2D. Canvas a deux modes différents pendant le processus de rendu : Screen Space et World Space. Ces modes de rendu seront plus adaptés à des situations spécifiques, et nous devons choisir différents modes en fonction des besoins du projet. Dans cet article, nous nous concentrerons sur les deux modes de rendu de Canvas et comment les utiliser.

  1. Screen Space

Screen Space est le mode de rendu le plus basique de Canvas. Il s'affiche directement à l'écran et dessine les éléments de l'interface utilisateur sur l'écran. Lorsque les objets de la scène bougent ou pivotent, les positions des éléments de l'interface utilisateur ne peuvent pas suivre les changements correspondants. Par conséquent, ce mode est le plus adapté aux interfaces d'interface utilisateur fixes, telles que le menu principal du jeu, les paramètres, etc.

1.1 Mode superposition

Le mode superposition est un mode de rendu de Screen Space. Les éléments de l'interface utilisateur de ce mode seront dans un calque indépendant dans la scène et n'interagiront pas avec d'autres objets 3D de la scène. Lorsque la caméra bouge, cette couche d’éléments d’interface utilisateur restera toujours devant. En mode Superposition, l'ordre de rendu du canevas est déterminé par le niveau du composant canevas dans le panneau hiérarchique.

Voici un exemple de code :

public Canvas overlayCanvas;

void Start()
{
    overlayCanvas.sortingOrder = 10;
}
Copier après la connexion

Dans cet exemple, nous déterminons la position de ce canevas dans la file d'attente de rendu en définissant la propriété sortOrder du composant canevas.

1.2 Mode Caméra

Le mode Caméra est un autre mode de rendu courant dans Screen Space. En mode Caméra, les éléments de l'interface utilisateur sont liés à un objet caméra indépendant, et la caméra restitue uniquement les objets liés au canevas de l'interface utilisateur au lieu de restituer l'intégralité de l'écran. Ce mode de rendu est généralement utilisé lorsque des effets de caméra ou une occlusion sont requis.

Voici un exemple de code :

public Canvas cameraCanvas;

void Start()
{
    Camera camera = GetComponent<Camera>();
    camera.targetDisplay = 1;
    cameraCanvas.worldCamera = camera;
}
Copier après la connexion

Dans cet exemple, nous créons et configurons une caméra indépendante dans la scène, puis attribuons l'objet caméra à la propriété worldCamera du Canvas afin que l'élément UI ne restitue que les images. observé à travers la zone de la caméra.

  1. World Space

Le mode World Space est un autre mode de rendu Canvas, basé sur le rendu spatial 3D. Par rapport au mode Screen Space, en mode World Space, les éléments de l'interface utilisateur changeront en conséquence à mesure que les objets de la scène bougent et tournent, et peuvent interagir avec d'autres objets 3D de la scène. Dans ce cas, l’interface utilisateur de la scène a généralement tendance à être utilisée lors de la construction de la scène.

2.1 Mode superposition

Le mode superposition est également pris en charge dans World Space. Par rapport à Screen Space Overlay, dans World Space Overlay, le canevas et les éléments de l'interface utilisateur se trouvent dans le même espace 3D que les objets de la scène, et les éléments de l'interface utilisateur sont rendus sur le plan où se trouve l'écran.

Voici l'exemple de code :

public Canvas worldCanvas;

void Start()
{
    worldCanvas.renderMode = RenderMode.WorldSpace;
    worldCanvas.transform.position = new Vector3(0f, 0f, 10f);
}
Copier après la connexion

Dans cet exemple, nous définissons le mode de rendu du composant Canvas sur WorldSpace pour que les éléments de l'interface utilisateur changent avec les objets de la scène.

2.2 Mode Caméra

Le mode Caméra convient également au mode World Space et, dans certains cas, l'utilisation du mode Caméra peut considérablement optimiser les performances. En mode Caméra, les éléments de l'interface utilisateur ne sont rendus que dans la zone visible de la caméra liée au canevas. Cette méthode de configuration relativement complexe rend le mode Caméra très efficace pour les grandes opérations d'interface utilisateur dans les scènes 3D UDP, telles que les actions de caméra, le changement de scène, etc.

Voici un exemple de code :

public Canvas worldCanvas;
public Camera canvasCamera;

void Start()
{
    worldCanvas.renderMode = RenderMode.WorldSpace;
    worldCanvas.worldCamera = canvasCamera;
}
Copier après la connexion

Dans cet exemple, nous définissons le mode de rendu de Canvas sur WorldSpace, puis définissons la worldCamera de Canvas sur la caméra liée pour obtenir un grand nombre d'interactions d'interface utilisateur et d'opérations de scène 3D. .

Résumé

Grâce à l'explication ci-dessus, nous pouvons savoir que Canvas dispose de deux modes de rendu : Screen Space et World Space, et chaque mode prend en charge deux méthodes de rendu différentes : Overlay et Camera. La manière de choisir un mode de rendu dans un certain mode dépend des exigences de scène de l'application. J'espère qu'à travers cet article, tout le monde aura une compréhension plus détaillée de l'utilisation de Canvas dans Unity.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal