3D light cycle (Tron)

Il s'agit d'un type de jeu dans lequel vous contrôlez un véhicule qui laisse un mur lumineux derrière lui. Si vous touchez votre mur ou celui d'un autre joueur, vous perdez. Le jeu se joue de 2 à 4 joueurs et le dernier survivant gagne la partie. Le but est donc de bloquer vos adversaire afin de les gêner pour qu'ils finissent par s'écraser sur un mur.

Jeu de 3d light cycle
Exemple de jeu type Tron : LightCycle Battle 3D de MicroApps

Introduction et prérequis

Comme toujours, nous allons faire des choses très simples et nous n'allons utiliser que des ressources de base. Vous aurez besoin d'Unity3D dans sa version 5 et vous pourrez utiliser des textures externes si vous le souhaitez. Pour ma part, je n'utiliserai que des materials avec des couleurs unies. Nous allons programmer le gameplay (déplacement des motos, génération des murs de lumière, détection des collisions, mode 2 joueurs, effets). Bien sûr il faudra améliorer le projet afin de le rendre complet et professionnel. Par exemple nous n'allons pas créer le menu principal du jeu ni de mode en ligne. Nous allons programmer une version PC en local pour 2 joueurs avec écran scindé.

Création du projet

Nous allons créer un nouveau projet 3D que nous allons appeler "3DLightCycle" :

Création d'un jeu 3D
Création du projet
Notre jeu sera très simple et nous utiliserons très peu de ressources. Je vous montrerai cependant comment créer des effets visuels comme des explosions, c'est pourquoi je vous invite à importer le package "Assets / Import Package / ParticleSystems" :
Importation des particules
Importation d'un package
Ce package contient des particules dont un prefab d'explosion appelé "Explosion". Nous utiliserons cette explosion lorsqu'un joueur percutera un mur. Nous mettrons en place un effet de ralenti

Création des ressources

Comme annoncé, notre projet sera très simple. Nous n'allons avoir besoin que de 3 materials et de quelques cubes 3D pour créer le décor.
Nous allons commencer par créer 3 materials "black", "blue" et "red" en faisant un clic droit dans la fenêtre de Projet et en sélectionnant "Create / Material" :

Unity création material
Création des materials
En cliquant sur votre material, vous pouvez sélectionner une couleur au niveau de votre shader. Sélectionnez les couleurs de votre choix. Je vais choisir noir pour le sol, bleu pour le Joueur 1 et rouge pour le Joueur 2 :
Unity couleur material
Modification de la couleur
Nous allons ensuite créer le décor de notre jeu. Pour cela créez un Plane "GameObject / 3D Object / Plane" et appliquez lui le material noir par glisser / déposer.
Unity plane
Création d'un Plane
Modifiez la taille du plane afin de l'agrandir (dans mon cas j'ai spécifié 10 par 10). Créez aussi des cubes "GameObject / 3D Object / Cube" que vous allez redimensionner afin de créer des murs autour du sol afin que le plateau de jeu soit fermé aux 4 côtés.
Vous devriez donc avoir un sol entouré de 4 murs. Cela nous permet d'avoir une arène dans laquelle les joueurs vont s'affronter.
Vous devez modifier le nom des murs et leur attribuer le nom suivant : "Wall". Cette étape est importante car nous utiliserons le nom des objets pour détecter les collisions. Voilà à quoi ressemble votre projet :
Plateau de jeu
Plateau de jeu

Nous allons maintenant passer à la création des personnages. Nos joueurs seront représentés par 2 cubes (un rouge et un bleu).
Créez donc 2 cubes et donnez leur une forme comme ceci :

Les personnages
Les personnages
Nos personnages doivent avoir :
  • Un petit box collider à l'avant
  • Un Rigidbody correctement configuré
  • Un script de mouvement
  • Une caméra en enfant
Afin de configurer vos cubes, colliders et le rigidbody, voici les paramètres de mes personnages :
Les personnages
Configuration personnages
Le box collider doit être petit et placé à l'avant de la moto comme sur mon visuel :
Les personnages
Visuel du personnage
Attention de choisir une bonne taille pour le cube et son collider, de mettre le rigidbody en kinematic et de bloquer certaines rotations etc. Pour le script et la caméra, nous verrons cela par la suite.

Mise en place des caméras

Notre écran sera coupé en 2 (un côté par joueur), nous allons donc utiliser 2 caméras. Vous devez créer 2 caméras et les faire glisser dans chaque personnage. Vous devez également positionner les caméras derrières les personnages :

