Runner 3D avec Unity

Les runners sont à la mode depuis un petit moment, particulièrement sur les terminaux mobiles comme l'a démontré le jeu Temple run présenté ci-dessous.

Temple run 2 3D
Exemple : Temple run 2

Introduction et prérequis

Les jeux de type runner sont assez simples à coder. En effet il n'y a pas énormément de fonctionnalités à implémenter. Dans ce tutoriel nous allons mettre en place un projet simple qui pourra vous servir de base pour créer un runner 3D. Dans un autre tutoriel, je vous montrerai comment créer un runner 2D en vue de côté.

Ouvrez Unity3D et créez un nouveau projet vide que vous allez appeler "Runner3D". Une fois que votre projet est préparé, nous pouvons commencer à développer !

Création des éléments du décor

Nous allons développer un système qui va nous générer un niveau infini. Ce système utilisera des blocs prédéfinis pour créer le décor de notre jeu. Afin de rester simple, nous allons créer seulement 3 types de blocs. Au fur et à mesure que le joueur avancera, nous feront apparaître de nouveaux blocs devant celui-ci.

Comme d'habitude, notre projet sera un prototype jouable, nous allons donc utiliser de simples cubes pour construire le décor, mais vous pouvez remplacer les cubes par des modèles 3D que vous aurez trouvé sur l'assets store.

Préparation du projet

Nous allons commencer par le premier bloc.
Créez un cube (GameObject / 3D Object / Cube) que vous allez agrandir afin de créer un sol. Dans mon cas, mon cube aura une taille de x=6,y=1,z=20 :

Création du sol
Création du sol
Vous allez maintenant créer d'autres cubes afin de mettre en place des murs ainsi que les obstacles qui se trouvent sur la route :
Création des murs
Création des murs
Sélectionnez tous les murs afin de les placer dans le GameObject du sol pour lier le tout :
Création des murs
Création d'un bloc
Vous pouvez créer un prefab de ce bloc en le faisant glisser / déposer dans la fenêtre de projet.
Nous avons donc un bloc complet. Je vous invite à dupliquer ce bloc 2 ou 3 fois (ctrl + D) et à modifier la disposition des murs afin de diversifier les blocs :
Création des blocs
Création des autres blocs
Créez également des prefabs pour ces autres blocs. Nous avons donc à notre disposition plusieurs "bouts de niveau" que nous allons pouvoir assembler pour créer un niveau infini.
Pour bien comprendre comment sera construit notre niveau, voilà ce que cela donne lorsque plusieurs blocs sont assemblés à la suite :
Assemblage des blocs
Assemblage des blocs
Vous pouvez bien sûr remplacer les simples cubes par des modèles 3D afin de créer un beau décor comme par exemple Ninja kid :
Ninja kid
Runner 3D

Personnage et Générateur de niveau

Nous allons maintenant voir comment faire pour que des blocs apparaissent à l'infini au fur et a mesure que notre personnage avance.
Nous allons créer une capsule (GameObject / 3D Object / Capsule) pour représenter notre personnage. Dans mon cas j'ai appliqué une texture très simple pour colorer mon personnage :

personnage 3D
Personnage 3D
Pensez à ajouter un rigidbody à votre personnage (Add Component / Physics / RigidBody) et à bloquer la rotation afin d'avoir la configuration suivante :
config personnage 3D
Paramétrage du personnage
Vous devez aussi modifier le nom de celui-ci afin de l'appeler "Player". Nous allons programmer la fonction qui va faire avancer ce personnage. Par la suite, nous allons créer le script qui génèrera le niveau pendant que le personnage avance.

Créez un nouveau script C# "Player" et ouvrez-le. Ce script sera très simple. Nous allons avoir besoin de 4 variables expliquées ci-dessous : Dans la fonction Update, nous utilisons "Translate" pour faire avancer notre personnage : Toujours dans Update, nous allons gérer les touches "Espace", "Flèche droite" et "Flèche gauche" pour gérer les mouvements du joueur : Vous pouvez créez la fonction jump qui permet de sauter : Et enfin, la fonction de collision qui permet de tester si le joueur touche un mur et si tel est le cas, on perd : C'est tout pour le script du joueur, il peut avancer, se décaler ou sauter. Si vous touchez un gameObject qui a le nom "mur" vous perdez.

Créez maintenant un script "CreateBlock" qui va générer le niveau. Ce script sera placé sur tous les blocs du jeu. Quand le joueur touchera un nouveau bloc, le script en génèrera un autre devant. Le script est assez court donc je vous le donne en entier : Les blocks seront donc générés au fur et à mesure puis détruits si le joueur a passé le block. Nous utilisons la variable nbBlocks comme compteur pour savoir à quelle position doit être créé le nouveau block. Comme les blocks font 20 mètres de long, vous l'instanciez à 20 * nbBlocks+1;

Ajoutez le script Player sur le joueur et ajoutez CreateBlock sur tous les prefabs du sol. Vous devez configurer les variables de ces deux scripts comme ceci :

config block 3D
Configuration des variables

Vous devez placer 2 blocs par défaut sur votre scène afin que le jeu commence déjà avec un minimum de décor. Vous ne devez pas mettre de script sur le tout premier block. Voilà à quoi ressemble ma scène au lancement du jeu :

scène de base
Scène de base
Sur ma scène il y a :
- Le joueur
- 2 bouts de sol
- Une caméra que j'ai placé dans le joueur
- Une lumière

Le jeu est déjà fonctionnel. Vous pouvez tester et vous devriez être en mesure de parcourir votre monde infini.

Améliorations

Vous pouvez améliorer le jeu en ajoutant de nombreux éléments comme des objets à ramasser, des bonus ou malus, un menu, des sons, des effets etc.
Vous pouvez aussi augmenter la difficulté en augmentant la valeur de la vitesse "speed" à chaque fois que un nouveau bout de la scène est généra. Vous pouvez par exemple mettre la variable speed en public static et utiliser Player.speed = Player.speed + 1 afin d'augmenter progressivement la vitesse. N'hésitez pas à vous inspirer des jeux existants.


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 !