Plan du site  
pixel
pixel

Articles - Étudiants SUPINFO

Premier pas avec Unreal Engine

Par Eddy LE HENAFF Publié le 30/10/2015 à 16:01:27 Noter cet article:
(0 votes)
Avis favorable du comité de lecture

Introduction

Unreal Engine est un moteur de jeux permettant de créer toute sorte de jeux, 2D ou 3D, FPS ou TPS, etc… Pour en savoir plus je vous renvois vers mon précèdent article

Dans cet article je vais vous aider dans vos premiers pas avec l’Unreal Engine, vous donner un premier aperçus de ce moteur, commençons sans plus attendre !

Installation

Pour commencer il vous faudra créer un compte sur le site officiel d’Unreal Engine, puis cliquer sur le bouton « Download », une fois téléchargé, lancer l’exécutable et suivez les instructions.

Une fois que vous êtes enregistré, aller dans l’onglet « Library » et cliquer sur « Install », ça vous prendra un petit temps…

Lorsque le téléchargement est fini cliquez sur « Launch » (qui a remplacé « Install »).

Création d’un nouveau projet

Pour cet exemple nous allons créer un FPS (First Person Shooter), pour ce faire aller dans l’onglet C++ (ce qui vous permet de créer un template en C++) et sélectionner « First Person », donner un nom à votre projet et cliquer sur « create project »

Votre projet est créé ! Vous pouvez maintenant voir l’interface de l’Unreal Engine, essayons ensemble de le comprendre….

Commençons par le centre, il s’agit de la fenêtre d’édition (viewport editor), dedans, vous pouvez interagir avec les éléments de votre niveau, vous pouvez vous déplacer en cliquant dans la fenêtre et en utilisant les touches w, a, s et d version qwerty de notre zqsd, on verra après comment changer les commandes. Les boutons en haut à droite de cette fenêtre servent à manipuler les différents acteurs de votre niveau, ceux en haut à gauche, quant à eux, servent à gérer la fenêtre en elle-même, je vous laisse les essayer pour faire plus ample connaissance.

Passons maintenant à la partie de gauche, « Modes », c’est grâce à cette partie que vous allez pouvoir ajouter de nouveaux objets, les peindre, ajouter du relief, en bref vous allez pouvoir utiliser cette partie pour éditer votre niveau.

La partie basse, « Content Browser », sert à naviguer entre les diffèrent éléments de votre projet, mais aussi en créer de nouveaux.

La partie de droite, « Details », contient toutes les informations relatives à un objet sélectionné dans la fenêtre d’édition vu précédemment, vous pouvez ainsi modifier la taille, la rotation, la localisation, etc…

En haut à droite, se trouve la partie « World Outliner », c’est ici que se trouve la liste de tous les acteurs présents dans votre niveau, les acteurs peuvent être modifiés directement à partir de cette fenêtre.

La barre d’outils présente en haut de la fenêtre d’édition, vous donne accès aux opérations de base comme sauvegarder, compiler, lancer votre jeu, etc…

La barre de menu en haut, fonctionne comme n’importe quel menu présent dans grand nombre d’application.

Je vous invite à naviguer dans ces différents éléments pour vous familiariser avec cette interface, on apprend mieux en essayant !

Paramétrage des commandes

Comme dit précédemment, les commandes de base sont faites pour les claviers QWERTY, nous pouvons bien évidemment les modifier, pour qu’elles puissent être adaptées à nos claviers AZERTY.

Commençons d’abord par le réglage des commandes de la fenêtre d’édition. Pour ce faire, allez dans la barre de menu en haut et cliquez sur Edit->Editor Preference.

Une fenêtre sauvage apparait, cliquez sur « Keyboard shortcuts » dans la colonne de gauche, puis cherchez « Viewport Navigation » (vous pouvez bien sûr utiliser la barre de recherche). À vous de paramétrer de la façon que vous jugerez la plus pratique.

Vous pouvez quitter cette fenêtre, allez ensuite sur la fenêtre d’édition, vous pourrez voir que les changements que vous venez d’apporter ont bien été fait.

