Aller à : navigation, rechercher

Création d'un jeu vidéo 2D avec Unity

Avertissement

Cette fiche est une traduction d'une fiche dont la version originale se trouve sur le site Instructables : http://www.instructables.com/id/Make-A-2D-Infinite-Runner-with-Unity/.

Pour faire cette traduction, nous avons suivi toutes les étapes et réalisé le jeu. Toutefois, nous avons constaté des différences entre certaines instructions à faire dans la fiche et ce qu'il fallait réellement faire. Ces différences proviennent tout simplement du fait que Unity (l'outil utilisé pour réaliser ce jeu) a évolué depuis la rédaction de la fiche originale. Nous avons pallié ce problème par la traduction. Nous avons donc rencontré des difficultés à certaines étapes. Même si les étapes à suivre sont très bien décrites (et donc relativement faciles à réaliser), nous recommandons cette fiche à un public familiarisé avec le code informatique et très motivé.


Créez votre jeu

Introduction

Intro1.jpg

Cette fiche vous montrera comment réaliser un jeu vidéo en 2D relativement simple. C'est un type de jeu de plateforme comme Fly with Me ou DoodleJump.

Cliquez ici pour l'essayer : https://dl.dropboxusercontent.com/u/19891181/IbleJump/webversion.html.

Je vous montrerai dans cette fiche comment réaliser ce jeu.


Intro2.jpg


Si vous avancez dans le jeu, vous verrez qu'il est incomplet mais cela m'a permis d'en apprendre un peu plus sur le C# et de consolider les connaissances que j'avais de Unity, téléchargé il y a deux semaines. Comme je partage ce jeu, j'ai choisi d'utiliser le mignon petit robot d'Instructables comme personnage principal. J'ai opté pour un look simple en hommage à ces dessins animés réalisés autrefois dans le même style. J'ai toujours aimé les dessins animés réalisés au crayon.

Intro4.jpg


