Guide de travail · Dreamtime Travellers

Apprendre Unreal Engine pour un RPG HD-2D

Mon plan pour passer de « j'ai importé mon diorama » à un prototype jouable de Dreamtime Travellers : un RPG entre Octopath Traveler, Persona 5 et Final Fantasy IX, où le merveilleux et l'originalité passent avant tout. Seize semaines à environ six heures par semaine, chaque étape finit par quelque chose qu'on peut voir.

Le premier essai : diorama Worldmap + Mai

Le diorama 2.5D de la worldmap v3 (Blender) avec les sprites de Mai (Đi ăn, Mai!) posés dedans. La première version avait une ambiance ratée ; la seconde corrige la lumière, la caméra et le sprite. Les deux niveaux sont dans le projet : HD2D_Prototype (avant) et HD2D_Diorama (après).

Premier essai : diorama bleuté sur fond marron, Mai collée par-dessus
Avant : soleil bleu, pas de ciel, caméra orthographique, Mai non éclairée.
Second essai : diorama chaud, flou de maquette, Mai éclairée comme le décor
Après : soleil chaud bas, ciel et brume, longue focale avec flou de maquette, Mai éclairée.

Recette lumière HD-2D (point de départ)

Les valeurs du niveau HD2D_Diorama. Ce sont des points de départ, pas des règles : on change une chose à la fois, et on compare.

ÉlémentRéglagePourquoi
SoleilDirectional Light, 6 lux, 4300 K, inclinaison −28°, Source Angle 2,5°Chaleur et ombres longues de fin d'après-midi
Contre-jourDirectional Light bleue, 1,6 lux, sans ombre, en face de la caméraDétache les silhouettes : la signature HD-2D
CielSky Atmosphere + Sky Light en capture temps réel, intensité 1,4Les ombres prennent la couleur du ciel
BrumeExponential Height Fog, densité 0,035, teinte ocreFond les bords, donne la profondeur
CaméraCine Camera 55 mm, inclinaison −30°, ouverture irréelle (f/0,08)Flou de maquette au premier et à l'arrière-plan
Post-processExposition manuelle, bloom 0,9, vignette 0,65, grain 0,12, hautes lumières chaudes, ombres bleutéesUnité de l'image
SpriteMatériau éclairé, masqué, double face, 18 % d'émissif, ombre portéeMai vit dans la même lumière que le décor

Règle d'or : une lumière principale qui décide, tout le reste l'accompagne. Si deux lumières se disputent (une chaude, une froide, de même force), l'image paraît incohérente.

Planning sur 16 semaines

