New UI, Fewer Lost Zombies: Sprint Review Time!

I just wrapped up a sprint fully dedicated to revamping the user interface (UI) of everyone's favorite post-apocalyptic survival game, Refuge. After two weeks spent wrestling buttons, frames, and dynamic textures into submission, it's finally time to unveil the improvements we've cooked up.

Dynamic UI Management in Refuge

In Refuge, our beloved management and survival game (yep, zombies again), having a clear UI is as crucial as keeping your bunker zombie-free. Two key scripts make this possible: UIManager.cs and UIMouseClickFrameOpener.cs.

UIManager.cs: The UI Ringmaster

The UIManager.cs script is essentially that one hyper-organized friend who plans all your parties. It centralizes everything, dynamically shows or hides UI elements upon request, and ensures nothing spirals out of control. Using an EventBus, it dynamically responds to game events. Click on a survivor? Boom! Instantly opens their detailed window to spill their life story (and stats, naturally).

UIMouseClickFrameOpener.cs: Click-to-Open Magic

The UIMouseClickFrameOpener.cs script cleverly extends our home-grown ClickableComponent class. Simply put, when a player clicks on something interesting (like a survivor or a suspiciously untouched canned food stash), this component automatically requests the UIManager to open the relevant window. The script takes advantage of a prefab window (framePrefab), an optional title (frameTitle), and a handy list of components (frameComponents) to populate the opened windows seamlessly. Think of it as your UI concierge, opening exactly the right doors without asking awkward questions.

Dynamic Thumbnails with RenderTexture: Post-Apocalyptic Selfies

To spice up our UI, each survivor is awarded their very own personal camera (luxury in a zombie-infested world!) capturing their best angles in real-time. Each unit has an instance of the Unit.cs script, dynamically generating its own RenderTexture upon initialization (Start()). This unique texture (with an exclusive ID, because nobody likes duplicate selfies) is immediately assigned to the dedicated camera.

Here’s our secret recipe:

1. Dedicated Paparazzi Camera: Each unit gets its very own Unity camera (unitCamera), configured to exclusively capture the unit by using specific layers.
2. Dynamic RenderTexture Creation: When a unit is created, a shiny new RenderTexture (new RenderTexture(512, 512, 24)) is dynamically generated, given a unique name via System.Guid.NewGuid() to avoid mix-ups.
3. Instant Assignment: The dedicated camera immediately projects the unit’s image onto this texture.
4. UI Display: This RenderTexture is then mapped to a UI image component, providing a real-time and realistic view of survivors directly within the user interface.

    private RenderTexture dynamicTexture;
    private void Start()
    {
        dynamicTexture = new RenderTexture(512, 512, 24)
        {
            name = "DynamicTexture_" + System.Guid.NewGuid(),
            enableRandomWrite = true
        };
        dynamicTexture.Create();
        unitCamera.targetTexture = dynamicTexture;
    }

    public RenderTexture GetDynamicTexture()
    {
        return dynamicTexture;
    }

The cherry on top: to keep things tidy and resource-friendly (Mother Nature still appreciates good manners, even after the apocalypse), the RenderTexture is properly released when the unit is destroyed (OnDestroy()), ensuring a clean environment, at least digitally.

Thanks to these smart (and admittedly slightly narcissistic) techniques, Refuge now boasts a user interface that's fluid, immersive, and occasionally humorous, even if it doesn't always comfort our stressed-out survivors.

Je viens tout juste de conclure un sprint entièrement dédié à la refonte de l'interface utilisateur (UI) de notre jeu de survie post-apocalyptique préféré : Refuge. Après deux semaines intensives passées entre boutons, fenêtres et textures dynamiques, il est enfin temps de vous dévoiler les améliorations apportées.

Gestion dynamique de l'interface utilisateur dans Refuge

Dans Refuge, notre jeu de gestion et survie en milieu post-apocalyptique (oui, encore des zombies !), l'interface utilisateur (UI) doit être aussi claire qu'un ciel sans nuage radioactif. Deux scripts clés rendent cette prouesse possible : UIManager.cs et UIMouseClickFrameOpener.cs.

UIManager.cs : L'homme-orchestre de l'interface

Le script UIManager.cs est un peu comme ce pote ultra organisé qui planifie toutes les soirées : il centralise tout, affiche ou cache les éléments de l'UI à la demande et s'assure que rien ne déborde. Via un EventBus, il réagit dynamiquement aux événements du jeu. Vous cliquez sur un survivant ? Boum ! La fenêtre de détail apparaît instantanément pour vous raconter sa vie (et ses statistiques évidemment).

UIMouseClickFrameOpener.cs : Le déclencheur automatique d'interfaces

Le script UIMouseClickFrameOpener.cs est un dérivé malin de notre classe maison ClickableComponent. Concrètement, quand le joueur clique sur un élément interactif du décor (par exemple, une unité survivante ou un objet intrigant), ce composant déclenche automatiquement une demande d'ouverture d'une fenêtre spécifique via le UIManager. Le script utilise un prefab de fenêtre (framePrefab), un titre optionnel (frameTitle) et une liste de composants spécifiques (frameComponents) pour remplir automatiquement les fenêtres ouvertes avec des détails pertinents. Bref, c’est le bouton magique qui ouvre les bonnes fenêtres au bon moment sans poser de questions existentielles.

Miniatures dynamiques avec RenderTexture : Le selfie apocalyptique

Pour égayer notre interface, chaque survivant reçoit une petite caméra personnelle (le luxe post-apocalyptique !) qui capture leur meilleure pose en temps réel. Chaque unité possède donc une instance du script Unit.cs, qui génère dynamiquement sa propre RenderTexture lors du démarrage (Start()). Cette texture unique (avec un identifiant unique pour éviter les selfies en double) est immédiatement assignée à une caméra dédiée.

Voici la recette détaillée :

1. Caméra paparazzi dédiée : Chaque unité embarque sa propre caméra Unity (unitCamera), configurée spécialement pour capturer uniquement l’unité concernée grâce à des couches spécifiques.
2. Création dynamique de la RenderTexture : À la création de l’unité, une RenderTexture flambant neuve est générée dynamiquement (new RenderTexture(512, 512, 24)), portant un nom unique généré avec System.Guid.NewGuid() pour éviter les collisions.
3. Affectation instantanée : La caméra dédiée affiche directement le rendu de l’unité sur cette texture.
4. Affichage UI : Cette RenderTexture est ensuite appliquée à un élément d’image UI, permettant une visualisation dynamique et réaliste des survivants directement dans l'interface utilisateur.

    private RenderTexture dynamicTexture;
    private void Start()
    {
        dynamicTexture = new RenderTexture(512, 512, 24)
        {
            name = "DynamicTexture_" + System.Guid.NewGuid(),
            enableRandomWrite = true
        };
        dynamicTexture.Create();
        unitCamera.targetTexture = dynamicTexture;
    }

    public RenderTexture GetDynamicTexture()
    {
        return dynamicTexture;
    }

Cerise sur le gâteau : pour éviter tout gaspillage de ressources (la planète vous remercie), la RenderTexture est proprement libérée lorsque l'unité disparaît du jeu (OnDestroy()), gardant ainsi l’environnement aussi propre que possible après l'apocalypse.

Grâce à ces techniques ingénieuses (et légèrement narcissiques), l'interface utilisateur de Refuge offre une expérience fluide, immersive, et parfois même drôle à défaut de vraiment rassurer nos survivants.