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

6
src/lib/banner-title-alt.svelte
View File

@@ -6,12 +6,14 @@
date = "",
subtitle = "",
banner = "",
bannerAlt = "",
pixelated,
}: {
title: string;
date?: string;
subtitle?: string;
banner?: string;
bannerAlt?: string;
pixelated?: boolean;
} = $props();
@@ -21,9 +23,9 @@
<div class="subcontainer">
<div class="img-container">
{#if pixelated}
<img class="pixelated-img" src="{banner}">
<img class="pixelated-img" src="{banner}" alt="{bannerAlt}">
{:else}
<img src="{banner}">
<img src="{banner}" alt="{bannerAlt}">
{/if}
</div>
<div class="text-container">

4
src/lib/banner-title.svelte
View File

@@ -5,16 +5,18 @@
title,
subtitle = "",
banner = "",
bannerAlt = "",
}: {
title: string;
subtitle?: string;
banner?: string;
bannerAlt?: string;
} = $props();
</script>
<div class="container notched">
<img src="{banner}">
<img src="{banner}" alt="{bannerAlt}">
<h1 class="title">{title}</h1>
</div>
{#if subtitle}

21
src/lib/devlog-posts.ts
View File

@@ -2,6 +2,7 @@ export interface DevlogPost {
title: string;
subtitle: string;
date: string;
previewAlt: string;
};
export const posts: DevlogPost[] = [
@@ -9,100 +10,120 @@ export const posts: DevlogPost[] = [
title: "Freeing the Past",
subtitle: "2025-08-16",
date: "2025/0816",
previewAlt: "Bottom-up view at Laura v1 in front of a blue sky",
},
{
title: "Remeshing and Recolouring",
subtitle: "2025-07-13",
date: "2025/0713",
previewAlt: "Close-up of Laura at face height",
},
{
title: "Reboot",
subtitle: "2025-05-23",
date: "2025/0523",
previewAlt: "Untextured Laura in a new purple level looking at two cubes",
},
{
title: "The Making of a Protagonist, Part IV",
subtitle: "2025-04-27",
date: "2025/0427",
previewAlt: "Sketches of Laura's new clothes",
},
{
title: "Refactoring",
subtitle: "2025-03-16",
date: "2025/0316",
previewAlt: "Laura t-posing in front of a smiling water tower",
},
{
title: "The Making of a Protagonist, Part III",
subtitle: "2025-02-03",
date: "2025/0203",
previewAlt: "Three t-posing untextured Lauras",
},
{
title: "The Making of a Protagonist, Part II",
subtitle: "2024-12-22",
date: "2024/1222",
previewAlt: "Laura a-posing and wearing green and brown clothes",
},
{
title: "The Making of a Protagonist, Part I",
subtitle: "2024-11-27",
date: "2024/1127",
previewAlt: "Multiple iterations of untextured hand 3D models",
},
{
title: "Visual Update",
subtitle: "2024-11-03",
date: "2024/1103",
previewAlt: "Two N5 Blaster side-to-side",
},
{
title: "Returnal Update",
subtitle: "2024-10-12",
date: "2024/1012",
previewAlt: "Protagonist aiming at two monkeys",
},
{
title: "WHERE HAVE I BEEN?? Update",
subtitle: "2024-07-13",
date: "2024/0713",
previewAlt: "Protagonist staring longingly into the distance, pointing the N5 Blaster thereto",
},
{
title: "Behind-The-Scenes Update",
subtitle: "2024-04-01",
date: "2024/0401",
previewAlt: "N5 Blaster with its lights turned off",
},
{
title: "Arena Update",
subtitle: "2024-03-24",
date: "2024/0324",
previewAlt: "Protagonist being swamped by many monkey enemies",
},
{
title: "2024-03-23",
subtitle: "",
date: "2024/0323",
previewAlt: "A red enemy being blown up by an incoming rocket",
},
{
title: "2024-03-12",
subtitle: "",
date: "2024/0312",
previewAlt: "Protagonist pointing the N5 Blaster into the sky",
},
{
title: "2024-02-10",
subtitle: "",
date: "2024/0210",
previewAlt: "Panorama of the environment",
},
{
title: "December 2023",
subtitle: "",
date: "2023/12",
previewAlt: "White protagonist holding the N5 Blaster",
},
{
title: "November 2023",
subtitle: "",
date: "2023/11",
previewAlt: "A side view of the N5 Blaster",
},
{
title: "October 2023",
subtitle: "",
date: "2023/10",
previewAlt: "Red protagonist lying on the floor, holding a purple blaster",
},
{
title: "September 2023",
subtitle: "",
date: "2023/09",
previewAlt: "Ratchet from Ratchet: Gladiator and Sans from Undertale t-posing",
},
];

9
src/lib/footer.svelte
View File

@@ -13,7 +13,13 @@
<div class="text-container">
<p>〔 2023–2025 〕<i>denizk0461</i></p>
</div>
<img onclick={playSound} title="the bottom rat" class="bottom-rat clickable" src="/common/rat/spookyrat.webp">
<input
type="image"
on:click={playSound}
title="the bottom rat"
alt="the bottom rat"
class="bottom-rat"
src="/common/rat/spookyrat.webp">
</footer>
<style>
@@ -24,7 +30,6 @@
bottom: 0;
height: 120px;
width: 100%;
/* overflow: hidden; */
backdrop-filter: blur(6px);
}

12
src/lib/table-of-contents.svelte
View File