Je dois dire que Unity est un outil formidable. La partie "Learn" (http://unity3d.com/learn) du site web est une véritable source d'information que je vous recommande chaudement d'aller voir. Vous verrez qu'il est très simple de réaliser un jeu vidéo en 2D.

Intro3.jpg

Tout ce que je vous montre ici, je l'ai appris grâce au site de Unity car ils ont vraiment d'incroyables tutoriels, notamment sous forme de vidéos en ligne.

 

Unity est pour moi nouveau, comme pour vous aussi peut-être, et je voulais juste, à travers cette fiche, partager mon amour pour cet outil et mon expérience d'apprenant.


Je vous donnerai à chaque étape toutes les ficelles pour concevoir votre propre jeu. Je vous recommande de ne pas utiliser mon code tel quel mais plutôt de le suivre et d'écrire votre propre script.


Je n'ai que très peu d'expérience dans la programmation en C, et pas plus en C#. Cela m'a beaucoup rappelé Arduino et Processing, avec lesquels je suis plus familier.


Donc, même si vous ne savez absolument pas programmer, je crois que vous y arriverez. Suivez au moins mes aventures et vous verrez à quel point cela est facile.


Fichier:Iblejump.zip

Etape 1 : Télécharger l'application Unity

Step11.jpg

Allez sur le site de Unity (http://unity3d.com/) et téléchargez la version gratuite de l'application. Vous devrez ensuite créer un compte puis suivre les instructions pour l'installation. Sachez que tant que vous ne monétisez pas ce que vous réalisez avec Unity, vous pouvez l'utiliser.

Etape 2 : Ouvrir Unity

Lorsque vous ouvrirez Unity pour la première fois, une boîte de dialogue apparaîtra pour créer votre premier projet. Choisissez l'emplacement adéquate et nommez votre projet. Attention, choisissez bien l'option 2D en bas du formulaire intitulé "Setup Defaults For".

Step21.jpg

Vous n'aurez besoin d'aucun package supplémentaire pour le jeu que vous allez créer. Je vous conseille de ne pas vous embêter avec ça à moins que vous en ayez réellement besoin pour votre jeu. Inutile d'alourdir votre disque dur !

Quand vous avez fait votre choix, cliquez sur "create".

Unity Editor ouvrira alors votre nouveau projet (vide) et une fenêtre popup pour vous dire bonjour. Fermez-la et explorez un peu l'interface.

Step22.jpg

L'espace de travail est divisé en quatre fenêtres que vous pouvez organiser comme vous voulez.

La fenêtre "Scene" (fenêtre centrale) est celle où vous placerez les objets du jeu. La fenêtre "Hierarchy" à gauche vous montre tous les objets qui sont actuellement dans votre "Scene".

Step23.jpg

Juste en dessous, se trouve une autre fenêtre où vous pouvez ouvrir ou fermer différents onglets. La plupart d'entre eux peuvent être mis à l'endroit qui vous convient. Sachez que vous pouvez accéder à tous les boutons depuis la barre supérieure et que vous pouvez ajouter ou enlever à volonté.

Pour le moment, cliquez sur "Main Camera" pour voir ce qui se passe. Vous ferez alors apparaître à droite de la fenêtre "Scene" la fenêtre "Inspector".

Step24.jpg

Etape 3 : Créer le premier objet du jeu

Tout d'abord, vous aurez besoin du fichier compressé appelé "Sprites".

Cliquez sur l'onglet "Project". Déposez ce fichier compressé dans la zone grise à droite. Tous les éléments dont vous aurez besoin pour reproduire mon projet sont dans ce fichier.

Step31.jpg

Trouvez l'élément appelé "navbar". Cliquez dessus et déposez-le en bas de la fenêtre "Scène" comme sur la capture d'écran.

Step32.jpg

Si vous cliquez ensuite sur "Main Camera" dans la fenêtre "Hierarchy", vous verrez déjà à quoi cet élément ressemble dans votre jeu.

Step33.jpg


Vous aurez besoin d'ajouter d'autres composants pour rendre votre boîte solide.


Sélectionnez "navbar" dans "Hierarchy" et cliquez sur "Add Component" dans la fenêtre "Inspector" puis sur "Physics 2D" et enfin sur "Box Collider 2D".


Step34.jpg


Step35.jpg


Refaites l'opération une seconde fois. Cela évitera au robot de tomber accidentellement de la barre de navigation dès le début du jeu.


J'ai voulu que notre robot commence le jeu là où il se trouve sur la page du site des Instructables et c'est pour cette raison que j'ai diminué un peu la taille de la Box Collider 2D. Comme la seconde Box Collider 2D est en fait dans un espace ouvert, cela avertira notre robot qu'il faut aller vers la droite lorsque le jeu commence.

Dans l'onglet "Transform", pour le "Scale", indiquez 1,5 pour X et Y. Voyez les changements que cela produit sur la barre de navigation.


Fichier:Sprites.zip

Etape 4 : Ajouter un personnage

Maintenant que nous avons une plateforme sur laquelle notre personnage peut se tenir debout, nous avons besoin d'un personnage.

Cliquez sur "GameObject" dans la barre de menus supérieurs et sélectionnez "Create empty".

Step41.jpg

Faites un clic-droit sur votre nouveau "GameObject" puis cliquez sur "Rename" pour changer son nom en "Player".

Step42.jpg

Dans la fenêtre "Inspector", cliquez sur "Add component">"Rendering">"Sprite Renderer Component".

Step43.jpg

Dans Project>Assets>Sprites, trouvez le "Idle_Sprite, cliquez sur le petit triangle et déposez une des images dans le "Sprite value" du "Sprite Renderer Component".

Step44.jpg

Nous avons encore besoin d'ajouter des éléments pour étoffer notre personnage. Cliquez "Add component">"Physics2D">"Rigidbody2D".

Step45.jpg

Si vous cliquez alors sur le bouton "Play", notre joueur tombera de la barre de navigation. Essayez !

Step49.jpg

Nous allons ajouter quelques éléments pour le consolider : un élément circulaire à ses pieds et son corps tout entier et un élément en forme de boîte à sa tête.

Step48.jpg

A présent, si vous cliquez sur "Play", le robot roulera et tombera sur le côté. Vous pouvez le régler en cliquant sur "Edit Collider". Maintenant, le joueur tombe sur la barre de navigation et il y reste.

Je le trouve un peu gros à mon goût donc je change sa taille de la façon suivante : dans "Transform", j'indique 0,75 pour X et Y.


Ensuite, je peaufine la position de la barre de navigation et du robot jusqu'à ce que cela me convienne.

Sauvegardez votre travail en lui donnant le nom que vous souhaitez.

Etape 5 : Insuffler la vie à notre robot

Maintenant que nous avons un personnage pour jouer, nous allons lui permettre de faire quelques actions en créant des animations.


Sélectionnez le joueur et ajoutez un "Animator Component "(Component>Miscellaneous>Animator). Décochez "Apply Root Motion" et pour "Update Mode", choisissez "Animate Physics".

Step51.jpg

Step52.jpg

Ouvrez ensuite la fenêtre "Animator". Pour plus de confort, j'ai mis cette fenêtre à côté de "Project". Step53.jpg

Toujours avec "Player" sélectionné dans "Hierarchy", ouvrez la fenêtre "Animation".


Dans la fenêtre "Animation", cliquez sur les deux petits triangles dont les bases se font face puis sur "Create New Clip". Nommez-le "Idle".

Step54.jpg

Step55.jpg

Juste en-dessous, ouvrez le dossier "Sprites". Prenez l'ensemble des "Idle_sprite" et déposez-les dans la fenêtre "Animation".

Step56.jpg

Step57.jpg

Pour le "Sample", indiquez 10.


Jetez un coup d'œil à votre fenêtre "Animator". Vous avez normalement deux états : l'un "Any state" et l'autre "Idle". Sa couleur orange indique qu'il s'agit d'un état dont les paramètres sont des paramètres par défaut.


Step58.jpg

Normalement si vous avez suivi ces étapes correctement, votre robot doit s'animer si vous pressez "Play".


Créez une autre animation que vous appellerez "Drive". Glissez-déposez la feuille "Drive_sheet". Pour "Sample", indiquez 20. Vous pourrez modifier ce paramètre plus tard si vous le souhaitez.


Step59.jpg


Vous verrez dans la fenêtre un autre état appelé "Drive". Cliquez sur la croix dans l'onglet "Parameters" (en bas à gauche) et sélectionnez "Float". Nommez ce paramètre "Speed".

Step510.jpg

Step511.jpg


Faites un clic-droit sur l'état "Idle" et sélectionnez "Make Transition". Step512.jpg


Pointez votre flèche sur "Drive". Step513.jpg

Double-cliquez sur la flèche. Dans la fenêtre "Inspector", pour "Conditions", sélectionnez "Speed" et indiquez 0,01 en valeur.

Step514.jpg


Désormais, nous devons faire un script pour contrôler le robot.

Etape 6 : Le script pour contrôler le robot

Maintenant que nous avons un personnage pour jouer, nous avons besoin d'un script pour le contrôler. Pour cela, nous allons donc ajouter un script en C# très simple. Step61.jpg

Dans la fenêtre "Project", créez un nouveau dossier et appelez-le "Scripts".


Ouvrez ce dossier pour y créer un nouveau script en C# et appelez-le "RobotController".


Step62.jpg


Double-cliquez sur le script pour lancer MonoDevelop.

Step63.jpg

Cela peut prendre un peu de temps pour qu'il s'ouvre donc soyez patient.

Copiez-collez le code suivant pour commencer :

using UnityEngine; using System.Collections;

public class RobotController : MonoBehaviour { //This will be our maximum speed as we will always be multiplying by 1 public float maxSpeed = 2f; //a boolean value to represent whether we are facing left or not bool facingLeft = true; //a value to represent our Animator Animator anim; // Use this for initialization void Start () {

 //set anim to our animator
 anim = GetComponent<Animator>();

}

// Update is called once per frame void FixedUpdate () {

 float move = Input.GetAxis ("Horizontal");//Gives us of one if we are moving via the arrow keys
 //move our Players rigidbody
 rigidbody2D.velocity = new Vector3 (move * maxSpeed, rigidbody2D.velocity.y);
 //set our speed
 anim.SetFloat ("Speed",Mathf.Abs (move));
 //if we are moving left but not facing left flip, and vice versa
 if (move < 0 && !facingLeft) {
 
  Flip ();
 } else if (move > 0 && facingLeft) {
  Flip ();
 }

}

//flip if needed void Flip(){

 facingLeft = !facingLeft;
 Vector3 theScale = transform.localScale;
 theScale.x *= -1;
 transform.localScale = theScale;

} }

