Unity
Dans ce tutoriel Unity, nous allons voir une des méthodes les plus simples, pour créer une boussole horizontale à la Battle Royale. En effet il existe, comme d'habitude, plusieurs possibilités d'implémentation, plus ou moins longues ou faciles à mettre en oeuvre.
La méthode que nous allons employer ici est basée sur une RawImage.
Pour ceux qui ne voient pas encore le résultat que nous tentons d'atteindre, voici une image de l'interface de la boussole dans le jeu...
Battle royale n'est pas le seul jeu qui utilise ce type de boussole, Skyrim par exemple en utilise une similaire. Ce système de boussole présente l'avantage de pouvoir indiquer dessus les objectifs à atteindre.
Le principe
La boussole se met à jour en fonction de l'orientation du joueur dans le monde 3D, autrement dit pour nous développeurs...la rotation.
De plus dans notre monde 3D XYZ, l'orientation est décrite par une rotation autour de l'axe Y.
Ainsi si on exploite la valeur de la rotation selon Y, comprise entre 0 et 360°, on dispose d'un paramètre à destination de notre interface, afin de faire bouger notre boussole.
Il est important de noter que l'angle 0° pour la rotation du joueur, en Y indiquera de base que le joueur est orienté vers le Nord !! Ce point de démarrage est essentiel.
Pour synchroniser l'angle de la rotation en Y et l'image de la boussole nous allons utiliser une RawImage de Unity. Celle-ci présente l'avantage d'accepter des textures ou des sprites. De plus elle dispose de la propriété "UV Rectangle" qui indique le décalage (offset) et la taille du rectangle chargé d'afficher l'image.
La texture que nous utilisons représente l'image entière, avec le Nord, Sud, Est, Ouest, de 0 à 360°. Mais nous pouvons décaler (offset) de façon à ce que l'image commence au W et non au S...et ce grâce à notre fameux UV Rect.
Puis pour relier la rotation du player à la zone de la texture, on utilisera :
compass.uvRect = new Rect(player.localEulerAngles.y / 360f, 0, 1, 1);
Ici compass représente la RawImage.
Pour 0° il n'y'a pas de décalage et donc on voit l'image comme présentée ci-dessus. Mais dès que le joueur tournera, l'image sera progressivement décalée.
Il est à noter que l'on utilise la rotation locale et non globale (world), et que nous clampons la texture uniquement selon x et non y !!
Mise en place
a) Importez l'image qui sera utilisée pour votre boussole. Vous pouvez utiliser celle ci-dessus ou tout autre de votre composition.
Passez le "wrap mode" de la texture en "repeat" afin que la magie puisse opérer !!
En effet ce faisant le raccord des images est possible et parfait.
b) Dans votre scène créez un gameObject de type RawImage (clic droit -> UI - >RawImage), et assigner lui la texture importée.
Ajustez ensuite la taille de votre RawImage afin de la positionner et de la redimensionner comme vous le souhaitez.
c) Créez un script C# qui sera porté par votre RawImage afin de pouvoir s'adapter en direct live à la rotation de notre joueur.
using UnityEngine;
using UnityEngine.UI;
public class Compass : MonoBehaviour {
public RawImage compass;
public Transform player;
void Update() {
compass.uvRect = new Rect(player.localEulerAngles.y / 360f, 0, 1, 1);
}
}
d) Enfin ajustez depuis l'éditeur, les paramètres de ce script, en lui assignant par drag and drop (glisser/déposer) le GameObject qui représente votre joueur, ainsi que le GameObject qui est votre RawImage
Ensuite vous pouvez testez directement appuyant sur la touche play de l'éditeur. Pour faire tourner le joueur, utiliser simplement les outils de rotation de l'éditeur, et vous devriez voir la boussole qui s'anime ...victoire !!
Il est bien sûr tout à fait possible d'améliorer ce système mais vous avez ici la base du principe...à vous d'être inventif maintenant.
Retrouvez le package en téléchargement.