@@ -54,14 +54,18 @@
{#if disableStickyScrolling}
<div class="toc-container notched">
<ul class="toc-list" bind:this={container}></ul>
{@render tocList()}
</div>
{:else}
<div class="toc-container notched sticky-toc">
<ul class="toc-list" bind:this={container}></ul>
{@render tocList()}
</div>
{/if}
{#snippet tocList()}
<ul class="toc-list" bind:this={container}></ul>
{/snippet}
<style>
:global {
.toc-container {
@@ -87,8 +91,8 @@
}
.toc-list li a {
width: 100%;
padding-top: 8px;
padding-bottom: 8px;
padding-top: 4px;
padding-bottom: 4px;
padding-right: 24px;
display: inline-block;
color: var(--color-text);

1
src/routes/about/+page.svelte
View File

@@ -35,6 +35,7 @@
<BannerTitleAlt
title="About Me"
banner="/common/me/b.webp"
bannerAlt="Mirror picture of me, pixelated beyond recognition"
subtitle="If you'd like to learn more about me"
pixelated
/>

5
src/routes/projects/+page.svelte
View File

@@ -24,6 +24,7 @@
<BannerTitleAlt
title="My Disordered Projects"
banner="/projects/banner.webp"
bannerAlt="Closeup of the purple protagonist from Project N5"
subtitle="Things I have worked on"
/>
@@ -68,7 +69,7 @@
{/if}
{#if project.banner}
<div class="project-banner-container">
<img class="project-banner" src="{project.banner}">
<img class="project-banner" src="{project.banner}" alt="Overview banner for {project.title}">
{#if project.date}
<p class="project-date project-date-embed">{project.date}</p>
{/if}
@@ -79,7 +80,7 @@
{/if}
{/if}
{#if project.icon}
<img class="project-icon" src="{project.icon}">
<img class="project-icon" src="{project.icon}" alt="Icon for {project.title}">
{/if}
{#each project.paragraphs as paragraph}
<p>{@html paragraph}</p>

15
src/routes/projects/daisyfm/+page.svelte
View File

@@ -9,9 +9,12 @@
</svelte:head>
<Content>
<BannerTitle title="Daisy FM Synth" banner="/projects/daisyfm/banner.webp" />
<BannerTitle
title="Daisy FM Synth"
banner="/projects/daisyfm/banner.webp"
bannerAlt="Close-up of Daisy, focussed on the effect knobs"/>
<img src="/projects/daisyfm/fullview.webp">
<img src="/projects/daisyfm/fullview.webp" alt="Top view of the Daisy FM synth">
<p>A friend showed me the <a href="https://electro-smith.com/products/daisy-seed">Daisy Seed</a>, an Arduino-compatible microcontroller made for developing audio equipment. With a little bit of motivation and absolutely no experience in either programming synthesisers or electronics in general, I quickly got my hands on one and started to toy around.</p>
@@ -47,8 +50,8 @@
<p>I split the PCB into four layers, separating power, ground, digital signals (switches and toggle), and analogue signals (potentiometers, audio out). I made some exceptions, such as for the waveform buttons, since they cross the playing key traces.</p>
<div class="horizontally-centre-aligned">
<img src="/projects/daisyfm/pcb-sketch.webp">
<img src="/projects/daisyfm/pcb-empty.webp">
<img src="/projects/daisyfm/pcb-sketch.webp" alt="Screenshot of KiCad schematic">
<img src="/projects/daisyfm/pcb-empty.webp" alt="The finished PCB produced from the KiCad schematic">
</div>
<p>The PCB was manufactured by <a href="https://jlcpcb.com/">JLCPCB</a>.</p>
@@ -61,8 +64,8 @@
<p>Alternatively, if your USB-C breakout board does not have CC pins exposed, there's a chance you could still connect pulldown resistors to make it compatible. On <a href="https://www.amazon.de/dp/B09FPZDDD9">this breakout board</a> I purchased on Amazon, I discovered that the third pin from the right exposes a CC connection. Wiring a resistor between this pin and ground enabled C-to-C functionality. If you want to test the functionality before soldering, you can hold a resistor between this pin and either the ground connector on the board or the USB port's outer shell, since that one's grounded as well.</p>
<div class="horizontally-centre-aligned">
<img src="/projects/daisyfm/usbc-breakout-small.webp">
<img src="/projects/daisyfm/hand.webp">
<img src="/projects/daisyfm/usbc-breakout-small.webp" alt="Close-up of the USB-C breakout board with the CC pin marked">
<img src="/projects/daisyfm/hand.webp" alt="The tiny USB-C breakout board compared to my hand">
</div>
<p>Do keep in mind that this type of connector does not have mounting holes and requires either a more sophisticated mounting mechanism in the chassis, hot glue, or both. Also, soldering to this pin is insanely finicky, since it is VERY small, so I strongly recommend a breakout board such as <a href="https://www.reichelt.de/entwicklerboards-usb-typ-c-adapterboard-buchse-debo-usb-c-f-p376522.html">this one by Soldered</a> that exposes the CC pins.</p>

37
src/routes/projects/projectn5/devlog/2023/09/+page.svelte
View File

@@ -10,7 +10,12 @@
</svelte:head>
<Content>
<BannerTitle title="Project N5 Progress Update: 2023-09" subtitle="" banner="../../previews/2023/09.webp" />
<BannerTitle
title="Project N5 Progress Update: 2023-09"
subtitle=""
banner="../../previews/2023/09.webp"
bannerAlt="Ratchet from Ratchet: Gladiator and Sans from Undertale t-posing"
/>
<p>My progress in September 2023. Updates are shown in chronological order.</p>
@@ -36,7 +41,7 @@
<p>character go spinny</p>
<p>The pause menu also makes a brief cameo! It's designed in a very simple way, and meant to replicate the pause menu from Ratchet & Clank 2002 while being legally distinct!</p>
<Video src="2023-09-23_00.mp4" />
<img src="2023-09-23_01.webp">
<img src="2023-09-23_01.webp" alt="Close-up of the new pause menu">
<h2>A Gun</h2>
<p>The gun can shoot! Or can it? Well, the bullet doesn't exactly move…</p>
@@ -45,7 +50,7 @@
<Video src="2023-09-24_01.mp4" />
<p>The gun now shoots properly! Not only do the bullets fly, but they fly in the correct direction as well! This is possible thanks to simple vector math, as the only thing needed to calculate a velocity vector for the bullet is to put two nodes on the gun, one at the front (where the bullet will fly from) and one further back, and calculate a vector between the two nodes!</p>
<Video src="2023-09-24_02.mp4" />
<img src="2023-09-24_03.webp">
<img src="2023-09-24_03.webp" alt="Diagram for the bullet trajectory calculation">
<h2>Dialogue</h2>
<p>The game now supports talking with NPCs. I only implemented this because I thought of something funny and I wanted to put it in the game.</p>
@@ -68,33 +73,33 @@
<Video src="2023-09-30_00.mp4" />
<h2>Imposing dominance</h2> <!-- get it? -->
<img src="2023-09-29.webp">
<img src="2023-09-29.webp" alt="Ratchet from Ratchet: Gladiator and Sans from Undertale t-posing">
<h2>Learning to Model and Rig a Character</h2>
<p>today's task: modelling and rigging a character from scratch</p>
<img src="2023-09-30_01.webp">
<img src="2023-09-30_01.webp" alt="A wiremesh of a mesh with a wiremesh of Ratchet from Ratchet: Gladiator in the background as reference">
<p>(Ratchet for scale)</p>
<p>whaddya lookin at pinhead</p>
<img src="2023-09-30_02.webp">
<img src="2023-09-30_02.webp" alt="The previous head but with a very long neck">
<p>is it a bird? is it a plane? no, it's arms</p>
<img src="2023-09-30_03.webp">
<img src="2023-09-30_03.webp" alt="The head attached to a set of shoulders and arms in t-pose">
<p>*Mii Maker theme intensifies*</p>
<img src="2023-09-30_04.webp">
<img src="2023-09-30_04.webp" alt="The head and arms with a torso added, standing next to Ratchet from Ratchet: Gladiator">
<p>feet are difficult</p>
<img src="2023-09-30_05.webp">
<img src="2023-09-30_05.webp" alt="A close-up of rectangular feet">
<p>yoooo actually, not half bad</p>
<img src="2023-09-30_06.webp">
<img src="2023-09-30_06.webp" alt="A close-up of the rounded-out feet">
<p>that one might hurt</p>
<img src="2023-09-30_07.webp">
<img src="2023-09-30_07.webp" alt="The left arm of the character, with a face twisted to suggest that the arm has been broken">
<p>we have a character!!</p>
<img src="2023-09-30_08.webp">
<img src="2023-09-30_08.webp" alt="A full-body shot of the newly-modelled character">
<p><i>we've been rigged!</i></p>
<Video src="2023-09-30_09.mp4" />
<p><code>we come in peace</code></p>
<img src="2023-09-30_10.webp">
<img src="2023-09-30_10.webp" alt="The new character with its skeleton on the left, and its skeleton without the mesh on the right">
<p>brief texture troubles</p>
<img src="2023-09-30_11.webp">
<img src="2023-09-30_11.webp" alt="The textured character on the right and the texture of the character on the left">
<p>my character is now a playable character</p>
<img src="2023-09-30_12.webp">
<img src="2023-09-30_13.webp">
<img src="2023-09-30_12.webp" alt="The newly-textured character holding a purple blaster in-game">
<img src="2023-09-30_13.webp" alt="The Buzz Lightyear meme where he says: 'hmm yes the character here is made out of character'">
</Content>

25
src/routes/projects/projectn5/devlog/2023/10/+page.svelte
View File

@@ -10,7 +10,12 @@
</svelte:head>
<Content>
<BannerTitle title="Project N5 Progress Update: 2023-10" subtitle="" banner="../../previews/2023/10.webp" />
<BannerTitle
title="Project N5 Progress Update: 2023-10"
subtitle=""
banner="../../previews/2023/10.webp"
bannerAlt="Red protagonist lying on the floor, holding a purple blaster"
/>
<p>My progress in October 2023. Updates are shown in chronological order.</p>
@@ -35,17 +40,17 @@
<Video src="2023-10-07_00.mp4" />
<p>The health bar even aligns properly for 5 and 6 max health points, reducing the max points displayed per line from 4 to 3!</p>
<div class="horizontally-centre-aligned">
<img src="2023-10-07_01.webp">
<img src="2023-10-07_02.webp">
<img src="2023-10-07_01.webp" alt="Five health points in the shape of plusses">
<img src="2023-10-07_02.webp" alt="Six health points in the shape of plusses">
</div>
<h2>What Are the Controls??</h2>
<p>We have a controls screen! This task would have been easier if the game was specific to a console, thus necessitating only one controller layout. Instead, I used Godot's <code>Input.get_joy_name()</code> function to retrieve the first connected controller's name, and use that to display an appropriate screen. Current options are PlayStation (DualSense), Xbox (Series X/S), and Nintendo (Switch Pro Con). Keyboard/Mouse layout will follow soon(ish).</p>
<p>Specifying controller layouts for different controllers is difficult though, since I don't know the controller's names (I currently only have the following strings: “PS5 Controller”, “XInput Gamepad” (through emulation using DS4Windows), and “Nintendo Switch Pro Controller”).</p>
<p>Another difficulty is figuring out which controller layout to show if multiple controllers are connected, or when KBM is used even though a controller is connected. I currently check for the first connected controller, which means that, if multiple controllers are connected, the layout shown may be wrong. Furthermore, connecting a controller always overrides the KBM layout, since KBM is currently the default. A solution to this may be to check which controller last sent an input, and retrieving that controller's name.</p>
<img src="2023-10-10_00.webp">
<img src="2023-10-10_01.webp">
<img src="2023-10-10_02.webp">
<img src="2023-10-10_00.webp" alt="Controls screen displaying a DualSense controller">
<img src="2023-10-10_01.webp" alt="Controls screen displaying a Nintendo Switch Pro controller">
<img src="2023-10-10_02.webp" alt="Controls screen displaying an Xbox Series controller">
<h2>Quick Select</h2>
<p>I've done some work on the quick select menu to get it functional. The goal is to emulate its behaviour in the Ratchet & Clank games (duh). Current functionality is as follows:</p>
@@ -55,9 +60,9 @@
<h2>Heavy Weaponry</h2>
<p>In order to get started with the 3D models I'll need to create for the game, I attempted to begin the process of modelling the weapon of the protagonist! It's supposed to become a battle axe, though I have not yet finalised whether I'll keep with the idea.</p>
<div class="horizontally-centre-aligned width-restricted">
<img src="2023-10-22_02.webp">
<img src="2023-10-22_04.webp">
<img src="2023-10-22_05.webp">
<img src="2023-10-22_02.webp" alt="Top view of the battle axe with a flat blade">
<img src="2023-10-22_04.webp" alt="Top view of the battle axe with a thickened blade">
<img src="2023-10-22_05.webp" alt="Side view of the battle axe">
</div>
<h2>Hot, Fresh Quality</h2>
@@ -65,5 +70,5 @@
<Video src="2023-10-25_00.mp4" />
<Video src="2023-10-25_01.mp4" />
<p>I like my bread with bones, <i>thank you very much.</i></p>
<img src="2023-10-25_02.webp">
<img src="2023-10-25_02.webp" alt="A rigged slice of toast in front of a toaster reading 'Deniz' Quality Toasters'">
</Content>

39
src/routes/projects/projectn5/devlog/2023/11/+page.svelte
View File

@@ -10,7 +10,12 @@
</svelte:head>
<Content>
<BannerTitle title="Project N5 Progress Update: 2023-11" subtitle="" banner="../../previews/2023/11.webp" />
<BannerTitle
title="Project N5 Progress Update: 2023-11"
subtitle=""
banner="../../previews/2023/11.webp"
bannerAlt="A side view of the N5 Blaster"
/>
<p>My progress in November 2023. Updates are shown in chronological order.</p>
@@ -20,41 +25,41 @@
<p>Lots of progress on the 3D models! I modelled the first weapon for the game, the N5 Blaster, from start to finish!</p>
<p>The earliest version was based on an 8-sided cylinder. After some feedback from friends, I remade the weapon, using a 16-sided cylinder, and also adding more details to the weapon overall. More attention went into the grip, which now resembled a weapon grip more so than a stick.</p>
<div class="horizontally-centre-aligned">
<img src="2023-11-05_00.webp">
<img src="2023-11-03_01.webp">
<img src="2023-11-05_03.webp">
<img src="2023-11-05_00.webp" alt="N5 Blaster v1 made from an 8-sided cylinder">
<img src="2023-11-03_01.webp" alt="N5 Blaster v2 made from a 16-sided blaster and with additional lights on the grip">
<img src="2023-11-05_03.webp" alt="N5 Blaster v3 with additional lights on the body">
</div>
<p>Here's an overview of the first model.</p>
<Video src="2023-11-03_00.mp4" />
<p>The final version of the weapon layers a black wireframe on top of the icosphere, so that in the game it's a bit more clearly visible that it rotates, and it uses smooth shading. I was against using smooth shading initially, as I wanted to go for a low-poly artstyle, but I think that approach just looked a bit cheap, considering my 3D models aren't exactly high-quality by themselves. Smooth shading gives the impression of smooth, high-poly models at a significant reduction in vertices.</p>
<img src="2023-12-11.webp">
<img src="2023-12-11.webp" alt="Close-up of smoothly-shaded N5 Blaster v3">
<p>Here's the icon for the N5 Blaster that's to be used in the quick select menu, the item menu, and the HUD. The icon will be tinted in different colours when the weapon has been levelled up.</p>
<p>In my first attempt at creating this icon, I took a picture of the wireframed icosphere that's in the weapon, and I tried to vectorise it using Inkscape. That didn't work the way I wanted, so I hand-traced all the lines from the icosphere. I was confused as to why it's not symmetrical, but I later realised that that's just how the icosphere looks.</p>
<img src="n5blaster_icon.webp">
<img src="n5blaster_icon.webp" alt="N5 Blaster icon">
<p>I also continued work on the battle axe, giving it more character. It's still not close to being finished, but it's now a bit less of a rough draft.</p>
<div class="horizontally-centre-aligned">
<img src="2023-11-01_01.webp">
<img src="2023-11-01_06.webp">
<img src="2023-11-01_09.webp">
<img src="2023-11-01_01.webp" alt="Battle axe with a hollowed-out blade">
<img src="2023-11-01_06.webp" alt="Battle axe with a stabilising pattern in the blade">
<img src="2023-11-01_09.webp" alt="Battle axe with two blades">
</div>
<p>I will admit though that I'm unsure whether I'll actually stick with the battle axe as the protagonist's main melee weapon.</p>
<p>Another idea, though more as an unlockable extra, is Derek the crowbar.</p>
<img src="2023-11-06_02.webp">
<img src="2023-11-06_02.webp" alt="A crowbar">
<p>I also worked on the upgrade for the N5 Blaster, the N5 Cannon. Progress on that one has been a bit slow, since I have yet to figure out what kind of weapon I want the upgraded version to be.</p>
<div class="horizontally-centre-aligned">
<img src="2023-11-12_04.webp">
<img src="2023-11-12_02.webp">
<img src="2023-11-12_04.webp" alt="N5 Cannon body">
<img src="2023-11-12_02.webp" alt="N5 Cannon Body next to the N5 Blaster">
</div>
<p>And, as a bonus, here's the discarded, very-early-WIP draft I created for a rifle-type weapon. I don't think this type of weapon fits the type of game I'm making.</p>
<img src="2023-11-12_00.webp">
<img src="2023-11-12_00.webp" alt="Untextured body and scope of a rifle">
<p>And a draft of a rocket launcher with 9 barrels! This is heavily inspired by the <a href="https://ratchetandclank.fandom.com/wiki/R.Y.N.O._(2002_game)">R.Y.N.O. from Ratchet & Clank</a>. It's coloured blue because I was investigating issues with the mesh's normals at the time.</p>
<img src="2023-11-02_01.webp">
<img src="2023-11-02_01.webp" alt="Front of a 9-barrel rocket launcher with visualised normals">
<h2>A Star is Born</h2>
<p>I begun modelling my protagonist! I didn't progress far, as I currently lack a vision for where I really want my character to go in detail. I have slight ideas – inspirations are, for example, <a href="https://hero.fandom.com/wiki/Merc_and_Green">Merc & Green from Ratchet: Gladiator</a>, and <a href="denholm.webp">Denholm Reynholm</a>. I quite liked the idea of having glowing tubes on the character's back; I got the inspiration from a Blender tutorial that was randomly recommended to me one morning.</p>
<div class="horizontally-centre-aligned">
<img src="2023-11-11_05.webp">
<img src="2023-11-12_01.webp">
<img src="2023-11-11_05.webp" alt="Tubes for the back of the protagonist">
<img src="2023-11-12_01.webp" alt="Glowing tubes attached to a torso block">
</div>
<p>i love</p>
<Video src="2023-11-11_09.mp4" />
@@ -70,5 +75,5 @@
<h2>My Best Friend JSON</h2>
<p>It might seem simple (or look complicated), but I came up with the idea of creating a JSON-based lookup table for the weapon metadata. Using this, it's quite easy to retrieve any kind of information about any kind of weapon without needing to hardcode it into the weapon itself. Here's an early screenshot of the lookup table.</p>
<img src="2023-11-25.webp">
<img src="2023-11-25.webp" alt="A screenshot of the weapon lookup table JSON">
</Content>

35
src/routes/projects/projectn5/devlog/2023/12/+page.svelte
View File

@@ -10,7 +10,12 @@
</svelte:head>
<Content>
<BannerTitle title="Project N5 Progress Update: 2023-12" subtitle="" banner="../../previews/2023/12.webp" />
<BannerTitle
title="Project N5 Progress Update: 2023-12"
subtitle=""
banner="../../previews/2023/12.webp"
bannerAlt="White protagonist holding the N5 Blaster"
/>
<p>My progress in December 2023. Updates are shown in chronological order.</p>
@@ -19,38 +24,38 @@
<h2>Identity Crisis</h2>
<p>I started creating a logo for my game! I settled on the name <b>Project N5</b> as a working title, and perhaps as a final title for the game as well. Here's all the logos I created thus far:</p>
<p>Logo #0 is just an outline using <a href="https://fonts.google.com/specimen/Kanit">Kanit</a>. This is the font I also decided on for all of the in-game menus and text. The 5 is special though; it is based on a part salvaged from a hard drive. On a slow day, my coworker disassembled some defective mechanical hard drives, and I got to keep the parts. I thought it would look quite cool as a highlight for the game's logo, and perhaps function as a part of the in-game antagonist company that I'm planning to write the story around.</p>
<img class="image-block centred width-restricted light-background" src="projectn5-logo-outline.webp">
<img src="hdd.webp">
<img class="image-block centred width-restricted light-background" src="projectn5-logo-outline.webp" alt="Outlined Project N5 logo">
<img src="hdd.webp" alt="C-shaped hard drive component">
<p>Logo #1 gained a fill, wider stroke, and a pattern fill that's straight outta Inkscape.</p>
<img class="image-block centred width-restricted light-background" src="projectn5-logo-fill-v1.webp">
<img class="image-block centred width-restricted light-background" src="projectn5-logo-fill-v1.webp" alt="Outlined Project N5 logo with grey infill">
<p>#2 reserves the pattern fill for the N5 part and colours the 5 in the game's main yellow colour, #D4AB49. It's also much thicker.</p>
<img src="projectn5-logo-v2.webp">
<img src="projectn5-logo-v2.webp" alt="Project N5 logo with thicker letter strokes">
<p>Version 3 is a complete overhaul, still using Kanit for the N, keeping the custom 5, but changing the font of the word 'Project' to <a href="https://www.collletttivo.it/typefaces/apfel-grotezk">Apfel Grotezk</a>. Unfortunately, that font doesn't really work well in all-caps. The J just stood out too poorly for my liking, and friends confirmed it.</p>
<p>The hexagonal background behind the N5 actually was a fairly random addition, but I liked it so much that it continued to stick. I think this could also serve as part of the player's HUD. Maybe as an element that shows the level of the currently equipped weapon? I love when ideas sprout from random decisions like this!</p>
<img src="projectn5-logo-v3.webp">
<img src="projectn5-logo-v3.webp" alt="Project N5 logo typeset in Apfel Grotezk and with the C-shaped hard drive component integrated into the 5">
<p>I also tried <a href="https://fonts.google.com/specimen/Lato">Lato</a>, but that looked too standard, and not quite as expressive as I wanted it to. Relatively speaking, considering we're talking about regular sans-serif fonts, of course.</p>
<p>A friend also suggested I cut apart the top part of the 5, leaving a gap, and I think that looked quite cool! I continued that trend for the HDD-inspired bits on the lower part of the 5, simplifying them, detaching them from the main bottom part, and even removing one element. The element that was removed actually served as the part that sticks out in the upper part of the lower part – if that makes sense. It's now located near the cutting point between the upper and lower parts of the digit.</p>
<p>I also tore apart the N on my own volition. Thought it looked cool.</p>
<img src="projectn5-logo-v4.webp">
<img src="projectn5-logo-v4.webp" alt="Project N5 logo typeset in Lato. Slices have been added to the N and 5">
<p>This logo uses <a href="https://fonts.google.com/specimen/Montserrat">Monserrat ExtraBold</a>. I actually quite liked this font; it looked unified, bold, and actually quite fitting for my vision!</p>
<img src="projectn5-logo-v5.webp">
<img src="projectn5-logo-v5.webp" alt="Project N5 logo typeset in Monserrat">
<p>Then I inset the C into the T, creating a neat little cutout effect.</p>
<img src="projectn5-logo-v6.webp">
<img src="projectn5-logo-v6.webp" alt="Project N5 logo with a cutout in the T">
<p>I then decided to put a splash of colour behind the 'Project' wordmark, and highlighting the background with two hexagons.</p>
<p>Do you think the comment is right? I'm unsure. Amongst all the people I've shown this logo to, the decision has been split 50/50. I just don't want people to consider this the 'dick logo.'</p>
<p>I've also received comments from some people who are irked by the T in 'Project' overlapping with the background of the N5. I actually quite like that feature, but I'll take it into consideration, and maybe change it in the near future.</p>
<img src="projectn5-logo-v7.webp">
<img src="projectn5-logo-v7.webp" alt="Project N5 logo with a golden background and a note on top that reads 'TODO this looks like a dick'">
<p>And lastly, a little draft logo I created, based on #7, in <a href="https://www.getpaint.net/">Paint.net</a>, which is why it doesn't look as clean as the other ones, which are all vector-based logos created in Inkscape.</p>
<p>I want my work to be transferrable and easily scale-able after all, you know?</p>
<img src="projectn5-logo-v7-sketch.webp">
<img src="projectn5-logo-v7-sketch.webp" alt="Project N5 logo with golden letters">
<h2>Glowing Weaponry</h2>
<p>I was struggling for SO LONG to get this weapon to glow. Using a <code>WorldEnvironment</code> node just wouldn't work, the weapon never glowed. Then, I figured out that, at some point, I disabled glow in the entire scene... and after changing that – and trying other things for 1.5 hours before that point – the weapon was glowing! Not quite the way I want it to, but that's easy to tweak. Only downside is that my character started glowing as well, for some reason, but I'll figure that out another time.</p>
<img src="2023-12-08.webp">
<img src="2023-12-08.webp" alt="N5 Blaster on the floor and Sans t-posing in the background">
<h2>Character II</h2>
<p>For testing animations, I created a new rigged character. This character is segmented, using separate objects for its arms, fingers, legs, etc. The final protagonist will use completely separate objects, since the character will be a robot. This will also reduce the work I will need to do in weight painting, and make mesh bends trivial – which is to say, not necessary.</p>
<img src="2023-12-12_00.webp">
<img src="2023-12-12_00.webp" alt="A new rigged character model">
<p>Rigging remains as difficult as ever. The final model – which won't be based on this model but use a similar rig, hopefully the same so that animations can be carried over 1:1 – will have separate segments for the fingers, so that bends like this will never occur.</p>
<p>Notice that the character only has four fingers per hand. This should reduce animation work somewhat. Also, I came to realise – why even put five fingers on a robot? It's not like we as humans even utilise our five fingers very efficiently. I've found myself struggling to keep my pinky out of my way countless times.</p>
<Video src="2023-12-12_01.mp4" />
@@ -58,11 +63,11 @@
<p>This uses 1-frame animations to achieve posing. My first attempt at using animations in Godot! Worked really well, actually. All I fear now is playing multiple animations at once. Is that even possible? I don't know yet.</p>
<Video src="2023-12-12_02.mp4" />
<p>And finally, a shot of the character holding the weapon correctly. This was actually super easy to achieve. The weapon is parented to a node that's attached to the right hand bone of the model. This makes posing and animations loads easier, since the equipped item does not have to be moved manually.</p>
<img src="2023-12-12_03.webp">
<img src="2023-12-12_03.webp" alt="The new character model in front of a brick wall, holding the N5 Blaster">
<h2>Worldbuilding – Toasters</h2>
<p>Adapted from the early animations, I present: Deniz' Quality Toasters! A fictitious toaster manufacturing company bearing my name – maybe they manufacture more than just toasters? The logo is using the font <a href="https://fonts.google.com/specimen/Pacifico">Pacifico</a>.</p>
<img src="dqt.webp">
<img src="dqt.webp" alt="Wordmark for Deniz' Quality Toasters">
<p>I don't actually know whether I'll use this in any way, I just wanted to create this logo for the sake of it.</p>
<h2>Simultaneous Animations</h2>

21
src/routes/projects/projectn5/devlog/2024/0210/+page.svelte
View File

@@ -9,31 +9,36 @@
</svelte:head>
<Content>
<BannerTitle title="Project N5 Progress Update: 2024-02-10" subtitle="" banner="../../previews/2024/0210.webp" />
<BannerTitle
title="Project N5 Progress Update: 2024-02-10"
subtitle=""
banner="../../previews/2024/0210.webp"
bannerAlt="Panorama of the environment"
/>
<p>My apologies for the lack of updates lately! Between being hard at work on the game's progress, lacking motivation, and university exams, I really didn't have the time to write a proper update. Instead, I figured it would now be a great time to do a bundled progress update, since I really did get a lot done that takes the game quite a few steps further!</p>
<p>The most apparent change may be the new character! It's a temporary character once again – character number 3, to be exact – but this time it's rigged properly. There are no bends in the character, which sounds PS1-esque but is actually on purpose because the final character is supposed to be a robot.</p>
<p>There are also new animations! Nothing finished, of course, but I created them to play around with Godot's <code>AnimationTree</code> and <code>Blend2D</code>, which worked very well to lay out and play even multiple animations at once. There are now animations for walking, standing still, pointing a gun, single jumping, and double jumping! What's missing is a falling animations, but that will be implemented once I figure out how to import NLA tracks instead of needing to re-import the entire character for every animation change.</p>
<Video src="animations.mp4" />
<p>The game also now has a proper sky! I used this <a href="https://godotshaders.com/shader/stylized-sky-with-procedural-sun-and-moon/">Procedural Sky with Procedural Sun and Moon shader</a> by krzmig and tweaked the colours and light to get the current look. I don't expect this to be final necessarily, but I'll definitely at the very least use this as a base. I do like the look though, so it might remain final after all!</p>
<img src="sky.webp">
<img src="sky.webp" alt="Panorama shot of the scene and the orange-to-pink sky with the character in front">
<p>I fixed the glowing issues in the game at one point, but then screwed up again because glow wasn't working <i>at all</i> anymore. Only after over an hour of troubleshooting did I realise that I disabled glow in the <code>WorldEnvironment</code> node...</p>
<p>In tweaking the <code>WorldEnvironment</code>, I even got shadows to work!</p>
<img src="shadows.webp">
<img src="shadows.webp" alt="The character standing next to a new enemy">
<p>That red thing in the top right is an enemy. It doesn't move yet, and it can't take damage either (thus making it invulnerable), but it can be targetted, and it can damage the player too!</p>
<p>It can be <i>targetted?</i> Yes! There's now an <code>AutoAimAgent</code> component available for all weapons that targets the nearest enemy that's inside a collision cone attached to the weapon. Once an enemy is inside this collision zone, a target is shown to let the player know which enemy is targetted, and the weapon fires in the precise direction of the enemy.</p>
<img src="target.webp">
<img src="target.webp" alt="The character aiming the N5 Blaster at an enemy. A crosshair is displayed on top of the enemy">
<p>The weapons received more updates! There's now a quick change function that allows for quickly switching between the 3 most recently used weapons by pressing the Quick Select button quickly.</p>
<img src="quickchange.webp">
<img src="quickchange.webp" alt="The weapons UI displaying the equipped weapon and two extra weapons accessible via quick change">
<p>That sperm rocket you're seeing in the picture above is the new rocket launcher. I wanted to implement the rocket launcher as a weapon type already, so I quickly whipped by a temporary model for launcher and rockets, and implemented the functionality. And it works! It even has particle effects for the rockets!</p>
<p>overcompensation be like</p>
<img src="rocketlauncher.webp">
<img src="rocketlauncher.webp" alt="The character holding a massive rocket launcher">
<Video src="rockets.mp4" />
<p>I really feared GPU particles because I figured they would be insanely difficult to implement, but Godot really made this a breeze. Now, making them look <i>good</i> is a different story, but that's more so due to my lacking creativity and skill.</p>
<p>What you don't possess, you can buy. And what do you need to buy those things? Money.</p>
<img src="money.webp">
<img src="money.webp" alt="Golden bolts arranged in a line on the floor">
<p>Aside from increasing a counter upon being collected, these totally-not-bolts don't do anything at the moment. But it's a start! In the future, the money can be used to buy things at the vendor that also already exists! But interacting with it only yields a blank menu at the moment.</p>
<img src="vendor.webp">
<img src="vendor.webp" alt="The character standing next to the vendor object">
<p>There's more that I can't really show visually though. I made huge progress with the character, for instance. Or rather, <i>I fixed some of the issues my own script caused.</i> I used to use a custom solution based on someone else's code to handle movement speed and sliding on slopes, but this introduced two massive issues. For one, stepping onto a steep slope while still half-standing on a surface that can be walked on caused the character to lose the ability to move until jumping, thus getting stuck. The other issue was that some abrupt slope angle changes caused the entire game to crash, probably caused by a faulty <code>RayCast</code> check.</p>
<p>Now, how did I fix these issues? Well, I found out that Godot already offers these functions in the default <code>CharacterController3D</code>. Hence, I ripped out all the custom code, I essentially checked two boolean flags, and I had the same behaviour, minus the game-breaking bugs. Despite my stupidity, I felt very happy to have discovered that. My player script is now a lot cleaner!</p>
<p>And so are other scripts! I cleaned up a few scripts, most recently the Inventory script. There used to be a lot of redundant function calls that essentially did the same thing except with one check that could be performed more centrally. I also double-checked item IDs unnecessarily. All gone now! Inventory is much more streamlined now.</p>

23
src/routes/projects/projectn5/devlog/2024/0312/+page.svelte
View File

@@ -10,7 +10,12 @@
</svelte:head>
<Content>
<BannerTitle title="Project N5 Progress Update: 2024-03-12" subtitle="" banner="../../previews/2024/0312.webp" />
<BannerTitle
title="Project N5 Progress Update: 2024-03-12"
subtitle=""
banner="../../previews/2024/0312.webp"
bannerAlt="Protagonist pointing the N5 Blaster into the sky"
/>
<TableOfContents disableStickyScrolling={true} />
@@ -18,22 +23,22 @@
<h2 id="titlescreen">Back to Title Screen</h2>
<p>I needed a means to launch different levels quickly, so I created a basic title screen for the game! Behind this is a basic custom level manager that allows for launching and switching between different levels. Currently, there exist two of them – Unity and Arena. Unity is the original level that's been in the game since day 1, using Unity's (old) logo as a floor plane, mostly as a joke because I switched from Unity to Godot.</p>
<img src="titlescreen.webp">
<img src="titlescreen.webp" alt="The title screen displaying two levels: Unity and Arena">
<h2 id="arena">Level 2: Arena</h2>
<p>The arena level is a new addition, everyone welcome the arena! While I do intend to design a proper arena for the final game, this arena is intended to test enemies and the arena menu.</p>
<img src="arena.webp">
<img src="arena.webp" alt="A panorama of the arena with a blue sky, white clouds, and an arena terminal">
<div class="image-subtitle-container">
<span class="image-subtitle">the blue sky gives the level such a different feel. the clouds move really quickly here compared to Unity's clouds, suggesting a stormy atmosphere on this planet.</span>
</div>
<p>The computer over there is the arena terminal. By interacting with it, you can select an arena challenge. Currently, it doesn't work. The menu does work! But the buttons don't do anything so far.</p>
<img src="arena-terminal.webp">
<img src="arena-terminal.webp" alt="Three arena challenges displayed in the arena terminal UI">
<h2 id="thirdperson">Talking about yourself in the 3rd person</h2>
<p>I discovered this great plugin for Godot called <a href="https://phantom-camera.dev/">Phantom Camera</a>. It's a plugin that allows you to use agents to control the game camera smoothly, efficiently, and hassle-free. In order to implement it in my game, I only had to do the totally easy task of ripping out my entire camera system. It totally didn't almost make me restart the project from scratch. But it works flawlessly now!</p>
<img src="shoulder.webp">
<img src="shoulder.webp" alt="An over-the-shoulder view of the protagonist aiming the N5 Blaster">
<p>It wasn't quite flawless from the start though. I had issues with the camera facing my character's front instead of their back. Turns out though, that's not the camera's fault; Phantom Camera's agent was specifically designed to look at the character's back – only problem was that my character model was facing the wrong way! Fixing that took a little bit of time, but I got it done, and now the camera works pretty decently. I even added two more fancy camera gizmos: the first one is a level overview camera, like in Ratchet & Clank! It shows an overview of the level when you enter it. It smootly transitions to the player once any input is made.</p>
<img src="overview.webp">
<img src="overview.webp" alt="A panorama shot of the Unity level with the brick wall filling the entire left half">
<p>The other is an over-the-shoulder camera! This one allows for (allegedly) more precise aiming. Come to think of it, I should actually turn down the camera sensitivity when the player is in this mode...</p>
<Video src="shoulder.mp4" />
<p>Funnily, due to initial collision issues, I first accidentally turned my game into a first person shooter. Actually looks kind of cool, I have to say. Maybe I'll implement a first person view as an alternative option to the over-the-shoulder view.</p>
@@ -42,14 +47,14 @@
<h2 id="sketches">Can I offer you a nice sketch in this trying time?</h2>
<p>When I'm not developing, I'm often doing something else related to my game. Sometimes, I sketch!</p>
<p>I am by NO MEANS a skilled sketch artist, but it really helps to note down ideas to remember them, visualise them, and expand on them.</p>
<img src="sketches.webp">
<img src="sketches.webp" alt="Sketches of the protagonist as well as their armour and weapons">
<div class="image-subtitle-container">
<span class="image-subtitle">don't judge</span>
</div>
<h2 id="kanban">Kanban for my TODOs</h2>
<p>Perhaps as a small insight into my project management process: I'm using <a href="https://obsidian.md/">Obsidian</a>, a markdown editor, as my means of collecting and managing my projects' notes and ideas. Recently, I've also tried using the Kanban plugin to organise my TODOs (I have <i>a lot</i> of them), which is working quite well! I often create small notes on this board, saving sparks of ideas that I occasionally have, and I like adding extra information that will help me remember in the long term what those ideas were about.</p>
<img src="kanban.webp">
<img src="kanban.webp" alt="The kanban board housing all TODOs for the game">
<p>I can only recommend it – both Kanban as a means of project management as well as Obsidian as a note vault!</p>
<h2 id="future">in hopes of more to come</h2>
@@ -57,7 +62,7 @@
<p>After every day of working on my game, I ask myself: "did I really accomplish much today?" Often, my immediate response is "no", but my second response is "of course I did!" Because while a lot of things that take me quite a bit of time are children's play for another person most likely, the fact that I worked through it and managed to successfully create or implement something is huge. I'm always quite happy once I realise this.</p>
<p>And so, while my day-to-day motivation for working on my game directly is rather low, this is only a symptom of a general lack of motivation for anything. In the long term, I think I am quite dedicated to this game. When I'm not coding something, I'm coming up with ideas. I'm managing my notes. I'm designing something. Maybe I'm talking to someone about my ideas. That last point is actually something I would love to do more, but I don't really know any person that would enjoy listening to my ramblings.</p>
<p>Let's see how far we get.</p>
<img src="alone.webp">
<img src="alone.webp" alt="Protagonist staring longingly into the distance, pointing the N5 Blaster thereto">
<div class="image-subtitle-container">
<span class="image-subtitle">staring longingly into the sunset</span>
</div>

17
src/routes/projects/projectn5/devlog/2024/0323/+page.svelte
View File

@@ -10,7 +10,12 @@
</svelte:head>
<Content>
<BannerTitle title="Project N5 Progress Update: 2024-03-23" subtitle="" banner="../../previews/2024/0323.webp" />
<BannerTitle
title="Project N5 Progress Update: 2024-03-23"
subtitle=""
banner="../../previews/2024/0323.webp"
bannerAlt="A red enemy being blown up by an incoming rocket"
/>
<TableOfContents disableStickyScrolling={true} />
@@ -55,7 +60,7 @@
<p>I briefly checked out Jolt's settings page... and then I saw something.</p>
<img src="joltsettings.webp">
<img src="joltsettings.webp" alt="Screenshot of the game's Jolt configuration, the option 'Areas Detect Static Bodies' is enabled and highlighted">
<p>"Areas Detect Static Bodies." This setting was OFF by default. This could actually apply, I figured, because my rockets are <code>Area3D</code>s and the walls/floors are <code>StaticBody3D</code> nodes. I turned it on, and... my issue was solved. Slightly frustrated, but more so amused and relieved, I continued work, happy that my code was fine and my solution worked.</p>
@@ -95,8 +100,8 @@
<p>I had a random burst inspiration recently while I was on the bus, and once I got home, I started modelling it. Introducing: a weapon that is unfinished and has no (finalised) name yet, but I'm still fairly proud of:</p>
<img src="venom_front.webp">
<img src="venom_back.webp">
<img src="venom_front.webp" alt="Front view at a new weapon with two barrels, a golden lead-up to the top barrel, and a bolt in the back">
<img src="venom_back.webp" alt="Back view of the previously-described weapon">
<p>I'm thinking this could be a blaster of types, maybe similar to an N5 Blaster upgrade – two-handed. Though I think it should be separate from the N5 Blaster. It could also be a flamethrower, though I want the flamethrower to look a bit different, especially at the gun barrel.</p>
@@ -129,11 +134,11 @@
<p>Of course, obligatory <i>I accidentally turned my game into a first-person shooter</i>, again. This view of the N5 Blaster actually reminds me of Metroid.</p>
<img src="firstperson.webp">
<img src="firstperson.webp" alt="Erroneous first-person view">
<h2 id="unity">Looking down upon the mess I've created</h2>
<p>I'm really happy with my progress. As a bonus, here's an overview of my current testing level Unity.</p>
<img src="unity_overview.webp">
<img src="unity_overview.webp" alt="Bird's eye perspective overview at the Unity level">
</Content>

11
src/routes/projects/projectn5/devlog/2024/0324/+page.svelte
View File

@@ -10,7 +10,12 @@
</svelte:head>
<Content>
<BannerTitle title="Project N5 Progress Update: 2024-03-24" subtitle="The Arena Update" banner="../../previews/2024/0324.webp" />
<BannerTitle
title="Project N5 Progress Update: 2024-03-24"
subtitle="The Arena Update"
banner="../../previews/2024/0324.webp"
bannerAlt="Protagonist being swamped by many monkey enemies"
/>
<TableOfContents disableStickyScrolling={true} />
@@ -39,7 +44,7 @@
<h3 id="enemy">The New Enemy, Suzanne Cylinder</h3>
<img src="suzannecylinder.webp">
<img src="suzannecylinder.webp" alt="Suzanne cylinder; an enemy made from a few cylinders and Blender's default 'Suzanne' monkey head">
<p>Suzanne cylinder (called "test_monkey" in the game) is the first enemy that has movement code implemented, able to follow the player once close enough and attack once the player gets too close. Without gravity holding Suzanne cylinder to the ground, though, the situation gets spooky quickly.</p>
@@ -47,7 +52,7 @@
<p>Initial movement tests were quite funny, because <code>look_at()</code> adjusts rotation on both the y axis (left-right rotation) as well as the x-axis (up-down rotation), which meant that the enemy kept looking up when the player was at a higher elevation than it.</p>
<img src="lookingup.webp">
<img src="lookingup.webp" alt="Suzanne cylinder staring up at the protagonist from beneath a ramp">
<div class="image-subtitle-container">
<span class="image-subtitle">send help</span>
</div>

11
src/routes/projects/projectn5/devlog/2024/0401/+page.svelte
View File

@@ -10,7 +10,12 @@
</svelte:head>
<Content>
<BannerTitle title="Project N5 Progress Update: 2024-04-01" subtitle="The Behind-the-Scenes Update" banner="../../previews/2024/0401.webp" />
<BannerTitle
title="Project N5 Progress Update: 2024-04-01"
subtitle="The Behind-the-Scenes Update"
banner="../../previews/2024/0401.webp"
bannerAlt="N5 Blaster with its lights turned off"
/>
<TableOfContents disableStickyScrolling={true} />
@@ -71,7 +76,7 @@
<p>Something visual to intersperse the dry code explanations:</p>
<img alt="An image of an untextured work-in-progress 3D model of a blaster" src="venom.webp">
<img alt="An untextured work-in-progress 3D model of a blaster" src="venom.webp">
<p>This is an image for a weapon I've come up recently! It's supposed to be a slow-firing but strong blaster, contrasting the rapid-firing but weaker N5 Blaster (which recently changed to an automatic firing mode). The Venom originated from sketches like this, by the way:</p>
@@ -87,7 +92,7 @@
<p>The N5 Blaster got some visual flair! The lights now glow slightly differently, a bit dimmer than before. When the N5 Blaster is fired, its lights glow brightly for a split second, indicating that a shot has been fired! And when the gun is empty, the lights go out and the icosphere (which is meant to be the power source of the gun) is only dimly lit! I really like the effect.</p>
<Video src="n5-glow.mp4" />
<img alt="An image of the N5 Blaster. Its lights are turned off, and the icosphere in the middle is dimly glowing." src="n5-dim.webp">
<img alt="The N5 Blaster. Its lights are turned off, and the icosphere in the middle is dimly glowing." src="n5-dim.webp">
<p>Sorry about the sparse delivery of visually pretty things, but I hope the cool effects on the N5 Blaster make up for it somewhat! I can say for sure though that I'm progressing quite well, and I'm having fun doing so, even if this progress can't really be showed off in the same way I could show off a 3D model or a new enemy. There's lots to come in the future though, especially since I still have to design most of the 12 × 2 = 24 weapon models, a tonne of enemies, the player, and all the levels. There'll be lots to gawk at (hopefully)!</p>
</Content>

7
src/routes/projects/projectn5/devlog/2024/0713/+page.svelte
View File

@@ -9,7 +9,12 @@
</svelte:head>
<Content>
<BannerTitle title="Project N5 Progress Update: 2024-07-13" subtitle="The WHERE HAVE I BEEN?? Update" banner="../../previews/2024/0713.webp" />
<BannerTitle
title="Project N5 Progress Update: 2024-07-13"
subtitle="The WHERE HAVE I BEEN?? Update"
banner="../../previews/2024/0713.webp"
bannerAlt="Protagonist staring longingly into the distance, pointing the N5 Blaster thereto"
/>
<p>University.</p>

17
src/routes/projects/projectn5/devlog/2024/1012/+page.svelte
View File

@@ -9,7 +9,12 @@
</svelte:head>
<Content>
<BannerTitle title="Project N5 Progress Update: 2024-10-12" subtitle="The Returnal Update" banner="../../previews/2024/1012.webp" />
<BannerTitle
title="Project N5 Progress Update: 2024-10-12"
subtitle="The Returnal Update"
banner="../../previews/2024/1012.webp"
bannerAlt="Protagonist aiming at two monkeys"
/>
<TableOfContents disableStickyScrolling={true} />
@@ -23,13 +28,13 @@
<p>I overhauled the auto aim mechanism (which is now called aim helper). Previously, the aim helper worked by putting a 3D collision shape in front of the gun, registering all collisions within this cone, and determining a target by calculating the shortest distance between the player and the enemies. Here's a visual of the old cone at the tip of the N5 Blaster:</p>
<img src="cone.webp">
<img src="cone.webp" alt="The protagonist pointing the N5 Blaster, which is emitting a wiremeshed cone shape">
<p>This was a good solution, because it allowed for targetting enemies without much effort – add an enemy to the 'targetable' group and let the aim helper script take care of it. However, customisation proved difficult. Since the collider was a 3D shape, a new 3D shape would have to be created for every weapon and every upgrade that demanded a unique shape. While this offered flexibility, it proved cumbersome in execution. Cones could only be changed in scale uniformally, which means that, while they can be changed in size, no single dimension could be changed without causing bugs. Keeping X and Y while increasing the Z distance would mandate a whole new shape. Furthermore, the cone would have to be manually rotated and positioned in front of the gun every frame, which wasn't particularly elegant.</p>
<p>Thus, a new solution was born: a 2D approach to the aim helper!</p>
<img src="aim_helper.webp">
<img src="aim_helper.webp" alt="A 2D circle on the screen aiming at an enemy, which is displayed as a target via crosshair">
<p>The way the new aim helper works is by putting a 2D collision shape on the screen of the player. All enemies contain a 2D shape as well, which is unprojected onto the screen by the player camera. This means that the 2D shapes are positioned on top of the 3D characters. As soon as the player's collision shape collides with one of the enemies', it's added to the list of collisions and the shortest distance is calculated. This procedure hasn't changed between the 3D and 2D approaches.</p>
@@ -42,8 +47,8 @@
<p>The N5 Blaster received an overhauled icon. The soon-to-be-implemented N5 Bomb Launcher also received its own icon!</p>
<div class="horizontally-centre-aligned">
<img src="n5-blaster-icon.webp">
<img src="n5-bomb-launcher-icon.webp">
<img src="n5-blaster-icon.webp" alt="N5 Blaster logo made from an icosphere and two handles">
<img src="n5-bomb-launcher-icon.webp" alt="N5 Bomb Launcher logo made from an icosphere and waves">
</div>
<p>I changed the icosphere by tracing its 3D counterpart (the ball inside the N5 Blaster's glass tube) from a different point of view. It wasn't symmetrical before – it is now.</p>
@@ -78,7 +83,7 @@
<p>Here's a sneak peek at an ammo pickup I started working on recently:</p>
<img src="ammo.webp">
<img src="ammo.webp" alt="An ammo canister with a question mark at its front">
<p>And of course, there's always the struggle of motivation. With my new game project, I have the fortune of working with two other people who also do work. We can motivate one another, since we're all interested in developing the game further. I don't have this with Project N5. At least as far as I know, I'm the only one who's really interested in seeing this game flourish, so there's no real option for me to gain motivation through other people. It's difficult, and I don't quite know how to deal with it. I've also considered uploading snippets onto my Instagram, but even disregarding my dislike for the platform, I don't think anyone would really care – I've uploaded snippets in the past already, to little resonance. I don't blame other people, but it just illustrates that I need to have intrinsic motivation to continue work on Project N5.</p>

23
src/routes/projects/projectn5/devlog/2024/1103/+page.svelte
View File

@@ -10,7 +10,12 @@
</svelte:head>
<Content>
<BannerTitle title="Project N5 Progress Update: 2024-11-03" subtitle="The Visual Update" banner="../../previews/2024/1103.webp" />
<BannerTitle
title="Project N5 Progress Update: 2024-11-03"
subtitle="The Visual Update"
banner="../../previews/2024/1103.webp"
bannerAlt="Two N5 Blaster side-to-side"
/>
<TableOfContents disableStickyScrolling={true} />
@@ -24,7 +29,7 @@
<p>One challenge I faced was referencing a node that has no clear direct relationship to the one I'm calling it from. Picture this node chain:</p>
<img src="node_chain.webp">
<img src="node_chain.webp" alt="A very long node chain displayed using Obsidian's canvas feature">
<p>Say, for example, that I'm writing a script in <code>Automatic</code> – that's the node that handles projectile spawning and their direction in automatic weapons, among other things – and I need to reference <code>AimRayCast3D</code> to determine in which direction the projectile needs to be fired. Reasonable use case, seen as the <code>RayCast3D</code> is attached to the <code>Camera3D</code> to point exactly where the player is facing – except there's no real path I can follow to get to that node. Their closest relative is <code>Level</code>, which is the root node of the level, and no less than <b>eight nodes away</b> from <code>Automatic</code>! It's possible to retrieve the node in this way, starting from <code>Automatic</code>, but it's not pretty...</p>
@@ -63,7 +68,7 @@
<h2 id="sky">Lighten the Mood</h2>
<img src="sky.webp">
<img src="sky.webp" alt="A bright blue sky and procedually generated white clouds">
<p>I changed the sky to be brighter and more friendly in the Unity test level. This doesn't serve the game in its final form in any way, it's just a measure I took to <a href="/projects/projectn5/devlog/2024/1012/#whats-next">give myself the impression that a lot has changed</a>, since the game has visually changed.</p>
@@ -79,7 +84,7 @@
<p>I'm unsure how I feel about using someone else's generator in my own game, though, so I followed a <a href="https://docs.godotengine.org/en/stable/tutorials/shaders/using_viewport_as_texture.html">tutorial</a> I found in the Godot documentation by coincidence – I wanted to look up something for an entirely different game. The result:</p>
<img src="planet-mine.webp">
<img src="planet-mine.webp" alt="A sphere with green and purple noise artifacts representing land and potentially poisonous liquid">
<p>...it's a work-in-progress. A relatively decent start though! I think there's potential.</p>
@@ -93,7 +98,7 @@
<p>Back when I modelled the N5 Blaster around a year ago, I didn't have much experience in using Blender. Thus, it wasn't modelled very well. The model consisted of 8 parts for the body, 3 or 4 parts for the grip, and the icosphere spinning in the middle of the gun. My goal today was to recreate the N5 Blaster with a more streamlined mesh, and I must say, I achieved my goal quite well: the gun now consists of one mesh for the body, one for the grip, and another for the icosphere.</p>
<img src="101-comparison.webp">
<img src="101-comparison.webp" alt="The remeshed N5 Blaster on the left compared to the old N5 Blaster on the right">
<div class="image-subtitle-container">
<span class="image-subtitle">left: new, right: old</span>
</div>
@@ -104,13 +109,13 @@
<p>Oh and, with this change, I think I decided on the upgraded version of the N5 Blaster: instead of changing into a bigger weapon, I think it'd be neat if the character would use two of the blasters when upgraded. I like the look of the two blasters side-by-side in the picture above.</p>
<img src="101-profile.webp">
<img src="101-profile.webp" alt="The N5 Blaster from an orthogonal side view">
<h2 id="canister">Need Some Ammo?</h2>
<p>After I introduced a <a href="/projects/projectn5/devlog/2024/1012/#whats-next">new ammo crate in the last devlog</a>, I completely overhauled its look. It's now quite different, more simplistic in its mesh, and it's so round, I stopped calling it crate and started naming it canister.</p>
<img src="canister.webp">
<img src="canister.webp" alt="A new 8-sided ammo canister with the N5 Bomb Launcher logo on its sides">
<p>It's simple! But I kinda like it that way. Plus, neat feature: the canister displays the icon of the weapon for which it holds ammo! So far, only the N5 Bomb Launcher's icon is implemented, but others are easy to put in once I create icons for more weapons.</p>
@@ -118,7 +123,7 @@
<p>Introducing: the N5 Bomb Launcher.</p>
<img src="102-profile.webp">
<img src="102-profile.webp" alt="A side view of the N5 Bomb Launcher, depicted using two cuboids and an icosphere in the front">
<p>Okay, it's not exactly a looker at this stage, but it's functionally largely implemented. This is an, as the name implies, bomb-launching device with ground targetting. This sets it apart from other weapons, and is the reason for why I was so hesitant to imlpement it: it meant I had to change my existing code to accommodate for this.</p>
@@ -126,7 +131,7 @@
<p>I've been playing around with the explosion as well:</p>
<img src="102-explosion.webp">
<img src="102-explosion.webp" alt="An icosphere-based explosion effect with white streaks in the middle of it">
<p>I like the idea of the explosion looking 'technical', if that makes sense. A quick explosion with a large wireframe icosphere. The colour definitely needs changing; I'm even considering changing it to blue, even if that doesn't match the N5 colours. Maybe for the V2 upgrade of the weapon.</p>

11
src/routes/projects/projectn5/devlog/2024/1127/+page.svelte
View File

@@ -9,7 +9,12 @@
</svelte:head>
<Content>
<BannerTitle title="Project N5 Progress Update: 2024-11-27" subtitle="The Making of a Protagonist, Part I" banner="../../previews/2024/1127.webp" />
<BannerTitle
title="Project N5 Progress Update: 2024-11-27"
subtitle="The Making of a Protagonist, Part I"
banner="../../previews/2024/1127.webp"
bannerAlt="Multiple iterations of untextured hand 3D models"
/>
<TableOfContents disableStickyScrolling={true} />
@@ -26,8 +31,8 @@
<p>This is what I've created so far:</p>
<div class="horizontally-centre-aligned">
<img src="laura-overview.webp">
<img src="laura-topology.webp">
<img src="laura-overview.webp" alt="A featureless blank 3D model of a human body t-posing without feet">
<img src="laura-topology.webp" alt="The same human body model with a wiremesh displayed on its right">
</div>
<p>I'll admit, I'm actually quite proud of myself for being able to create this. This is a fairly representative humanoid body, with relatively decent topology and without using a massive amount of polygons – this model currently sits at 2,452 tris.</p>

41
src/routes/projects/projectn5/devlog/2024/1222/+page.svelte
View File

@@ -9,7 +9,12 @@
</svelte:head>
<Content>
<BannerTitle title="Project N5 Progress Update: 2024-12-22" subtitle="The Making of a Protagonist, Part II" banner="../../previews/2024/1222.webp" />
<BannerTitle
title="Project N5 Progress Update: 2024-12-22"
subtitle="The Making of a Protagonist, Part II"
banner="../../previews/2024/1222.webp"
bannerAlt="Laura a-posing and wearing green and brown clothes"
/>
<p>I have lots progress to share!!</p>
@@ -18,8 +23,8 @@
<p>First things first: Laura is, unlike I promised before, not yet finished. However, I have made <i>so much</i> progress in the past few weeks that I just wanted to get out already. Here's a comparison between my last progress update and the current iteration of Laura:</p>
<div class="horizontally-centre-aligned">
<img src="../1127/laura-overview.webp">
<img src="laura.webp">
<img src="../1127/laura-overview.webp" alt="A featureless blank 3D model of a human body">
<img src="laura.webp" alt="A 3D model of a human girl with brown hair, a full face mask, green sweatshirt, brown trousers, and black boots">
</div>
<p>She's become an actual proper character!! omg omg</p>
@@ -46,7 +51,7 @@
<p>Laura was originally supposed to wear an orange sweatshirt as well as shorts. The orange sweatshirt was thrown out because the character reminded me of Velma from Scooby-Doo, and I changed it to green because I like green. Also, the shorts looked dorky. Here's a picture from 2024-12-01 – Laura oddly looks younger in this picture, I feel. The shorts and hair make a big difference.</p>
<img src="laura-young.webp">
<img src="laura-young.webp" alt="A 3D model of a t-posing human girl with different hair, brown shorts, and no feet">
<h3 id="hair">Hair</h3>
@@ -55,15 +60,15 @@
<p>The first try (seen above) was using the technique from <a href="#low-poly-easy">this video</a> – selecting faces from the character's head, duplicating them, separating them into their own mesh, changing the scale, adding a solidify modifier, and then adding faces. This... worked, but I didn't like the results. And I tried quite a few styles.</p>
<div class="horizontally-centre-aligned">
<img src="laura-hair-flat-1.webp">
<img src="laura-hair-flat-2.webp">
<img src="laura-hair-flat-3.webp">
<img src="laura-hair-flat-1.webp" alt="White hair with middle split">
<img src="laura-hair-flat-2.webp" alt="White hair with spiky bangs">
<img src="laura-hair-flat-3.webp" alt="White hair with spiky ends">
</div>
<div class="horizontally-centre-aligned">
<img src="laura-hair-flat-4.webp">
<img src="laura-hair-flat-5.webp">
<img src="laura-hair-flat-6.webp">
<img src="laura-hair-flat-4.webp" alt="Brown hair with middle split, flowing behind the character's ears">
<img src="laura-hair-flat-5.webp" alt="Brown hair with middle split and divided at the ears">
<img src="laura-hair-flat-6.webp" alt="Brown hair with big bangs">
</div>
<p>It always looked too flat, too shapeless, too boring, wrong cuts. It just didn't work.</p>
@@ -73,8 +78,8 @@
<p>Essentially, you create a curve and a circle, use the circle's shape as a profile for the curve, then change the circle's shape as well as the position and scale of the curve's vertices to create individual hair strands. Shown well in the two videos linked above, this can look pretty amazing! Only one issue: I'm creating a <b>game</b> character, and this technique is quite expensive, as it creates a lot of polygons for all the individual hair strands and the detail that goes into them. To mitigate this, I lowered the resolution of the profiling and used only a few curves to create an entire head's worth of hair. This looked a little like this:</p>
<div class="horizontally-centre-aligned">
<img src="laura-hair-curves.webp">
<img src="laura-hair-curves-2.webp">
<img src="laura-hair-curves.webp" alt="Toon shaded view at the character with brown hair">
<img src="laura-hair-curves-2.webp" alt="Side view at the character without special shading">
</div>
<p>This hair mesh originally (left picture) consisted of three parts: two curves at the front (left/right) and one in the back. This... was okay, but scaling the curves made the hair look weird. Thinner strands, especially when there's only a few of them, made them look more like dreads, and scaling up the vertices to large scales, as seen in the front near the top of the head, makes the hair look as if it's ballooning. Getting the shape right was a mess too: using only a single curve in the back meant that I had exactly one curve to cover quite literally half the head, and making sure that this singular strand of hair covered the head stretching from one ear to another was a pain. I tried using five curves (right picture), so that I have three in the back, but it didn't improve anything.</p>
@@ -82,8 +87,8 @@
<p>I then went <i>back</i> to the first method of scaling up faces from the head, with more knowledge and several tries behind me, and you know what? It actually kind of worked out.</p>
<div class="horizontally-centre-aligned">
<img src="laura-hair-flat-new-2.webp">
<img src="laura-hair-flat-new-3.webp">
<img src="laura-hair-flat-new-2.webp" alt="Front view at the character with a green headband and bangs">
<img src="laura-hair-flat-new-3.webp" alt="Front view at the character with a green headband and middle-split hair">
</div>
<p>The right picture is the current iteration of Laura's hair. I added a head band because I thought it looked nice, though that detail is not final.</p>
@@ -106,7 +111,7 @@
<p>Laura's supposed to have a mechanical right arm – on the current model, however, I have applied a mirror modifier, which means her left and right arms are identical. The grey mesh in front of her right arm, however, is the work-in-progress mechanical arm.</p>
<img src="arm.webp">
<img src="arm.webp" alt="Grey mechanical arm">
<p>I'm not entirely happy with this yet. The general shape of the arm is relatively decent, the hinge looks ok, but I feel it's missing something. I think I want to add LEDs to the arm, which in-game can serve to display Laura's health status (alongside a more clearly legible health UI element).</p>
@@ -117,8 +122,8 @@
<p>To illustrate my point (get it?), here are some pictures. Left is in T-pose, right is in A-pose:</p>
<div class="horizontally-centre-aligned">
<img src="deform-1.webp">
<img src="deform-2.webp">
<img src="deform-1.webp" alt="Diagram showing a t-posing character, with the text 'large angle, thus more deformation'">
<img src="deform-2.webp" alt="Diagram showing an a-posing character, with the text 'smaller angle, thus less deformation'">
</div>
<p>However, after watching <a href="https://youtu.be/FXfc4Gyw6I0">this video on bind poses</a> by Doodley, it seems that... it doesn't really matter. Whether you use the T-pose, the A-pose, the lovingly-called hug-pose, or anything else really depends on what you plan to do with your character. Since Laura will mostly wield guns and keep her arms fairly low for most of the game, I decided to change Laura's modelling pose to an A-pose, with her arms pointed 30 degrees downward.</p>
@@ -138,5 +143,5 @@
<p>For the time being, here's a picture of the soon-to-be-retired current protagonist character. Smoothly shaded for your viewing pleasure.</p>
<img src="retiree.webp">
<img src="retiree.webp" alt="The previous purple protagonist with a shiny body in a seductive pose">
</Content>

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>