Step64.jpg


Sauvegardez le script et retournez dans Unity. Déposez ce nouveau script dans "Player" dans la fenêtre "Hierarchy".

Step65.jpg

Cliquez sur le bouton "Play". Vous pouvez à présent contrôler le robot avec les flèches de gauche et de droite de votre pavé numérique. Si vous ouvrez la fenêtre "Animator", vous le verrez changer d'état (de "idle" à "drive") selon qu'il bouge ou non.

Etape 7 : Savoir sauter - On continue avec le "RobotController"…

Nous allons donner à notre personnage la capacité de sauter. Nous aurons besoin pour cela d'un état d'animation pour sauter et tomber et quelques lignes de code en plus pour mieux contrôler ses mouvements.


Commençons par ajouter deux autres paramètres à notre "Player Animator". Ajoutez un "Float" que vous appellerez "vSpeed" et un "Bool" que vous appellerez "Ground". Nous utiliserons vSpeed pour contrôler la vitesse verticale et "Ground" permettra de détecter quand le personnage a touché le sol. Il réalisera ainsi des sauts plus réalistes car sauter sans toucher le sol c'est en fait voler.

Step71.jpg

Dans la fenêtre "Scene", créez un nouveau "Game Object".

Step72.jpg

Nommez-le "groundcheck" et ajoutez-lui un "2D Circle Collider".


Step73.jpg

Glissez-déposez le nouveau "Collider" dans "Player" (fenêtre "Hierarchy").

Step74.jpg

Dans le radius du groundcheck collider indiquez 0,1 en valeur. Cela doit changer la position en -1. Vous devez voir apparaître un petit cercle autour des pieds de votre robot. Indiquez ensuite pour "Tag" et "Layer" la mention "Player".

Step75.jpg

Ajoutez ces lignes de code à notre script afin que le robot saute lorsque vous appuierez sur la touche "Espace".


Copiez-collez toutes ces lignes de code dans le script "RobotController".


using UnityEngine; using System.Collections;

public class RobotController : MonoBehaviour { //This will be our maximum speed as we will always be multiplying by 1 public float maxSpeed = 2f; //a boolean value to represent whether we are facing left or not bool facingLeft = true; //a value to represent our Animator Animator anim;

       //to check ground and to have a jumpforce we can change in the editor

bool grounded = false; public Transform groundCheck; float groundRadius = 0.2f; public LayerMask whatIsGround; public float jumpForce = 700f;

// Use this for initialization void Start () { //set anim to our animator anim = GetComponent <Animator>();

}


void FixedUpdate () {

               //set our vSpeed

anim.SetFloat ("vSpeed", rigidbody2D.velocity.y);

               //set our grounded bool

grounded = Physics2D.OverlapCircle (groundCheck.position, groundRadius, whatIsGround); //set ground in our Animator to match grounded anim.SetBool ("Ground", grounded);


float move = Input.GetAxis ("Horizontal");//Gives us of one if we are moving via the arrow keys //move our Players rigidbody rigidbody2D.velocity = new Vector3 (move * maxSpeed, rigidbody2D.velocity.y); //set our speed anim.SetFloat ("Speed",Mathf.Abs (move)); //if we are moving left but not facing left flip, and vice versa if (move < 0 && !facingLeft) {

Flip (); } else if (move > 0 && facingLeft) { Flip (); } }

void Update(){

               //if we are on the ground and the space bar was pressed, change our ground state and add an upward force

if(grounded && Input.GetKeyDown (KeyCode.Space)){ anim.SetBool("Ground",false); rigidbody2D.AddForce (new Vector2(0,jumpForce)); }


}

//flip if needed void Flip(){ facingLeft = !facingLeft; Vector3 theScale = transform.localScale; theScale.x *= -1; transform.localScale = theScale; } }


Pour régler le paramètre "Ground Check", cliquez sur le cercle qui a un point au centre et sélectionnez "groundcheck" dans la fenêtre qui apparaîtra. Fermez ensuite cette fenêtre.

Step76.jpg

Pour le paramètre "What Is Ground", cliquez pour vérifier que "Player" n'est pas sélectionné. Step77.jpg

Etape 8 : Créer une animation Blend Tree

Créons un "blend tree" pour avoir nos différents états (tomber et sauter). Nous devons réaliser deux animations différentes car cela sera plus efficace et requière moins de mémoire pour notre petit jeu.


