• 20 heures
  • Facile

Ce cours est visible gratuitement en ligne.

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 24/10/2023

La création de votre scène de jeu

La personnalisation du décor

Une fois les grands principes de l’Unreal Engine 4 maitrisés, passons à la création de votre première scène de jeu. Parce que nous sommes partis d’un template, nous allons travailler à partir d’un décor existant et que vous allez pouvoir modifier à votre convenance.

Utilisez les interfaces de l'éditeur

Dans le Viewport, vous pouvez interagir avec tous les éléments du décor. Le tout, c’est de savoir comment ! Pour apprendre à maîtriser l’éditeur, je vous propose de relever une série de défis.

Votre première mission est simple : supprimez les cubes blancs dans la scène ! Allez, pour commencer, c’est à vous de chercher. Ensuite, bien sûr, je vous donne la réponse.

Avant - Après

Ça y est, vous avez supprimé tous les cubes blancs de la scène ? Pour supprimer un élément, c’est assez simple. Il faut cliquer dessus puis appuyer sur la touche Suppr de votre clavier. Et ainsi de suite jusqu’à dégager le terrain !

Pendant que vous traquiez les cubes blancs, vous vous êtes sûrement dit que ce serait pratique de pouvoir changer d’échelle. Et vous aviez raison ! Avant de continuer, je vous invite à trouver comment vous y prendre. Ce coup-ci, c’est moins évident à trouver. En effet, cette fonctionnalité est bien cachée… Un indice ? Dans le Viewport, vous avez sans doute vu des icônes en haut à droite ?

Cliquez sur le 10 à côté de la grille afin de changer d’échelle. Vous pourrez ensuite sélectionner 50, ce sera beaucoup plus approprié. Quand vous déplacerez un élément dans votre niveau, celui-ci se déplacera de 50 cm au lieu de 10 cm.

Vous y voyez plus clair ? Parfait, maintenant on va pouvoir commencer à créer !

Placez des éléments

À partir de là, votre mission est de créer une pièce, avec des murs, une porte et un plafond, puis de l’aménager pour lui donner, au maximum, l’apparence d’une vraie pièce. La bonne nouvelle, c’est qu’on va pouvoir partir de formes existantes et les modifier à volonté !

Les formes géométriques de base (ou BSP)

Pour bâtir votre première scène, imaginez qu’elle est faite de formes géométriques très simples. Par exemple, un espace comme un salon ou un hangar n’est rien d’autre qu’un grand (très grand) cube qu’on aurait étiré jusqu’à obtenir les dimensions voulues. Il vous faut donc un cube que vous trouverez dans la fenêtre Modes. Est-ce que vous vous souvenez où elle se trouve ? En haut à gauche, bien sûr !

Tout à l’heure, nous avons directement tapé “Point Light” dans la recherche mais, cette fois-ci, nous allons fouiller manuellement pour trouver la forme à notre convenance.

Cliquez sur BSP (Binary Space Partitioning) puis sur Box et faites un glisser-déposer de ce BSP dans le Viewport. Il s’agit de la même manipulation que vous avez faite tout à l’heure avec la Point Light.

Pour l’instant, cette boîte n’a pas grand chose à voir avec le résultat recherché, nous allons devoir la redimensionner puis la creuser.

Modifiez une forme

Pour redimensionner une forme, soyez sûr de l’avoir sélectionnée dans la fenêtre Word outliner puis définissez les paramètres suivants dans la fenêtre Details qui se trouve à droite afin de changer ses dimensions (dans Brush Settings) :

  • 500 en X ;

  • 1000 en Y ;

  • 500 en Z.

Certains l’auront sûrement vu, mais ce que vous avez au milieu (ou origine) de votre BSP se nomme repère. Pour les autres, voilà à quoi ressemble un repère :

L'axe

