badmanners/gallery.badmanners.xyz
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use path aliasing and improve accesibility

Browse source
This commit is contained in:
Bad Manners 2024-09-14 17:51:22 -03:00
parent b464c5e795
commit dadbd32e1b
No known key found for this signature in database
GPG key ID: 8C88292CCB075609
40 changed files with 138 additions and 115 deletions
Download patch file Download diff file Expand all files Collapse all files

34
src/content/blog/crossing-over-postmortem.mdx
View file

@ -23,18 +23,18 @@ relatedGames:
---
import { Image } from "astro:assets";
import imageMarcoConceptArt from "../../assets/images/crossing_over/marco_concept_art.jpg";
import imageMarcoFirstAppearance from "../../assets/images/crossing_over/marco_first_appearance.png";
import imageBardConceptArt from "../../assets/images/crossing_over/bard_concept_art.jpg";
import imageBardAppearance from "../../assets/images/crossing_over/bard.png";
import imageBriefcase from "../../assets/images/crossing_over/briefcase.png";
import imageBoatWakes from "../../assets/images/crossing_over/boat_wakes.png";
import imageLooseThoughts from "../../assets/images/crossing_over/loose_thoughts.png";
import imageArchitectureVn from "../../assets/images/crossing_over/architecture_vn.png";
import imageTextbox from "../../assets/images/crossing_over/textbox.png";
import imageScriptWordCount from "../../assets/images/crossing_over/script_word_count.png";
import imageMarcoSprites from "../../assets/images/crossing_over/marco_sprites.png";
import imageSceneInFinalGame from "../../assets/images/crossing_over/scene_in_final_game.png";
import imageMarcoConceptArt from "@assets/images/crossing_over/marco_concept_art.jpg";
import imageMarcoFirstAppearance from "@assets/images/crossing_over/marco_first_appearance.png";
import imageBardConceptArt from "@assets/images/crossing_over/bard_concept_art.jpg";
import imageBardAppearance from "@assets/images/crossing_over/bard.png";
import imageBriefcase from "@assets/images/crossing_over/briefcase.png";
import imageBoatWakes from "@assets/images/crossing_over/boat_wakes.png";
import imageLooseThoughts from "@assets/images/crossing_over/loose_thoughts.png";
import imageArchitectureVn from "@assets/images/crossing_over/architecture_vn.png";
import imageTextbox from "@assets/images/crossing_over/textbox.png";
import imageScriptWordCount from "@assets/images/crossing_over/script_word_count.png";
import imageMarcoSprites from "@assets/images/crossing_over/marco_sprites.png";
import imageSceneInFinalGame from "@assets/images/crossing_over/scene_in_final_game.png";
A.K.A. that time I made a game in a month.
@ -103,7 +103,7 @@ Speaking of, I did work on some concept art! Including the two characters, the b
<figure>
<Image
src={imageMarcoConceptArt}
alt="Photograph of a page, with several drawings of an anthropomorphic jackal named Marco, wearing a large coat, a mask, and ankle cuffs. There's also a drawing of a boat in the corner."
alt="Photograph of a page, with several drawings of an anthropomorphic jackal named Marco, wearing a large coat, a mask, and ankle cuffs. There's also a drawing of a boat named Akhirah in the corner."
/>
<figcaption class="text-center">
Concept art of Marco and Akhirah. Feel free to judge my awful drawing skills...
@ -123,7 +123,7 @@ Marco's design was mostly inspired by that of [Anubis](https://en.wikipedia.org/
<figure>
<Image
src={imageBardConceptArt}
alt="Photograph of a page, with several drawings of a blobby and oval character named Bard. There are also a few framed drawings of different angles of scenes taking place on a boat."
alt="Photograph of a page, with several drawings of a blobby and oval character named Bard. There are also a few framed drawings of different angles of scenes taking place on Akhirah, in a river inside a cave."
/>
<figcaption class="text-center">
Concept art of Bard and some screens. I don't think his original look is physically possible...
@ -135,7 +135,7 @@ For Bard's design, I had a couple of inspirations – the main one being the vis
<figure>
<Image
src={imageBardAppearance}
alt="A cyan orb, surrounded on the top by an inside-out dark blue oval, and on the bottom by cyan ribbon-like strands."
alt="A glowing cyan orb, surrounded on the top by an inside-out dark blue oval, and on the bottom by cyan ribbon-like strands."
/>
<figcaption class="text-center">Bard's final look.</figcaption>
</figure>
@ -151,7 +151,7 @@ There. Still haven't forgotten how to make some text bigger than other text.
I guess I'll start by talking about something Blender-related that isn't exactly modeling: shading. It simply means selecting the materials for all the different elements – colors, textures, etc. Like I've said back in Part 1, I wanted a pixel art/cellshaded artstyle. And to commit to it even further, I looked for palettes to use for said shading. Limiting the choices helped with making things have a unified identity, as well as stick out from the background and other objects. The surfaces are all made of a similar base material, which creates cells based on the light level and then applies a dithering effect between them (i.e. some pixels of each color blend into each other, between two different cells, as old games with limited palettes did to make smooth transitions). They also had different colors under the two sets of lights: one being "white" for the default look, and the other being "blue" from Bard's glow. This helps with the illusion of the soul actually having its own light. On top of that, I also added an outline to most materials, based off the dark color of the material. This kind of breaks the convention for pixel art, since I'm relying on how Blender generates the alpha for those outlines, but it certainly makes objects much more readable. For each outline, I had to handpick values for the thickness and color – sometimes having to deviate from the palette to do so.
<figure>
<Image src={imageBriefcase} alt="A briefcase filled with gold bars." />
<Image src={imageBriefcase} alt="A leather briefcase filled with gold bars." />
<figcaption class="text-center">
A gold-filled briefcase, one of the many items that you fish in Crossing Over. Notice the dark yellow outline around
the gold bars, and the dark brown one around the light brown bits.
@ -165,7 +165,7 @@ Speaking of, the "wake" effect that you see sometimes while Akhirah is moving (i
<figure>
<Image
src={imageBoatWakes}
alt="Marco sitting down against the railing at the back of his boat, without a mask and keeping his hands underneath a hovering Bard. Behind him are wakes being made by the boat moving over the water."
alt="Marco sitting down against the railing at the back of his boat, without a mask and keeping his hands underneath a hovering Bard. Behind him are wakes, being made by the boat moving over the water."
/>
<figcaption class="text-center">
A late-game shot, displaying multiple light sources and wakes behind the boat.

11
src/content/blog/taken-in-breakdown.mdx
View file

@ -1,5 +1,5 @@
---
title: "Taken In: Story Breakdown!"
title: "Taken In: Story breakdown!"
pubDate: 2024-01-23
isAgeRestricted: true
authors: bad-manners
@ -24,16 +24,21 @@ relatedStories:
- taken-in
---
import NoteTooltip from "../../components/NoteTooltip.astro";
import NoteTooltip from "@components/NoteTooltip.astro";
export let count = 0;
export function resetCount() {
count = 0;
}
export function getCount() {
count += 1;
return count;
}
{resetCount()}
Going over the story and breaking it down was a fun process, all in all. But this was originally a text document, which I had to completely manually refit into this post you're reading (oof...!). Still, for the sake of posteriority, I think it was worth the effort.
If you're up for this non-linear read, then I hope you enjoy this sneak-peek into my thoughts! Just hover or long-press over the links with dotted underlines, and it should show the relevant annotations. Now, without further ado, let me reintroduce...
If you're up for this non-linear read, then I hope you enjoy this sneak-peek into my thoughts! Just hover or long-press over the <span class="text-link underline decoration-dotted" title="Just like that!" data-tooltip>links with dotted underlines</span>, and it should show the relevant annotations. Now, without further ado, let me reintroduce...
<h2>
<NoteTooltip