Refaire Octopath Traveler avec Unity

Voici comment refaire un style 2.5D comme Octopath Traveler.

Octopath Traveler est un RPG développé par Square Enix. Il est connu pour être doté d’une esthétique graphique appelée “HD-2D” par les développeurs, définie comme une combinaison de sprites 2D et de textures 16 bits pour les personnages avec des environnements 3D polygonaux et des effets haute définition.

Je me suis demandé s’il était difficile de refaire cet effet. Pour cela, j’ai utilisé Unity, qui permet de mixer des sprites avec des éléments 3D facilement dans une scène. J’utilise le pipeline de rendu universelle (URP) ainsi que les shader graphs.

1. Assembler une scène

Il faut créé une scène simple avec:

  • Un fond (un plane)
  • Un sol (un plane)
  • Une caméra
  • Un sprite
  • une lumière directionnelle

La scène

J’utilise le pack Animated Pixel Adventurer de rvros disponible gratuitement sur Itch.io.

On peut voir que le sprite s’affiche bien, mais il ne génère pas d’ombre.

Premier rendu

2. Générer les ombres des sprites

Pour générer les ombres des sprites, il faut utiliser un shader personnalisé. On utilise dans un premier temps un shader unlit afin de garder la 2D insensible à la lumière. Dans le Project View, faites un clic-droit sur le dossier ou vous voulez créer le shader et Create > Shaders > Unlit Graph.

Ajoutez un paramètre MainTex avec une référence _MainTex. Puis raccordez au master comme sur l’image. Mettez ensuite la valeur AlphaClipThreshold a 0.5.

Unlit-Shadow Shader

Une fois fait, vous pouvez fermer le graph puis créer un matériau avec le shader.

Dans la scène, sélectionnez votre sprite. Puis changez la propriété Material avec le matériau que vous venez de créer.

Créez ensuite un script ShadowedSprite.cs:

using UnityEngine;
using UnityEngine.Rendering;

[RequireComponent(typeof(SpriteRenderer))]
public class ShadowedSprite : MonoBehaviour
{
    void Start()
    {
        GetComponent<SpriteRenderer>().shadowCastingMode = ShadowCastingMode.On;
    }
}

et ajoutez-le a votre sprite.

Lit-Shadow Shader

Enfin, lancez la scène.

Rendu avec les ombres

Le sprite a désormais des ombres. Le gros du travail est déjà fait, et l’effet est déjà saisissant.

3. Avoir un sprite affecté par la lumière

Actuellement, le sprite est rendu en unlit a.k.a son rendu n’est pas affecté par les lumières de la scène. Pour que les lumières affectent le rendu du sprite, il faut créer un shader lit.

Dans le Project View, faites un clic-droit sur le dossier ou vous voulez créer le shader et Create > Shaders > PBR Graph.

Ajoutez un paramètre MainTex avec une référence _MainTex. Puis raccordez au master comme sur l’image. Mettez ensuite la valeur AlphaClipThreshold a 0.5.

Lit-Shadow Shader

Créez ensuite un matériau et associez-le a votre sprite. Puis lancez la scène.

Rendu lit avec les ombres

4. Ajouter du post-processing

Afin d’améliorer le rendu, je vous conseille d’ajouter du post-processing.

  • un Depth of Field
  • un Bloom
  • une Vignette
  • un Color grading

Avec les bons paramètres, vous obtiendrez un excellent rendu.

Recent posts