Nous avons logiquement les axes X, Y et Z qui permettent de déplacer les différents éléments de votre scène. Pour cela, maintenez le clic gauche sur l’une des flèches de l’axe et tirez-la ou poussez-la. Par exemple, maintenir le clic gauche de votre souris sur la flèche bleue (Z) permet de monter ou de descendre un objet.

À présent, nous allons voir comment creuser cette forme pour ne laisser que les murs et le plafond.

Pour commencer, faites un Ctrl + C (copier) de votre cube puis Ctrl + V (coller). Pour vérifier que votre copier-coller a bien fonctionné, regardez dans la fenêtre Scene Outliner (en haut à droite) ; si vous avez deux box brush, c’est que cela a bien marché. Si vous ne voyez pas vos deux box brush, cela veut dire que vous avez sans doute mal sélectionné votre box brush en premier lieu.

Ensuite, sélectionnez votre deuxième boite Box Brush2 dans le scene outliner. Dans la fenêtre Details, insérez des valeurs inférieures pour que cette deuxième boite soit plus petite que la première - pour ma part, j’entre "480, 980, 480" (j'ai enlevé -20 par rapport au brush1) -  puis mettez votre brush type en subtractive (tout se trouve dans l'encadré rouge !). Le mode subtractive permet d'enlever de la matière.

Si vous avez suivi mes indications, vous avez creusé l’équivalent du box brush2 mais ce vide est caché à l’intérieur du box brush1. Pour le faire apparaître, il faut le déplacer :

  • Sélectionnez votre box brush2 ;

  • Tirez sur les axes pour déplacer votre cube.

Si on suit mon exemple, je décale d’un cran en X vers la gauche (flèche rouge), d’un cran en Y (flèche verte) et de deux crans en Z vers le bas (flèche bleue). Pour obtenir le même rendu que sur la photo ci-dessous, vous devrez sans doute changer d’échelle (mettre la grille sur 10 au lieu de 50). Vous pourrez ainsi positionner plus précisément le box brush2.

 

En sélectionnant votre box brush2, déplacez votre cube d’un cran en X vers la gauche (flèche rouge) et de deux crans en Z vers le bas (flèche bleue). Pour obtenir le même rendu que sur le screenshot ci-dessous, vous devrez sans doute changer d’échelle (mettre la grille sur 10 au lieu de 50). Vous pourrez ainsi positionner plus précisément le box brush2.

 

Et pour terminer, déplacez votre box brush2 d’un cran en Y vers la gauche (flèche verte) afin d’enlever le second mur extérieur.

Avec deux murs ouverts, il est plus facile d’agir à l’intérieur de la pièce. C’est une façon de faire que je vous conseille mais je suis sûr que vous en croiserez d’autres. Et rien ne vous empêche de refermer la pièce une fois terminée. 

Pour ouvrir une porte ou une fenêtre, c’est le même procédé :

  • Sélectionnez le box brush2 dans le scene outliner ;

  • Effectuez une copie de ce bloc de façon à avoir 3 box brush dans votre niveau ;

  • Modifiez les dimensions de la troisième boîte (pour moi ce sera : X=20, Y=150 et Z=250) ;

  • Placez le bloc à l'emplacement de votre choix.

Pour placer correctement votre fenêtre ou votre porte, vous allez sans doute vouloir faire pivoter un objet ! Vous allez voir, c’est super simple !

  1. Sélectionnez un objet dans votre scène (pour nous ce sera le box brush3) ;

  2. Appuyez sur Espace une fois ;

  3. Maintenez le clic gauche de votre souris sur la partie bleue qui vient d’apparaître ;

  4. Faites pivoter votre objet de 90°. Vous avez réussi ? Parfait !

 

Maintenant appuyez deux fois sur Espace pour revenir aux axes de départ et déplacez ensuite votre boîte (box brush3) pour qu’elle vienne creuser une porte ou une fenêtre à l’emplacement de votre choix.

