denizk0461/pages
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added alt text to almost all images

Browse Source
This commit is contained in:
denizk0461
2025-08-18 19:44:53 +02:00
parent a03d71fe77
commit a335155927
28 changed files with 325 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/routes/projects/projectn5/devlog/2025/0203/+page.svelte
View File

@@ -9,7 +9,12 @@
</svelte:head>
<Content>
<BannerTitle title="Project N5 Progress Update: 2025-02-03" subtitle="The Making of a Protagonist, Part III" banner="../../previews/2025/0203.webp" />
<BannerTitle
title="Project N5 Progress Update: 2025-02-03"
subtitle="The Making of a Protagonist, Part III"
banner="../../previews/2025/0203.webp"
bannerAlt="Three t-posing untextured Lauras"
/>
<TableOfContents disableStickyScrolling={true} />
@@ -20,15 +25,15 @@
<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="../../2024/1222/laura-hair-flat-new-3.webp">
<img src="laura-head-new.webp">
<img src="../../2024/1222/laura-hair-flat-new-3.webp" alt="The old protagonist's head with green clothing and full-face mask">
<img src="laura-head-new.webp" alt="The new protagonist Laura's head with red clothing, a half-face mask. The character now has a brown left eye, a mechanical right eye, and eyebrows, as well as bangs">
</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="laura-uv.webp">
<img src="laura-uv.webp" alt="A close-up of Laura with her UV textures wrongly mapped; the hair is brown and grey, the right eye white, and the left eye red">
<p>I still think this looks kind of cool.</p>
@@ -38,7 +43,7 @@
<p>I added earrings too:</p>
<img src="earrings.webp">
<img src="earrings.webp" alt="Side view of Laura. Her brown hair is straight and her ear has a round black earring">
<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>
@@ -67,21 +72,21 @@
<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="laura-shader-inengine.webp">
<img src="laura-shader-inengine.webp" alt="Full model of Laura imported into Godot with a toon shader applied">
<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="ok.webp">
<img src="dance.webp">
<img src="naruto.webp">
<img src="ok.webp" alt="An OK hand">
<img src="dance.webp" alt="Laura flailing her arms">
<img src="naruto.webp" alt="Laura naturo-running">
</div>
<div class="horizontally-centre-aligned">
<img src="shock.webp">
<img src="reprehension.webp">
<img src="disgust.webp">
<img src="shock.webp" alt="Laura's face looking shocked">
<img src="reprehension.webp" alt="Laura's face looking astonished">
<img src="disgust.webp" alt="Laura's face looking disgusted">
</div>
<h2 id="future">The Future of this Devlog</h2>

19
src/routes/projects/projectn5/devlog/2025/0316/+page.svelte
View File

@@ -10,7 +10,12 @@
</svelte:head>
<Content>
<BannerTitle title="Project N5 Progress Update: 2025-03-16" subtitle="Refactoring" banner="../../previews/2025/0316.webp" />
<BannerTitle
title="Project N5 Progress Update: 2025-03-16"
subtitle="Refactoring"
banner="../../previews/2025/0316.webp"
bannerAlt="Laura t-posing in front of a smiling water tower"
/>
<TableOfContents disableStickyScrolling={true} />
@@ -18,7 +23,7 @@
<h2 id="laura">Introducing: Laura</h2>
<img src="laura.webp">
<img src="laura.webp" alt="Full-body shot of Laura imported into Godot">
<p>Laura is finally, <i>FINALLY</i> a playable character in the game!! I cannot overstate how cool this is. To finally see the character I've been creating for actual MONTHS in my game is HUGE.</p>
@@ -26,7 +31,7 @@
<p>With the implementation of Laura came some other changes as well. The over-the-shoulder camera had already been adjusted to fly over the character's left shoulder, but now Laura also holds the weapon in her left hand. Plus, the camera was changed, because Laura is smaller than the chunky robot I had in her place before.</p>
<img src="laura-spinning.gif" style="max-width: 400px; object-fit: cover;">
<img src="laura-spinning.gif" style="max-width: 400px; object-fit: cover;" alt="Laura moving in a circle on top of a box">
<p>I even added swooshy hair using the JiggleBones plugin, though I've already removed that plugin from the project, which I'll elaborate on later.</p>
@@ -97,10 +102,10 @@
<h3 id="weapon-icons">Please Appreciate These Wonderful Temporary Weapon Icons</h3>
<div class="horizontally-centre-aligned">
<img src="104-icon.webp">
<img src="106-icon.webp">
<img src="107-icon.webp">
<img src="108-icon.webp">
<img src="104-icon.webp" alt="An icon for a rocket launcher that looks like a sperm">
<img src="106-icon.webp" alt="A primitive flame as an icon for a flame thrower">
<img src="107-icon.webp" alt="A hand-drawn crosshair serving as an icon for a rifle">
<img src="108-icon.webp" alt="The words 'VENOM' as an icon for the weapon of that name">
</div>
<h2 id="code">Grand Code Overhaul</h2>

