New post about RE2 and how great it is

14 files changed, 94 insertions, 5 deletions

diff --git a/.build.yml b/.build.yml
index 5353a85..4e346c5 100644
--- a/.build.yml
+++ b/.build.yml
@@ -11,7 +11,7 @@ sources:
 - https://git.sr.ht/~bt/btxx.org
 tasks:
 - install-gems: |
-    sudo gem install bundler kramdown rss
+    sudo gem install bundler 'kramdown:2.4.0' 'rss:0.3.0'
 - build: |
     cd btxx.org
     sudo make build
diff --git a/header.html b/header.html
index 3415f5c..c09f8e2 100644
--- a/header.html
+++ b/header.html
@@ -7,9 +7,7 @@
 	<link rel="icon" href="data:,">
 	<title>{{TITLE}}</title>
 	<link href="/index.rss" type="application/rss+xml" rel="alternate" title="RSS feed for blog posts" />
-<style>*{box-sizing:border-box;}body{font-family:sans-serif;line-height:1.33;margin:0
-auto;max-width:650px;padding:1rem;}blockquote{border-left:4px
-  solid;padding-left:5px;}img{max-width:100%;}pre{border:1px solid;overflow:auto;padding:5px;}table{text-align:left;width:100%;}.posts,#menu{list-style:none;padding:0;}.posts li{margin-bottom:8px;}.posts li span{display:block;font-size:90%;}#menu li{display:inline-block;margin-right:8px;}.footnotes{font-size:90%;}</style>
+<style>*{box-sizing:border-box;}body{font-family:sans-serif;line-height:1.33;margin:0 auto;max-width:650px;padding:1rem;}blockquote{border-left:4px solid;padding-left:5px;}img{max-width:100%;}pre{border:1px solid;overflow:auto;padding:5px;}table{text-align:left;width:100%;}.posts,#menu{list-style:none;padding:0;}.posts li{margin-bottom:8px;}.posts li span{display:block;font-size:90%;}#menu li{display:inline-block;margin-right:8px;}figcaption{font-size:90%;}.footnotes{font-size:90%;}@font-face{font-family:'Monaspace';src:url('/public/fonts/MonaspaceKrypton-SyntaxHighlighter-Regular.woff2') format('woff2');}code{font-family:"Monaspace",monospace;background-color:#000;color:#f1f1f1;border-radius:.2rem;padding:.1rem;}pre:has(code){border:2px solid #f9f9f9;background-color:#000;color:#f1f1f1;padding:.5rem;border-radius:.5rem;}</style>
 </head>
 
 <nav id="top">
diff --git a/pages/wiki/ps2/networking.md b/pages/wiki/ps2/networking.md
index 28b6850..84e0d0f 100644
--- a/pages/wiki/ps2/networking.md
+++ b/pages/wiki/ps2/networking.md
@@ -10,7 +10,7 @@ In the game settings (depending on the game) change your Primary DNS information
 
 ## Emulator Settings
 
