🚶

Brume Vignette - Devlog

Bonjour à tous ! 😄

J'ai enfin un peu de temps libre pour écrire un devlog concernant Brume Vignette réalisé à l'occasion de la jam Du Pang Pang Club #PPJVignette, il y a quelque temps, Jun 16, 2020 → Jun 18, 2020.

image

Le sujet était relativement simple, "Vignette".

🔲

Qu'est-ce que c'est une vignette ? - une scène courte, entre 1 sec et une poignée de minutes - une interaction simple - une capsule atmosphérique - un moment "gratuit" Contraintes: - un cadrage carré - un plan fixe Une vignette peut être suivie, ou non, de plusieurs autres vignettes.

L'idée était pour moi très simple. Depuis mon diplôme, j'ai des séries de dessins Brume qui traînent. C'était l'occasion de tester quelque chose de plus graphique avec de simples interactions. Une petite balade onirique graphique, rythmé pas l'interaction au click de la souris, potentiellement fonctionnel sur téléphone.

Voici la série de mes dessins originaux qui m'ont inspiré.

image
image
image
image
image
image

image

Mon premier objectif, une semaine avant la jam, était de me préparer un maximum, sans créer d'assets. Mon plan était de réaliser en avance :

  • Un story board
  • Mettre en place le workflow en avance, notamment la production des assets (dessin, animation etc)
  • Trouver les méthodes de programmations concernant les principaux modules ( enchènement des scènes, drag and drop etc )

Storyboard:

image
image
image
image

Juste deux mots sur le contenu, il n'est pas forcement "explicable" et je ne suis pas sûr que se soit réellement intéressant. J'aime l'idée de vous laisser naviguer dans quelque chose de semi abstrait. Un commentaire de mon premier jeu Brume me revient, "c'est de l'impressionnisme vidéo-ludique", sans être entièrement d'accord, un peintre à t-il vraiment nécessité à expliquer son sujet ? Je ne suis pas sûr. Ce qui m'importe, c'est que le changement de scène, l'ellipse et l'interaction soit chef d'orchestre et narrateur. En tout cas, je suis content du résultat et de l'ambiance produite.

Bref, je continue.

Animation (unit3D)

image
image

Il existé alors quelque plugins payant, donc inaccessible pour moi. C'est comme ça que j'ai commencé la 3d, qui est à mon sens, est moins accessible et bien plus difficile à prendre en mains afin d'obtenir des rendus graphiques originaux et/ou avec un parti prix fort.

Aujourd'hui, c'est tout autre chose, il y a eu le plugin expérimental Anima2D, fabriqué par Unity, qui était vraiment super. Aujourd'hui, il est directement intégré comme package officiel sous le nom de.... animation 2d. Ce qui est pour moi le seul véritable problème de ce package.

