diff --git a/src/diary/entries/hold/240221 b/src/diary/entries/hold/240221 new file mode 100644 index 0000000..de9e9be --- /dev/null +++ b/src/diary/entries/hold/240221 @@ -0,0 +1,67 @@ + +

making of blessfrey.me

+october 15, 2020
+#bottle #css #html #simpletemplate #webdesign #webdevelopment
+
+Blessfrey.me is a personal website I use to showcase projects and blog my process. It was originally written in PHP, but now it uses Bottle, a Python web framework.
+
+

why not use a premade blogging platform like WordPress?


+Blessfrey.me's needs are fairly simple - some static pages and a blog page. Generalized blogging platforms are overkill for my purposes. I don't need support for multiple authors, comments, localization, e-commerce, and so on. Unused features bog down the website at best and contribute to security vulnerabilities at worst.
+
+Also, it's fun to write my own platform. I'm learning a lot as I take my website from initial sketches, to Hello World, to various prototypes, to something polished enough to show my friends. Regardless, since it can be considered my programming portfolio, it makes sense that it itself should be something I programmed.
+
+

why Bottle?


+I originally wrote Blessfrey.me in PHP. I switched to Bottle after looking for a templating engine. Bottle comes with SimpleTemplate and can do everything PHP can do but faster and with less verbosity. Plus, I get to write in Python, a much more enjoyable language.
+
+

how does blessfrey.me work?


+

SimpleTemplate


+Instead of existing as a static collection of HTML pages on my server, Blessfrey.me's pages are constructed upon request by the website's Bottle script from SimpleTemplate templates.
+
+Every page uses the frame template pictured below, so the basic skeleton is consistent without requiring copy-pasted code. Each page is individualize through bringing in a new template within {{!base}}. (Double curly brackets refer to variables, and exclamation marks disable escaping.)
+
+(image: basic template code.)
+
+(The code can be found on Pastebin.)
+
+The header template below (brought in at % include('header.tpl')) has some variables, too, which are supplied by the Bottle script. If Bottle doesn't provide a title, it defaults to 'blessfrey.me.' Variables can also be used in paths and URLs.
+
+(image: header template code.)
+
+(The code can be found on Pastebin.)
+
+You can insert Python code into the templates for dynamic pages. Below is an excerpt of the template for the diary page. This code fills the page with diary entry previews using a for loop. Not shown is the first line % rebase('frame.tpl'), which tells SimpleTemplate to insert this content at the {{!base}} variable in the frame template.
+
+(image: diary snippet code from diary template.)
+
+(The code can be found on Pastebin.)
+
+The Bottle script sends the max number of snippets per page (the limit) and a list of lists containing all the diary snippets. It receives the page number from the URL. For the snippets that will appear on the given page, it converts the list data into HTML code to be displayed in the browser.
+
+
+

Bottle


+Bottle takes URLs and generates the corresponding web page upon request. Each URL is tied to a method, which returns a template and a dictionary of data to be used in the template. Since Bottle is a Python framework, you have access to all the Python libraries you need.
+
+(image: Bottle script excerpt for diary routes.)
+
+(The code can be found on Pastebin.)
+
+This is what the methods for specific routes look like. So every time you go to Blessfrey.me/diary, one of the above methods is called, depending on whether also you supplied an integer. To generate the page content, it calls a lot of Python functions to find my diary entries, convert them into previews for the snippets section and headlines for the sidebar, and get the current time for the footer.
+
+
+
+

CSS


