Plan du site  
pixel
pixel

Articles - Étudiants SUPINFO

Unreal Engine 4 - Partie 8 : Les Blueprints

Par Fayçal SIDI ALI MEBAREK Publié le 17/10/2018 à 18:27:28 Noter cet article:
(0 votes)
Avis favorable du comité de lecture

Nous avons vu, dans les précedentes parties, les bases de l'Unreal Engine 4, expliqué comment les différents types de lumières fonctionnent; nous avons aussi vu le blocking, la mise en place des textures et du decor. Nous avons contruit notre première pièce.

Maintenant pour compléter cela, nous allons voir ce que sont les Blueprints, nous avons vu avant qu'il s'agit d'un système de script permetant de developper sans avoir a recourir directement au C++ pur.

Avec les blueprint, on relie simplement les différents eléments les uns aux autres pour les faire interagir entre eux.

Blueprint = Visual scripting

Exactement, c'est un système de script, que vous utilisez au travers d'une interface. En plaçant nos blueprints, nous pouvons les embriquer les uns les autres pour que les scripts se lance à la suite. Avec les blueprints on peux donc définir des classes, des objets...

Exemple de blueprint

Nous allons retourner dans notre projet, et le continuer. Nous allons tester le concept de blueprints pour placer nos lumières.

Donc toujours dans le "Content Browser" en bas de page, nous avons le dossier "Blueprints", cliquons dessus pour voir ce qu'il contient. Il contient deux types de lampe.

Nous allons prendre la premiere : "Blueprint_CeilingLight" et la placer dans notre décor. Nous constatons donc, qu'il s'agit de notre objet lampe que nous avions déjà placé dans le décor, mais cette fois avec une lampe avec une point light déjà placé et orienté ! C'est la la puissance des blueprints, nous en avons déjà un aperçu. Remplaçons donc nos lampes qui ne fonctionnent pas par celles-ci :

Encore ici, vous pouvez modifier la puissance de la lampe en modifiant le paramètre "Brighteness", sa couleur... Ce que j'ai fais pour que vous puissez pleinement voir le résultat.

Ce n'est donc pas un simple objet placé, il s'agit d'un blueprint.

C'etait donc un exemple de Blueprint proposé par ceux qui ont conçu le moteur, afin que nous puissons tester. Cependant, il est possible de créer ses propres blueprints, en créant des classes et des objets en C++. Il ne s'agit donc pas de remplacer le C++ par les blueprints, mais de faciliter le développement, en les rendant complémentaires.

Donc, il est possible de faire son jeux, en passant par les menus, la physique, l'interface, les scripts, uniquement à partir du blueprint, sans une seule ligne de code.

Création de notre premier Blueprint

Pour mieux comprendre ce que c'est, nous allons nous attaquer à ce morceau et faire le notre. Nous allons faire une jolie porte coulissante, qui s'ouvrira lorsque notre personnage s'y approchera ! Merveilleux.

Tout d'abord, nous allons placer une vitre sur notre porte, et l'ajuster pour recouvrir la surface vide, comme ceci, vous savez le faire :

Nous avons notre vitre, c'est elle qui coulissera lorsque nous nous y approcherons et se refermera lorque nous nous éloignerons.

Nous allons tout d'abord aller dans l'onglet "Modes" à gauche, puis dans "Basic", et selectionner une "Box Trigger", la placer au niveau de la porte, et l'ajuster pour qu'elle soit la zone qui declenchera le script qui ouvrira et fermera la porte :

Nous allons aussi rendre notre vitre "Movable" pour qu'elle puisse se déplacer dans le jeu, sinon aucune interaction ne sera possible. Cliquez sur la vitre, puis dans "Details", cliquez sur "Movable" :

A present, sélectionnez votre "Trigger Box" afin de pouvoir l'utiliser facilement et cliquez sur "Blueprints en haut de page, puis sur "Open Level Blueprint" :

Vous êtes sur la page qui vous permez de créer vos blueprint pour faire intéragir les élements entre eux, elle est vide pour le moment. Nous allons y ajouter notre "Trigger Box". Faites clic droit dans le vide au milieu, puis "Add Event for Trigger Box 1" puis "collision" et enfin "Add On Actor Begin Overlap", voici ce que ca donne :

Refaite la même chose et cette fois, ajoutez Add On Actor End Overlap". Ce sera le debut et la fin de notre boucle.

Nous voulons que la vitre se déplace de droite à gauche, en environ 1 seconde, nous allons donc ajouter une "Timeline"; en faisant clic droit encore, scrollez tout en bas et cliquez sur "Timeline".

Nous voulons que la porte s'ouvre quand on s'y approche, et qu'elle se ferme lorsqu'on s'éloigne, donc qu'elle fasse l'inverse. Faisons donc comme suit :

Voila, nous avons donc relié le debut de notre action (Begin Overlap) avec "Play", et la fin de notre action (End Overlap) avec "Reverse" pour qu'elle fasse l'effet inverse et retourne à sa position initiale (porte fermée).

Maintenant nous allons modifier notre Timeline pour que la porte s'ouvre et se ferme en 1 ou 2 secondes. Double cliquez sur votre timeline, cela vous envois sur une autre page. Ici, ajoutez un "Vector Track" en cliquant sur le bouton "V+" en haut de page et nommer le comme vous voulez. Je l'ai nommé "Movement_Door".

La porte se déplacera uniquement sur l'axe Y de mon coté (de gauche à droite et inversement par rapport à l'orientation de ma porte); chez vous ça peut être sur l'axe X, à vous de voir comment vous avez positionné votre porte