-![Mac OS Settings](https://btxx.org/wiki/ps2/networking/Screenshot_2024-03-20_at_10.49.01__8239__AM.png)
+![Mac OS Settings](/public/images/Screenshot_2024-03-20_at_10.49.01__8239__AM.png)
 
 If you're finding things tricky, [this YouTube video is extremely helpful](https://www.youtube.com/watch?v=9uXjpkBNkCk).
 
diff --git a/posts/useless-key.md b/posts/useless-key.md
new file mode 100644
index 0000000..174b9e0
--- /dev/null
+++ b/posts/useless-key.md
@@ -0,0 +1,91 @@
+# "This Key is Useless Now. Discard?"
+
+2024-08-28
+
+The title of this article probably triggers nostalgic memories for old school Resident Evil veterans like myself. My personal favourite in the series (not that anyone asked) was the original, 1998 version of Resident Evil 2 (RE2). I believe that game stands the test of time and is very close to a masterpiece. The recent remake lost a lot of the charm and nuance that made the original so great, which is why I consistently fire up the PS1 version on my PS2 Slim.
+
+<figure>
+  <img src="/public/images/re2-crt.jpg" alt="A photo of RE2 on my CRT TV, running on PS2">
+  <figcaption>Resident Evil 2 (PS1) running on my PS2, hooked up to my Toshiba CRT TV.</figcaption>
+</figure>
+
+But the point of this post isn't to gush over RE2. Instead I would like to discuss how well RE2 handled its interface and user experience across multiple in-game systems.
+
+## HUD? What HUD?
+
+Just like the first Resident Evil that came before it, RE2 has no in-game HUD (heads-up display) to speak of. It's just your playable character and the environment. No ammo-counters. No health bars. No "quest" markers. Nothing.
+
+<figure>
+  <img src="/public/images/re2-no-hud.jpg" alt="The player character aiming at a zombie in RE2">
+  <figcaption>This is how the game looks while you play. Zero HUD elements.</figcaption>
+</figure>
+
+The game *does* provide you with an inventory system, which holds your core items, weapons and notes you find along your journey. Opening up this sub-menu allows you to heal, reload weapons, combine objects or puzzle items, or read through previously collected documents. Not only is this more immersive (HUDs don't exist for us in the real world, we need to look through our packs as well...) it also gets *out of the way*.
+
+<figure>
+  <img src="/public/images/re2-inventory.png" alt="The main inventory screen in RE2">
+  <figcaption>The main inventory screen. Shows everything you need to know, only when you need it. (I can <i>hear</i> this screenshot...)</figcaption>
+</figure>
+
+I don't need to a visual element in the bottom corner showing me a list of "items" I can cycle through. I don't want an ammo counter cluttering up my screen with information I only need to see in combat or while manually reloading. If those are pieces of information I need, I'll explicitly open and look for it. Don't make assumptions about what is important to me on screen. 
+
+Capcom took this concept of less visual clutter even further in regards to **maps** and the character **health status**.
+
+## Where We're Going, We Don't Need <strike>Roads</strike> Mini-Maps
+
+A great deal of newer games come pre-packaged with a mini-map on the main interface. In certain instances this works just fine, but most are 100% UI clutter. Something to add to the screen. I can only assume some devs believe it is "helpful". Most times it's simply a distraction. Thank goodness most games allow you to disable them.
+
+As for RE2, you collect maps throughout your adventure and, just like most other systems in the game, you need to consciously open the map menu to view them. You know, just like in real life. This creates a higher tension as well, since you need to constantly reference your map (on initial playthroughs) to figure out where the heck to go. You feel the pressure of someone frantically pulling out a physical map and scanning their surroundings. It also helps the player build a mental model in their head, thus providing even more of that sweet, sweet immersion. 
+
+<figure>
+  <img src="/public/images/re2-map.jpg" alt="A map of the police station in RE2">
+  <figcaption>The map of the Raccoon City Police Station.</figcaption>
+</figure>
+
+## No Pain, No Gain
+
+The game doesn't display any health bar or player status information. In order to view your current status (symbolized by "Fine", "Caution" or "Danger") you need to open your inventory screen. From here you can heal yourself (if needed) and see the status type change in real-time.
+
+<figure>
+  <img src="/public/images/re2-health.png" alt="The condition section in RE2 inventory screen showing 'Fine'">
+  <figcaption>The "condition" health status. This is fine.</figcaption>
+</figure>
+
+But that isn't the only way to visually see your current status. 
+
+Here's a scenario: you're traveling down a hallway, turn a corner and run right into the arms of a zombie. She takes a couple good bites out of your neck before you push her aside. You unload some handgun rounds into her and down she goes. As you run over her body she reaches out and chomps on your leg as a final "goodbye". You break free and move along but notice something different in your character's movement - they're holding their stomach and limping.
+
+<figure>
+  <img src="/public/images/re2-injured.jpg" alt="The player character in RE2 holding their stomach because of an injury">
+  <figcaption>Here we can see the character "Hunk" holding his stomach and limping, indicating an injury without the need for a custom HUD element.</figcaption>
+</figure>
+
+If this was your first time playing, most players would instinctively open the inventory menu, where their characters health is displayed, and (in this instance) be greeted with a "Caution" status. This is another example of subtle UX design. I don't need to know the health status of my character until an action is required (in this example: healing). The health system is *out of the way* but not hidden. This keeps the focus on immersion, not baby-sitting the game's interface.
+
+## A Key to Every Lock
+
+Hey! This section is in reference to the title of the article. We made it! 
+
+...But yes, discarding keys in RE2 is a subtle example of *fantastic* user experience. As a player, I know for certain this key is no longer needed. I can safely discard it and free up precious space from my inventory. There is also a sense of accomplishment, a feeling of "I've completed a task" or an internal checkbox being ticked. Progress has been made!
+
+Don't overlook how powerful of a interaction this little text prompt is. Ask any veteran of the series and they will tell you this prompt is almost euphoric.
+
+<figure>
+  <img src="/public/images/re2-discard.png" alt="Text prompt asking to discard the useless key in RE2">
+  <figcaption>The game's prompt asking if you'd like to discard a useless key. Perfection.</figcaption>
+</figure>
+
+## Inspiring Greatness
+
+RE2 is certainly not the first or last game to implement these "minimal" game systems. A more "modern" example is Dead Space (DS), along with its very faithful remake. In DS the character's health is displayed directly on the character model itself, and a similar inventory screen is used to manage items. An ammo-counter is visual but only when the player aims their weapon. Pretty great stuff and another masterpiece of survival horror.
+
+<figure>
+  <img src="/public/images/dead-space.jpg" alt="Screenshot of Dead Space, showing the lack of UI">
+  <figcaption>In Dead Space, the character's health bar is set as part of their spacesuit.</figcaption>
+</figure>
+
+## The Point
+
+I guess my main takeaway is that designers and developers should try their best to keep user experience intuitive. I know that sounds extremely generic but it is a lot more complex than one might think. Try to be *as direct as possible* while remaining subtle. It's a delicate balance but experiences like RE2 show us it is attainable.
+
+I'd love to talk more, but I have another play-through of RE2 to complete...
diff --git a/public/fonts/MonaspaceKrypton-SyntaxHighlighter-Regular.woff2 b/public/fonts/MonaspaceKrypton-SyntaxHighlighter-Regular.woff2
new file mode 100644
index 0000000..6b94a21
--- /dev/null
+++ b/public/fonts/MonaspaceKrypton-SyntaxHighlighter-Regular.woff2
diff --git a/public/images/Screenshot_2024-03-20_at_10.49.01__8239__AM.png b/public/images/Screenshot_2024-03-20_at_10.49.01__8239__AM.png
new file mode 100644
index 0000000..881cb67
--- /dev/null
+++ b/public/images/Screenshot_2024-03-20_at_10.49.01__8239__AM.png
diff --git a/public/images/dead-space.jpg b/public/images/dead-space.jpg
new file mode 100644
index 0000000..ecd9daa
--- /dev/null
+++ b/public/images/dead-space.jpg
diff --git a/public/images/re2-crt.jpg b/public/images/re2-crt.jpg
new file mode 100644
index 0000000..0e4c411
--- /dev/null
+++ b/public/images/re2-crt.jpg
diff --git a/public/images/re2-discard.png b/public/images/re2-discard.png
new file mode 100644
index 0000000..f953e57
--- /dev/null
+++ b/public/images/re2-discard.png
diff --git a/public/images/re2-health.png b/public/images/re2-health.png
new file mode 100644
index 0000000..635fffb
--- /dev/null
+++ b/public/images/re2-health.png
diff --git a/public/images/re2-injured.jpg b/public/images/re2-injured.jpg
new file mode 100644
index 0000000..1157a1d
--- /dev/null
+++ b/public/images/re2-injured.jpg
diff --git a/public/images/re2-inventory.png b/public/images/re2-inventory.png
new file mode 100644
index 0000000..eb0a51c
--- /dev/null
+++ b/public/images/re2-inventory.png
diff --git a/public/images/re2-map.jpg b/public/images/re2-map.jpg
new file mode 100644
index 0000000..9add8aa
--- /dev/null
+++ b/public/images/re2-map.jpg
diff --git a/public/images/re2-no-hud.jpg b/public/images/re2-no-hud.jpg
new file mode 100644
index 0000000..c55890a
--- /dev/null
+++ b/public/images/re2-no-hud.jpg