Et voilà ! Vous avez fait votre porte ! Il ne nous reste plus qu’à décorer tout ça et ce travail sera terminé.

Habillez votre pièce

Des murs gris à carreaux, ça ne vous semble pas une bonne idée pour votre jeu ? Très bien, nous allons voir comment changer l’habillage de vos surfaces.

Double-cliquez sur le mur que vous souhaitez “repeindre”. Une fois sélectionné, il s’entoure de jaune.

Cliquez sur Select dans la fenêtre Details et sélectionnez Select All Adjacent Wall Surfaces dans le menu. On va maintenant faire un petit tour vers le Content Browser afin de décorer notre scène !

Comment ça, vous ne vous souvenez plus où il se trouve ? C’est inacceptable, messieurs-dames ! Je plaisante bien sûr. ^^ Par défaut, il se trouve en bas à gauche dans l’éditeur.

Cliquez sur le dossier Content puis sur le dossier Starter Content et enfin sur le dossier Materials.

On va à présent s’amuser, voulez-vous ? Prenez le material "M_Brick_Clay_Old" et faites un glisser-déposer sur un mur pour appliquer le material au Brush. Vous êtes bien sûr libre de prendre n'importe quel material.

Après avoir décoré les murs, je vous propose à présent de décorer votre scène avec des mesh. Les mesh sont des éléments géométriques modélisés en 3D.

Allez donc dans le dossier Props dans le content browser (maintenant, je sais que vous savez où il se trouve ! :lol: ). Mettez tout ce que vous voulez (une table, une chaise et un banc par exemple) ; en revanche ne mettez pas tout de suite de lampes.

Vous pouvez bien entendu changer l’échelle afin d’être plus précis.

Voila ce que j’ai obtenu de mon côté. Évidemment c’est plutôt laid, et ça tombe bien ! Ça n’a pas pour vocation d’être joli ! Il semblerait judicieux de rajouter de la lumière, mais pas comme tout à l’heure avec notre point light, non, non… Nous allons faire un peu mieux que ça.

Ambiance lumineuse 

Dans le content browser, sélectionnez le dossier Blueprints (Content> Starter Content > Blueprints). Il contient deux types de lampe.

Saisissez la première lampe nomméeBlueprint_CeilingLightet placez-la dans votre scène. De mon côté, j'ai effectué une rotation sur cette lampe et je l'ai collé près d’un mur.

Certains l’auront déjà remarqué, vous pouvez modifier la couleur de la lumière, son intensité et plein d’autres choses dans la fenêtre Details. Mais sachez-le, il ne s’agit pas d’un simple mesh comme tout à l’heure. Il s’agit d’un blueprint. Je reviendrai là-dessus un peu plus tard, notez juste qu’il s’agit de quelque chose de nouveau dans l’Unreal Engine 4, qui comprend notamment un système de classe. Mais concentrons-nous sur notre scène pour le moment.

Changez comme bon vous semble les paramètres de votre lampe. Pour cela, sélectionnez-la dans votre scène et changez ses paramètres à partir du Detail panel. 

Parfait, votre scène est en place ! Il reste un élément à définir : la physique !

Un peu de physique

Appliquez une physique à vos éléments

Avant de commencer cette partie, sachez que vous pouvez passer en Game View en appuyant sur la touche G. Cela permet d’avoir le même rendu que vous auriez pu avoir en jeu — concrètement, cela enlève les différentes icônes. N’oubliez pas de sauvegarder votre scène avec Ctrl+S. 

Pour terminer, vous pouvez appuyer sur le bouton Play et rentrer dans votre scène en vue FPS.

Maintenant, passons à la question qui nous amène ! Qu’est-ce que la physique dans UE4, comment l'utilise t-on ?

 

L'Unreal Engine 4 utilise PhysX 3.3 qui permet de simuler les collision des objets. Avoir de la physique dans votre jeu vous permettra d'augmenter l'immersion dans votre scène et donnera la sensation aux joueurs qu'ils peuvent réellement interagir avec les éléments du décor. 