Retournez dans la fenêtre "Animation" avec "Player" sélectionné et créez cinq nouvelles animations que vous appellerez "jump1", "jump2", etc.

Step81.jpg

Step82.jpg

Dans "Project", ouvrez le dossier "Sprites". Pour chaque "jump", glissez-déposez le modèle de la série "jumpsheet" en faisant attention de déposer le premier dans "jump1", le second dans "jump2", etc.


Ouvrez à nouveau la fenêtre "Animator", faites un clic-droit et sélectionnez "Create State">"From new blend tree". Appelez-le "JumpFall".

Step83.jpg


Double-cliquez dessus pour l'ouvrir dans la fenêtre "Inspector".

Step84.jpg

Cliquez sur le signe + en-dessous de "List is Empty" et cliquez sur "Add Motion Field". Répétez l'opération cinq fois.

Step85.jpg

Pour "Parameter", sélectionnez "vSpeed". Modifiez "Threshold" en indiquant -13 pour le premier et 10 pour le second. Renommez toutes les cases "Motion" : jump1, jump2, etc.

Step86.jpg

Step87.jpg


Si vous n'êtes pas satisfait de l'animation, vous pouvez apporter une petite modification en décochant "Automate Threshold".


Retournez dans la fenêtre "Animator", vous verrez le "blend tree" ouvert. Cliquez sur "Base Layer" dans le coin supérieur gauche pour retrouver toutes vos animations.

Vous devez alors supprimer tous les états "jump" qui ont été générés automatiquement.

Step88.jpg

Créez une transition entre "Any state" et "JumpFall", puis entre "JumpFall" et "Idle".

Step89.jpg

Cliquez sur la transition entre "Any state" et "JumpFall" et dans "Conditions", sélectionnez "Ground" et "false".

Step810.jpg

Cliquez sur la transition entre "JumpFall" et "Idle" et dans "Conditions", sélectionnez "Ground" et "true".

Step811.jpg


Cliquez à nouveau sur "Play" et vous verrez que vous pouvez faire faire un saut au robot.

Problèmes avec les animations !

Etape 9 : Destructeurs

Dans cette étape, nous allons créer des objets qui vont donner naissance à d'autres objets dont il faudra se débarrasser si l'on ne veut pas que notre jeu soit alourdi.


Commencez par créer un rectangle. Cliquez sur "GameObject">"3D Object">"Quad".


Step91.jpg

Dans "Transform", pour "Position", inscrivez -25 pour X et 0 pour Y. Pour "Scale", indiquez 1 pour X et 25 pour Y.

Step92.jpg

Nommez-le "Destroyer".

Step93.jpg

Enlevez l'élément "Mesh Collider" et ajoutez une "box collider 2D". Vérifiez que "Is Trigger" est coché.

Step94.jpg

Step95.jpg


Ajoutez l'élément "Rigidbody 2D" et vérifiez que, dans la fenêtre Inspector, la valeur de la gravité soit bien 0.

Step96.jpg

Dans la fenêtre "Project", ouvrez le dossier Scripts et ajoutez un nouveau script en C#. Appelez-le "Destroyer". Double-cliquez dessus pour ouvrir Monodevelop.



Step97.jpg

Copiez-collez dans Monodevelop les lignes de codes suivantes :

using UnityEngine; using System.Collections;

public class Destroyer : MonoBehaviour {

// Use this for initialization void Start () {

}

void OnTriggerEnter2D(Collider2D other){ //if the object that triggered the event is tagged player if (other.tag == "Player") {

Debug.Break (); return; } if (other.gameObject.transform.parent) { Destroy (other.gameObject.transform.parent.gameObject); } else { Destroy (other.gameObject); } }

}


Glissez-déposez le script "Destroyer" dans l'objet "Destroyer" (fenêtre "Hierarchy"). Ensuite, faites un clic-droit sur Destroyer dans la fenêtre "Hierarchy" et cliquez sur "Duplicate".

Step98.jpg