Maintenant, si vous cliquez sur le bouton « Play », présent sur la barre d’outils, vous remarquerez, une fois dans le jeu, que là aussi les commandes sont en QWERTY, quitter le mode play (bouton stop ou échappe), cliquez maintenant sur « Settings » dans la barre d’outils puis sur « Project Settings », allez ensuite dans « inputs » dans la colonne de gauche (dans la partie Engine).

C’est ici que vous allez pouvoir configurer toutes les commandes de votre jeu, pour les déplacements ça se passe dans « Axis Mappings », dans Bindings, développer cette partie grâce à la petite flèche à gauche de Axis Mappings, là vous pouvez voir tout les mouvement liés au déplacement, si vous développez « MoveForward » et « MoveRight », vous pourrez voir les commande enregistrer par default, là encore à vous de les configurer selon vos préférences (en générale W devient Z, A devient Q), il est bien sûr possible de mettre plusieurs commandes pour une seule action.

Si vous voulez ajouter d’autre commande vous devez le faire dans la partie Action Mappings, développer la partie de la même façon que la précédente là vous aurez deux commandes faites par défaut, le saut et le tire, respectivement espace et clique gauche pour un ordinateur, je vous montrerais après comment en ajouter de nouveaux et comment les configurer.

Le C++

Le C++ sous Unreal Engine fonctionne de la même façon que le C++ habituel, mais l’ajout de fonctions propres à Unreal Engine nous oblige à le réapprendre en quelque sorte.

Procédons à la création du traditionnel « HELLO WORLD ! », nous verrons après un autre exemple mêlant C++ et Blueprint.

Le but est d’afficher la phrase « HELLO WORLD ! » lorsque notre personnage apparait dans le niveau. Pour ce faire cliquez dans « File » dans la barre de menu puis sur « Open Visual Studio », Visual Studio apparait donc.

Dans l’explorateur aller dans source puis sélectionner *NomDeVotreProjet*Character.h (si vous avez pris le nom par défaut ça sera MyProjectCharacter.h).

Vous pouvez aussi utiliser le « Content Browser » dans l’Unreal Engine pour accéder à une classe voulut, ajoutez-y le code suivant (dans la partie protected par exemple)

virtual void BeginPlay() override;

Comme son nom l’indique, cette méthode serra appelée lorsque le jeu commence, allez maintenant dans le .cpp associé et ajoutez-y ce code :

#include "Engine.h"

Puis :

void AMyProjectCharacter::BeginPlay()
{
	Super::BeginPlay();
	GEngine->AddOnScreenDebugMessage(-1, 5.f, FColor::Red, TEXT("HELLO WORLD"));

}

N’oubliez pas l’include sinon le GEngine ne sera pas reconnu.

Cette fonction affichera donc en rouge (oui vous pouvez changer la couleur) « HELLO WORLD ». Maintenait comment compiler…

Vous avez surement déjà remarqué le bouton « Compile » dans l’Unreal Engine, si c’est le cas ne cliquez pas dessus (si ce n’est pas le cas vous pouvez aller le repérer…), il est préférable de compiler directement à partir de Visual Studio (F5 ou triangle vert) lorsque l’on ajoute une nouvelle méthode plutôt que de le faire dans l’Unreal Engine, dans le cas contraire vous pouvez donc directement utiliser le bouton Compile, mais pour cette situation il vous faut fermer Unreal Engine (juste la fenêtre de votre projet) puis compiler à partir de Visual Studio.

Une fois compilé, votre projet s’ouvre et si vous cliquez sur « Play », un message saluant le monde devrait apparaitre.

Maintenant je veux pouvoir dire bonjour sur commande et pas seulement au démarrage, pour cela il vous faut aller dans le contrôle des commandes vus précédemment (Settings->Project Settings->Input) cliquer sur la croix à droite d’Action Mappings, un nouveau champ apparait, appeler le « Print » par exemple et associez lui une touche, dans mon exemple je vais prendre le ‘Y’.

Fermer la fenêtre et retourner dans Visual Studio.

Dans *NomDeVotreProjet*Character.h, ajoutez (sous le BeginPlay() précédemment crée par exemple) le code suivant :

/** Print "HELLO WORLD" */
void Print();