Les caméras
Création des caméras
Comme vous pouvez le voir dans la photo ci-dessous, la caméra est placée légèrement derrière le personnage :
Les caméras
Position des caméras
Chaque caméra doit être configurée afin de ne prendre que la moitié de l'écran. Pour cela, nous allons aller dans l'inspector et nous allons modifier la taille et la position du champ de vision de chaque caméra : Nous devons modifier le "Viewport Rect" :
Camera 1
Caméra joueur 1
Camera 2
Caméra joueur 2
Cette configuration nous permet d'avoir 2 caméras actives en même temps et un écran "coupé en 2" :
Ecran scindé
Ecran scindé
Le joueur 1 aura donc la partie de gauche de l'écran et le joueur 2 aura le côté droit.
Vous êtes bien sûr libre de faire ce que vous voulez ! Vous pouvez couper l'écran horizontalement par exemple ou positionner la caméra de façon différente, faites ce qu'il vous plaît !
Vous pouvez maintenant créer des prefabs de vos personnages afin de les conserver dans votre projet. Vous pouvez aussi enregistrer la scène.

Avant de passer à la partie programmation, il nous reste une dernière petite chose à faire.
Nous devons créer 2 cubes (un bleu et un rouge) qui seront utilisés pour générer les murs de lumière derrière cheque joueur.
Créez donc 2 cubes et donnez leur la bonne couleur. Vérifiez que le box collider soit présent et cochez l'option "Is Trigger".
Créez ensuite des prefabs pour vos cubes. Voilà par exemple les paramètres de mon cube rouge :

Mur rouge
Mur de lumière rouge
Vous pouvez bien sûr vous amuser avec les shaders afin de créer des effets visuels. Comme expliqué je vais rester simple dans ce tuto, mais vous pouvez utiliser des shaders "self-illumin" ou "alpha blended" ou encore "particle / Additive" afin de créer des effets de lumière, de trensparence ou de brillance. Dans mon cas je garderai le shader de base opaque mais j'ai utilisé un Tail renderer pour créer un genre d'effet lumineux derrière la moto. Une fois les murs créés, vous pouvez passer à la partie programmation de ce tutoriel !

Création du script de la moto "Tron"

Notre jeu sera composé d'un seul script C# que nous allons appeler "Moto". Ce script va gérer le mouvement de la moto, la génération du mur, la détection des collisions, le clavier et éventuellement du score.
Le script sera très court (environ 60 lignes) c'est pourquoi tout sera dans le même script. Pour faire plus propre, vous pourrez séparer certaines fonctions comme par exemple la gestion du score et du rechargement du jeu pour relancer la partie.

Pour ce script nous allons avoir besoin de 7 variables qui sont détaillées ci-dessous :
Le déplacement sera géré dans la fonction Update. Nous utiliserons la méthode Translate pour déplacer la moto.
Pour gérer les touches du clavier, nous utiliseront Input.GetKeyUp. En fonction de la touche pressée, il faudra faire tourner la moto dans un sens ou dans l'autre avec la méthode Rotate. Dans la fonction Update nous feront appel à 2 fonctions externes qui seront expliquées par la suite. Voilà le code complet de la fonction Update :
La fonction CreateCollider va nous servir à générer le mur de lumière. Cette fonction est très simple, la voici :
La fonction SetColliderSize nous permet de modifier la taille du mur de lumière afin que celui-ci "suive" le mouvement de la moto :
Enfin, nous allons utiliser la fonction OnTriggerEnter pour détecter les collisions.
Si le joueur touche un mur, la partie se termine de façon spectaculaire :

Il ne nous reste plus qu'à appliquer ce script à nos deux motos, à renseigner les variables (prefab du mur, vitesse, explosion...).
Vous devez aussi définir les touches qui seront utilisées pour le changement de sens.
Voilà mes paramètres pour mes deux joueurs :

J1
Paramètres J1
J2
Paramètres J2
Un joueur sera bleu, l'autre rouge et l'un aura les flèches du clavier et l'autre les touches "Q" et "D".

Conclusion

Notre jeu est terminé ! Vous pouvez le tester, le compiler et le partager.
Affrontez vos amis afin de voir qui est le meilleur !
Je vous invite à tester ma démo.

Améliorations

Il y a énormément de choses à améliorer pour créer un vrai beau jeu. Ces améliorations sont très simples à mettre en place. Voici une petite liste de choses à ajouter à votre jeu :

  • Un mode 3 et 4 joueurs
  • Un menu principal
  • Un score affiché
  • Des bonus dans le jeu (vitesse, pouvoirs etc)
  • Un mode contre l'ordinateur
  • Un mode en ligne
  • Une version mobile
  • De meilleurs graphismes et effets
  • Des sons


Résultat final

Vous pouvez tester le résultat final en cliquant sur le lien ci-dessous :

TESTER LA DEMO

Télécharger les sources et le projet

Seuls les membres premium peuvent télécharger les fichiers sources et le projet du tutoriel.

Devenez membre premium !