Paramétrez le nouveau Destroyer de la façon suivante :

  • pour "Position", indiquez x=0 et y=-15
  • pour "Scale", indiquez x=50 et y=1
  • Step99.jpg

    Si vous cliquez sur "Play" et que votre joueur tombe de la barre de navigation, vous verrez "Player" disparaît de la fenêtre "Hierarchy". Cela arrêtera le jeu et vous ramènera à l'éditeur.


    Nous réglerons ce problème plus tard.


    Pour finir, glissez-déposez les deux "Destroyer" dans "Main Camera".

    Step910.jpg

    Etape 10 : La main

    La main qui dessine la ligne est assez simple à faire.


    Dans la fenêtre "Hierarchy", sélectionnez "Main Camera". Dans "Project", ouvrez le dossier "Sprites" puis glissez-déposez la main sur la scène.

    Step101.jpg

    Pour "Scale" (dans "Transform"), paramétrez de la façon suivante :

  • x=2
  • y=2
  • Step102.jpg

    Créez un nouveau Game Object et appelez-le "Penciltip". Positionnez-le au bout du crayon.

    Step103.jpg

    Step104.jpg

    Taguez-le en cliquant sur le cube en haut à gauche de la fenêtre "Inspector". Cela servira à le retrouver plus facile.

    Step105.jpg

    Ensuite, glissez-déposez le Penciltip dans la main afin qu'ils soient liés l'un à l'autre et fonctionnent ainsi ensemble.

    Step106.jpg

    Etape 11 : Tracer une ligne

    Un prefab est comme un enregistrement d'objet. Si vous créez un objet dans un préfabriqué, vous pouvez l'utiliser dans votre jeu. Nous allons en créer beaucoup par la suite.


    Commencez par créer un nouveau dossier dans "Assets" et nommez-le "Prefabs". Step111.jpg

    Ouvrez le dossier, faites un clic-droit et créez un nouveau prefab appelé "pencilline". Step112.jpg

    Step113.jpg

    Créez dans la fenêtre "Hierarchy" un nouveau "GameObject".

    Step114.jpg

    Ouvrez le dossier "Sprites" et glissez-déposez l'élément appelé "pencilline".

    Step115.jpg


    Ajoutez-lui un élément "Box Collider 2D" et indiquez pour "Size" les paramètres suivants :

  • x=0,03
  • y = 0,05
  • Step117.jpg


    Ouvrez le dossier "Prefab" puis glissez-déposez le GameObject dans le fichier "pencilline". Vous verrez l'icône du fichier changer.

    Step118.jpg

    Step119.jpg

    Une fois glissé-déposé dans le prefab, vous pouvez supprimer le game object. Nous n'en aurons plus besoin.


    Vous devez ensuite ajouter un nouveau script en C# à notre dossier "Scripts".

    Step1110.jpg

    Nommez-le "pencilline" et copiez-y les lignes de code suivantes :

    using UnityEngine; using System.Collections;

    public class pencilline : MonoBehaviour {

    //to refer to our prefab pencilline public GameObject obj;

    float lastx = 0f; // Use this for initialization void Start () {

    }

    // Update is called once per frame void Update () {

    //if we have moved far enough make a new pencilline

    if (transform.position.x > (lastx+0.02f)) {


    Instantiate (obj,transform.position,Quaternion.identity); lastx = transform.position.x;

    lastx = transform.position.x;

    }

    } }

    Glissez-déposez ce script dans "penciltip". Step1111.jpg

    Sélectionnez ensuite "penciltip", ouvrez le dossier "Prefabs" puis glissez-déposez le prefab "pencilline" dans le paramètre "Obj".

    Step1112.jpg Notre caméra n'a toujours pas de script mais si vous cliquez sur "Play", vous verrez un point blanc au bout du crayon. Step1113.jpg

    Step1114.jpg

    Etape 12 : Action !

    La caméra est déjà créée et nous avons juste besoin d'un script pour la contrôler.

    Juste avant d'écrire ce script, nous aurons besoin de changer la couleur du fonds qui doit être blanche car sinon nous ne verrons pas la ligne que nous avons créée à l'étape précédente.


    Sélectionnez Main Camera dans la fenêtre "Hierarchy" et dans la fenêtre "Inspector", cliquez sur l'échantillon de couleur face à "Background". Sélectionnez le blanc dans la fenêtre qui vient d'apparaître.

    Step121.jpg

    Step122.jpg


    Ouvrez le dossier "Scripts". Créez un nouveau fichier C# et nommez-le "pancam". Ouvrez Monodevelop et copiez-collez les lignes de code suivantes :

    using UnityEngine; using System.Collections;

    public class pancam : MonoBehaviour {

    float ydir = 0f; public GameObject player;

    // Use this for initialization

    // Update is called once per frame void Update () { //check that player exists and then proceed. otherwise we get an error when player dies if (player) { //if player has passed the x position of -1 then start moving camera forward with a randomish Y position if (player.transform.position.x > -1) {


    float randy = 0f; randy = Random.Range (0f, 100f); if (randy < 20) { ydir = ydir + .005f; } else if (randy > 20 && randy < 40) { ydir = ydir - .005f; } else if (randy > 80) { ydir = 0f; } transform.position = new Vector3 (transform.position.x + 0.03f, transform.position.y + ydir, -10); } } } }


    Glissez-déposez ce script dans "Main Camera" (dans la fenêtre "Hierarchy") puis glissez-déposer le Player de la fenêtre "Hierarchy" dans "Player" du script "Pancam".


    Step123.jpg

    Step124.jpg

    Si vous cliquez à nouveau sur "Play", vous verrez que la caméra avance de manière continue.

    Step125.jpg

    La main est un petit peu trop haute à mon goût. J'ai juste besoin de l'abaisser un peu dans la fenêtre "Scene".

    Etape 13 : Ajouter un score

    Cliquez sur GameObject >UI>Text. Nommez ce nouvel élément "Score".


    Step131.jpg

    Tapez dans la case "Text", "Score" et sélectionnez la couleur noire.

    Step133.jpg

    Paramétrez la position de ce mot comme vous le désirez, par exemple, en mettant dans "Rect Transform" 0,03 pour Pos X et 0,97 pour Pos Y.

    Step135.jpg

    Nous avons maintenant besoin d'ajouter un peu de code au script de notre caméra. Copiez-collez les lignes suivantes dans le code :

    using UnityEngine; using System.Collections;

    public class pancam : MonoBehaviour {

    float ydir = 0f; public GameObject player; //for our GUIText object and our score public GUIElement gui; float playerScore = 0;

    //this function updates our guitext object void OnGUI(){ gui.guiText.text = "Score: " + ((int)(playerScore * 10)).ToString (); } //this is generic function we can call to increase the score by an amount public void increaseScore(int amount){ playerScore += amount; }

    // Update is called once per frame void Update () { //check that player exists and then proceed. otherwise we get an error when player dies if (player) {

    //if player has passed the x position of -1 then start moving camera forward with a randomish Y position if (player.transform.position.x > -1) {

    //update our score every tick of the clock playerScore += Time.deltaTime;

    float randy = 0f; randy = Random.Range (0f, 100f); if (randy < 20) { ydir = ydir + .005f; } else if (randy > 20 && randy < 40) { ydir = ydir - .005f; } else if (randy > 80) { ydir = 0f; } transform.position = new Vector3 (transform.position.x + 0.03f, transform.position.y + ydir, -10); } } } }


    Enregistrez et retournez dans Unity.

    Sélectionnez Main Camera et vous verrez qu'un nouvel élément est apparu dans Pancam. Glissez-déposez le score dans Gui.


    Step136.jpg

    Cliquez à nouveau sur "Play" et vous verrez que le score augmente à mesure que le personnage se déplace.


    Step137.jpg

    Etape 14 : Les bombes

    Pas de réel danger pour notre héros jusqu'à présent mais nous allons y remédier. Faisons quelques bombes, comme celles que l'on voit dans les dessins animés qui tombent du ciel et brisent la ligne.

    Créez un nouveau Game Object que vous appellerez "Bomb".

    Step141.jpg

    Ouvrez le dossier "Sprites" et ajoutez à Bomb l'élément "Bomb_0". Dans "Transform", indiquez les valeurs suivantes pour "Scale" :

  • x=0,5
  • y=0,5
  • Step142.jpg

    Step143.jpg

    Ajoutez un Circle Collider 2D et paramétrez la bombe comme vous le souhaitez. Pour qu'elle tombe, nous avons besoin d'ajouter un Rigidbody 2D.


    Step144.jpg

    Step145.jpg

    Nous avons aussi besoin d'un Animator pour contrôler l'explosion de la bombe. Dans la fenêtre "Inspector", décochez la case "Apply Root Motion" et pour "Update Mode", sélectionnez "Animate Physics".

    Step146.jpg

    Ouvrez la fenêtre "Animation" et assurez-vous que Bomb_0 est toujours sélectionné. Ajoutez une nouvelle animation et nommez-la "bombidle".

    Step147.jpg


    Cela créera dans la fenêtre "Animator" une nouvelle animation dont les paramètres sont les paramètres par défaut. Step149.jpg


    Glissez-déposez les trois premières bombes de la feuille "bomb" (Project>Assets>Sprites). Dans la case "sample" (en haut à gauche, à côté de "bombidle", indiquez 20.

    Step1410.jpg

    Step1411.jpg


    Créez une nouvelle animation que vous appellerez "bombexplode". Glissez-déposez le reste des bombes et réduisez le "Sample" à 20.


    Step1412.jpg

    Dans la fenêtre "Animator", créez une transition de bombidle à bombexplode.

    Step1413.jpg

    Dans "Conditions", indiquez 5.00 en valeur pour "Exit Time". Cela signifie que vous avez 5 secondes avant que la bombe n'explose.

    Step1414.jpg

    Créez une troisième animation dans la fenêtre "Animation" que vous appellerez "bombdead". Laissez-la vide. Dans la fenêtre "Animator", créez une transition de "bombexplode" à "bombdead".

    Step1415.jpg

    Dans votre dossier "Scripts", créez un nouveau fichier C# que vous nommerez "bomb" et copiez-collez dans les lignes de code suivantes :

    using UnityEngine; using System.Collections;

    public class bomb : MonoBehaviour { //a holder for our Animator Animator anim; //a public float for the explosion radius public float explodeRadius = 1f;

    // Use this for initialization void Start () { anim = GetComponent <Animator>(); }

    // Update is called once per frame void Update () { //if we are done exploding if (anim.GetCurrentAnimatorStateInfo (0).IsName ("bombdead")) { //destroy all the objects in a radius unless they are tagged Player or hand Collider2D[] colliders = Physics2D.OverlapCircleAll (transform.position,explodeRadius); foreach(Collider2D col in colliders){ if (col.tag != "Player" && col.tag != "hand"){ Destroy(col.collider2D.gameObject);

    } } Destroy(this.gameObject);

    } } }

    Step1416.jpg

    Enfin, glissez-déposer le script dans bomb_0.

    Step1417.jpg

    Une dernière chose pour terminer cette étape. J'ai oublié de vous informer de taguer la main avec "hand". Pour cela, sélectionnez "hand" dans la fenêtre "Hierarchy" et pour "Tag", sélectionnez "Add Tag".


    Step1418.jpg

    Step1419.jpg

    En face de "element_0", inscrivez "hand". Fichier:Step.1420.jpg

    Ensuite sélectionnez "hand" pour "Tag". Sélectionnez aussi le tag "hand" pour "penciltip".


    Step1421.jpg


    Step1422.jpg


    Si vous cliquez à nouveau sur "Play", la bombe doit tomber, exploser et supprimer la barre de navigation.

    Step1423.jpg

    Etape 15 : Une pluie de bombes

    Pour rendre le jeu un peu plus compliqué, nous allons ajouter un "spawn object" pour créer une pluie de bombes.


    La première chose dont nous avons besoin est un prefab de notre bombe. Ouvrez le dossier "Prefab" et créez un nouveau prefab que vous appellerez "bomb".

    Step151.jpg

    Step152.jpg

    Glissez-déposez l'élément "Bomb" de la fenêtre Hierarchy dans le prefab "bomb". Supprimez ensuite l'élément "Bomb" de la fenêtre "Hierarchy".


    Créez un nouveau rectangle que vous appellerez "BombSpawn" ("GameObject>"3D Object">"Quad"). Positionnez-le au-dessus de la caméra.

    Step153.jpg

    Step154.jpg

    Créez un nouveau script dans le dossier "Scripts" et nommez-le "BombSpawner". Step155.jpg


    Copiez-collez les lignes de codes suivantes :

    using UnityEngine; using System.Collections;

    public class BombSpawner : MonoBehaviour { // a public object array for which objects to spawn public GameObject[] obj; //min and max times for another spawn public float spawnMin = 3f; public float spawnMax = 2f;

    void Start () { //start spawn Spawn (); }

    void Spawn(){ //get random number float rand = Random.Range (0, 1000); //if random number is greater than 700 make a bomb if (rand > 700) { Instantiate (obj [Random.Range (0, obj.GetLength (0))], transform.position, Quaternion.identity); } //invoke spawn at random time interval between min and max Invoke ("Spawn", Random.Range (spawnMin, spawnMax)); }

    }


    Glissez-déposez l'élément "BombSpawn" dans Main Camera (fenêtre "Hierarchy").

    Step156.jpg

    Ensuite, glissez-déposez le script "BombSpawner" dans "BombSpawn". Cliquez ensuite sur "BombSpawn" dans la fenêtre Hierarchy pour ouvrir la fenêtre "Inspector". Glissez-déposez le prefab "Bomb" dans le petit triangle nommé "Obj" dans le "script".

    Fichier:Step.157jpg

    Modifiez le script "Bomb" en y ajoutant les lignes de code suivantes :


    public class bomb : MonoBehaviour { //a holder for our Animator Animator anim; //a public float for the explosion radius public float explodeRadius = 1f;

    // Use this for initialization void Start () { anim = GetComponent <Animator> (); }

    // Update is called once per frame void Update () { //if this bomb is spawned after the spawner reaches a position past x = 12 if (transform.position.x > 12) { this.gameObject.SetActive (true); } //otherwise bomb no worky else{ this.gameObject.SetActive (false); } //if we are done exploding if (anim.GetCurrentAnimatorStateInfo (0).IsName ("bombdead")) { //destroy all the objects in a radius unless they are tagged Player or hand Collider2D[] colliders = Physics2D.OverlapCircleAll (transform.position,explodeRadius); foreach(Collider2D col in colliders){ if (col.tag != "Player" && col.tag != "hand"){ Destroy(col.collider2D.gameObject);

    } } Destroy(this.gameObject);

    } } }


    Pour pimenter un peu le jeu, dupliquez l'élément "BombSpawn".

    Etape 16 : Plateformes sous forme de dessins

    Pour créer des plateformes, nous devons créer de nouveaux prefabs. Dans le dossier "Prefab", créer un dossier que vous nommerez "Doodles".

    Step161.jpg

    Dans ce dossier, créez dix prefabs que vous nommerez "doodle1", "doodle2" et cela jusqu'à "doodle10".

    Step162.jpg


    Créez un nouveau "GameObject". Inutile de le nommer.

    Step163.jpg

    Dans le dossier "Sprites", ouvrez la feuille où se trouvent les "doodles" puis glissez-déposez le premier dans le GameObject que vous venez de créer.


    Step164.jpg


    Ajoutez-lui l'élément "Box collider 2D" et paramétrez cet élément de façon à ce qu'il soit bien positionné sur le dessin. N'oubliez pas que le robot doit pouvoir tenir dessus.


    Step165.jpg

    Ouvrez votre dossier "Doodles" puis glissez-déposez le "doodle" de GameOject dans le préfab "doodle1".

    Step166.jpg

    Step167.jpg

    Plutôt que de répéter toutes ces opérations, retournez dans le dossier "Sprites" puis glissez-déposez le second doodle dans Sprite Renderer.


    Step168.jpg

    Step169.jpg

    Ajustez la position de l'élément "Box collider" puis glissez-déposez le "doodle" de GameOject dans le préfab "doodle2".

    Step1610.jpg

    Répétez cela pour le reste des doodles. Une fois qu'ils sont tous enregistrés dans les prefabs, vous pouvez supprimer le GameObject qui nous a permis de les créer.

    Step1611.jpg

    Dupliquez l'élément "BombSpawn" qui se trouve dans "Main camera". Déplacez-le à droite de la scène et nommez-le "DoodleSpawn".

    Step1612.jpg


    Step1613.jpg

    Ensuite, pour "Size", indiquez 11 puis glissez-déposez tous les doodles dans le paramètre "Obj" de l'élément "Script". Glissez-déposez dans l'élément 0 le premier et ainsi de suite.


    Step1614.jpg


    Vous pouvez jouer avec le minimum et le maximum.

    Step1615.jpg

    Etape 17 : Jackpots

    Créez des jackpots ressemble à ce que nous venons de faire. Commencez par créer un nouveau dossier, dans le dossier "Prefabs", que vous appellerez "Bonus" et créez à l'intérieur de ce dossier six prefabs (Bonus1, Bonus 2, etc.).

    Step171.jpg

    Step172.jpg

    Nous allons avoir besoin d'un script pour ajouter des points de bonus au "GUIText object". Ouvrez le dossier "Scripts" et créez un nouveau script C# que vous nommerez "BonusPoints".

    Step173.jpg

    Copiez-collez dans ce script les lignes de code suivantes :

    using UnityEngine; using System.Collections;

    public class BonusPoints : MonoBehaviour { //make a container for the heads up display pancam hud;

    void OnTriggerEnter2D (Collider2D col) { if (col.tag == "Player") { hud = GameObject.Find ("Main Camera").GetComponent<pancam>(); hud.increaseScore(10); Destroy (this.gameObject); }

    } }


    Ensuite, créez un nouveau GameObject. Dans le fichier "Sprites", trouvez l'élément "powerups" puis glissez-déposez le premier dans le "GameObject" que vous venez de créer.


    Dans la fenêtre "Inspector", indiquez pour "Scale" les valeurs suivantes :

  • x=2
  • y=2
  • Ajoutez un élément "Box collider 2D" puis cochez "Is Trigger".


    Glissez-déposez le script "BonusPoints" dans "powerups_0".

    Step174.jpg


    Ouvrez le dossier Bonus (Prefabs>Bonus) puis glissez-déposez "powerups_0" dans le premier prefab.

    Step1710.jpg


    Comme à l'étape précédente, glissez-déposez dans "Sprite Renderer" le second "powerup" puis le glisser et le déposer dans le second prefab.

    Step1711.jpg

    Step1712.jpg

    Une fois que vous avez créé les six prefabs, vous pouvez supprimer le GameObject.

    Step1713.jpg

    Pour faire pleuvoir les bonus, vous aurez juste besoin de dupliquer "DoodleSpawn" et renommez-le "BonusSpawn".

    Step1714.jpg

    Step1715.jpg

    Glissez-déposez tous les powerup dans le paramètre "Obj" de l'élément "Script". Glissez-déposez dans l'élément 0 le premier et ainsi de suite.

    Step1716.jpg

    Step1717.jpg

    Step1718.jpg

    Etape 18 : Game Over

    La chose dont nous avons besoin pour notre personnage maintenant est la possibilité de mourir plutôt que de casser le code. Nous aurons besoin pour cela d'une seconde scène pour que le jeu puisse s'arrêter et offrir ainsi au joueur la possibilité de jouer à nouveau.

    Pour cela, cliquez sur "File" puis sur "Build Settings". Step181.jpg

    Dans la boîte de dialogue qui apparaît alors, cliquez sur "Add Current". Vérifiez qu'il ait bien un 0 en face de votre scène actuelle et fermez cette boîte de dialogue. Step182.jpg

    Assurez-vous d'avoir sauvegardé votre scène actuelle puis cliquez sur "New Scene". Appelez-la "GameOver" puis mettez-la dans le dossier "Assets". Step183.jpg

    Step184.jpg

    Ajoutez un GUIText (Component>Rendering>GUIText). Pour Font Size, indiquez 20 et pour la couleur, choisissez le noir.

    Step185.jpg

    Step186.jpg


    Sur la scène, glissez-déposez le post-it appelé "notes_score". Aidez-vous pour cela de la fenêtre "Game".

    Step187.jpg

    Faites de même avec l'élément "Gameover". Déposez-le à l'endroit qui vous convient.

    Step188.jpg

    Créez un script que vous appellerez GameOver et copiez-collez dans ce script les lignes de code suivantes :

    using UnityEngine; using System.Collections;

    public class GameOver : MonoBehaviour { int score = 0; public GUIElement gui;

    // Use this for initialization void Start () { //get our score from playerprefs score = PlayerPrefs.GetInt ("Score"); //multiply by 10 as we did on displayed score score = score * 10; }

    void OnGUI(){ //set our text to our score gui.guiText.text = score.ToString (); //if retry button is pressed load scene 0 the game if(GUI.Button(new Rect(Screen.width/2-50,Screen.height/2 +150,100,40),"Retry?")){ Application.LoadLevel(0); }

                  //and quit button
                  if(GUI.Button(new Rect(Screen.width/2-50,Screen.height/2 +200,100,40),"Quit")){
                     Application.Quit();
                  }
    

    }

    }


    Enregistrez et fermez MonoDevelop puis glissez-déposez ce script dans "Main Camera".


    C'est bientôt terminé. Il nous reste à ajouter une fonction au script de notre caméra et à modifier le script "Destroyer" pour passer à la scène GameOver lorsque nous perdons.


    Voici le nouveau script "Camera" :

    using UnityEngine; using System.Collections;

    public class pancam : MonoBehaviour {

    float ydir = 0f; public GameObject player; //for our GUIText object and our score public GUIElement gui; float playerScore = 0;

    //this function updates our guitext object void OnGUI(){ gui.guiText.text = "Score: " + ((int)(playerScore * 10)).ToString (); } //this is generic function we can call to increase the score by an amount public void increaseScore(int amount){ playerScore += amount; } //Camera will be disabled when we load a level, set the score in playerprefs void OnDisable(){ PlayerPrefs.SetInt ("Score",(int)(playerScore)); }

    // Update is called once per frame void Update () { //check that player exists and then proceed. otherwise we get an error when player dies if (player) {

    //if player has passed the x position of -1 then start moving camera forward with a randomish Y position if (player.transform.position.x > -1) {

    //update our score every tick of the clock playerScore += Time.deltaTime;

    float randy = 0f; randy = Random.Range (0f, 100f); if (randy < 20) { ydir = ydir + .005f; } else if (randy > 20 && randy < 40) { ydir = ydir - .005f; } else if (randy > 80) { ydir = 0f; } transform.position = new Vector3 (transform.position.x + 0.03f, transform.position.y + ydir, -10); } } } }


    Et voici le nouveau script "Destroyer" :

    using UnityEngine; using System.Collections;

    public class Destroyer : MonoBehaviour {


    void OnTriggerEnter2D(Collider2D other){ //if the object that triggered the event is tagged player if (other.tag == "Player") { Application.LoadLevel(1); }

    if (other.gameObject.transform.parent) { Destroy (other.gameObject.transform.parent.gameObject);

    } else { Destroy (other.gameObject); } }

    }


    Voilà, vous venez de créer un jeu en 2D !

    Etape 19 : Les fichiers

    J'ai ajouté cette étape pour rendre plus accessibles les fichiers dont nous nous sommes servis.

    Fichier:RobotController.cs.zip

    Fichier:Pencilline.cs.zip

    Fichier:Pancam.cs.zip

    Fichier:GameOver.cs.zip

    Fichier:Destroyer.cs.zip

    Fichier:BonusPoints.cs.zip

    Fichier:BombSpawner.cs.zip

    Fichier:Bomb.cs.zip

    Ressources

    Fiche originale : http://www.instructables.com/id/Make-A-2D-Infinite-Runner-with-Unity/

    Site web de Unity : http://unity3d.com/

    Télécharger Unity : http://unity3d.com/unity/download

    Chaîne YouTube Unity : https://www.youtube.com/channel/UCG08EqOAXJk_YXPDsAvReSg