0 / 8 étapes validées

  1. 1
    Semaines 1–2

    Se repérer dans l'éditeur

    Bouger dans un niveau sans y penser, ranger ses fichiers, comprendre acteurs et composants.

    À apprendre

    • Les 5 panneaux : Viewport, Outliner, Details, Content Browser (Ctrl+Espace), barre d'outils.
    • Acteur = objet posé dans le niveau ; composant = morceau d'acteur (mesh, lumière, caméra).
    • Asset (dans Content) contre instance (dans le niveau) : modifier l'un ou l'autre ne fait pas la même chose.
    • Choisir UNE version : migrer RPGTravellers en 5.8 (déjà installée sur E:) plutôt que garder la 5.4.

    À faire

    Ouvrir HD2D_Diorama, retrouver chaque lumière dans l'Outliner, cacher et réafficher chacune (H / Ctrl+H) pour voir ce qu'elle apporte.

    C'est acquis quand…

    Je sais placer la caméra de jeu, poser un mesh au sol (Fin) et enregistrer tout (Ctrl+Maj+S).

  2. 2
    Semaines 3–4

    Lumière et ambiance

    Faire une ambiance cohérente volontairement, pas par hasard. C'est là que le premier essai a raté.

    À apprendre

    • Un seul soleil (Directional Light) qui décide de tout : direction, chaleur (Température), douceur des ombres (Source Angle).
    • Sky Atmosphere + Sky Light en capture temps réel : la lumière d'ambiance vient du ciel, elle s'accorde au soleil.
    • Exponential Height Fog : la brume fond le bord du diorama et donne la profondeur.
    • Exposition : la mettre en Manuel pendant qu'on règle, sinon Unreal corrige derrière ton dos.
    • Post Process Volume (Infinite Extent) : bloom, vignette, grain, balance des blancs, étalonnage par ombres / tons moyens / hautes lumières.
    • Lumen (lumière indirecte) : savoir l'allumer et l'éteindre pour comparer.

    À faire

    Trois ambiances du même diorama : aube dorée, midi neutre, nuit sous l'astre noir. Une capture de chaque (HighResShot 2).

    C'est acquis quand…

    Je peux dire en une phrase d'où vient la lumière dans chaque image, et pourquoi telle ombre a telle couleur.

  3. 3
    Semaines 5–6

    Matériaux et passage Blender → Unreal

    Retrouver l'aspect peint des worldmaps dans Unreal au lieu de textures ternes.

    À apprendre

    • Éditeur de matériaux : Base Color, Emissive, Roughness, Opacity Mask. Masked pour les découpes, Translucent seulement si nécessaire.
    • Lit contre Unlit : un sprite Unlit ne vit pas dans la lumière du décor (c'était le cas de Mai).
    • Material Instances et paramètres : un matériau maître, cent variantes réglables sans recompiler.
    • Les nœuds toon de Blender ne passent pas en FBX : les refaire (mélange texture + émissif, posterisation légère).
    • Import : échelle (1 unité Blender = 1 m = 100 cm Unreal), origines, FBX contre USD, textures en sRGB, piège normal map (forcer TC_Default).

    À faire

    Un matériau maître « peint » pour le décor (texture, part d'émissif, teinte d'ombre) et l'appliquer aux 137 matériaux du diorama via des instances.

    C'est acquis quand…

    Le diorama dans Unreal a les mêmes couleurs que le rendu Blender, sous un éclairage neutre.

  4. 4
    Semaines 7–8

    Sprites 2D et personnage jouable

    Mai court dans le diorama, éclairée et ombrée comme le décor, caméra HD-2D qui suit.

    À apprendre

    • Paper2D : Sprite, Flipbook (les 10 images de course), Paper Flipbook Component.
    • PaperZD (plugin gratuit) pour les états d'animation : repos, course, interaction.
    • Blueprint Character + Enhanced Input (Input Action, Mapping Context) pour les déplacements.
    • Spring Arm + caméra : angle fixe, longue focale (50–85 mm), suivi doux (Camera Lag).
    • Sprite qui projette son ombre (Cast Shadow, Two Sided) et regarde toujours la caméra.

    À faire

    Mai jouable au clavier et à la manette dans HD2D_Diorama, avec idle / run et une ombre au sol.

    C'est acquis quand…

    Je peux changer la vitesse, la focale et le retard de caméra sans casser le personnage.

  5. 5
    Semaines 9–10

    Blueprints, dialogues et interface

    Parler à un PNJ, ouvrir un menu stylé façon Persona 5.

    À apprendre

    • Blueprints : variables, événements, fonctions, Cast, interfaces (BPI_Interactable).
    • Data Tables (CSV) pour les dialogues et les objets : on écrit le texte hors du code.
    • UMG : Widget Blueprint, ancres, animations de widgets (entrées en biais, rebonds), polices.
    • Game Instance / Save Game : ce qui survit entre les niveaux.

    À faire

    Un PNJ peint dans le diorama, une boîte de dialogue animée avec portrait, un menu pause aux couleurs Dreamtime.

    C'est acquis quand…

    J'ajoute une ligne de dialogue en modifiant seulement le CSV.

  6. 6
    Semaines 11–12

    Combat au tour par tour

    Un combat lisible : ordre des tours, faiblesses, une jauge à la Boost / Break d'Octopath.

    À apprendre

    • Data Assets pour les compétences et les ennemis (dégâts, coût, faiblesses).
    • Un Game Mode de combat séparé, une machine à états simple (choix → action → résolution → tour suivant).
    • Sequencer pour les caméras d'attaque (le punch de FF9 et de Persona 5).
    • UI de combat : barre de tours, PV/PM, fenêtres de compétences.

    À faire

    Kaalita, Cordélia et Swayne contre deux ennemis : chacun a une attaque et une compétence liée à son ivresse.

    C'est acquis quand…

    Le combat se gagne et se perd, et je peux rééquilibrer un ennemi dans son Data Asset.

  7. 7
    Semaines 13–14

    Merveilleux : cinématiques, particules, son

    Le moment « sense of wonder » : on passe du monde réel au monde des songes.

    À apprendre

    • Sequencer : caméras, fondus, animation de lumière et de brume pendant la scène.
    • Niagara : poussières dorées, pétales, éclats de l'astre noir.
    • Changement d'ambiance animé : un second Post Process qu'on mélange (Blend Weight).
    • MetaSounds et ambiances sonores simples, musique qui change de couche.

    À faire

    Une cinématique de 30 secondes : le ciel vire, la brume monte, le diorama se « rêve » autrement.

    C'est acquis quand…

    Quelqu'un qui ne connaît pas le projet dit « waouh » ou au moins « oh ».

  8. 8
    Semaines 15–16

    Tranche verticale Dreamtime Travellers

    Un prototype jouable de 10 minutes, exportable, à montrer en salon.

    À apprendre

    • Packaging : Project Settings → Maps, puis Platforms → Windows → Package Project.
    • Profilage simple : stat fps, stat unit, Shader Complexity.
    • Mettre l'écran-titre, la carte de départ et une fin propre.

    À faire

    Village → porte des songes → combat → cinématique de bascule → écran de fin « à suivre ».

    C'est acquis quand…

    Le .exe tourne sur un autre PC et la démo tient debout sans moi à côté.

Raccourcis clavier

Clavier AZERTY : quand Unreal dit W A S D, ce sont les touches physiques Z Q S D. Tous ces raccourcis se changent dans Edit → Editor Preferences → Keyboard Shortcuts.

Se déplacer dans le viewport

Clic droit maintenu + Z Q S D (W A S D en QWERTY)
Voler comme dans un jeu
Clic droit + molette
Changer la vitesse de vol
A / E (Q / E en QWERTY), avec clic droit
Descendre / monter
Alt + clic gauche
Tourner autour de la sélection
Alt + clic droit
Zoomer vers la sélection
F
Cadrer la sélection
Ctrl + 1…9 / 1…9
Mémoriser / rappeler un point de vue
G
Vue jeu (cache icônes et gizmos)
F11
Viewport plein écran

Manipuler les objets

W / E / R
Déplacer / tourner / mettre à l'échelle
Espace
Passer d'un outil à l'autre
Alt + glisser le gizmo
Dupliquer en déplaçant
Ctrl + D
Dupliquer
Fin
Poser l'objet sur le sol
H / Ctrl + H
Cacher / tout réafficher
F2
Renommer
Ctrl + G
Grouper
L + clic gauche
Poser une Point Light

Modes d'affichage

Alt + 4
Éclairé (Lit)
Alt + 3
Sans éclairage (Unlit) : voir les vraies couleurs des textures
Alt + 6
Lumière seule : voir d'où vient la lumière
Alt + 2
Fil de fer
Alt + 0
Complexité des shaders
Alt + G / H / J / K
Perspective / dessus / face / côté

Fichiers et assets

Ctrl + Espace
Ouvrir le Content Drawer
Ctrl + B
Trouver l'asset de l'objet sélectionné
Ctrl + E
Ouvrir l'éditeur de l'asset
Ctrl + S / Ctrl + Maj + S
Enregistrer le niveau / tout enregistrer
Ctrl + Z / Ctrl + Y
Annuler / rétablir

Tester le jeu

Alt + P
Jouer dans l'éditeur
Alt + S
Simuler (le jeu tourne, on garde la caméra libre)
F8
Sortir du personnage pendant le test
Maj + F1
Récupérer la souris
Échap
Arrêter
² (` en QWERTY)
Console

Éditeur de matériaux (touche + clic)

1 / 2 / 3 / 4
Constante 1, 2, 3 ou 4 valeurs
T
Texture Sample
S / V
Paramètre scalaire / couleur (réglable en instance)
M / A / D
Multiplier / additionner / diviser
L
Lerp (mélanger deux entrées)
O
One Minus (inverser)
U
Coordonnées de texture
P
Panner (faire défiler une texture)

Blueprints

B + clic
Branch (si / sinon)
S + clic
Sequence
D + clic
Delay
C
Commentaire autour de la sélection
Q
Aligner les nœuds sélectionnés
Alt + clic sur un fil
Couper le lien
Ctrl + glisser un fil
Déplacer le lien
Double-clic sur un fil
Ajouter un point de passage

Commandes console utiles

Touche ² (sous Échap) pendant un test ou dans le viewport.

HighResShot 2
Capture au double de la résolution (dans Saved/Screenshots)
stat fps / stat unit
Images par seconde / ce qui coûte (jeu, rendu, GPU)
ShowFlag.PostProcessing 0
Couper le post-process pour comparer
r.Lumen.DiffuseIndirect.Allow 0
Couper la lumière indirecte Lumen
show collision
Voir les collisions
t.MaxFPS 30
Limiter les FPS (le PC chauffe moins pendant qu'on règle)

Pièges déjà rencontrés

Le cap : Dreamtime Travellers

D'Octopath

Le diorama HD-2D : décor 3D, personnages 2D, longue focale, flou de maquette, lumière qui raconte l'heure.

De Persona 5

Une interface qui a du caractère : menus en mouvement, typographie forte, chaque écran a un style.

De Final Fantasy IX

Des décors peints, la tendresse des personnages, une épopée qui garde de l'humour.

À moi

Les trois ivresses (Kaalita, Cordélia, Swayne), le monde des songes et l'astre noir, des worldmaps peintes à la main comme terrain de jeu.

Une seule question pour trancher entre deux idées : laquelle fait dire « oh » ? La technique sert l'émerveillement, pas l'inverse.