Dé­ve­lop­per un jeu en 2D avec Uni­ty 3D

Après vous avoir pré­sen­té le mois der­nier la pla­te­forme de dé­ve­lop­pe­ment de jeux vi­déo Uni­ty 3D, nous al­lons voir dans cet ar­ticle comment conce­voir un pe­tit jeu en 2D.

L'Informaticien - - SOMMAIRE - THIER­RY THAUREAUX

Les joueurs pour­ront ra­mas­ser des ob­jets sus­cep­tibles de leur don­ner de nou­velles com­pé­tences. Il fau­dra pro­po­ser des ob­jec­tifs au joueur, comme par exemple ef­fec­tuer un par­cours ou fi­nir un ni­veau sans dé­pas­ser une du­rée maxi­male, ou en­core éli­mi­ner un maxi­mum d’en­ne­mis. Les ni­veaux se­ront com­po­sés de tiles, c’est- à- dire de blocs pou­vant être as­sem­blés entre eux afin de for­mer un dé­cor. Ces fonc­tion­na­li­tés pour­ront être en­ri­chies par d’autres par la suite, mais ce­la fe­ra dé­jà une bonne base.

Créa­tion du pro­jet

Nous al­lons, pour com­men­cer, créer un nou­veau pro­jet 2D dans Uni­ty. Après avoir té­lé­char­gé l’en­vi­ron­ne­ment de dé­ve­lop­pe­ment de­puis le site d’Uni­ty ( https:// uni­ty3d. com/ fr/ get- uni­ty/ down­load), ins­tal­lez- le sur votre ma­chine. Si vous ne l’avez pas dé­jà, le pro­gramme d’ins­tal­la­tion de Uni­ty vous pro­po­se­ra d’ins­tal­ler Vi­sual Stu­dio Com­mu­ni­ty 2017. Vous de­vez ac­cep­ter car les deux ( bi­blio­thèque Uni­ty et Vi­sual Stu­dio) sont in­dis­so­ciables. Lan­cez Uni­ty et créez un nou­veau pro­jet en cli­quant sur File / New Pro­ject. Nom­mez votre pro­jet ( test2D, par exemple), sé­lec­tion­nez un em­pla­ce­ment sur le disque pour l’en­re­gis­trer et sai­sis­sez éven­tuel­le­ment le nom de la so­cié­té, si­non met­tez votre nom ou ce que vous vou­lez. Lais­sez sé­lec­tion­né ( à On) la ligne Enable Uni­ty Ana­ly­tics, ce­la ne peut pas faire de mal ( cf. ar­ticle pré­cé­dent). Choi­sis­sez 2D ( par dé­faut, c’est 3D qui est pré­sé­lec­tion­né) et cli­quez sur Create pro­ject. Ren­dez- vous en­suite sur l’As­set Store ( https:// as­sets­tore. uni­ty. com) et té­lé­char­gez un pro­jet

2D com­plet pro­po­sé gra­tui­te­ment par Uni­ty, 2D Ro­gue­like. Im­por­tez le pro­jet dans Uni­ty 3D. Nous al­lons uti­li­ser les pre­fabs four­nis avec ce jeu afin de créer le ni­veau en 2D en vue de cô­té.

Concep­tion du ni­veau

Pour conce­voir le ni­veau, glis­sez/ dé­po­sez un pre­fab ( ce­lui de votre choix) de­puis la fe­nêtre de pro­jet vers la scène. Vous pou­vez, par exemple, uti­li­ser les pre­fabs Wall6 et Floor7 pour construire les zones sur les­quelles les joueurs pour­ront mar­cher. Pour bien or­ga­ni­ser le pro­jet, nous al­lons créer des scènes en les nom­mant, par exemple, Ni­veau1, Ni­veau2, Ni­veau3 et ain­si de suite. Com­men­cez par pla­cer les pre­fabs au centre de la scène en les po­si­tion­nant en 0,0,0. Sé­lec­tion­nez en­suite un pre­fab et, à l’aide de la com­bi­nai­son de touches Ctrl+ D, du­pli­quez- le. Pour dé­pla­cer les blocs d’une uni­té, ser­vez- vous des flèches de dé­pla­ce­ment du cla­vier tout en gar­dant la touche Ctrl en­fon­cée. Nous ob­te­nons un ni­veau simple à plu­sieurs étages, don­nant la pos­si­bi­li­té aux joueurs de se dé­pla­cer fa­ci­le­ment sur la scène. Pour or­ga­ni­ser votre hié­rar­chie, vous al­lez créer un Ga­meOb­ject vide et pla­cer tous vos blocs à l’in­té­rieur. Sé­lec­tion­nez pour ce­la Ga­meOb­ject puis Create Emp­ty de­puis le me­nu gé­né­ral. Les pre­fabs wall ont, par dé­faut, un Box Col­li­der 2D et un script at­ta­ché. Dans notre cas, sup­pri­mez ce script, dont nous n’au­rons pas be­soin. Con­ser­vez le Box Col­li­der qui per­met de rendre le ni­veau « so­lide » . Il faut main­te­nant faire un peu de dé­co­ra­tion si vous ne vou­lez pas que votre jeu soit trop sobre. Vous pou­vez pour ce­la uti­li­ser vos propres res­sources, créées ou non par vos soins, ou té­lé­char­ger des res­sources sup­plé­men­taires sur l’As­set Store, bien en­ten­du, ou un site comme OpenGa­meArt. org, sha­recg ( http:// www. sha­recg. com/) ou d’autres comme 3DTo­tal ( https:// www. 3dto­tal. com/). Faites- vous plai­sir : arbres, lianes, mon­tagnes, ar­rière- plans di­vers, ce n’est pas le choix qui manque. Ne char­gez pas trop non plus vos scènes : trop de dé­co tue la dé­co, dans les jeux comme dans les mai­sons. Té­lé­char­gez toutes les res­sources qui vous in­té­ressent et im­por­tez- les dans votre pro­jet. Sé­lec­tion­nez les tex­tures et chan­gez leur type en Sprite dans la fe­nêtre de l’ins­pec­tor. Il est plus que pré­fé­rable d’uti­li­ser des sprites pour les jeux 2D plu­tôt que des tex­tures. Le type sprite est ap­pa­ru dès la ver­sion 4 de Uni­ty, tou­jours dans l’es­prit de fa­ci­li­ter le dé­ve­lop­pe­ment de jeux en 2D. Les sprites sont clai­re­ment mieux adap­tés que les tex­tures. Il est bien plus ai­sé de les ani­mer et de les édi­ter ( via le Sprite Edi­tor). Ils sont tout sim­ple­ment par­faits pour faire des

jeux en 2D. La tech­nique consiste donc à im­por­ter les tex­tures qui vous plaisent puis de les trans­for­mer en sprite en chan­geant leur type ( via l’Ins­pec­tor ou ins­pec­teur d’ob­jets). Une fois vos tex­tures trans­for­mées en sprite, vous pou­vez les pla­cer sur la scène en les fai­sant glis­ser par drag and drop. Ces élé­ments dé­co­ra­tifs doivent être pla­cés en ar­rière- plan. Vous pou­vez pour ce­la uti­li­ser les calques Sor­ting Layer et Or­der in Layer de­puis la par­tie Sprite Ren­de­rer de l’ins­pec­tor. Le terme et la fe­nêtre de l’ins­pec­tor Sprite ren­de­rer dé­signe la tex­ture re­pré­sen­tant un ob­jet. Plus sim­ple­ment, il s’agit du ren­du vi­suel de l’élé­ment. Le Sor­ting Layer est uti­li­sé afin de dé­ter­mi­ner quel sprite doit être à l’avant ou à l’ar­rière- plan en cas de su­per­po­si­tion. Le calque Or­der in Layer per­met quant à lui de dé­fi­nir la prio­ri­té d’af­fi­chage des sprites se trou­vant sur un même Sor­ting Layer. Dit au­tre­ment, vous pou­vez dé­fi­nir quel sprite doit être pla­cé au- des­sus de l’autre en at­tri­buant au Or­der in Layer une va­leur plus éle­vée. Le Sor­ting Layer per­met donc de créer des calques et de les or­don­ner. Vous pou­vez ain­si spé­ci­fier que, par exemple, le calque ar­rière- plan se trouve de­vant le calque ob­jets. L’ordre d’af­fi­chage des sprites à l’écran dé­pend aus­si de leur propre calque. Les élé­ments dé­co­ra­tifs étant ce qu’ils sont, ils ne doivent avoir ni Col­li­der ni d’autres com­po­sants. Si vous êtes sa­tis­fait de votre pre­mière scène, en­re­gis­trez- la en la nom­mant Ni­veau1 comme évo­qué dans l’ana­lyse. Pas­sez en­suite à la créa­tion d’une nou­velle scène que vous ap­pel­le­rez Ni­veau2 et créez un autre ni­veau. Lais­sez libre cours à votre ima­gi­na­tion pour ajou­ter quelques trous, pièges et autres chausse- trappes. Ajou­tez main­te­nant un per­son­nage qui se­ra contrô­lé par le joueur. Vous confi­gu­re­rez en­suite ce per­son­nage avec des scripts et des com­po­sants et vous fe­rez un pre­fab. Dans un pre­mier temps, nous ajou­te­rons sim­ple­ment le per­son­nage à la scène et le do­te­rons des com­po­sants de base in­dis­pen­sables. Uti­li­sez le per­son­nage qui se trouve dans le dos­sier pre­fabs du pro­jet d’exemple té­lé­char­gé au dé­but ( 2D Ro­gue­like). Si la tex­ture du per­son­nage n’est pas ap­pli­quée au­to­ma­ti­que­ment au pre­fab, faites- la glis­ser dans la va­riable Sprite du Sprite Ren­de­rer. Vé­ri­fiez que votre Ga­meOb­ject com­porte les com­po­sants sui­vants : un Ani­ma­tor, un Col­li­der 2D, un Ri­gid­bo­dy 2D et un Sprite Ren­de­rer. Dans le cas contraire, ra­jou­tez- les. Sup­pri­mez le script par dé­faut du pre­fab si ce n’est pas dé­jà fait. Il va fal­loir dé­ve­lop­per notre propre script. Vous de­vez im­pé­ra­ti­ve­ment uti­li­ser un Col­li­der 2D et un Ri­gid­bo­dy 2D. Si­non, si vous choi­sis­sez d’autres types de com­po­sants, vous au­rez très cer­tai­ne­ment des pro­blèmes de collisions dans

un dé­cor 2D. Une fois le per­son­nage créé, ajou­té et prêt à l’em­ploi, faites en un pre­fab pour pou­voir le réuti­li­ser fa­ci­le­ment. Les Ri­gid­bo­dy 2D et Col­li­der 2D fonc­tionnent de la même fa­çon que leurs ho­mo­nymes stan­dard, ils dif­fé­rent néan­moins sur quelques pro­prié­tés et sur­tout ils sont par­ti­cu­liè­re­ment adap­tés aux cal­culs phy­siques et donc aux jeux 2D. Vous pou­vez, si vous le sou­hai­tez, di­mi­nuer lé­gè­re­ment la taille du Col­li­der 2D de votre per­son­nage afin, no­tam­ment, de lui per­mettre de pas­ser sans frot­te­ment entre deux blocs sé­pa­rés d’une uni­té. Si votre Col­li­der a une taille de 1 uni­té et que l’es­pace entre deux cubes est de 1 uni­té, vous ris­quez de blo­quer le per­son­nage. Vous de­vez donc ( ou non, se­lon votre scé­na­rio) don­ner une taille in­fé­rieure à 1 ( 0,94 par exemple) au Col­li­der du per­son­nage pour évi­ter ce­la. Le de­si­gn des deux ni­veaux est nor­ma­le­ment ter­mi­né. Il vous reste en­core à écrire quelques scripts, en­ri­chir les fonc­tion­na­li­tés de votre jeu, ajou­ter des ni­veaux, des per­son­nages et tut­ti quan­ti. Voyons quelques exemples.

Ins­tan­cier des ob­jets in­ter­ac­tifs avec les pre­fabs

Il faut com­men­cer par créer une fonc­tion qui ins­tan­cie de ma­nière aléa­toire un pre­fab sur la scène lorsque l’uti­li­sa­teur ap­puie sur la touche Es­pace. Les pre­fabs à ins­tan­cier ( à créer) doivent être pla­cés dans un ta­bleau de type Ga­meOb­ject[]. Ils de­vront chan­ger de cou­leur lorsque le joueur clique des­sus. Si le pre­fab est bleu, il doit pas­ser au rouge et vice- ver­sa. Au bout de huit clics consé­cu­tifs sur le même ob­jet, il doit de­ve­nir noir. Si l’uti­li­sa­teur clique une fois de plus, l’ob­jet concer­né doit dis­pa­raître. Créez en pre­mier lieu des ob­jets « cli­quables » . Ceux- ci de­vront conte­nir le script gé­rant ces clics tels que nous ve­nons de le dé­crire. Il vous fau­dra aus­si un autre script per­met­tant d’ins­tan­cier les ob­jets sur la scène. Voi­ci le script gé­rant les créa­tions de pre­fabs : using Uni­tyEn­gine; using Sys­tem. Col­lec­tions; pu­blic class ExoP­re­fab : Mo­noBe­ha­viour { pu­blic Ga­meOb­ject[] ob­jets; void Up­date () { if( In­put. GetKeyUp( KeyCode. Space)) { Ins­tan­tiate( ob­jets[ Ran­dom. Range( 0, ob­jets. Length)], new Vec­tor3( 0,0,0), Qua­ter­nion. iden­ti­ty); } // fin de dé­cla­ra­tion de la classe ExoP­re­fab Et, en­fin, le script gé­rant les clics sur les ob­jets : using Uni­tyEn­gine; using Sys­tem. Col­lec­tions; pu­blic class ExoP­re­fab2 : Mo­noBe­ha­viour { pri­vate bool isB­lue = true; pri­vate int nbC­lics = 0; void OnMou­seUp() { nbC­lics++; if( nbC­lics > 8){ Des­troy( this. ga­meOb­ject);} if( isB­lue) { GetCom­ponent< Ren­de­rer>(). ma­te­rial. co­lor = Co­lor. red; isB­lue = false; if( nbC­lics == 8) { GetCom­ponent< Ren­de­rer>(). ma­te­rial. co­lor = Co­lor. black; else { GetCom­ponent< Ren­de­rer>(). ma­te­rial. co­lor = Co­lor. blue; isB­lue = true; if( nbC­lics == 8) { GetCom­ponent< Ren­de­rer>(). ma­te­rial. co­lor = Co­lor. black;} Vous pou­vez main­te­nant faire ap­pa­raître des ob­jets en ap­puyant sur la touche Es­pace et chan­ger leur cou­leur en cli­quant des­sus. Au bout de huit clics, l’ob­jet de­vient noir. Un clic de plus et il s’au­to­dé­truit.

Créa­tion d’un pia­no à huit touches

Le but re­cher­ché est ici de créer un pia­no à huit touches ( une pe­tite gamme : do, ré, mi, fa, sol, la, si et do) en 2D ou 3D. Comme de bien en­ten­du, lorsque le joueur ap­puie sur une touche de son cla­vier, le son as­so­cié doit sor­tir. Les sons se­ront sto­ckés dans une va­riable de type Au­dioC­lip. Tout d’abord, il faut as­so­cier les touches du pia­no à huit touches du cla­vier, si pos­sible consé­cu­tives. Com­men­cez, par exemple, à as­so­cier la touche A au son Do, la touche Z au son Ré, E au son Mi, R à Fa et ain­si de suite jus­qu’à la touche I et au deuxième Do. Créez en­suite un texte en cli­quant sur Ga­meOb­ject / UI / Text. Il se­ra mo­di­fié à chaque fois qu’une touche du pia­no se­ra tou­chée. C’est le nom de la touche jouée qui se­ra bien en­ten­du af­fi­chée ( sauf si vous vou­lez per­tur­ber l’uti­li­sa­teur…). Pour construire le pia­no, vous pou­vez uti­li­ser des cubes pour créer les notes. Reste en­suite à ajou­ter un Au­dioSource sur cha­cun des cubes afin qu’ils puissent pro­duire un son. Vous de­vez en­suite créer un script qui se­ra as­so­cié à chaque touche, mais avec des va­leurs de va­riables

uniques pour cha­cune. Le code né­ces­saire res­sem­ble­ra à ce­la : using Uni­tyEn­gine; // les using de cir­cons­tance using Uni­tyEn­gine. UI; using Sys­tem. Col­lec­tions; // dé­cla­ra­tion de la classe Pia­no que vous de­vez im­pé­ra­ti­ve­ment // faire hé­ri­ter de la classe Mo­noBe­ha­viour pu­blic class Pia­no : Mo­noBe­ha­viour { pu­blic Au­dioC­lip note; pu­blic Text texte; pu­blic string touche = "Do"; pu­blic KeyCode tou­cheC­la­vier = KeyCode. A; void Up­date() f( In­put. GetKeyUp( tou­cheC­la­vier)) { jouerNote(); void jouerNote() { GetCom­ponent< Au­dioSource>(). PlayO­neS­hot( note); texte. text = touche; } } // fin de dé­cla­ra­tion de la classe Pia­no La touche A est as­so­ciée au son Do. Les va­riables sont dé­fi­nies en pu­bliques ( mot- clef pu­blic). Vous pou­vez donc en mo­di­fier les va­leurs de­puis l’ins­pec­tor et ain­si dé­fi­nir quelle touche est re­liée à quel son. La mé­thode sta­tique GetKeyUp de la classe In­put per­met de sa­voir si l’uti­li­sa­teur a re­lâ­ché la touche du cla­vier. La mé­thode GetKeyDown pour­rait ( presque) fonc­tion­ner, sauf que si c’est elle que vous uti­li­sez, le son ris­que­rait de se dé­clen­cher plu­sieurs fois qua­si- si­mul­ta­né­ment si le joueur main­tient la touche ap­puyée, créant ain­si une belle ca­co­pho­nie. La mé­thode PlayO­neS­hot() de la classe générique GetCom­ponent, em­ployée ici en lui pas­sant le type Au­dioSource, per­met de jouer un son. Au­dioSource, comme son nom l’in­dique si bien, dé­signe une source au­dio. ❍

Pour mo­di­fier les va­leurs de pro­prié­tés d’un élé­ment, sé­lec­tion­nez- le sur la scène et uti­li­sez l’ins­pec­tor dans le vo­let de gauche de Uni­ty.

Té­lé­char­gez le pro­jet 2D Ro­gue­like de­puis l’As­set Store et im­por­tez- le sous Uni­ty 3D.

Après avoir im­por­té les élé­ments du pro­jet de l’As­set, vous au­rez ac­cès à tous ses com­po­sants.

Créa­tion d’un nou­veau pro­jet 2D sous Uni­ty 3D.

Newspapers in French

Newspapers from France

© PressReader. All rights reserved.