Tutoriel Minimap de type aperçu pour Unity

Les niveaux de jeu se présentent sous de nombreuses formes, des simples niveaux 2D aux niveaux 3D plus complexes, avec de vastes espaces et couloirs.

Minimap est une carte miniature généralement placée dans le coin de l'écran et souvent utilisée dans les jeux vidéo pour aider les joueurs à naviguer dans le niveau de jeu.

Dans ce didacticiel, je vais montrer comment créer une mini-carte circulaire dans Unity, en utilisant le canevas d'interface utilisateur.

Pas

Pour le contrôleur du lecteur, j'utiliserai ce Contrôleur FPS.

Pour créer une mini-carte, suivez les étapes ci-dessous:

• Ouvrez la scène avec votre niveau de jeu
• Créez un nouveau canevas d'interface utilisateur, si vous n'en avez pas (GameObject -> UI -> Canvas)
• Créez une nouvelle image en cliquant avec le bouton droit sur Canvas -> UI -> Image
• Attribuez le sprite ci-dessous à l'image (clic droit pour télécharger l'image)

• Changez l'alignement de l'image en haut à gauche et le pivot sur (0, 1)

• Créez une nouvelle image brute en cliquant sur Canvas -> UI -> Raw Image (assurez-vous que l'image brute est placée avant l'image radar dans la hiérarchie, afin qu'elle soit rendue derrière).

• Créez une nouvelle caméra, nommez-la "Minimap_Camera", placez-la au-dessus de votre lecteur puis pointez-la vers le bas.
• Supprimer l'écouteur audio de "Minimap_Camera"
• Créez une nouvelle texture de rendu (dans la vue Projet Créer -> Texture de rendu) et nommez-la "MinimapTexture"
• Attribuer la texture de rendu nouvellement créée à "Minimap_Camera" texture cible

• Attribuer "MinimapTexture" à la texture de l'image brute

Nous devons maintenant ajouter un masque de sprite pour que l'image soit bien recadrée:

• Dupliquer l'image radar
• Changez la texture de l'image dupliquée par le sprite ci-dessous (clic droit pour télécharger l'image):

• Ajouter un composant Masque à l'image du masque

• Déplacez l'image brute avec la texture de rendu à l'intérieur de l'image du masque

L'image finale devrait maintenant être recadrée:

Comme vous pouvez le voir, la mini-carte Caméra affiche la carte telle qu'elle est, y compris le joueur et tous les objets dynamiques, mais ce n'est pas ce que nous voulons, nous voulons afficher uniquement la carte sans aucun objet dynamique.

• Prenez une capture d'écran de la vue de dessus de la carte (Avant de le faire, désactivez tous les objets dynamiques tels que les joueurs, les ennemis, etc.)

• Créez un nouveau Quad (GameObject -> 3D Object -> Quad) et placez-le sous la carte, comme ceci:

• Attribuez la capture d'écran au Quad et modifiez le matériau Shader en "Unlit/Texture"
• Assurez-vous que la position de la capture d'écran sur le Quad correspond à la carte:

• Remplacer la couche Quad de la mini-carte par "UI"
• Dans "Minimap_Camera", remplacez le masque de culling par "UI"
• Créez un autre Quad et déplacez-le à l'intérieur de l'objet "Minimap_Camera", attribuez-lui l'image ci-dessous:

• Changez le Shader sur la flèche Quad en "Unlit/Transparent"

• Changez la couche Quad de flèche en "UI"

Voici le résultat final:

• Créez un nouveau script, nommez-le "SC_MinimapCamera" et collez-y le code ci-dessous:

SC_MinimapCamera.cs

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class SC_MinimapCamera : MonoBehaviour
{
    public Transform target;

    float defaultPosY;

    // Start is called before the first frame update
    void Start()
    {
        defaultPosY = transform.position.y;
    }

    // Update is called once per frame
    void Update()
    {
        // Apply position
        transform.position = new Vector3(target.position.x, defaultPosY, target.position.z);
        // Apply rotation
        transform.rotation = Quaternion.Euler(90, target.eulerAngles.y, 0);
    }
}

• Attachez le script SC_MinimapCamera à l'objet "Minimap_Camera".
• Attribuez votre lecteur à la variable Target dans SC_MinimapCamera.

La mini-carte est maintenant prête, pour l'utiliser il suffit de parcourir le niveau et d'observer le changement de position.