21
src/routes/projects/projectn5/devlog/2025/0427/+page.svelte
View File

@@ -2,14 +2,19 @@
import BannerTitleAlt from "$lib/banner-title-alt.svelte";
import ContentSidebar from "$lib/content-sidebar.svelte";
import TableOfContents from "$lib/table-of-contents.svelte";
import Video from "$lib/video.svelte";
</script>
<svelte:head>
<title>The Making of a Protagonist IV | denizk0461</title>
</svelte:head>
<BannerTitleAlt title="The Making of a Protagonist, Part IV" subtitle="Project N5 Devlog" date="2025-04-27" banner="../../previews/2025/0427.webp" />
<BannerTitleAlt
title="The Making of a Protagonist, Part IV"
subtitle="Project N5 Devlog"
date="2025-04-27"
banner="../../previews/2025/0427.webp"
bannerAlt="Sketches of Laura's new clothes"
/>
<ContentSidebar>
@@ -23,7 +28,7 @@
<p>As promised, I've been working on Laura v2 – which has now become v4. On the right is the current/soon-to-be previous model of Laura, on the left is my current progress on her new model!</p>
<img src="laura-comparison.webp">
<img src="laura-comparison.webp" alt="Laura's old model on the right, Laura's new model on the left">
<p>(By the way, the left picture is the most recent version of the model. Other pictures on this page will be older and may have some slightly different details!)</p>
@@ -39,7 +44,7 @@
<li>Her eyes have been socketed in a different way. Previously, they were flat faces directly behind her irises, but now they're much more recessed, which likely/hopefully won't be visible using flat shading. I also edited the normals to look less like the sclera is recessed. I'm hoping this'll make animating easier, since the irises can now move more freely without clipping into the sclera.</li>
</ul>
<img src="laura-comparison-eyes.webp">
<img src="laura-comparison-eyes.webp" alt="Close-up of Laura's eyes compared between versions. The new version has sharper and more defined eyes as well as eyelashes that extend further around the eyes">
<h3>Things to Work On</h3>
@@ -63,7 +68,7 @@
<p>I've <a href="/projects/projectn5/devlog/2024/1222/#hair">struggled with hair before</a>, and it's not gotten <i>much</i> better. Check out Laura's current ponytail:</p>
<img src="ponytail.webp">
<img src="ponytail.webp" alt="Back perspective at Laura showing her ponytail">
<p>Looks like a banana!</p>
@@ -73,13 +78,13 @@
<p>The current version of Laura is based on the following sketches:</p>
<img src="body-sketches.webp">
<img src="body-sketches.webp" alt="Sketches showing ideas for Laura's clothes">
<img class="inline-img-left" src="laura-v2.webp">
<img class="inline-img-left" src="laura-v2.webp" alt="Laura v2 wearing a top with puffed-up sleeves">
<p>I worked with these sketches to create the first remodel of Laura. Originally, I was decently happy with the result, though her sleeves seemed boring – just ballooning and lacking an interesting shape.</p>
<img class="inline-img-right" src="laura-v3.webp">
<img class="inline-img-right" src="laura-v3.webp" alt="Laura v3 wearing a black dress and a red longsleeve underneath">
<p>I had quite a few ideas to improve the current and rather boring Laura model. At the centre of the remodelling was keeping Laura's character but giving it more edge through a more unique silhouette. I wanted to accomplish this by adding textures and detail, layering clothes, and giving more shape to her.</p>