Puis dans le .cpp associé, trouvez la fonction « SetupPlayerInputComponent » et ajoutez-y le code suivant :

InputComponent->BindAction("Print", IE_Pressed, this, &AMyProjectCharacter::Print);

Cette ligne précise que lorsque la commande « Print » (à modifier si vous l’avez nommé différemment) est pressée, on appelle la fonction Print (déclarer précédemment dans le .h), bien sûr réadaptez le code en fonction des noms que vous avez choisis pour la commande, pour votre projet et pour la fonction.

Maintenant il vous faut créer la fonction Print, toujours dans le .cpp ajoutez :

void AMyProjectCharacter::Print()
{
	GEngine->AddOnScreenDebugMessage(-1, 5.f, FColor::Blue, TEXT("HELLO WORLD !"));
} 

Compiler de la même façon que tout à l’heure, c’est à dire directement à partir de Visual Studio après avoir fermé Unreal Engine, puis, une fois compilé, lancez votre projet et testez les modifications en appuyant sur la touche que vous aviez choisi précédemment (Y dans mon cas), si tout va bien ça devrait fonctionner !

Le Blueprint

Maintenant qu’on a vu le C++ voyons le Blueprint, nous allons partir sur les mêmes exemples faits précédemment (le fameux hello world).

Dans le content browser aller dans le fichier « FirstPerson » puis dans « Blueprint » et double cliquez ensuite sur FirstPersonCharacter.

Une fois que la fenêtre apparait cliquer sur Open Full Blueprint Editor, vous devriez maintenant avoir une fenêtre qui ressemble à ça (dans l’onglet Event Graph) :

Pour faire apparaitre un élément (que ce soit une fonction, une variable, ou autre), il vous faut faire un clic droit sur l’élément central de la fenêtre, puis dans la barre de recherche qui s’affiche taper « BeginPlay », cliquer ensuite sur la fonction trouvée.

Maintenant faite la même chose, mais cette fois cherchée « Print String », puis, quand le deuxième rectangle s’affiche relier les comme ceci :

Pour ce faire il vous suffit de maintenir le clic sur le premier triangle vers le triangle de destination. Voila ! Si vous lancez le jeu un deuxième « Hello » devrait apparaitre (en plus de celui crée en C++)

Nous allons maintenant faire comme précédemment, c’est-à-dire afficher « Hello » lorsque l’on appuie sur une touche. Pour ce faire il faut chercher la commande « Print » créer tout à l’heure dans la partie sur le C++ il vous suffit de taper « action events print », dans la barre de recherche après avoir fait un clic droit, (ou juste Print et de scroller jusqu’à le trouver…), relier ensuite « Pressed » à la fonction print string que nous avons créé juste au-dessus.

Lancer votre jeu et tout devrait fonctionner, vous pouvez aussi associer une touche qui n’est pas définie comme étant une commande, comme ceci :

Avec cet exemple si vous appuyez sur ‘T’ « Hello » vas être affiché.

Blueprint + C++

Nous allons maintenant créer une fonction en C++ qui sera appelée dans le Blueprint, mais dans cet exemple nous n’allons pas seulement afficher « Hello World », nous allons permettre à l’utilisateur d’afficher la phrase de son choix (un genre de chat en fait… mais seul…), ce qui me permet de vous présenter une autre fonctionnalité de Unreal Engine, l’UMG.

Littéralement, Unreal Motion Graphics (UI Designer), l’UMG sert à créer une interface utilisateur, nous pouvons donc afficher des boutons, des champs textes, etc… Cette fonctionnalité utilise le blueprint.

Pour créer une interface utilisateur (UMG), vous devez aller dans le Content Browser et cliquer sur le bouton vert « Add New » puis « User Interface » et enfin « Widget Blueprint », nommer le ensuite, par exemple, « Chat ».

Sur la gauche de votre fenêtre vous pouvez voir un panneau « Palette » où se trouve différent objet (boutons, etc…) chercher « Text Box » et faites un drag and drop sur la partie central (ça fonctionne un peu de la même façon que le WPF en .NET, le XAML en moins)

Mettez-le à l’endroit que vous souhaitez, par exemple en bas.

Avant de continuer sur notre interface, nous allons créer la fonction en C++.