Nous allons donc cacher les axes X et Z pour ne pas commètre d'erreurs. Pour cela, cliquez sur l'oeil pret de X et Y. Faites "Shift" + clic gauche sur l'axe Y en vert pour le sélectionner et pouvoir le modifier. Quand vous êtes à 0 pour le temps et la valeur, refaites "shift" + clique gauche ailleurs et mettez 1.2 seconde pour le temps et 110 pour la valeur pour le second point jaune.

Concernant la valeur du temps, il s'agit du temps que nous voulons pour que notre porte s'ouvre, nous allons donc mettre 1.2 seconde pour notre exemple.

Voici le résultat de notre "Timeline" :

Nous en avons fini avec la "Timeline". La porte commencera à s'ouvrir donc à l'instant t=0 et terminera son coulissement à l'instant t=1.2 seconde. Et nous avons spécifié que cela influera l'axe X, elle coulissera donc de droite à gauche ou l'inverse; c'est ce que nous allons ajouter maintenant.

Ensuite nous allons retourner sur notre "Event Graph", et ajouter un event qui lancera le debut de l'action; pour cela faites un clic droit puis tapez dans la barre de recherche "event begin play" et cliquez dessus pour l'ajouter :

Maintenant, soyez sur que votre "porte" soit sélectionné sur le moteur de jeu, puis revenez sur l'Event Graph; De mon coté la porte est une vitre, ce sera elle qui s'ouvrira : son nom est "SM_GlassWindow3". Nous allons l'ajouter en faisant commet pour l'event begin play, en faisant donc clique droit et sur "Create a reference to SM_GlassWindow3".

Mainteanant que vous avez compris le principe, nous allons avancez plus vite, faites la même chose en ajantant "Get Actor Location" puis reliez votre porte à "Target" pour qu'elle soit la cible du changement de valeur. Ensuite, maintenez le clique sur "Return Value" puis faites clique droit sur le vide, et cliquez sur "Promote to variable"; comme ceci :

On vous demande d'entrer un nom à votre variable, c'est important pour s'y retrouver. Nous allons la nommer "InitialDoorLocation" :

Maintenant connectons notre "Event BeginPlay" au pin blanc de la variable que nous venons de créer. Ensuite nous allons copiez coller votre porte plus bas. Prenons le pin blue en cliquant dessus puis faite clic droit, tappez "set actor location" et cliquez dessus".

Relions le pin "update" de votre timeline au pin blanc de "set actor location" que vous venez d'ajouter. C'est ce qui fera que la position de la porte changera avec le temps; elle sera modifier à chaque instant de t=0 à t=1.2 seconde comme nous l'avons précisé dans la timeline.

Ajoutons maintenant notre variable "InitialDoorLocation" en faisant "ctrl" + clique maintenu et glissez la, comme ceci :

Cliquons à présent sur le pin jaune de notre variable, et clique droit pour ajouter notre vecteur "vector + vector"; puis relier le pin "Movement Door" de notre timeline, au pin des coordonnées de notre vecteur.

Relions maintenant notre pin jaune de notre vecteur, à "New location" de "Set Actor Location". Voila ce que donne notre blueprint level pour le moment :

Comme vous pouvez le voir, j'essaye toujours de ne pas croiser les lignes, pour que le blueptint reste toujours clair. Ici il n'est pas très long, mais parfois nous pouvons avoir peut etre 5 ou 10 plus d'eléments, et c'est la que cela peut devenir difficile de s'y retrouver, si l'on n'est pas organiser.

Voila, nous avons finis notre Level Blueprint, il est temps de le tester ! Tout d'abord il nous faut le compiler, vous pouvez le faire en cliquant sur "Compile" en haut à gauche.

Nous pouvons maintenant revenir à notre niveau, faire play pour tester; voyons ce que ca donne :

A ce moment, je suis en dehors de la trigger box, donc le script ne se lance pas. Je vais m'avancer pour y entrer pour voir le resultat.

Voila ! notre porte s'ouvre de droite à gauche, exactement comme prévu, et en 1.2 seconde; vous devez tester chez vous pour voir.

Conclusion

Nous venons de voir comment fonctionne un blueprint, en quoi le concept est d'une grande efficacité, et nous en avons même créé un pour bien comprendre son fonctionnement. Il est donc très pratique de travailler à l'aide des blueprints, cela nous offre un gain considérable de temps, en tout cas pour les petits scripts comme celui que nous venons de faire.

Cependant, pour créer ses propres blueprints customisé et poussé, il est dans certains cas obligatoire de passer par la case C++.

En résumé, Dans toutes ces parties sur Unreal Engine 4, nous avons passé en revu son évolution, de sa création à ce que nous avons aujourd'hui; nous avons vu comment l'obtenir, et comment utiliser le launcher de Epic Games (que je vous recommande si vous avez eu quelques problèmes que ce soit pendant le déroulement de cet article). Nous avons vu les bases de l'Unreal Engine 4, du blocking à l'utilisation des différentes lumières. Avec cela, nous avons créé notre premier décor, utilisé et créé nos premiers blueprint.

Nous verons par la suite l'utilisation de sons dans le moteur.

A propos de SUPINFO | Contacts & adresses | Enseigner à SUPINFO | Presse | Conditions d'utilisation & Copyright | Respect de la vie privée | Investir
Logo de la société Cisco, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société IBM, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Sun-Oracle, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Apple, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Sybase, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Novell, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Intel, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Accenture, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société SAP, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Prometric, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Toeic, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo du IT Academy Program par Microsoft, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management

SUPINFO International University
Ecole d'Informatique - IT School
École Supérieure d'Informatique de Paris, leader en France
La Grande Ecole de l'informatique, du numérique et du management
Fondée en 1965, reconnue par l'État. Titre Bac+5 certifié au niveau I.
SUPINFO International University is globally operated by EDUCINVEST Belgium - Avenue Louise, 534 - 1050 Brussels