14
src/routes/projects/projectn5/devlog/2025/0523/+page.svelte
View File

@@ -8,7 +8,13 @@
<title>Reboot | denizk0461</title>
</svelte:head>
<BannerTitleAlt title="Rebooting the Project" subtitle="Project N5 Devlog" date="2025-05-23" banner="../../previews/2025/0523.webp" />
<BannerTitleAlt
title="Rebooting the Project"
subtitle="Project N5 Devlog"
date="2025-05-23"
banner="../../previews/2025/0523.webp"
bannerAlt="Untextured Laura in a new purple level looking at two cubes"
/>
<ContentSidebar>
@@ -48,7 +54,7 @@
<p>Considering I started one week ago, I'm doing decently well:</p>
<img src="over_the_shoulder.webp">
<img src="over_the_shoulder.webp" alt="An over-the-shoulder view of Laura's new model looking at two cubes. Above the cubes, the text 'Pure Evil' is hovering">
<p>What you can see here is my new Laura model (not yet finished!), with a partially-applied toon shader and an outline shader on top. The UI elements include a health counter (on top), a money counter (bottom right), a placeholder for the popup menu(s), a crosshair in the middle of the screen (the dot), and an aim helper texture also in the middle of the screen (the cross). The two boxes represent enemies, not in function, but in their physics layers and in targetability.</p>
@@ -60,7 +66,7 @@
<p>Check out the new weapons:</p>
<img src="new_weapons.webp">
<img src="new_weapons.webp" alt="The placeholder weapons, untextured and made from primitive shapes">
<p>With these, and with the UI in the previous screenshot, you may have noticed a theme: I'm putting less time into temporary assets. While nice to play around with, it's unnecessary to spend an hour designing a UI element when I already know I'll 100% replace it down the line. Thus, most elements are either entirely simplistic (text, primitive MeshInstance3D, etc.), or just very simple textures.</p>
@@ -70,6 +76,6 @@
<p>I'm happy I took this step!</p>
<img src="taking_aim.webp">
<img src="taking_aim.webp" alt="A blue raycast emitting from Laura to the camera">
</div>
</ContentSidebar>

26
src/routes/projects/projectn5/devlog/2025/0713/+page.svelte
View File