En tant que dev/auto-didacte (la magie d'internet), ce qui fait la force de tout outil, c'est, 1, ça communauté, 2, ça documentation, 3, son accessibilité. Toutes ces informations/outils sont accessibles via n'importe quel moteur de recherche. Cette accessibilité dépends aussi de sont référencement. Et autant vous dire qu'avec un nom aussi basique... Sont accessibilité en prend un coup 😢.

Pour les bases pas de package, il y a beaucoup de vidéo d'introduction réalisé par des youtubeur "célèbre" comme celle cis.

Package == Librairie maintenant intégré officiellement par Unity (je crois)

Plugin == Simple dossier provenant d'une source non reconnue

Du coup, jusque-là, pas de soucis, mais lorsque l'on rentre en pratique, les problèmes émergent. "Comment créer un squelette sans fichiers PSB (batch import)" par exemple et là, l'enfer sur terre. Le référencement bloque avec un nom aussi banal que "animation 2d". Il est très difficile de trouver des réponses pertinentes simplement à cause d'un nom de package.

image
image

L'import PSB est assez génial d'ailleurs. Ça fait gager un temps infini ! Le format PSB est le format utilisé par Photoshop pour les documents vraiment lourd (1~3GB). Unity a intégré un outil pour ne plus avoir à organiser notre image une fois notre personnage fait (dessiné et calque superposé).

Petit tip pour les utilisateurs d'Affinity qui n'a pas d'export psb (pas psd), simplement renommé votre fichier mon-fichier.psd → mon-fichier.psb.

Drag and drop

Je vous pose ça comme ça 🙂.

Chaque objets doivent avoir un collider avec un RigidBody.

using System;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UIElements;

public class DirectDragAndDrop : MonoBehaviour
{    
    private Vector3 mOffset;
    private float mZCoord;
    public bool x, y, z;
    public GameObject alternativeTarget;
    public bool enableLimits = true;
    public Vector2 maxX, maxY;

    private GameObject target;
    
    private void Start()
    {
        if (alternativeTarget != null)
        {
            target = alternativeTarget;
        }
        else
        {
            target = gameObject;
        }
    }

    
    void OnMouseDown()
     {
         mZCoord = Camera.main.WorldToScreenPoint(target.transform.position).z;
         
         // Store offset = gameobject world pos - mouse world pos
         mOffset = target.transform.position - GetMouseAsWorldPoint();
     }

    
    private void OnMouseUp()
    {
    }

    private Vector3 GetMouseAsWorldPoint()
     {
         // Pixel coordinates of mouse (x,y)
         Vector3 mousePoint = Input.mousePosition;
         
         // z coordinate of game object on screen
         mousePoint.z = mZCoord;

         // Convert it to world points
         return Camera.main.ScreenToWorldPoint(mousePoint);
     }
 
 
     void OnMouseDrag()
     {
         moveObject();
     }
     
     void moveObject()
     {
         if (enableLimits)
         {
             Vector3 mousePosition = GetMouseAsWorldPoint();
             Vector3 final = new Vector3(x ? mousePosition.x : 0, y ? mousePosition.y : 0, z ? mousePosition.z : 0);
             final += mOffset;
             
             if (final.x < maxX.x)
             {
                 final.x = maxX.x;
             }
             else if (final.x > maxX.y)
             {
                 final.x = maxX.y;
             }
             
             if (final.z < maxY.x)
             {
                 final.z = maxY.x;
             }
             else if (final.z > maxY.y)
             {
                 final.z = maxY.y;
             }
             target.transform.position = final;
         }
         else
         {
             Vector3 mousePosition = GetMouseAsWorldPoint();
             Vector3 final = new Vector3(x ? mousePosition.x : 0, y ? mousePosition.y : 0, z ? mousePosition.z : 0);
         
             target.transform.position = final + mOffset;
         }
     }
}

Trou dynamique

Depuis très longtemps, j'essaie de m'introduire à la modification de model 3d en temps réel, comme le contrôle d'un trou dynamique, sans succès. C'était probablement le plus gros défi technique de cette jam. Depuis longtemps je ne trouvais pas d'exemple claire ou de tuto. La solution était pourtant 'simple' ( rappelez-vous l'accessibilité 😅 ), googler → "How to make Donut country".

Si les termes techniques vous sont inconnus, trouver un jeu qui utilise cette mécanique ~ technique ~ principe (ou la scène d'un jeu), il sera alors probablement le chemin le plus rapide pour trouver la solution a votre problème. En l'occurrence pour moi, ce fut ce jeu, Donut Country, qui base entièrement sont gameplay sur ce principe.

Je vous donne le lien de beaucoup de vidéo qui m'on était forte utiles.

J'ai créé énormément d'assets sur mon Ipad:

  • les dessins → Procreate ~ 10$
  • Les sons d'ambience → Audio synth Kith (gratuit)/Garage band et des son gratuit en ligne (libre de droit)

Si vous vous lancez dans Unity, je vous conseille cette collection de tips:

Également concernant les transitions de scènes, je l'ai normalisé, en suivant ce tuto, oui, Brackeys m'a beaucoup accompagné, c'est une bonne entrée en matière pour découvrir les bons termes et pratiques de bases 😉.

J'ai pas tout expliqué, c'est long 🙂. S'il y à des demande, je pourrais détailler des choses.

Allez voire aussi les créations des copain.ine.s du club, il y a des truc cool → https://itch.io/jam/ppj-vignette/entries

Comme d'habitudes:

Si vous avez des suggestions/retours/questions je suis preneur !

Tschüss, je vous love 💕.

Robin Moretti © 2020-Nov 19, 2021