Pour ce faire aller dans Visual Studio dans *NomDeVotreProjet*Character.h et ajouter en public ce code

UFUNCTION(BlueprintCallable, Category = "Chat")
void PrintString(FString myString);

UFUNCTION précise que la fonction suivante peut être appelée par le Blueprint sous la catégorie « Chat ».

Allez maintenant dans le .cpp et créer la fonction :

void AMyProjectCharacter::PrintString(FString myString)
{
	GEngine->AddOnScreenDebugMessage(-1, 5.f, FColor::Red, myString); 
}

Tout ce que cette fonction fait c’est de récupérer une String en paramètre et de l’afficher à l’écran.

C’est tout ce qu’il y a à faire pour le C++, retournons à notre UMG.

Lorsque vous sélectionnez le TextBox fraichement crée, le panneau Details (à droite), affiche, comme son nom l’indique, plusieurs détails sur l’élément sélectionné, vous pouvez y changer son nom, etc… Si vous allez tout en bas de ce panneau, dans la partie « Event », vous pouvez voir deux évènements, OnTextChanged (quand le texte est modifié) et OnTextCommited (quand l’utilisateur appuie sur entrée ou s’il n’est plus focus dessus), c’est le deuxième qui nous intéresse, cliquez sur le bouton vert avec la croix blanche, à droite de l’évènement.

On retrouve donc l’interface du Blueprint, avec un rectangle déjà crée (grâce au bouton vert), mais aussi deux rectangle grisés, le premier sert à créer une action lorsque l’interface est appelé, nous allons se servir de celui-ci pour directement sélectionner notre textBox, ce qui évitera à l’utilisateur de le faire manuellement ça doit donc ressembler à ça :

Pour créer un nouveau rectangle, vous pouvez (et des fois vous devez comme par exemple avec Set Keyboard Focus et set input Mode Game and UI), le faire à partir d’un lien, donc vous devez maintenir le clic sur le rectangle initial et emmener le lien vers un espace vide.

Pour faire référence à un élément de votre UMG, vous pouvez soit le faire avec la barre de recherche après un clic droit, soit faire un drag and drop à partir de la colonne de gauche « My Blueprint », puis de sélectionner « Get » ou « Set » en fonction de si vous voulez récupérer la valeur ou la modifier.

Expliquons un peu le Blueprint précèdent.

My Text Box : il s’agit bien sûre d'une réference du textBox précédemment crée.

Set Keyboard Focus : focus un control, en l’occurrence le textBox.

Get player Controller : permet de savoir quel périphérique est utilisé par l’utilisateur (clavier/souris ou manette)

Set Input Mode Game and UI : permet de définir sur quel widget on va se focus et récupère le type de controller que l’utilisateur utilise.

On va maintenant passer à la transmission de la chaine entrée par l’utilisateur, à notre fonction créer tout à l’heure.

Nous faisons donc un cast de « MyProjectCharacter » (le nom sera différent si vous avez nommé votre projet différemment) pour pouvoir atteindre la fonction « PrintString », pour ce faire il est important d’appeler la fonction à partir de « As My Project Character » sinon vous ne trouverez par la fonction, par ailleurs, vous pouvez remarquer qu’elle est bien dans la catégorie « Chat » quand vous la cherchez.

Le dernier rectangle, Remove from Parent, permet de fermer l’interface.

Il nous reste plus qu’une dernière chose à faire, afficher l’interface ! Dans content Browser, allez dans le fichier FirstPerson puis dans Blueprint, double cliquer sur FirstPersonCharacter. Une fois dans l’onglet Event Graph créez ceci :

Ce Blueprint appellera l’UMG Chat (utilisez le menu déroulant du rectangle « Create Widget » pour choisir l’UMG) et l’affichera à l’écran.

Voila ! Il n’y a plus qu’à tester, normalement tout devrait fonctionner, si ce n’est pas le cas reprenez toutes les étapes et vérifiez que vous n’avez rien oublié.

Conclusion

Ce tuto touche maintenant à sa fin, j’espère que je vous aurais aidés dans votre première approche de l’Unreal Engine et surtout que vous aurez envie de continuer votre apprentissage sur ce moteur de jeu !

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