Une chose à garder en tête est que tous les mesh ne se comportent pas de la même façon. Je vais donc vous présenter deux types de situations : le cas général et le cas particulier.

Le cas général 

Sélectionnez une chaise dans votre scène.

Dans le panneau Details cherchez la catégorie se nommant Physics, dépliez-la et cochez l'option Simulate Physics

Faites de même pour chaque mesh que vous avez placé. Il y en a pour lesquels ça ne se passe pas comme prévu alors que ce ne sont pas des blueprints ? Pas de panique, c’est normal !

Le cas particuliers

Si vous souhaitez modifier la physique d'un blueprints, sélectionnez votre lampe dans le niveau. Puis à partir de la fenêtre Details, cliquez sur Edit Blueprint pour enfin cliquer sur Open Blueprints Editor.

Cette fenêtre peut faire un peu peur mais nous n’allons pas y rester longtemps. À partir de cette fenêtre, cliquez sur Viewport en haut à gauche.

Vous retrouverez tous les composants utilisés dans ce blueprint. Vous pouvez voir une point light et un mesh se nommantSM_Lamp_Ceilling (ouSM_Lamp_Wall si vous avez choisi la petite lampe murale). C’est lui qui nous intéresse, cliquez dessus !

Vous devriez avoir des informations sur ce mesh dans le details pannel juste à droite. Dans la barre de recherche, tapez « Simulate ». Vous devriez à présent voir Simulate Physics : cochez-le. Cliquez ensuite sur Compile dans le menu du haut puis Save pour sauvegarder les modifications de ce blueprint.

Votre lampe est à présent affectée par la physique ! Si vous avez placé deux lampes dans votre niveau, toutes ces lampes le seront aussi. Je vous en reparlerai un peu plus tard dans un chapitre dédié.

Les collisions

Dans le niveau, sélectionnez un banc et faites un clic droit dessus à partir du Viewport. Sélectionnez Find in Content Browser ou bien Ctrl+B.

Vous devriez voir où se trouve le banc dans votre content browser. À présent, faites un double-clic dessus (dans le content browser).

Tout en haut de cette fenêtre, repérez le mot collision à coté de mesh. Cliquez dessus et sélectionnez Add Box Simplified Collision. Ensuite cliquez sur l’icône Collision (l’icône qui se trouve à coté de Bounds et de Show Pivot), cela nous permettra de voir les collisions.

Faites Save (en haut à gauche) et fermez cette fenêtre.

Dans le niveau, si vous cliquez à présent sur le banc, vous pouvez cocher Simulate Phyics. Si comme moi, vous avez mis un buisson, la manipulation est la même, il faut lui mettre une physique. Quand tout cela sera fini, sauvegardez (Ctrl+S) et lancez votre jeu en appuyant sur Play.

Amusez-vous à tirer sur les éléments qui ont une physique.

C’est assez drôle finalement ! On pourrait presque en faire un vrai jeu vidéo !

Bien entendu, dans vos prochaines productions, ne vous amusez pas à mettre une physique à tous vos mesh. Il me semblait utile de vous apprendre cette fonctionnalité mais utilisez-la à bon escient.

En résumé

Eh bien ! Quelle aventure ! Nous avons appris des tas de choses en peu de temps ! Un petit récapitulatif s’impose.

  • Vous savez choisir un template (FPS ici).

  • Vous avez appris à placer des éléments dans votre scène.

  • Vous savez réaliser des structures (bâtiments) avec des BSP.

  • Vous savez comment utiliser des mesh dans votre scène.

  • Vous savez comment appliquer une physique et une collision à un mesh.

Vous apprenez vite, félicitations ! Le prochain chapitre sera sur la lumière. Les notions que nous aborderons seront extrêmement basiques, alors c'est parti !

 

Exemple de certificat de réussite
Exemple de certificat de réussite