Home Accueil logo MakeYourGame Une question ? Contact ou sur logo-discord
Connexion Créer compte
Contact logo-discord

Comment customiser le curseur de la souris avec Unity ?

Unity

Comment customiser le curseur de la souris avec Unity ?

Quand il s'agit de faire un jeu vidéo pour PC ou consoles, on peut très vite avoir besoin de changer l'aspect du curseur de la souris, surtout pour un jeu RTS. Mais savez vous comment faire concrètement avec Unity?

Il est important de préciser que ce tutoriel part du pré-requis suivant : avoir des bases dans l'utilisation de Unity

Un coup d'oeil à la documentation

L'API de Unity dispose déjà d'une fonction déjà prête à l'emploi : Cursor.SetCursor

Ainsi changer le curseur semble très simple, puisqu'il suffit en fait de préciser quelle est la Texture à employer...

using UnityEngine;
using System.Collections;

public class ExampleClass : MonoBehaviour
{
    public Texture2D cursorTexture;
    public CursorMode cursorMode = CursorMode.Auto;
    public Vector2 hotSpot = Vector2.zero;
    void OnMouseEnter()
    {
        Cursor.SetCursor(cursorTexture, hotSpot, cursorMode);
    }

    void OnMouseExit()
    {
        Cursor.SetCursor(null, Vector2.zero, cursorMode);
    }
}

Dans l'exemple ci-dessus on réagit lorsque la souris entre/sort de la zone du Collider de notre GameObject.

En effet si un GameObject dispose d'un Collider, alors ces 2 callbacks seront potentiellement appelés.

Ce n'est bien sûr pas obligé d'utiliser cette méthode, le plus important ici est l'utilisation de la fonction SetCursor !

Trois paramètres sont attendus : la  Texture2D à utiliser, l'offset et le  CursorMode. La Texture2D est en fait une image à importer dans Unity.

Juste avec cette méthode, on va pouvoir se faire plaisir et prendre la main sur l'aspect de notre curseur  


http://151.80.42.20//event-orizon/public/studio//sceditor/emoticons/smile.png

 !           

Mise en pratique

             C'est parti !  En partant des icônes de votre choix, ou en utilisant le package disponible sur les ressources, nous allons mettre en pratique la méthode ci-dessus.    On ouvre donc un projet Unity existant, ou on en crée un nouveau, peu importe ... puis on crée une nouvelle scène (Cmd/Ctrl + N), à laquelle on ajoute de suite un cube.  On se retrouve donc avec une scène composée: d'une caméra, d'une lumière et d'un cube.        

Import des ressources

            Si vous partez du package précisé plus haut, les icônes sont déjà dans le dossier "iconInUse", et leur paramétrage est correct.  Il est important de bien retenir que les images doivent être de type Default (ie Texture) ou Cursor. De plus il faut cocher "Alpha is Transparency" sinon on risque d'avoir du blanc autour de l'icône... ce qui ferait, avouons le, très très moche      


http://151.80.42.20//event-orizon/public/studio//sceditor/emoticons/grin.png

 !        


https://upload.eventorizon.studio/uploads/filebrowser/5d1bd175a8aea.png

            

Implémentation du changement de curseur

              Nous allons ensuite créer un script C#, que nous appellerons par exemple "MouseAspect.cs"      

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

[RequireComponent(typeof(BoxCollider))]
public class MouseAspect : MonoBehaviour {

    public Texture2D cursorTexture;
    public Texture2D defaultTexture;
    public CursorMode cursorMode = CursorMode.Auto;
    public Vector2 hotSpot = Vector2.zero;

    void OnMouseEnter()
    {
        Cursor.SetCursor(cursorTexture, hotSpot, cursorMode);
    }

    void OnMouseExit()
    {
        Cursor.SetCursor(defaultTexture, Vector2.zero, cursorMode); //null will bring back default system (OS) cursor
    }
}

                

Notez bien l'attribut Unity "RequireComponent" qui nous assure d'avoir un composant de type BoxCollider. En effet sans cela, le composant, les callbacks ne sont pas appelés 

http://151.80.42.20//event-orizon/public/studio//sceditor/emoticons/sad.png


.

On réunit le tout !

Maintenant que tout est prêt, on va assigner notre script à notre cube initialement crée.


https://upload.eventorizon.studio/uploads/filebrowser/5d1bd55749f70.png

    Il suffit ensuite de remplir les slots "Cursor Texture" et "DefaultTexture", avec les icônes importées auparavant      


http://151.80.42.20//event-orizon/public/studio//sceditor/emoticons/smile.png

!  Si maintenant vous lancez la scène, le curseur devrait changer d'icône quand vous passez/sortez de la zone du collider du cube !    Vous comprenez peut-être maintenant pourquoi il est important d'avoir un collider sur l'objet qui porte le script !          

Sachez que l'on pourrez aussi faire cet effet en utilisant des Raycast... De plus il est à noter que l'on pourrait préférer par moment, utiliser une SphereCollider ou un autre type de Collider
, mais dans ce cas il faudrait changer aussi le RequireComponent ! Dilemme en vue 

http://151.80.42.20//event-orizon/public/studio//sceditor/emoticons/angel.png


Agrémenter notre test 

Si maintenant vous importez une skybox, une mini ambiance, puis vous ajoutez le script C# sur les objets de la scène, vous aurez de suite un résultat plus convaincant, et une mise en situation plus proche de l'objectif final.


https://upload.eventorizon.studio/uploads/filebrowser/5d1bdade43ebf.png

          


https://upload.eventorizon.studio/uploads/filebrowser/5d1bdb4668348.png

      A chaque fois que l'on ajoute un script, on en profite pour remplir les slots des Textures attendues.  Et voilà !        

Saviez vous que l'on peut faire une sélection multiple d'objets de la scène, puis leur donner à tous, le même composant (ie: script) ?

    Vous pouvez retrouver une démo du résultat final possible.

Un exemple en vidéo

Voici le tutoriel en vidéo issu de notre chaîne Youtube.