<script>
    import BannerTitle from "$lib/banner-title.svelte";
    import TableOfContents from "$lib/table-of-contents.svelte";
</script>

<svelte:head>
    <title>The Making of a Protagonist, Part III | denizk0461</title> 
</svelte:head>

<BannerTitle title="Project N5 Progress Update: 2025-02-03" subtitle="The Making of a Protagonist, Part III" banner="/projects/projectn5/devlog/20250203/lauras-imposing.webp" />

<TableOfContents />

<p>While I've been busy working on another game with friends lately, I've managed to almost completely finish Laura. Here's what I've achieved!</p>

<h2 id="eyes-hair">Visual Personality Adjustment</h2>

<p>As promised before, I've worked on Laura's head a bit more. Her full face shield has been replaced with a face mask / respirator covering only the bottom half of her face. Also, I finally got the hair into a state I'm actually happy with. Here's a comparison:</p>

<div class="horizontally-centre-aligned">
    <img src="/projects/projectn5/devlog/20250203/../20241222/laura-hair-flat-new-3.webp">
    <img src="/projects/projectn5/devlog/20250203/laura-head-new.webp">
</div>

<p>The eyes took some work to get right, but I'm pretty happy with the current result. They're not proper eyeballs, but instead they're embedded into the head, which visually isn't significant because the flat shading would hide these details anyway. She has a brown left eye with a small sparkle, as well as a right eye replacement. This implies that Laura sustained further damage to the right side of her body, which necessitated replacement of her eye in addition to her right arm.</p>

<p>It's actually the result of UV unwrapping her model. Previously, every colour was its own material, which I wanted to change by switching to a texture atlas. Initially, of course, the UVs were a bit messed up, which resulted in this look:</p>

<img src="/projects/projectn5/devlog/20250203/laura-uv.webp">

<p>I still think this looks kind of cool.</p>

<h3 id="hair">New Hair 💇‍♀️</h3>

<p>Her hair is now not a cohesive mesh anymore, but rather made up of something between 15 and 20 individual strands using custom normals to get a flat look. It also has a faint gradient, changing from a brighter colour at the top to a darker shade at the bottom.</p>

<p>I added earrings too:</p>

<img src="/projects/projectn5/devlog/20250203/earrings.webp">

<p>Just some small metallic rings that I thought looked cool. For positioning these correctly, I hid Laura's back hair at one point, which gave me the idea to model a ponytail / tied-up alternative hair look for Laura. I think it'd look really cool. I haven't created this yet, but I've laid some groundwork to make it work:</p>

<p>Laura's hair is now separate from her main mesh. The main mesh is rigged using a metarig generated through Rigify, whereas the hair has a manually-created armature. Also, the hair is split into the front part and the back part, separated by the hair band (which is part of the main mesh). This allows me to replace the flowing back hair with a ponytail easily in-engine without swapping out the entire character.</p>

<p>This is pretty cool, because I can now create scenes for each hairstyle, set them up with <a href="../20241222/#hair-animation">jiggle bones</a> to create flowing hair, and essentially add a toggle to switch between them in-game!</p>

<h2 id="rigify">Rigging and Using Blender's Rigify</h2>

<p>Rigify is really cool for rigging characters easily. However, you need to know some things that I didn't before you start using it:</p>

<ul>
    <li>When adding a Rigify armature to the scene, <i>do not parent the rig to the model</i>. You need to place the rig as intended, then click on "Generate rig", and then parent the <i>new</i> armature with the mesh and weight paint that way. I made the mistake of weight painting before generating the rig, which isn't transferrable because the metarig adds extra bones which require individual weight painting (e.g. the thighs being made up of two bones instead of just one).</li>
    <li>Know how to switch between forward kinematics (FK) and inverse kinematics (IK). At the top right of the editor, there'll be a window with a slider to switch between FK and IK, as well as buttons to transfer an FK pose to IK and vice-versa. Don't be confused if posing a specific control doesn't work – you might need to switch to FK or IK, respectively.</li>
</ul>

<h2 id="face">Facial Animations and Shape Keys</h2>

<h2 id="animation">Animation and Framerate</h2>

<p>I've been playing around with the idea of using a lower framerate for the animations. I got the idea from <a href="https://www.youtube.com/watch?v=_KRb_qV9P4g">Noodle's video on animation</a>. Not sure whether I'll go through with this, but if I do, I think I'll go with 15fps or 20fps animation, since that's easily implementable a 60fps environment.</p>

<p>I already adjusted the jiggle bone script, which was easy to do since it runs in Godot's <code>_physics_process(delta)</code> function. This runs 60 times per second, so having code run only 15 times per second, for example, is as easy as wrapping the code in question in <code>if Engine.get_physics_frames() % 4 == 0:</code>, which makes a code block run only once every 4 frames – 60fps/4 == 15fps.</p>

<h2 id="in-engine">Laura In-Engine</h2>

<p>Since the shader I'm using in Blender is quite different from the one I am planning to use in Godot, here's a shot of Laura with the Godot shader:</p>

<img src="/projects/projectn5/devlog/20250203/laura-shader-inengine.webp">

<p>I've been thinking of adding an option (perhaps as a cheat code) to change her outfit's colour – hair band, sweatshirt, and the rings on her right prosthetic fingers. I first didn't know how to implement this, but now that I've learnt a bit on how to use shaders, I think this could be achieved with a custom UV mask and a parameter that determines at which position the UV is sampled from – the UV would then contain several colour options.</p>

<h2 id="pics">Some Funny Pictures</h2>

<div class="horizontally-centre-aligned">
    <img src="/projects/projectn5/devlog/20250203/ok.webp">
    <img src="/projects/projectn5/devlog/20250203/dance.webp">
    <img src="/projects/projectn5/devlog/20250203/naruto.webp">
</div>
<div class="horizontally-centre-aligned">
    <img src="/projects/projectn5/devlog/20250203/shock.webp">
    <img src="/projects/projectn5/devlog/20250203/reprehension.webp">
    <img src="/projects/projectn5/devlog/20250203/disgust.webp">
</div>

<h2 id="future">The Future of this Devlog</h2>

<p>I feel that this blog-like format makes me think that the content here should be educational; that someone may read this and learn from it. It's likely not the case, but either way, perhaps it would make sense to limit the progress updates to a mere "here's what I made!" and only a little bit of background, if it's interesting.</p>

<p>Most times, I find myself struggling to explain my progress anyway, mostly since I'm learning as I go and because I publish progress updates pretty rarely. For example, I added eyes to Laura's model on 2025-01-01, there's no way I'll remember everything I did and thought of over a month ago.</p>

<p>Switching to a more short-form content format might help in publishing updates more regularly, and being more in the style of: "hey look at this cool thing I made!" It would also focus on visual changes, possibly helping me to keep a better schedule, merely because I can see my progress more steadily and be motivated more frequently.</p>

<p>I've been thinking of creating an Instagram account for that – though I despise Meta (and Instagram by extension). It feels like a decent platform for my idea, though: presenting progress mostly through visuals. I also know more people who are on Instagram who may follow my progress... maybe. Bluesky <i>may</i> be an option, though it's more text-focussed and more short-form than Instagram.</p>

<p>Either way, I'd lose out on the progress I've already shared here.</p>

<p>Or maybe I just don't share my stuff at all and don't stress out about it lol, no one's seeing this anyway and I'm not a social media person anyway.</p>

<p>idk</p>

<p>Maybe it's time to change the format of the devlog on this website?</p>