+The website is styled using CSS, heavily relying on the CSS Grid and a bit of Flexbox. CSS Grids can be used inside CSS Grids, so my pages are generally blocked out, with smaller internal grids managing specific content.
+
+(image: CSS Grid traced over screenshot of projects page.)
+
+
+The projects page is an example of nested grids. Almost every page uses the yellow general layout. The content unique to the projects page is mapped out in green, with a section for the header, featured projects, and other projects. The other projects use a 2-column grid in blue to evenly space out all the little thumbnails.
+
+The CSS code for project's general grid and the nested unfeatured grid are shown below.
+
+(image: projects css code.)
+
+(The code can be found on Pastebin, but you can always see a web page's CSS by right-clicking and viewing the source.)
+
+Last updated June 8, 2021
+
diff --git a/src/diary/entries/hold/240222 b/src/diary/entries/hold/240222 new file mode 100644 index 0000000..0932b9d --- /dev/null +++ b/src/diary/entries/hold/240222 @@ -0,0 +1,70 @@ + +

my first game jam - #weeklygamejam

+september 3, 2020
+#gamejam
+
+WeeklyGameJam is a weekly theme-based game jam hosted through itch.io. It's fairly laid-back for a jam, giving you a full week's time, allowing for premade/stock assets and code, and being understanding towards late submissions. Most people make videogames, but any kind of game is allowed. At the end of the week, streamers will play and critique the submissions while the developers hang out in their chatrooms.
+
+
(image: Key art of Elwell and Small Thing, buried in dogs)

+
+

small thing that makes things

+
+I participated in Week 85 under the theme Offspring, submitting my game on February 27, 2019. My game was Small Thing That Makes Things, an adventure platformer. You can play it on itch.io.
+
+You play as Hamish T. Elwell, the hero accountant of an overcrowded animal shelter, investigating the recent explosion of the local stray population. You can walk, jump on platforms, collect items, and chat with NPCs. There's multiple endings, depending on your choices.
+
+

positives

+
+For a week-made game, I think STTMT is pretty cute, and I'm pretty happy with it.:)
+
+I actually finished a game, and someone actually finished playing it on a stream. That's really cool, even if STTMT isn't all that good. The deadline forced me to make final decisions, complete features, and move on, and there's a lot of value in that.
+
+The short time-frame forced me to get around to every aspect of game development, many of which I had never done before. I had to learn how to export a Godot project, upload an HTML5 game to itch, and make sure the exported game was complete and playable. Lots of the features were first-times for me, too. I've never written code for platformer movements or moving cameras. This also was the first time I've really gotten branching and conditional dialog working in Godot, which was a skill I immediately applied to Blessfrey.
+
+

mistakes

+
+I recolored OPP's pixel art and lost the high contrast for the rock ledges. They blend into the rocky background, so you can't tell you can jump on them. I didn't even notice until Joshua McLean pointed this out during his stream. Having more eyes on your game is so important.
+
+Also the level design is just not interesting. I spent lots of time on the choices and adventure game aspects, while the platforming as an extreme afterthought. It's a game jam, though, what do you expect?
+
+I took the easy way out with animation. I might have learned more working from scratch, but modifying OPP's sprites to suit my character designs was way faster when I was already struggling to finish on time.
+
+

screenshots + progression

+
+ + (image: Elwell and Small Thing in a jumble of dogs) +
+Experimenting with Small Thing's summoning mechanic. In this version, the characters are just blocks with collision that can move around the flat, empty world with WASD.
+

+ + (gif: Elwell rides a broken-physics dog across the valley) +
+The dog spawning physics was (and still is) really broken, so dogs go flying pretty frequently. It was reliable enough in this version to be used as a moving platform.
+

+ + (image: Elwell watches the rainfall of dogs from his window) +
+Dogs rain down upon Elwell's animal shelter in the finished version.
+

+ + (image: Dialog) +
+Dialog between Elwell and his boss.
+
+
+

conclusion

+
+If you're looking for a jam to jump into, WeeklyGameJam is a cute one to try. You aren't too rushed, you get to watch people play your game, you get useful criticism, and the community is pretty chill. The themes are always inspiring, too.<3
+
+

credits

+ +
diff --git a/src/diary/entries/hold/240223 b/src/diary/entries/hold/240223 new file mode 100644 index 0000000..80a183a --- /dev/null +++ b/src/diary/entries/hold/240223 @@ -0,0 +1,49 @@ + +

pretendOS - a game inspired by windows XP

+november 26, 2020
+#sideproject
+
+Getting started with blessfrey's AI was overwhelming, so I took a break and worked on a new game. I didn't get very far. It's not even on my hard drive anymore. It's cute, though.
+
+Unlike blessfrey, where coding takes up 90% of the effort, pretendOS is mostly graphical assets + sounds with barely any functionality. It's a UI game, after all. Since it's a game requiring a completely opposite skill-set, I was able to make progress on something while reading up on game AI. I also got to work on new things like particle effects.
+
+
+

Inspiration

+
+

Windows XP

+The game takes strong aesthetic inspiration from Windows XP and the NDS. It almost fits the 90s vaporwave trend, but I'm too young to really remember Windows 95. I obviously have nostalgia for it as my first operating system (as far as I remember - I was a toddler then), but I mostly knew it as the Lego Island machine propped up in the dining room. As my family upgraded computers over the years, Windows never really impacted me as anything more than something that can run some videogames and whatever popular web browser of the time. That is, until Windows XP.
+
+XP really hooked me. It was the first operating system I spent as much time exploring as I spent using software. XP's edition of Paint was my favorite yet, I loved fiddling with the themes and accessibility options, especially Microsoft Sam, Rover, and Clippy. I started watching YouTube videos on how to use the Command Prompt. XP was just fun to use. I've found better desktop environments and operating systems since, but I never got over that aesthetic: smooth, blended graphics with hard pixel edges in 32-bit color with an alpha channel, right at the cusp between pixel art and vector graphics. Vaporwave for me is Luna olive green, or the "Fisher-Price interface" as Ars Technica users called it.
+
+(image: Wikipedia excerpt: Critics who did not like the theme characterized it as a 'Fisher-Price interface'.)
+(screenshot from Wikipedia - referencing articles from PCWorld and Ars Technica)
+
+
+There were a few other experiences behind the game, too.
+
+

Mother's Day E-Card

+I finally got my husband to try Godot Engine, and he used it to make a digital Mother's Day card for his mom. (Cute.) Opening the card displayed a 3D heart (a "cardioid") that bounced to the beat of a song while 2D cardioid particles rained down. It was all programmatically generated using geometry instead of 3D + 2D assets, so the application was very small. He made the graphics side of things look really interesting, and I wanted to play around with particles, too. Just...not as fancy;;
+
+

Secret Little Haven

+I also just played a cute pretend OS game on itch called Secret Little Haven It's quite short, very story-driven, and kind of buggy, telling Alex's struggle with gender identity through IMs. Honestly, pretend OS games and coming-of-age chat sims are nothing special, but Secret Little Haven's believability makes it really stand out. Instead of defending against cheesy + inaccurate deep web hacking attempts, you use an in-game terminal to get around child locks set by Alex's dad. Those terminal puzzles are the most realistic and relatable hacking I've seen in these games. SLH isn't super sophisticated or in-depth, but it shows how cute and believable a pretend OS game can be. I'd love to make a little environment like that, that's as fun to fiddle around with as XP.
+
+
+

pretendOS

+
+So what's pretendOS? Like I said, not much besides pictures. I only worked on it for a few days.
+
+What really bogged it down was Cat Chat. I wanted an AI chat personality that talked like a cat. I could do that, but that kind of thing takes a lot of time, when this project was really just procrastinating working on AI.
+
+The rest is cute, though. The icon winks when you click it, the cursor's kinda 2000s-free-animated-cursors, and it's got those Fisher-Price colors and bubbly sounds everywhere that I liked as a kid.
+
+
+ + (image: pretend desktop with a Cat Chat application) +
+
+
+
+

the future

+
+It's cute. I'd like it to be finished in some way. I went ahead and cloned my old repo. Maybe I'll fill it out with more applications during a game jam or something or at least finally get that cool Secret Little Haven curved screen shader working.
+
diff --git a/src/diary/entries/hold/240224 b/src/diary/entries/hold/240224 new file mode 100644 index 0000000..70a6565 --- /dev/null +++ b/src/diary/entries/hold/240224 @@ -0,0 +1,43 @@ + +

blessfrey graphic updates + mockups

+december 24, 2020
+#mockups #screenshots
+
+I iterate over the graphics periodically, so I can practice without worrying about polish. Here's some screenshots of different styles I've tried. (Though April 23, 2019's is actually a mockup, that style did run in-engine for a few weeks.)
+
+
+ + (image: Cassia and Bad Cat on the pink carpet tilemap) +
+August 15, 2018 - Early experimenting with Godot Engine. Collision was just added for sprites and walls. The buttons to the right are for switching between characters (who each have different skillbars).
+

+ + (image: Angel in a periwinkle room full of Bad Cats) +
+January 13, 2019 - Videogame perspective is so different from perspective in illustration. Scale of characters vs environment is another quirk of games I had 0 experience with. I was vaguely going for an old Western RPG style with tall, somewhat realistic sprites with non-distinct faces. Something like Divine Divinity.
+

+ + (image: Angel blasting a neighborhood coyote with fire) +
+April 23, 2019 - This is a mockup, but the game did look like this for a while. The fireball projectile didn't come until later, though. Here, I was trying to get a little more of a top-down view but not really. Instead of cats, Angel's fighting with a coyote. The government stopped removing coyotes from my old neighborhood, so they killed all the neighborhood cats except one and I saw him running away from a big coyote during a storm, so maybe he's gone now, too. It's just not right.
+

+ + (image: Angel and Chloe in front of a slanted house) +
+May 25, 2019 - The slanted edition was so annoying. It's not isometric, it's just at an obscure angle because I drew these assets more for fun than to actually be practical. I do reuse the tree + bushes a lot, though. I also tried a more chibi sprite because they are soo common, might as well try it out.
+

+ + (image: Lots of Angels and other characters at a shopping center) +
+June 29, 2019 - Trying a shopping center level now. It's reeally spaced apart. It's inspired by a real shopping center;;
+

+ + (image: Angel and some slimes in a cavern) +
+July 25, 2020 - There's some missing in this gap, so I'll add in more pics if I find any. This is the first version of a cavern level for the blessfrey demo. It's inspired by local caves.
+

+
+

you're up to date.

+
+Hope you enjoyed seeing the different art I've used for blessfrey over the years. Even if I never really polish anything, it's nice to iterate to get a sense of game art and blessfrey's personal style. Hopefully it ends up looking okay okay when I do start polishing. But until then, in the words of YandereDev, "All art is placeholder."
+
diff --git a/src/diary/entries/hold/240225 b/src/diary/entries/hold/240225 new file mode 100644 index 0000000..fd80ed6 --- /dev/null +++ b/src/diary/entries/hold/240225 @@ -0,0 +1,56 @@ + +

a look into an RPG achievement system

+april 2, 2021
+#achievements #knowledgebase
+
+Designing an achievement system without any octopus tangles.
+
+
(image: an illustration of an octopus tangling up UI, Dialog, and other game systems.)

+
+

what does blessfrey consider an achievement?


+
+An achievement is generally an objective used to create a metagame. They can vary in difficulty from an obscure discovery to repetitive use of mechanics to basic participation in the main story. Achievements can even be entirely external to the base game's system like The Stanley Parable's "Go outside" achievement, requiring you to not play for five years. Since achievements can be earned through any in-game system, the achievement system is closely tied to all other game systems.
+
+Completing an achievement usually awards a trophy, gamer points, or possibly something more practical, like a new game mode or an in-game item.
+
+Blessfrey feeds every in-game interaction through its achievement system, and its reward delivery is flexible enough not only to give a trophy but to cause anything to happen in response. Giving a trophy for finding a secret room is technically similar to gaining a Fire Resistance skill after standing on a bed of coals for 2 minutes or opening a new store after $1000 is spent at the mall. The only difference is actually notifying the player that an achievement was completed. Ironically, even though I ignore achievements in most games, Blessfrey's achievement system has become the backbone of player progression and world events.
+
+
+

how to design an achievement system


+
+Octopus-tangling is a major design concern for a system that is so interconnected with every other system. I could scatter achievement code through every other system, but that would be a problem if I ever need to make a fundamental change to the achievement system. Also, it will clutter the other systems if each system has a bunch of achievements tacked onto the bottom.
+
+Instead, Blessfrey's achievement system, the Knowledge Base, looks more like a mailman between game progress and the achievement system. A mailman Each granular action or world event that contributes to earning an achievement is called a piece of knowledge, which is identified by a key id number. Knowledge is categorized into topics. Event handlers subscribe to topics, waiting for news that a specific piece of knowledge has been encountered. The Knowledge Base itself stores all knowledge and facilitates the learning and forgetting of pieces of knowledge. Event handlers subscribed to the "knowledge_learned" topic will pay out awards. The MessageBus is the mailman that receives information about encountered knowledge and passes it off to all event handlers subscribed to that topic. The event handlers allow me to freely make and delete achievements, and the MessageBus keeps everything separate.
+
+
+

an example


+
+Let's say you get an achievement for finding the Nurse's Office. The moment the player loads into the Nurse's Office, data will zip back and forth between the MessageBus and the nurse's office object, different event handlers and the Knowledge Base.
+
+
    +
  1. (Event Handler) At ready, event handlers call the MessageBus and subscribe to topics.
  2. +
  3. (Nurse's Office) The player enters the Nurse's Office. The room object sends itself to the MessageBus.
  4. +
  5. (MessageBus) Receives room object + sends it to all event handlers subscribed to the "place_entered" topic.
  6. +
  7. (Event Handler) NursesOfficeEntered receives room object. If the room is the Nurse's Office, send its corresponding knowledge key to the MessageBus. It can also verify pre-requisites and gather additional data for the Knowledge Base. This way, the system supports anything I'd like to track about when or how knowledge was learned.
  8. +
  9. (MessageBus) Receives the knowledge key + sends it to the Knowledge Base.
  10. +
  11. (Knowledge Base) Finds the knowledge identified by the incoming key. "Learns" by setting that knowledge to true and filling in additional fields if extra data was sent. Sends the knowledge key to the MessageBus.
  12. +
  13. (MessageBus) Receives the knowledge key + sends it to all "learned" event handlers.
  14. +
  15. (Event Handler) KnowledgeLearned receives the knowledge key + calls code for any changes resulting from learning this knowledge. Maybe you'll get a Steam achievement, but if the Knowledge Base was being to facilitate game progression, a quest could update, the dialog system could unlock the option to ask about the Nurse's Office, or you could gain a Codex entry about the new location. The changes can be conditional, too, so the handler can track whether all necessary keys have been received before enacting the change.
  16. +

+
+To use the achievement system for cyclical world events, you could trigger knowledge to be "forgotten" or ultimately set back to false in the Knowledge Base. This way, the phases of an event could begin anew.
+
+
+

summary


+
+Achievements can come from any combination of in-game actions, so an achievement system should be designed separately from the rest of the game. I achieve this through a couple of separate objects.
+
+