@@ -9,7 +9,13 @@
<title>Remeshing and Recolouring | denizk0461</title>
</svelte:head>
<BannerTitleAlt title="Remeshing and Recolouring" subtitle="Project N5 Devlog" date="2025-07-13" banner="../../previews/2025/0713.webp" />
<BannerTitleAlt
title="Remeshing and Recolouring"
subtitle="Project N5 Devlog"
date="2025-07-13"
banner="../../previews/2025/0713.webp"
bannerAlt="Close-up of Laura at face height"
/>
<ContentSidebar>
@@ -30,7 +36,7 @@
<p>Compare this to the old head mesh:</p>
<img src="head_old.webp" alt="A screenshot of a bust in Blender, displayed in edit mode. The topology is messy because the vertices are not evenly distributed.">
<img src="head_old.webp" alt="A bust in Blender, displayed in edit mode. The topology is messy because the vertices are not evenly distributed">
<p>The old head was quite messy in topology; it's an artifact from Laura v1. There, I initially designed the head to not have any kind of face, but later I added eyes, a nose, refined the eye shape, and most recently, I added some shape around the eyes (the eyes are inset a bit and the eyebrows are comparatively further forward to follow the shape of an actual skull). All these edits required more edge loops and vertices than I had originally planned, which is the root cause for this mess of vertices.</p>
@@ -48,7 +54,7 @@
<p>I managed to 'fix' this (depending on your perspective on the issue) by marking the sides of all strands as sharp edges. This now means that the strands are shaded separately at the front and the back, respective, with a sharp edge where they previously transitioned smoothly.</p>
<img src="hair_shading.webp" alt="An in-engine comparison of the shading between the old hair with smooth edges (left) and the new hair with sharp edges (right).">
<img src="hair_shading.webp" alt="An in-engine comparison of the shading between the old hair with smooth edges (left) and the new hair with sharp edges (right)">
<p>The left hair is the old style, the right is the new one. Notice how the strands are much more distinct on the left because of their darker outlines (shadows).</p>
@@ -61,15 +67,15 @@
<p>More importantly, I figured out her ponytail! Previously, I created a sort of 'banana' and extruded individual strands from it to create a more hair-like appearance.</p>
<img src="ponytail_old.webp" alt="The old ponytail style.">
<img src="ponytail_old.webp" alt="The old ponytail style">
<p>However, I didn't like this very much, because it... well, I just think it looked bad. What I did instead is something that was actually inspired by a girl's hairstyle I saw on a bus:</p>
<img src="ponytail_new.webp" alt="The new ponytail style. Left view is unshaded, right view displays a cel shader.">
<img src="ponytail_new.webp" alt="The new ponytail style. Left view is unshaded, right view displays a cel shader">
<p>The shadow effects are – once again – created by sharp edges! It actually works very similarly to the tied-up hair on the back of her head.</p>
<img src="hair_back.webp" alt="An unshaded view of the back of Laura's head, with her tied-up hair at the centre.">
<img src="hair_back.webp" alt="An unshaded view of the back of Laura's head, with her tied-up hair at the centre">
<p>This effect I made by creating a sphere, selecting every second edge loop, scaling it down to create a spiky effect (that is mitigated by smooth shading) and then marking the scaled-down edges as sharp.</p>
@@ -77,7 +83,7 @@
<p>I decided to recolour Laura's right eye. Previously, it was a shade of red to match the rest of her outfit. Instead, though, I decided to go the complete opposite: it now looks borderline out of place against her colour palette, and for good reason.</p>
<img src="eyes.webp" alt="A comparison of Laura's eyes. Left is the old style with a red eye, right is the new style with a blue eye.">
<img src="eyes.webp" alt="A comparison of Laura's eyes. Left is the old style with a red eye, right is the new style with a blue eye">
<p>It's blue and cold grey to display a discrepancy in her new body parts. That colour scheme will be used for her right arm, too, as well as some robots and environmental pieces. It shows how, even though Laura will find herself in her home world, the world around her has changed beyong recognition. This change, this unfamiliarity reflects back on her.</p>
@@ -89,11 +95,11 @@
<p>Laura finally has (almost) permanent shoes!!</p>
<img src="shoes_0.webp" alt="A comparison of Laura's old, temporary boots (left) and her new sneakers (right).">
<img src="shoes_0.webp" alt="A comparison of Laura's old, temporary boots (left) and her new sneakers (right)">
<p>In v1, I intended to give Laura boots. However, I wasn't happy with how they looked. Furthermore, boots just didn't quite fit the style I wanted to go for. So instead, I modelled some sneakers, of course gathering reference from a shopping website.</p>
<img src="shoes_1.webp" alt="A close-up of Laura's new sneakers, with orange colour added to the bottoms.">
<img src="shoes_1.webp" alt="A close-up of Laura's new sneakers, with orange colour added to the bottoms">
<h3 id="misc-style">Minor Adjustments</h3>
@@ -121,7 +127,7 @@
<p>and to end this devlog, here's how Laura currently looks in her entirety:</p>
<img src="laura.webp" alt="A full-body screenshot of Laura.">
<img src="laura.webp" alt="A full-body screenshot of Laura">
</div>
</ContentSidebar>

8
src/routes/projects/projectn5/devlog/2025/0816/+page.svelte
View File

@@ -28,7 +28,13 @@
<title>Freeing the Past | denizk0461</title>
</svelte:head>
<BannerTitleAlt title="Freeing the Past" subtitle="Project N5 Devlog" date="2025-08-16" banner="../../previews/2025/0816.webp" />
<BannerTitleAlt
title="Freeing the Past"
subtitle="Project N5 Devlog"
date="2025-08-16"
banner="../../previews/2025/0816.webp"
bannerAlt="Bottom-up view at Laura v1 in front of a blue sky"
/>
<ContentSidebar>