Jonas blog

Chasing the Sun

Jonas Liljegren — Sat, 31 May 2025 05:13:58 GMT

Since every other lyrics page on the web has it wrong, here is the lyrics of Chasing the Sun by Pia from Magical Eclipse (1999):

(Instrumental Intro with vocalizations)

Dancing footprints in soft sand
Counting prayers with right hand
Sacred waters waist deep
Closing eyes, facing East
Ever since we began
Birth of the spirit, chasing the sun

Surya Narayana
You've been sleeping so long
Come chase the sun
Now

(Instrumental/Vocalise Break - "Om" like sounds)

Angels close their eyes and breathe
Colors sound like harmonies
Secret words bestowed on dreams
Full of love that's free from lust
Teachings, yes, their whole life long
Open our hearts, chasing the sun
Come chase the sun

Surya Narayana
You've been sleeping so long
Come chase the sun
Now

(Vocalise Break - "Om" sounds)

(Sanskrit Chant - transliteration of what is sung)
Ārtaveno ninādatasya taimūrtirmahiyatehi
Smaranti prāviveśuśca mukhañcāni sayaṁ bhuvaḥ
Gāyatrīṁ gāyatastasmat ādhikātyāt sarojajaḥ
Saṁskṛścāpi dvijāgurunāṁ dvijatāṁ agamat tadā

(Instrumental section with vocalizations builds)

Soaring hearts with abandoned force
Perfect words with perfect tunes
Sparkling answers around us all
Illumination serves the soul
Soul, you'll know what's to be done
Filled with love, go chasing the sun
Chase the sun

Surya Narayana
You've been sleeping so long
Come, chase the sun
Oh, the fading sun
The stars will be weaving
The darkening sky

(Outro with fading vocalizations and instrumental)

Implementing the latest web technologies in a fast and flexible search component

Jonas Liljegren — Sun, 24 Mar 2024 05:35:00 GMT

The goal is to have something that can be integrated in any framework of styling and DOM manipulation, while keeping it simple with few abstractions. I’m using existing and upcoming technologies of the web platform to keep things readable, easy to change and extend. The combination of several async flows together with animations and differing browser capabilities makes this non-trivial. Rather than abandoning things that didn’t work out, I kept at it to find the most elegant solution. You can see the result here and on wiki.para.se and check out the code directly in the browser DevTools and on aigan/jl-search.

See my article about modern web development for why bundling is no longer needed. Features used include ES 2022 syntax (2021), cascading css variables (2020), color mixing with oklch (2023-05), mobile keyboard handling with beforeinput (2021), custom elements with optional shadowdom (2020). I’m also using the popover api (2024-05), anchor positioning api (TBA), view transitions api (TBA), the navigation api (TBA) and more. For compatibility with older browsers, these are handled with polyfills or graceful degradation. Dates are for when it was added to all three major engines. Mozilla is often the last and has trouble keeping up. The anchor positioning api is not finalized and is only available behind a flag in Chromium.

Wikipedia database

In order to have a good demonstration of something to search for, I downloaded some of the wikipedia SQL database dumps. No point in having a client-server search widget if all of the options can be downloaded before the user starts typing. The tables were adjusted for quick prefix search results, which took a lot of work. The default table was actually not stored as unicode, but binary. So I converted them to utf8mb4 and indexed them with Swedish collation. Even that was not quite quick enough for retrieving the total number of search results for the first letter, so I added an additional table for the most common prefixes. The complete source code along with notes of the changes made to the tables can be seen in searches.mjs on github. The total number of search results along with retrieval time is displayed at the bottom of the options list in the demo.

INSERT IGNORE INTO prefix_counts (prefix, row_count)
SELECT DISTINCT 
    UPPER(LEFT(title_se, 2) COLLATE utf8mb4_swedish_ci ) AS prefix,
    COUNT(*) AS row_count
FROM page 
GROUP BY UPPER(LEFT(title_se, 2) COLLATE utf8mb4_swedish_ci );

The Wikipedia dumps are quite large so I created a dedicated Xen virtual debian server for the database to limit the impact on other servers. After all the work of transforming and indexing, the actual use of the table doesn't require much memory or CPU. This dump is from January 1st 2024.

Async results

I could have downloaded even more of wikipedia in order to also return the images and description, but the official wikipedia api turned out to be fast enough to fill out the details of the search results, and it also gave the opportunity to showcase async processes where parts of the search result is filled in when the additional information is finished loading, at the same time as new search results are coming in while the user is typing. I also gave the option to animate the options row, meaning that several rows may be animating out while new rows are added. And all this while taking care of jitter in the search responses.

It’s often the case that a backend server handling the incremental search will return results out of order. Searching for s will be slower than searching for spock. I added a Slow down option to increase this effect. The demo has an option to simulate slower server response, that will on purpose send back results in the wrong order just to make sure that it will not mess up the presentation.

The on_result() handles the jitter by checking if (res.req < $el._data.received.req). But the same goes for the whole process. Retrieved data will be prepared and then rendered. Here I’m assuming that searching and preparing is async while the rendering is done sync, based on the latest prepared data. Thus, the state exists in three versions as received, prepared and rendered. I will not cancel or ignore results from older queries since they will come in useful if the user backspace characters. If necessary, the req_id could be sent to the server that could use it to cancel ongoing searches if a later req_id comes in from the same client.

Autocomplete

How do I implement inline suggestion? With autocomplete, I’m referring to how the first search result is inserted in the input field, but selected so that you can continue to type and ignore the suggested completion. You may accept the suggestion by using the right arrow, jumping to the end of the text and de-selecting the text, or by pressing enter, which will submit the search with the suggested text. You can also step between the entries in the dropdown by using the up or down arrow keys. Using the backspace key will first remove the suggestion and after that delete characters as usual. You may also use the esc key to back out of the search field. First esc closes the options list, second selects all the text and the third will revert/remove the text.

Have you noticed how the google.com search field no longer uses autocomplete? The Chrome new tab Google search field and the URL field have the capability, but not the actual webpage version. This type of autocomplete is not compatible with how mobile virtual keyboards function. The virtual keyboard will update the input field through autocorrects by selecting text to be replaced and then replace it with the new string.

If you for example try to type bold but the keyboard autocorrects it to books, you can tap the correct word on the keyboard. The phone will first get the current value of the field, and then send a selection event selecting ld, followed by an insertReplacementText event with oks. Since these events are async, it is very possible that you may have changed either the selection, the text or both in the field in between the virtual keyboard doing its own selection and replacement. This also works differently on desktop, phone and differs between the different browser vendors and versions. Chrome has for example completely stopped sending letter information in keydown events. In order to make this type of autocomplete work you would have to completely take over the update of the field, by parsing the beforeinput events. On top of that, It’s really not a good option to try to detect if a phone is used. There are other types of virtual keyboards that could possibly be used with the desktop browser version. As far as I know, there is no right way to know if the keyboard is going to send auto-of-sync events. Even so, I did some things to make the autocomplete work pretty good. And I have more things I can do to make it 100% solid if needed.

Flexible style

The style for the search component is placed in a separate file in order to make it easier to change or completely replace, using any other type of design system. The main demo is using the traditional light dom, making the search component part of the main style. I also have one demo that encapsulates the component in shadow and another one that uses it from inside a Lit element. The component will work both with and without shadowdom, and the demo that uses shadowdom transform the main jl-search.css while loading it, converting the jl-search selectors to :host() selectors.

Since we are using semantic markup, there is less visual noise. The expected tags are:

for the part of the component that will popup and may also move in the viewport as is the case for mobile devices.
, that will serve as the input group and can hold more prefix and suffix icons. The dictionary icon was added for the demo.
, as the main field where the user will type.
is used for conveying the state, such as loading or error, and also used for expanding or collapsing the options list.
, is the container for the search result and will be the part that expands or contracts.
, placed in nav is a concession for handling sizing and animation of the options list. Ideally it would not be needed.
- is intended for user feedback, such as instructions, validation messages, error messages and the like.
In the default style, I’m also using
tags for separating the list from the input field and footer.

CSS variables

How do I make the hover color relative the existing color? For making the component theming flexible I used css variables with default fallbacks. As a naming convention I’m using underscore prefixes for the internal variables. For example, --_padding is initialized based on --padding, with a default fallback value. This makes it easy to style the component with jl-search { --padding: .75rem } but the value can still be used internally without having to provide a default everywhere it’s used. The outline can be a combination of theme, the state such as valid, invalid input, focus, disabled, hover and active.
```
main {
  --_outline-color: var(--_outline-base-color);
  --_outline-width: var(--_border-width);
  outline: solid var(--_outline-width) var(--_outline-color);
}

main:focus-within {
  --_outline-base-color: var(--_focus-color);
  --_outline-width: var(--_border-width-focus);
}

main:active {
  --_outline-base-color: var(--_active-color);
}

main:hover {
  --_outline-color:
    color-mix(in oklch, var(--_outline-base-color) 
    var(--_hover-brightness), black);
}
```
Material design v3 color system and OKLCH

To showcase the dynamic theme capability, I implemented the Material Design version 3 color system, but with the OKLCH color space that supports colors way beyond the RGB, P3 and even REC.2020 color gamut. The OK variant is adjusted for the human perception such that color-mixing will match up with human expectation of color blending and lightness. But the current browser implementation in mozilla and chromium has a bug where chroma beyond the monitor capability will be mapped to the closest available color even if it’s another hue, making darker shades of yellow turn out green. I submitted a bug report along with a demo.

Here is the full color palette of my Material 3 implementation. One part of the palette involves rotating the hue for a matching complementary color. Support for doing that type of color calculation within css is limited. Chromium supports css @proprty declarations while Mozilla supports math functions like mod(). I constructed the css so that it will work on both. Safari can do it either way. I found the solution at css-tricks.

Material symbols font

The demo is using icons from the google fonts material symbols, but those are optional and the main library defaults to unicode icons. The font is currently the thing that slows down the demo most. But they also serve as an opportunity to show how external resources can be loaded async without holding up the first paint. You can slow down cpu and network in the browser devtools to see the loading slowed down. The indirection of loading a css from google fonts that in turns load the actual font not only slows things down, but also makes the promise a two step process. First load the style, waiting on the load event, and then using the document.fonts.load promise. The material symbols font is using ligatures which leads to simpler code and good accessibility fallback, but are awful if rendered before the font is ready. A user-select: none will help with the unintuitive behavior during text selection. The font is easy to work with since all the symbols have the same size.

Animations

The component is using a mix of animation techniques. On top of the css transition and keyframe animations, it also uses web animations api, view transition api and direct use of requestAnimationFrame. All of these are orchestrated with async events that may start, stop or reverse additional animations. For mobile viewports, there is a chained animation that will first finish loading the popover polyfill if needed, then activating the popover, doing a view transition to the top of the viewport, followed by animating the expansion of the options list. There are also fallbacks for the options to not use animations, so that promises don’t get stuck waiting for the next step. It would be faster to use scaleY for opening the dropdown, but that looks ugly. The current animation is possibly a bit heavy, but using contain: content helped a bit. Also take a look at the flash animation for validated selections and the shake animation for invalid selections.

ViewTransition API

The ViewTransition api allows for smooth transitions of elements both inside a SPA and between pages. It can handle fadeouts of elements removed from the dom, or movement and resizing of elements even if they are rendered as different elements in different parts of the tree. This allows for hero animations. I’m using this for the images in my blog, but that capability is still behind the #view-transition-on-navigation flag in chromium, since it’s for transition between page loads. In the component, I’m using it for moving the input to the top on smaller (mobile) viewports. This allows for easy movement animation even when it's the result of something that usually isn’t possible to transition. In this case, changing the position from static to fixed. You can use the chrome devtools animations tool to slow down the animation to see how it handles the transition by stretching and fading between the start and end state.

The view-transitions operate on the document root, so there needs to be some coordination while doing it. It also pauses all pointer events, which can cause problems when a click will start a transition with the default .5s duration causing the click on other parts of the viewport to fall through to the document root. This is not a problem in the demo since I only do the transition if actually needed, and also removes the default animation-duration. But for handling those more unusual situations, I record the clicks happening during the transition and play them back afterwards.

Popover API

Many new web platform APIs introduce new capabilities that do things that can’t be fully polyfilled. Without these, you would often have limitations on what can be done within a single web page. All the components have to be orchestrated together to not step on each other's toes. The popover API solves a couple of those problems where different parts of the page compete for the top position. A common solution is to put the component last in the main body and give it a high z-index. Another solution that I have previously used is to create a ensure_ontop() method that will go up the tree and give each parent a z-index higher than its siblings. That will make sure that the component still inherits all the styles. Things like Tailwind that give up on the whole idea of the cascading part of styles has probably increased in popularity because of the problems of having to move components around to handle positioning, rendering and animation. But the popover and positioning apis solves a lot of this by introducing the top layer stacking context, also used by
. Now you can use menus, dropdowns, tooltips, popups and the like without having to do extra work so make it actually appear above everything else.

Error handling

Errors can occur even in a completely bugfree application, due to variations in internet connectivity, browser plugins, memory exhaustion and other exceptions. But it’s usually good to also handle bugs gracefully. Especially in a larger application with components loading in on demand and updating independently. This component will handle errors both from search, result processing and rendering, including plain syntax errors. For a production environment, there should be a telemetry set up by listening on the global error and unhandledrejection events. But I would still show unresolved issues to the end user, making it possible for power-users to work around any issues.

You may check out an example of an error presentation by entering trigger error for a server side error or i am lying for a client side error. (Because Kirk proved thet you can make any computer explode by giving it a paradox.)

Reactive state (Signals)

The component doesn’t use reactive state. That means that functions using specific properties must be called when any of their dependencies updates. For larger projects, I would prefer to use reactive programming, where dependent functions will be repeated when any of their dependencies are updated, even if its indirect dependencies, like in a spreadsheets application.

Signals is currently in the process of becoming a javascript standard, in collaboration with authors of many of the largest frameworks. I mostly know of the design pattern as presented by MobX, but many other frameworks and libraries are using similar patterns for their state management.

I have done extensive work on multi-user client-server reactive state on semantic graphs using the Causality library (similar to MobX), and that was the base implementation that inspired this limited widget.

ChatGPT

ChatGPT 4 has been a useful companion while writing this component. But not for actual code. It has been all too happy to output code examples, but I don’t think it has produced a single line of usable code. Probably trained on Stack Overflow, it usually produces code for ancient browsers, excessive verbosity, hallucinated APIs and so on. But it works well as a Rubber duck for thinking through problems. It’s good for brainstorming, familiarizing myself with new things and finding gaps in my knowledge. Also good for looking up API for specific use cases and sometimes to get stubs for new functionality. I also often use if to get an overview of terms and naming conventions used in different design patterns. Just don’t believe anything it says because it will often validate your approach and totally ignore the much better option.

jl-search.mjs

[[https://www.facebook.com/aigan/posts/10159872220392393]]
[[https://www.linkedin.com/pulse/implementing-latest-web-technologies-fast-flexible-search-liljegren-00ygf]]
[[https://twitter.com/aigan/status/1772409188854989006]]

Everything wrong with hand-written narrative

Jonas Liljegren — Sun, 04 Feb 2024 19:11:19 GMT

This is part of the series about my design for a Systemic story game. See the Promise of Adventure for how hand-written narrative limits player freedom. This part covers everything else.

The Narrative is how the story is presented as a series of plot events. For games, this includes how the player experiences and interacts with the story through the game. The creators of the game construct a story with a scenario consisting of places, factions, characters, relationships and so on. The player then experiences this story through the narrative. But the term Narrative is also often used to signal that the story is an important part of the game, to the degree that the game is the story rather than having a story.

I have chosen to use the term hand-written instead of authored or scripted, for making it clear that it’s about the game designer creating a tree of narrative events with details such as dialogue lines and quest logs. There could still be some scripts with a Systemic Story and the story could still be authored even if each narrative step is systemic.

The positives are obvious for those of us who want to play the story. The cost is all the work that has to go in to cover all the combination of choices that comes from the player. Even more so when the game has higher fidelity with motion-capture and recorded voice lines.

Open-world

Almost no games are completely linear or branching. The now common story-based open-world action-adventure game has a mix of components used to enhance the gameplay. There is often a lot of optional content that can be experienced in any order. Fragments of backstory are often spread throughout the world in the form of audio logs or the like. The game is often divided in stages where the player gets access to more and more of the world as the story progresses.

Even if individual quests are linear, they may differ depending on the order they are completed. There may be an additional voiceline acknowledging something that happened before, depending on character progression or world state. Individual quests are designed to only have limited influence on other quests in order to keep the number of permutations manageable.

The narrative structure is often what can be described as beads-on-a-string or diamond shape, where any branches in the narrative goes back to the same place at the end of the quest or level. The game remembers that the quest has been completed. You may have gotten a new object during the quest that can be used in other places. Your actions may have contributed to a change in faction or NPC reputation. Some choices in dialogue are just for expressing personality and will have no influence on the future. Other choices are just for getting additional information or optional backstory.

Even with all the tricks to keep quests isolated, there are usually lots of situations where NPCs should have a reaction that's missing, or the player should have an option. Some games give you the freedom to kill anybody, but it's too much work to make the world actually respond to it. The NPC will say something like

— I can’t believe you just murdered my friend! … Anyway, what did you want to buy?

Sandbox

A sandbox game has repeatable activities that encourage experimentation. Open-world games are often also sandbox games, but the sandbox part is independent from all the hand-written quests. There may be a gang of bandits that you encounter on your quest while traveling from point A to B. But if you would encounter those same bandits outside of the quest, it's something that is independent of the quests. The experimentation is something you get from the tactical and exploratory freedom. It’s an effect of the Systemic Environment.

A sandbox game can facilitate emergent narrative, where the player's interaction with a systemic environment is experienced as a story. It can for example involve mistakes that get compounded by other factors, the player barely survives, sets out to recover, and re-establish control by revenge on the initial perpetrators. This will often be enhanced by the presence of NPCs that the player tries to help. The random events and limited details that give room for imagination helps the player to create the narrative through apophenia.

Lots of games are using procedurally generated places, characters and loot. But some games also have random repeatable procedurally generated events and quests. An example of a procedural event is a person running from bandits in a way that the person runs right in front of the player. A procedural quest can be an NPC that asks the player to do a specific task in a specific place with a specific enemy, selected from a template and based on the level of the player, their playstyle and what parts of the world they haven’t yet visited.

Systemic

Systemic Story is different from branching, emergent or procedural narrative. A lot of games have developed a Systemic Environment that gives the player tactical freedom. Let's make the story systemic in a similar way. Doing that means that all parts of the story have to be encoded as interactive systems. In order to have a satisfactory overarching main story, we need a top-down approach. The story is continuously adapted as a possibility-space using rules of story structure and theme.

Think of the story as a table-top D&D module. A new story may require a couple of new systems that fit the featured themes and dynamics. The locations, characters and scenarios are described. There are inciting incidents and some extra care for expected events that can come up on the way to the final resolution. There are a lot of techniques that can guide the player back to the content of the story, but the player is free to turn around and do something that's not at all covered by the module.

The story will be a mix of authored content adapted to the player choices and backed up by systems and generated content. It’s not a traditional procedural generation or simulation, but rather a type of top-down constraint-based generation based on story-structure, theme and tone. More of that in other parts of this series.

There will probably be a temptation to mix traditional hand-written dialogue with systemic dialogue. Some games have used generated content in side activities alongside the hand-written quests and main story. But I think that would lead to inconsistencies in what you can do in the world and how the world would react. It would also lead to inconsistencies in the NPC interactions. I would rather see a refinement of the systems needed than a continuation of this type of compromise.

Finite content

A common thing with hand-written narrative is the desire to experience all the content and achieve the best or intended version of the story. You go through all the available options not because that's what you would want to do as your character, but because you don't want to miss anything important or good. It becomes a game about sweeping through the locations, objects and dialogue choices. You become more focused on what's left in order to cover everything rather than the actual content of the story and dialogue.

The game will help you out with markers on the map and quest logs listing everything left to do. All these directions take away from the player's autonomy of deciding on their own path. Some players want the directions so they can get to the good stuff. Others just want to reach 100% completion. And yet others want to do whatever is needed to level up.

A Systemic story game will not have hand-written dialogue options, so it’s not possible to exhaust the dialogue. But it will be very possible to exhaust the NPC patience with you for pestering them with every little detail. Locations may be moved around, altered or generated from scratch to fit the need of the story, all within the limitation of what has already been revealed by clues and NPC dialogue. You can get hints and direction by asking people rather than some omniscient quest log.

Guessing game

What do the game want you to do now? Watch someone that has never played a game and you will see how much of what we do in games is based on video-game logic that often makes no sense. Experience will make you better at figuring out what you the game creators probably intended for you to do in each specific situation.

Getting stuck in adventure games can suck. There are often a lot of places, people and things in the game that could potentially help. But mostly everything is just part of the background graphics and has no interactivity. Most people in the game have nothing to say about the things I would like to do and I can't use the things I have found in the way I would like.

Total freedom does not exist either in life or in games. But there is a big difference between hand-written and systemic solutions. Systems are something you can learn and trust to behave consistently. It will not be some type of one-off thing where the author decided to give a specific object some property just for a specific puzzle or part of the story.

Story triggers

Story games will often have some stuff to collect while traversing through the levels. It can be story fragments, crafting materials, ammunition, powerups, money and so on. That is something that is rather specific for games and is usually not seen in movies or books. (I would hope that an adventure game could be good enough to not need all that bling.)

Action-adventure games usually have scripted events that advance the narrative. Combine that with collectibles and you will have constant anxiety about accidentally triggering the next cutscene before you had time to finish searching the level for everything of value.

Finding the good ending

There are more reasons to provide choice than just the sense of freedom. Alternate endings have the potential to make the story work better for more people, where the different branches can suit different types of player personalities. The game should lead the player to what is the best completion of their individual story. Best as in the best story experience, not necessarily happy. It should complete the arc.

But then there is the point of games as providing a challenge, as opposed to toys or interactive experiences. The possibility of failure will contribute to the feelings of meaning and accomplishment. The perils of the adventure gives excitement. What is the point of choosing if you can’t choose poorly?

One common way of handling failure in games is to stop and rewind to an earlier point to let the player try again. Another way common in adventure games is to not let the player do anything that will get them killed or stuck. Just say that the thing they try doesn’t work and let them try something else. Non-lethal failure can be as easy as failing a jump, getting up, going back and trying again.

But then you have narrative games with bad endings. The player may not even realize that there is another ending they would enjoy much more. Getting the better ending may require going back hundreds of hours of gameplay. It's a good thing that choices can have big consequences hundreds of hours later. Sad endings can be good. But this type of massively delayed failure feedback has problems.

Some people have choice anxiety to the degree that they prefer a completely linear narrative. Choice games should have accessibility options that clearly mark up or block choices that will lead to bad things. Especially in regards to characters in the game that you may care about.

Players should also be able to fix mistakes without reloading. Did you say something that angered the NPC? Let's just talk about it. Did this person tragically die? Oh no, she is still barely alive. Let's heal her. Did we lose this very important quest item? Let's find something else that will work. A systemic game can provide much more options than would be reasonable to handle in a hand-written narrative.

Having ways to fix mistakes will not negate the challenge. It will just provide a much better alternative to just reloading a previous save. Fixing mistakes is what makes up the bulk of many classic adventures. You want mistakes. But they should come from the player and not from scripted events.

Failing a combat challenge could lead to mocking, escape, injury, capture, last-minute rescue or something else. There are so many more options than just death and rewind. What happens in a Systemic story game will depend on what would make sense for that part of the story and the relationship with the enemy.

A Systemic story game can also provide much more customization options. You can adjust the level of danger, brutality, stress, complexity, sorrow, uncertainty and so on. The same game can be kind and nice for some players while grueling hard for others, depending on their preferences.

Lacking reactivity

NPCs should react to things that's happening. The NPC in Horizon Zero Dawn comments on the outfit I'm wearing. But that's almost only for the systemic barks. The scripted authored dialogues don't mention what I'm wearing. No mention if I'm badly hurt and need medical attention. No mention of if I'm soaking wet from a swim. No mention of if I'm carrying around loads of heavy things. No mention if someone was just killed a few feet away. Some dialogues (in some games) refer to the world state or faction reputation. But most of this is done by brute force or by sticking in additional voice lines in certain places. But there are lots of games where the lines don't match with the situation. There are too many voice lines that just seem to be random picks from lists. Sometimes it feels like almost everything NPCs say is nonsense. Like they come out from combat and then randomly say something about being bored.

I would like to talk to random people. Not just trigger a voice line. I might want to ask for directions, ask for help about something or help with stuff. There are many games where you see people clearly needing help but have no way to actually help them. I might have lots of money and several magical healing potions that can revive me from the brink of death but I can't decide to help them with it?

I would like to be able to come back to people I previously helped. Most games have the NPC just forget you after the quest is complete. Or they have a set of static voice lines that may depend on the quest outcome. But I want to continue helping them or just see how it goes for them or talk about other things. Or I would like to ask for help with something.

Some games have companions and some of them have lots of situation-specific reactions. That's nice as long as it lasts. But it is usually related to authored quests or combat or basic world exploration. If I would like to ask a companion to come with me because I would like to show them a large tree I found, they would probably have no authored reactions for that specific thing.

I recently played a game where my choice changed the stance to a specific faction. Suddenly I had an entire planet against me. No regard for how they would even know about the change of status. How did they know what I did? What do they think about me? And why can we not deescalate the situation? If I see a bandit, I would like to have choices other than combat. Bargain, deception, bribes or maybe talk about their situation and find other solutions. Maybe I could help them with something?

Traditional systems for NPC reactions and barks are too limited and take too much manual work. It's not that I would not like the traditionally crafted game. It's that it can't handle the combinatorial explosion of possibilities and the volume of an open world like Witcher.

Conclusion

A Systemic Story game can lead to experiences much better than anything in existence today, because it can adapt to the individual player. The realization will be gradual and take many iterations before they will surpass the fidelity of current AAA story-based games. But I hope I showed that it will be worth the effort. More to come.

[[ https://www.facebook.com/aigan/posts/10159802548477393 ]]
[[ https://twitter.com/aigan/status/1754418269568561154 ]]
[[https://www.gamedev.net/forums/topic/715957-everything-wrong-with-hand-written-narrative/]]

The Promise of Adventure

Jonas Liljegren — Sat, 03 Feb 2024 12:51:42 GMT

Imagine a game where you inhabit a living breathing world with the freedom to go anywhere you want. Find your own unique solutions to the problems you encounter. Befriend any NPC on your way and form lasting relationships.

This is part of the series about my design for a Systemic story game. This part and Everything wrong about hand-written narrative compares systemic with hand-written narrative. Other parts will go into details of how to make this “impossible” dream possible. (And that is without any need for advanced AI.)

A Story-driven game has events throughout the game that contribute to the beginning, middle and end of the story, through dialogue and world interactions that advances the plot. Those games can be classical RPGs, text adventures, action-adventures or anything else with an unfolding story.

There is a sort of common wisdom in game development that player freedom has to be sacrificed in order to create a more emotional meaningful story experience. That is why the emotional story parts often are created with hand-written narrative and cutscenes. Rather than compromise, I believe we can have both the sandbox gameplay together with the top-quality story.

Who cares about game stories?

There are many factors that make it hard to clearly know just how many people enjoy story-based games, regardless of the type of game they spend most of their time with. Among everyone who plays games, a large amount of playtime is spent in multi-player games where the focus is on the social aspects rather than the story. There are also a lot of people who play multiplayer games as if they were single-player. There are also some players who focus on the story in social multiplayer games. The statistics for the most played games will give the wrong impression since story-based games have a limited playtime. The multiplayer games have a longer total play-time and often a larger player-base since many of them are free to play. Among the most played games on Steam only 8% was primarily single-player games.

One source from Statista from 2022 says that half of PC and console gamers spent most of their time playing alone. When I last looked at Steam charts two thirds of the most played single-player games were story-based. There is also a smaller portion that plays story-based games but ignores the story and will skip cutscenes even on a first playthrough. That totals to about 33% that enjoys the story of story-based games.

We can broadly divide story-driven games into linear and branching games. I’m using branching here in the sense that the player will be locked out of narrative content based on choices in the game. Based on partial statistics from Quantic Foundry, there is about 35% who prefer the linear story, 50% who like the branching story and 15% who have no preference.

I don’t have data for the overlap of branching preference with story-preference, but I estimate it to be about 20% that would prefer non-linear story-driven games. This is all very approximate. The point is that even if most people may not see the draw of freedom of choice, there are a portion of gamers who do.

As to the type of player, it's related to the Bartle Explorer, the Quantic Bard, the Big Five Open or the Hexad Free Spirit.

Single-player

Story-driven games are easier to do as a single-player game. Places and events are put together specifically for the experience of the player. Introducing more people will severely restrict the experience. The story beat that will work for player 1 may not fit with player 2.

A tabletop roleplaying game master will adapt places, people and events for the choices of the group. That will still work for co-operative games, but not so much for competing players. Many MMO games have solved this problem by creating instances, where each group will get its own version of a place not touched by the actions of other groups. The same goes for quests where the same quest will be available for each player or each group.

The introduction of multiple players will also limit the use of time, as for fast-forwarding all boring parts or even going back in time if you want to try something different. You would also have to handle what happens when the player is off-line, among many other things that come with a multiplayer game.

The type of Systemic story game I’m propagating for will not use instanced locations or quests. It can be made to work for multiple players or even massively multiplayer, but it will make the implementation much harder and limit the possibilities to optimally shape the story to each single player.

Immersion

Being immersed is the feeling of being present in the game world. It will evoke the emotions of real life. For me, it can have an effect similar to a lucid dream, flying through the land. You are transported and absorbed and lose awareness of the before. This can be a partial or complete experience. Absorption is a normal psychological trait related to dreamers, dissociation, meditation, suggestibility, flow and the like.

Immersion can take place with any media, such as daydreams, verbal storytelling, books or movies. The feeling of immersion is not conditional on advanced graphics. Computer games have had the potential of being immersive since the beginning. But there is an aspect of hedonic adaptation in the works. The first time you see something in a game that reminds you of your world experience, it will help your immersion. After a while you may get used to the experience and automatically classify your sensations as coming from the game, thus lessening the experience. I think this may be a factor of the never-ending drive to increase graphical fidelity in games.

Animations that look natural can help immersion, even if it's just a few pixels as with Choplifter on C64. But you will also have to look past the things in the game that aren't immersive. The ability to do that will depend on individual differences in the ability to be absorbed, the level of engagement and personal tastes or beliefs that have to be willingly suspended. Unexpected sensations that don't remind you of your world have the risk of breaking the immersion.

There are many things games can do to facilitate immersion, like idle animations, ambient sounds, trees blowing in the wind and so on. The environment can be painted with words or even suggested by established icons. I love the immersion of moving through 3D worlds in 1st or 3rd person perspective.

Freedom

Freedom can make the game more interesting and is a way to improve immersion. Based on a reddit article, I’m going to cover freedom under the topics of mechanics, traversal and story. These correspond to the concepts of Volition, Autonomy and Agency. Most discussions about freedom in games usually refer to just one or two of these.

Mechanics

The mechanics connect you to the world. The responsiveness of the control will let you embody your avatar. The world should react to everything you do. The ability to touch the grass, move objects and leave your mark will enhance the immersion.

Volition is your ability to act according to your will. Anything that temporarily blocks your actions will diminish your volition. For example, if a door can’t be opened because of a scripted quest that requires you to do something else first. If there is an object you should be able to push but it doesn't react. Cutscenes are another example of something that takes your volition away.

The basic actions you use are often called verbs. I don’t like to use interact as a verb, since that will mean very different things depending on the context. The verb should be directly mapped to a specific movement of your avatar. That will not only enhance the embodiment, but also make the actions easier to understand. It will also remove the worst of the downside of the contextuality when you are on the edge of switching context. See my suggestion for embodied manipulation.

It should be clear what you can do in the world and what effect you can expect from your actions. Ideally, anything seen in the world should interact with everything else according to rules you can learn to understand and use to your advantage. The combination of all the player equipment and abilities with everything in the environment should create a possibility space large enough to give players the freedom to choose their own approach according to their playstyle and preference and give them the ability to find their own uniquely clever solutions for what they want to do. This type of Systemic Environment giving you tactical freedom can be seen in many sandbox games, CRPGs and immersive sims.

Traversal

The freedom to explore anywhere you want. You should not be locked to a specific area because of a specific quest. You may be trapped in a room, but you should be able to use all the mechanics and environment to try to escape if you want. No blocked actions. No invisible walls. No indestructible doors. This will build on your volition to increase your Autonomy; the power to make your own plans.

A character that can or should be able to jump and climb should also be able to get up on objects in the world. Unclimbable rubble or invisible walls restricts your autonomy. Rubble blocking passages are all too often used in linear games to keep the player on the right path. Some linear action-adventure games have started using wide-linear levels where you have the freedom to choose a couple of different paths or at least feel like you have the choice of path, but still end up in the same place at the end of the level. The design of the level with rubble and highlighted paths are of course meant to serve the pacing of the hand-written narrative. All the resources can be focused on a limited set of locations that are needed for the story.

Even open worlds often have places with invisible borders or indestructible objects just so that they can function in specific scripted quests. That is an effect of the old way of doing quests where it becomes too hard to make the quests work if the player has the freedom to visit and affect places in the wrong order. It's often done with an object you must interact with, that only becomes available according to the quest progression. The better alternative is to use Systemic Story to adapt quests to anything the player has done.

The possibility to go everywhere will also introduce numerous ways to get stuck. The locking down of places and actions are often a way to avoid puzzles getting to an unsolvable state. Quest items can be lost or destroyed. Doors can be buried under tons of rubble. Important characters can die. Or you could find yourself in a hole with nowhere to go. Handling all this with a traditional hand-written narrative would be too much work. See my article about traversal freedom for more about what happens if the player is stuck.

Some games use procedural generation in order to populate a world with objects. Most open worlds use those algorithms during the development of the world, so they don’t have to hand-place each tree and blade of grass. With a set random seed, the world will look the same for every player, and that also allows the game to be fine-tuned with hand-crafted details that overrides the procedural parts.

For a Systemic story game, that can adopt the story based on player choice, the actual locations can be kept undetermined until the player actually gets knowledge about it. The simulation that updates the world will only simulate the parts that the player has in memory, gradually phasing out the details as the possibility-space grows. This will allow the virtual game-master to relocate story elements based on which clues the player decides to follow.

Story

The Agency to affect significant and lasting change in the world and shape your future. That doesn’t mean that you will automatically succeed in anything you do. The world will remember the things you have done and react accordingly.

A good story usually has an arc with a promise in the beginning that gets fulfilled in the end, with emotional depth, a cohesive theme and much more. As part of the story and character development, there usually needs to be a low point that finally forces the protagonist to give up one of their prevailing faulty assumptions about life. The events in most great story games are carefully crafted to serve the theme and arc for the future resolution. They would lose their impact if the player avoided the misfortune that the story needed.

Story-based games usually set up limitations in order to keep the story on track. This is usually done by restricting where the player can traverse, what things the player can interact with, available dialogue options, or with scripted events or cutscenes. No matter what you do, your character will get themself into trouble. Great care is put into the framing to create parity between the player and what the player character must do. Agency is upheld if the game succeeds in making the player want to do the things that progresses the story.

A game with linear narrative is described as railroading. For players there the parity is not upheld, this becomes a problem. More often than not, you will smell the coming ambush and be frustrated that your avatar had no autonomy to prepare and be more careful. Even worse is when the avatar is forced to do things that the player absolutely doesn't want to do, as in making an NPC upset, saying stupid things, or even killing people when you would rather avoid them or make friends. As a pacifist, this is something that frustrates me in almost every chapter of every action-adventure game.

One of the most common critiques of games with branching narrative is that choices that felt important did not have the impact they hoped for. Why bother making the choice if it doesn’t matter in the end? Most game developers try to make the choices feel impactful, but there is a certain percentage of the players that are left unsatisfied. The limits of branching narrative is that every combination takes additional development resources. Some players see how outside events again and again push them back to the main branch.

Conclusion

A lot of people want more freedom in games. A Systemic Story game can avoid many frustrations of hand-written narratives, without sacrificing the character development, emotional depth and dramatic tension of the story. The development will be gradual and take many iterations before they will surpass the fidelity of current AAA story-based games. It will be worth it. More to come.

[[ https://www.gamedev.net/forums/topic/715536-the-promise-of-freedom-in-story-games/ ]]
[[ https://www.reddit.com/r/gamedesign/comments/1ai7vqu/the_promise_of_freedom_in_story_games/ ]]
[[https://www.facebook.com/aigan/posts/10159800732692393]]
[[https://twitter.com/aigan/status/1753765089553904062]]

Getting started with web development in 2024

Jonas Liljegren — Wed, 20 Dec 2023 11:38:37 GMT

Short history

1994: Netscape Navigator made the web popular.

2004: Internet Explorer by Microsoft destroyed Netscape, dominating with 94% market share.

Then started the browser war, with Firefox, Chrome and Safari. It became a real pain trying to create websites that would look and work as intended in all popular browsers. All the browsers had numerous differences in implementation and bugs. Libraries like jQuery were created for helping building sites that would work on most versions of most browsers. Many features could not be used since they would not work the same on all browsers. New features could not be used since you would still need to support all the older browsers used by people.

All this changed in 2014. HTML5 would revitalize the web after many years of XHTML. ES5 would finally get full support in all the browsers. But more important than this was the introduction of Babel.

NodeJS is a javascript engine that lets you run programs outside the browser. Babel was one such program that can rewrite other javascript programs so that they can run on older versions of browsers. That would let you write javascript using the latest version ES6, and still having it work on older versions of all the popular browsers. ES6 introduced a lot of new things including class declarations.

The power of Babel allowed for programs to use packages from the NodeJS ecosystem. Babel would transform them for compatibility with the web and tools like Webpack would optimize them by minimizing the size and bundle all the files together for faster load times. This led to an explosion in popularity and the rise of React.

The evolution of the web platform

Around the same time in 2014, all the major browsers would start to use automatic updates. Instead of many browsers being 5 or more years old, most users would have the latest browser while using the web. This was the rise of the evergreen browsers, that would eventually shorten the time for new features being available for almost all of the users.

Every year there would be lots of new functionality introduced. The last couple of years would see major improvements every single month. Popular libraries and frameworks would serve as inspiration for new features added to the browser.

This means that popular libraries with much needed features bit by bit would be made obsolete by similar features being built into the language and web api in the browser. Popular frameworks like React, Angular and Vue have evolved but their core architecture is based on the capabilities of the web at the time of their creation. They are still using build tools with transpilation and bundling even though this is no longer necessary and makes the whole framework much more complicated than it has to be.

Every added library comes with a cost. Updates in one part can force an upgrade of other parts. There may be security vulnerabilities or bugs. Every added interdependent component makes it harder to replace or fix functions that don't do what you want. The framework will limit what you can do, making many custom solutions complicated and suboptimal. More time will go to adapting what you want to do to the capabilities and architecture of the chosen framework. Every library and every part of the toolchain and build process is another potential point of failure. Installing the example project with create-react-app will download 1500 package dependencies totaling over 2 million lines of javascript code. At the time of writing, they include 6 high level vulnerabilities. How long will it take you to understand what's happening across all those lines of code?

Since frameworks like React and Angular have cemented its position as a de facto webstandard, there is a huge ecosystem of existing sites, apps, libraries and people. Mastery in these prevailing toolchains are required by more than 95% of existing jobs. But this article is not about culture or popularity. It’s about how to do better. And regardless of what framework you end up using, you should still learn the foundation and capabilities of the modern web. And be prepared to re-learn every year.

The modern web

There are three main browser engines today. These are the ones used by Chrome, Safari and Firefox. Most other browsers are using Chromium, which is the engine known for Chrome. About 95% of all users have a browser version that is less than two months old.

The core features of the modern web includes ES6 (2017), HTTP/2 (2017), CSS Grid (2017), Shadow DOM (2018), CSS Container Query (2023), importmap (2023), Declarative Shadow DOM (2024) among many other Web APIs, javascript features and CSS modules. Many of these features have conditional polyfills that is javascript code that will make the feature work even in older browsers. The years given is the time it was supported in all three engines.

This article will start from the beginning for how to develop web applications that use npm packages. I may continue in later articles with more considerations often covered by popular frameworks, like routing, user sessions, database access, state management with reactivity, Server Side rendering, testing, documentation and deployment.

VS Code

I started out with Emacs and still use it daily. You can use whatever text editor you like. But it should include syntax highlighting, indentation and some sort of integrated documentation like code autocompletion. Microsoft Visual Studio Code is very popular, especially for web development.

You will need a web server for serving the website. The easiest to start with might be the ritwickdey.LiveServer extension for VS Code. Open your project folder, create a html file and then Go Live using the button at the bottom right.

I hate all distracting elements including all the helpful popups that VS Code throws at you. The editor has thousands of things to configure to your liking. I disabled most things related to quickSuggestions, suggestOnTriggerCharacters, cursorBlinking, inlineSuggest, parameterHints, suggest, snippetSuggestions, closeEmptyGroups, autoClosingQuotes, autoClosingBrackets, autoClosingTags and lightbulb. I also removed some of the columns in the editor like minimap, glyphMargin and showFoldingControls. I’m also using the extension garaemon.vscode-emacs-tab and bound it to shift enter for indenting the current line.
I also have a personal “Cheat sheet” for VS Code.

ES modules

NodeJS introduced CommonJS modules (cjs), but those only work on the server. You will recognize them by their use of require for importing libraries. ES6 introduced platform support for modules (mjs) using import and export syntax, which will also work in the browser.

Most examples of importing libraries are using bare module specifiers. Those assume you are using nodeJS or that you are transpiling the code before running them on the browser. You don’t need a compilation step. Just provide the actual path to the module you want to require, using a relative or absolute path. The mjs file extension may not be associated with the mime type text/javascript in older web servers. You could use js instead, but I prefer mjs since that is suggested by NodeJS and I use it as a way to declare them as real modules and not something that has to be transpiled. You can add the mime type to the web server if needed.

Here is a complete example of module use for remembering form input, in case the user accidentally closes the page before submitting.

index.html

utils.mjs

export function persist_input($el){
  $el.value = localStorage.getItem( $el.id );
  $el.disabled = false;
  $el.addEventListener('input', on_input);
  function on_input() {
    localStorage.setItem($el.id, $el.value);
  }
}

A larger project will usually use several layers of nested folders. For those projects, it’s usually easier to use absolute paths. But while using absolute paths, you must keep track of what folder to use as the web root. It’s usually named public. You can tell the Live Server extension to use that folder by creating a file .vscode/settings.json with the content

{
  "liveServer.settings.root": "/public"
}

Web components

Web components are the standard for reusable encapsulated components. Not to be confused with the non-standard framework-specific component systems such as react components and the like. Components lets you create your own html tags with any functionality you like. Here we encapsulate the persist_input function as a component:

persist-input.mjs

import {persist_input} from "/utils.mjs";
class El extends HTMLElement {
  connectedCallback(){
    const $inputs = this.querySelectorAll("input,textarea");
    for( const $inp of $inputs ) persist_input( $inp );
  }
}
customElements.define("persist-input", El);

And now we can use it for persisting all input elements inside the tag:

NodeJS

NodeJS is the server side javascript engine used by most frontend frameworks. It can run under Windows, but will work better on a unix-like system like MacOS or Linux or the Windows Subsystem for Linux (WSL). You will be using a terminal with the Bash shell for command line interface (CLI) tools. Start by installing the Node Version Manager (nvm). With that, you can install the latest stable version of node.

Each project can have its own installed CLI tools, located in ./node_modules/bin. Those can be run by using npx, the relative path, or with a tool that checks the project bin dir using bash command_not_found_handle(). Keeping the tools with the project makes it easier to share the code and make sure that the project works with the version of the tool installed.

The modules we created don't need to be compiled. But many modules from npm do need a compilation step. We often need to change the module paths used inside the imported modules so that they can work in the browser. We can use rollup for repairing the paths in the module. We will have to tell rollup to not bundle or mangle the files. We only need the path translation.

An alternative to repairing the import paths is to use the

npmjs.com has millions of packages. And this is how you can use them for building web applications.

Optimized delivery

Once upon a time we used HTTP/1 for delivering files. That protocol had an overhead for each file, so we used bundlers to minimize the number of files the browser needed to fetch. This is no longer the case with HTTP/2 and HTTP/3. It doesn’t make a difference if the content resides in one large file or 1000 small ones. In fact, it’s much better to keep them as many small files, since the browser will only fetch the files that are needed for the current page, and only if the files have updated since the last fetch.

For a tree of dependencies where module 1 imports module 2 that imports module 3, the browser will only start to download the dependent modules after the previous ones have been loaded and parsed. This is called the network waterfall. For optimizing the load, you can just declare what modules to load directly from the html page. One way to do that is to use tags at the beginning of the page. You can use the modulepreload tool from npmjs to automatically look up all nested dependencies of the page and inject the modulepreload tags that will eliminate the network waterfall. In our example, this will add

I did my own tool for generating preloads before found this newly published tool.

[[https://dev.to/aigan/getting-started-with-web-development-in-2024-2b9n]]
[[https://www.facebook.com/aigan/posts/10159741717467393]]
[[https://twitter.com/aigan/status/1737440066161516812]]

Semantic databases

Jonas Liljegren — Wed, 22 Nov 2023 04:02:35 GMT

Traditional relational databases have well understood properties for performance and locking with indexes and works well for well-defined homogenous data where you usually search for selections from one specific table.

I have always been drawn to more flexible data structures. A simple address book would have a name, email, phone and address. But some people have several names or types of names. Several emails. Several phone numbers. And so on. Some of it is temporal. Some of it is domain segmentation, like work/home. With a relational database schema, you would convert the single table to a main person table with relations to one table for phone, one for email and so on. But then you come to all the extra things you would like to know about those connected information. When was the email address last updated, is it connected to a specific job, what is the status of the email account, regarding email bounces, what is the canonical form and the formatted form (that could include the full name and sometimes title).

Now consider the similarity between people, departments, offices and businesses. They may all have emails, phone numbers, visiting addresses and names. The name may be different depending on context or language. There are also a lot of metadata that should be connected to each individual data, like the source of the data, information of when it was updated or confirmed to be still valid, who is allowed to see it and in what contexts its intended to be the preferred value among its alternatives. You may also want to keep track of the reliability, quality and precision of each value. A normal datetime field may have a value stored in millisecond precision, but may have been entered with the precision as minute, day or even just the year. You may want to store more information of how it was imported as to consider the type of dirt it has.

On top of that, you have the tri-temporal data that should be accessible by all parts of the frontend and backend, including considerations in changes of data structure, application logic and changes in what agents have authorization to reach or write. The tri-temporal data consists of a traditional change-log along with changes over time in the modeled domain, as in a person changing name, phone number, email or living address. An updated value may be a correction of a wrongful input, or reflect that the previous value was correct until recently. You also want a third dimension of decision time, for changes that can go through the stages of draft, proposed and accepted.

SQL was not made for data structures that conditionally can spread out forever. You don't want to make the schema more complicated or detailed than needed for the application. All the facets will have a cost in speed, storage requirement and complexity. But expanding the schema will require an abstraction layer. You wouldn't want to refactor old SQL statements for every addition. Tho, I don’t think there is any existing abstraction library that will handle all the things I mentioned here, in addition to the deep reactive propagation through layers of composition I will cover in another article.

noSQL

Going back to basics, you can define lookup tables with offsets or pointers for stored binary data, defining your own data types. It can be strings of text holding things like JSON, or other types of objects. It's similar to a directory of files, with indexes using hashes or binary trees.

Types or features of databases include key-value stores, hierarchical data and document stores. Some databases have added features for handling and searching XML, JSON, geospatial or ML vector data.

The next level is the Entity–attribute–value (EAV) data model. It’s the easiest way to support ad-hoc data. Wordpress uses it in a mysql table with columns for entity_id, key and value, for users, posts and comments.

Add support for the values being pointers to other entities, and you end up with a graph database.

Triplestores are a specific type of graph database, built for Resource Description Framework (RDF) data. RDF defines the triple as Subject–Predicate–Object, where the object can be another subject or a Literal. Subjects and Predicates should have a globally unique URI.

There is no dominant standard similar to SQL for how to search data in graph databases. SPARQL was created for RDF databases. There has been a process for creating a standard for a Graph Query Language (GQL) based on Cypher that is used with Neo4J. Meanwhile, the completely unrelated (FB) GraphQL has become very popular.

Gremlin Query Language has some support among graph databases. It's a form of graph traversal that treats each node as its own object. The selections and groupings are done as method calls rather than plain text strings sent to a server as in SQL. This is the type of API that will work best with the type of multi-granular or flexible complexity I described here.

ML Vector databases

Any database application will have some sort of search functionality. A full-text search index is expected. But you should also handle alternative spellings and typos. Results should be prioritized and grouped based on what would be most useful in the specific context. Text data can be indexed using phonemes or tokens allowing for the related spellings.

There are a lot of full-text extensions to existing databases. But the recent improvements in Machine Learning (ML) Large Language Models (LLM) will allow for more flexible search capabilities, using vector databases. Each document or record will be converted to embeddings and stored in the vector database. This DB can then be used for finding the most relevant documents for any free-form text search.

An LLM can also be used in search even without a custom vector database. You can simply ask it to translate the free-form query into one or more formal search queries, get the result from those queries, and then ask the LLM to sort and return the most relevant results.

A vector database can also be used for clustering. Grouping similar data together, making it easier to navigate. Also for classifying data, such as automated tagging.

Artificial Intelligence (AI), Generative pre-trained transformers (GPT) and LLM is not an alternative to structured data. But it will make it easier to search and parse all available data.

Symbolic AI vs Machine Learning

AI has traditionally been synonymous with what now falls under Symbolic AI. Symbolic AI is using Knowledge Representation (KR) with Ontologies and the rules of logic for step by step reasoning. This has been the image of AI in science fiction for a long time, depicting it as emotionless rigid mathematical thinking.

On the other hand we have the Machine Learning, Deep Learning, Generative pre-trained transformers (GPT) and LLMs, that uses fuzzy pattern-matching statistics in a way that is closer to creativity and feeling. Tho, there have been amazing improvements to reliability for many tasks.

There has been a lot of work in the symbolic AI field trying to build up a knowledge base that would have the ability to reason across all domains. All those models have failed to handle the fuzziness in human language, thinking and the complexities of the real world. Trying to handle all the edge cases can make the logic complex and hard to understand. The resulting reasoning will be rather far removed from how people think in the corresponding situation, and will still fail in many simple scenarios.

All computer programs work by algorithmic processing of structured data. KR is used together with ML, regardless of the use of symbolic AI. One of the most popular uses for LLM is to search databases, parse text and output JSON. KR in and KR out. Humans use tools and logic in addition to neural network associations.

There needs to be a symbiosis between feeling and thinking. Neuro-symbolic AI. This is happening in many ways now in how LLMs can use APIs for looking up or validating information, such as code syntax, or integrations like Wolfram Alpha.

Semantic databases

Most traditional databases restrict the encoding of real-world information in a way that often loses important information. People will often knowingly input wrong information since that is the only thing the application accepts. That is one of many ways that introduces “dirt” in the data.

A semantic database refers to the storage and DB functions for using semantic data. The point of semantic data is to have enough information to know how to use the data in all places where it could be relevant. Only having a table definition with data types and some constraints is not enough. The promise is of being able to generalize functionality in a way that you don't have to hand-code special cases for how the data is used in each new system. It will make integrations and expanded functionality easier. For example, consider what a calendar program would need to know to actually help you with when you are busy and when it’s time to prepare for the next part of your day. And consider how much of this it could deduce from available information such as not to force you to provide the information again.

There are many ways to build a semantic database. This is how I would do it. RDF was constructed to be the simplest way to represent semantic data. A single table of statements with id and the triple subject–predicate–object is enough since metadata can be added by letting the subject refer to another statement. But there is some metadata important enough to be added directly to each statement, like the origin, agent, transaction id, the tri-temporal transaction time, activation time and valid time, object type, sorting weight and low-level metadata for authorization and inference.

Each part of data in RDF is called a resource. All resources can have properties by using the resource as a subject in a statement. Statements are also resources. With my extended metadata, the origin and agent are also resources. Resources can also be literals. A literal is a value with a data type such as a text or number. The object type metadata is used to refer to where and how the literal is stored in the database.

Predicates may have an inferred type for its object. Subjects can have one or more type statements, referring to the class that defines the resource. Each class can have a schema defining its relationship to other resources. For example; names, phone numbers and email addresses may all be stored as text strings. The type can be implicit from its predicate or explicit from another type-statement. If there is a label for the phone number, it can be given in an additional statement with the literal as the subject.

The power of the semantic database comes from when the type is augmented with programming code used to compose the properties of the resource. This gives a uniform and flexible interface, regardless of how the data is stored in the database. This allows for multi-granular or flexible specificity of the data. You don’t have to consider if the address is stored as a single text block or divided into several fields. Just use the dynamic properties of the address resource.

Data Integrity and Consistency

Graph databases have the flexibility of adding data and relations with no constraints. This will also make it easier to create and evolve the model. Constraints can be introduced gradually, with optional and required properties, relationship cardinality and the expected data type.

I prefer to define the actual schema with the class rather than with the rest of the data, in order to keep the schema in sync with all the code for dynamic properties, methods and validations. The class can list mixins and inheritance. Properties will be declared with min and max cardinality for the domain and range. A property can be defined to point to a literal type that may be a subclass of another literal, compatible and mapped to XML datatypes and the primitive types stored in the DB.

The system should handle state transitions with transactions. Traditional RDB transactions will usually not allow multi-stage updates spanning client-server. The temporal data structure allows you to set up a future transaction that will exist alongside the active version, but only used within that agent's transaction context.

Each class will have authorization checks for reading or writing. There will also be hooks for creating, updating and deleting data. They will validate the change, notify dependent data, do the change, validate the resulting state, and then commit or throw an exception based on the result. A commit will return a list of all resources updated.

Performance and Scalability

A semantic database is inherently slower than a traditional DB. But you will still have the usual ways to optimize the performance. Inferred and composed data can be indexed and stored for quick lookup. Those lookup tables may be created dynamically or set up by hand as part of optimization work for the application that needs it.

Searches in the DB should go through the process of planning the query based on available indexes and the amount of resources returned by each constraint. Start with the lookup returning the least amount of resources before going through and filtering out all the results not having the rest of the constraints.

Data can be replicated to several servers for read transactions. Write transactions can be put in an event log that will be used (by tail-file) to update the other servers. The application needs to handle updates in a way where expected changes may be denied or may take a while to commit. The data versioning with transaction id and time plays a part in this.

I have been using syllogism rules for inferring statements such as types through subClassOf, memberships, locations and the like. Instead of searching for resources having a specific inferred property, they can be stored directly on creation, among other dynamic properties. Just mark the origin as an inferred statement. This will make lookups much faster.

The parts of the database that are more uniform can be stored in a more traditional way. With the API being the same and the dynamic properties handled by the class, it doesn't matter how the data is stored. It can be a local cache, a remote database or anything else. Just map the resources and let the origin state the source of the data.

Data Manipulation

Everything here is stuff I have worked with for the last 25 years of semantic database development. Everything except the “valid time” for the temporal data, modeling slowly changing dimensions. The query language used is similar to Gremlin, where you search, traverse, collate and modify data through property and method calls on objects.

I have created 5 different semantic databases. See my article 30 years in the Web, for more details. I would like to publish more from the latest cutting edge semantic database named Gad, written in isometric javascript. That system was set up to overcome many of the problems from the older RDF::Base.

[[https://www.facebook.com/aigan/posts/10159702481267393]]
[[https://twitter.com/aigan/status/1727295041893450098]]

mv-sorter

Jonas Liljegren — Fri, 10 Nov 2023 01:23:26 GMT

Try it out here:

BBB

CCCCCCCCC

In 2019, I worked with converting a jquery application to web components. Specifically replacing Sortable with something that would work well with Polymer. This was also before the browser DragEvent API got adopted by Safari. Most libraries used compromises that made them less usable. Some libraries would lose hold of the dragged item if it was dragged outside the specified region of the page, or would freeze. I didn’t find any library usable with Polymer and Shadow Dom that also made it easy to just drag and drop, with mouse or touchscreen, with a feature set similar to jQuery Sortable. So I made my own.

Liking the physicality of swiping on touchscreen, I decided to do the sorting with physicalized animations, letting you throw items, and animating them falling into place. Even though those animations are not necessary for usability, I needed the custom implementation in order to work around all the then existing limitations for achieving a good user experience. All the layered animations were just me taking the opportunity to make it more fun. It was never fully polished since I couldn’t rationalize giving this task too much time in the project.

In preparation for this article, I completely removed the dependency on Polymer, and also added support for grid and flexbox. There was the beginnings of support for drag and drop between nested containers, as you would do in a file browser. That part is not working with multiple moving containers that are also dynamically resizing to fit its content. But sorting columns of sortable items would work fine.

So this is with visualized dropzones, customizable presentation and physicalized animations.

The default style sits in a separate mv-sorter.css file so that it can be completely replaced. The default content adds shadows and highlights:

In addition, the example here used the additional style for the sortable items:

Supported attributes are:

row: elements are displayes horizontal (default)
column: elements are displayed vertical
lock: Only move in selected axis
group: Allow movement to other containers in the same group
autosave: move element in DOM after drop
disabled: make container inactive

Events you can listen to on the mv-sorter container:

drop: details {element, item}
dropoutside: details {element, item}

Methods availible on the mv-sorter container:

reset(): move all items back to their original DOM positions
commit(): update DOM placing items in their new place
elements(): lists elements in the container, similar to what you would get from the DOM after a commit()
elements_removed(): list elements moved to another contianer
elements_added(): lists elements moved here from another container

The property is_altered tells you if anything has changed, like sort order or anything added or removed.

You can also add a mv-draghandle in an element for using that for dragging, instead of the whole element.

Combining all this for a simple scrum-like board with sortable columns and items:

Availible from https://www.npmjs.com/package/mv-sorter or https://github.com/aigan/mv-sorter

There are lots of things to improve. Using the new top-layer stacking context, and doing all animations relative page rather than as offset of original position would make things a lot cleaner.

[[https://www.facebook.com/aigan/posts/10159685446812393]]

Adapting a Ghost Theme

Jonas Liljegren — Wed, 19 Jul 2023 11:05:29 GMT

In 2020 I decided to finally create my own personal blog. Until then, I preferred to write about things in a timeless manner. A blog is by definition about points in time rather than timeless entities in a topic-space. I had also written about things on Facebook I wanted to make visible and keep for the future. My 1999 homepage had the articles grouped by category with minimal site navigation chrome. I think I used SSI (NCSA server-side includes) at one point, but that is something that makes it harder to move the homepage to new servers.

The default option would have been to start up yet another Wordpress site. I have created lots of those, using web servers under my own control, with my own mysql servers, along with lots of custom created themes in PHP along with custom and modified plugins. But since I’m now deeply immersed in the bleeding edge of javascript and web technology with NodeJS in the back and Custom Elements in the front, I wanted something I could later modify and customize. Thus, I was looking for the first best JS-based blog and CMS that would be easy to use. Checked out Ghost CMS and it looked good enough. The default was good enough. Just had to select the theme I liked and install it through the Ghost admin web frontend.

Upgrading Ghost

Three years later, I decided to update more of my 1999 website with updated contact information, CV and more. The Ghost CMS had gone from version 3 to version 5 with incompatible changes. The new version of Simply had changed a lot of stuff that I liked in the original, and other stuff was simply broken. That is the cost that usually comes with spending a lot of time perfecting a site, just to have it break after an upgrade. As a result, the current Simply theme is not as clean as the original version. On top of that, there were things I wanted that weren't included in the theme, leading me to fork the theme so that I could adapt it to my own needs. In the process I had to learn more about the ghost backend, the basics of handlebars and tailwind css.

Tailwind

Tailwind has become very popular since its creation in 2017. I don’t like all the repeated classes all over the HTML. It breaks the separation between information and presentation. I'd much prefer Bootstrap that also has the utility classes, but those are more often only used in special cases where it's the only thing having that specific style rule. That makes Bootstrap the semantic alternative to Tailwind.

CSS has seen a ton of improvements during recent years. For new projects, I would probably opt to choose something more similar to Open Props that uses css variables and color calculations without a need for pre-processing.

I added back the Tags Cloud Menu that I got used to from version 3, that displayed the top 6 topics from the blog.

{{#get "tags"
  limit="6"
  include="count.posts"
  order="count.posts desc"
  as |category_nav|
}}
  {{#if category_nav}}
    
      {{#link href="/" }}{{t "All"}}{{/link}}
      {{#foreach category_nav}}
        {{#link href=(url) }}{{name}}{{/link}}
      {{/foreach}}
    
  {{/if}}
{{/get}}

Ghost CMS only supports connections for facebook and twitter. That’s partly needed in order to provide metadata for sharing articles. But since the Simply theme used those also for social media links in the footer, I needed to find a way to add more accounts. I soon found out that Ghost has a hard cap on the number of custom settings (15) and provided no other way to add handlebar variables. The only other ways provided is to add javascript code injection for every page, hardcoding the variables in the theme, or fork Ghost. This sucks. It would be nice if others could just install my theme and use it. But for now, the social media connections are all done as handlebar templates. I created partials/widget/social-item.hbs and used it in partials/widget/social-media.hbs in the menu and footer.

{{> "widget/social-item"
  social="Github"
  user="aigan"
  social_url="https://github.com/aigan"
  icon="github"
}}

SVG icons

Next up was to add icons for all the missing socials I wanted to link. The Simply theme had the SVGs created by an external tool. In order to include all the icons I wanted, I replaced the static files with a gulpfile job that would gather all svg files in src/img/icon and save them in partials/icons/svgdefs.hbs. That way I could both style them with CSS or use them as images. Had to hand-edit a lot of the icons in order to normalize the size and proportions. Having the svg symbol definitions in each page is not ideal. I would rather use custom elements (without shadow-dom) so that more icons can be added without loading them on pages that don't use them. But for this I just modified the existing theme, keeping with what's already done for style and layout.

function svgdefs(done) {
  pump([
    src(`src/img/icon/*.svg`),
    svgSymbols({
      templates: [`default-svg`],
      slug: name => name.replace(/^/, "icon-"),
    }),
    rename('svgdefs.hbs'),
    dest(`partials/icons`),
  ], handleError(done))
}

Secret backdoor

I also added a secret backdoor at the bottom right corner of the page. This is an homage to the 1995 movie with Sandra Bullock, which has been a part of many of my websites since I started building web applications during that same year. The icon is supposed to be flaming, but I’m still waiting on that CSS property. The link goes to the editor so that I can update the corresponding page or post.

π

I decided to remove all the Share this article noise. Desktop users know how to copy URLs. Mobile users have their own systems for sharing. And those systems will soon also come to the desktop. Keep the page clean but make it simple for everyone to add their own stuff.

Accessibility is much more than supporting screen readers. For me, it’s about

Only move things in response to user actions. This includes pop ups, animations or anything else that grabs attention.
Use semantic markup so that your tools can process the page for you, such as printing or reading the article.
Don't block things like selecting text or downloading images.

Dark mode

Did some adjustments in order to get a transition for switching between light and dark themes. That thing is basically a toy. It's fun to see it pulse between dark and light. It will react to the prefers-color-scheme css media feature, which often syncs to the device preferences. The implementation in the theme is a bit messy. All the listeners should have been put in an external script and loaded after first render. But it works ok and uses localStorage and matchMedia.

body, body>div>footer, body>div>header, .post-related {
  transition: background-color 1.5s ease;
}

Added a frosted glass look to the header by combining transparency and blur.

header {
  transition: transform .3s, background-color .7s ease;
  backdrop-filter: blur(10px);
  background-color: var(--header-bg);
}

Scrollbar

The scrollbar situation is a mess. The browser default is to only show the scrollbar when needed, but that will result in changes in the page width. My solution has usually been to always add the vertical scrollbar, so that centered items don't move when scrollbar appears, or on jumping to another page with or without the scrollbar. For this site, I opted to use scrollbar-gutter, available since the middle of 2022. But it should not be used on pages specifically designed to not scroll. For this site, it solves the layout shift that would happen when clicking on the search icon.

html:not(:has(>body.overflow-hidden)){
  scrollbar-gutter: stable;
}

Discussion links

I wanted a more consistent formatting of the discussion links. Those are links to the posted article on social network sites. I may have posted the article to more than one, like reddit, facebook and twitter. The Ghost CMS provides no way to add the data to the post settings, other than using tags or code injection. Frankly, this is why Wordpress dominates the CMS market. They provide hooks for every part of the GUI and ontology. Some other frameworks allow for custom data in frontmatter. Missing that, I ended up constructing a post-processing of the article, that would extract additional data from the last paragraph. It basically scans the paragraph for [[...]] and adds the links to the list of discussion pages.

const re = /\[\[\s*(.*?)\s*\]\]/g;
for (const match of txt.matchAll(re)) {
  const link = place(match[1]);
  if (!link) continue;
  links.push(link);
}

The Simply theme has a basic layout that allows for content in the article to have normal width, extra width or full width, by using a grid layout. A common case would be to have some images use the extra or full width. I wanted to have some images float to the side with text wrapping around, but use the available margin. This is the Simply theme grid layout for articles, using tailwind compiler:

.godo-canvas {
  display: grid;
  grid-template-columns:
    [full-start] minmax(4vmin,auto)
    [wide-start] minmax(auto,240px)
    [main-start] min(680px,calc(100% - 8vw))
    [main-end] minmax(auto,240px)
    [wide-end] minmax(4vmin,auto) 
    [full-end];

  & > * {
    grid-column: main-start/main-end;
  }
}

Using that, I wanted to have a special template with floating image, if there was enough width for it. This is used in my about and techstack page.

figure.aigan-float > img {
  height: max(45vh,10em);
  object-fit: cover;
  object-position: center 33%;
  width: 100%;
  border-radius: 3px
}

/* transpiled by tailwind as media query */
@screen lg {
  figure.aigan-float {
    width: 20em;

    /* move right based on .godo-canvas */
    margin-right: calc(-46vw + 340px);
    margin-left: .5em;
    float: right;
  }

  figure.aigan-float > img {
    height: 100%;
  }
}

And more

There were a lot of other bug fixes and layout changes done. You can look at the result on this site or the code in github.

Ghost replacement

After all this, I would rather have a more flexible system, using more of the modern web. Something like 11ty or Astro. That would allow me to add more stuff without stupid workarounds. Especially with the markdown frontmatter. That would also let me save all the pages with git. Ghost seems more business oriented. I'm more of a idealist.

[[https://twitter.com/aigan/status/1681626691783852032]]
[[https://www.facebook.com/aigan/posts/10159479835207393]]

30 years in the Web

Jonas Liljegren — Sat, 03 Jun 2023 23:27:35 GMT

I started writing HTML in 1995 after enrolling at the university informatics department. That was the year when Netscape just started adding new capabilities to the web, like background images, colors, tables, javascript and animated gifs.

The first parts of what would become paranormal.se were created at that time. In those days, a homepage was your home on the web. It was a place for your notes, bookmarks and contact information. I have basically kept my homepage from that time, with just some minor updates to keep it usable and somewhat up to date over the years.

I soon found my home at the student computer club. Spending all nights learning programming in Perl on the Solaris, while listening on MP3s of Belinda Carlisle, Tracy Chapman or anything else I found on the server. Installing qtest1 on all the lab computers for checking it out.

I used Perl for creating the first online facebook for the students at the informatics department. Also created the student newspaper CMS (Snutten), and the computer club website (SKIP) along with the growing paranormal site.

I have always preferred dynamic languages that cover the space between low level functionality and high level concepts, from ARexx to Perl to Javascript. Living on the edge, submitting bug reports and patches to the language or libraries since around 1996.

Paranormal.se was a project to create a semantic knowledge base with a hypertext frontend. The idea was to discover and surface new knowledge by integrating a large body of research and existing theories. I was hoping to create a sort of discussion forum where each new discussion would help to organize all existing information, making the whole continually more connected and refined. So many algorithms today work by surfacing the most popular and generally understood thinking. I had an idea of how to nurture ideas and perspectives and let them grow until more people understand them. Unlocking the secrets of the universe.

Dreaming of Xanadu. I love the original vision of Ted Nelson, who coined the terms hypertext and hypermedia. This would later inspire Tim Berners-Lee creation of the Web. I was deeply involved in the semantic web during the introduction of RDF in 1999. The dream of connecting all the world's knowledge with machine-readable semantic markup and a universal API for all public databases. The ontologies would allow for artificial intelligence to answer any question using deduction with symbolic logic. This is still very much a central part of knowledge representation today and used in combination with machine learning and large language models.

Changing workplace, I picked up my personal GNU/Linux server with all my sites and mail, to find a new home at the next company. This would be the place where I fully developed my hypertext dream, using the technology both for the company and the personal project.

Paranormal.se version 3 (P3) consists of about 30.000 topics and 16.000 users. It was a very active community around 1998 - 2008. This was before Wikipedia and Facebook. In 2007, I started developing version 4 (P4) with a much better system for version management, graph database flexibility and deduction capabilities. By 2009, I was burned out.

P4 was supposed to use my semantic database library RDF::Base (RB), which was created to run on my application framework Para::Frame (PF), built with Perl. PF and RB have been continually developed and refined since 2003. It's powerful and versatile, including multisite frontends, content management, request tracker, email handing, translations, external API and load balancing. All of it built on a semantic database inspired by RDF with typed literals, reified statements, class schemas and syllogism inference. Since it's a temporal database, parts or whole of queries can be constrained to a selected date.

PF and RB was the foundation for Hotellguiden.se from 2003 to 2009. After that, the system would continue to serve as the main customer management database, handling bookings and statistics, newsletters and even the internal call center administration, integrating all the business systems.

GOV, a web voting system for liquid democracy, was built in 2009 by my brother for Aktiv Demokrati. It was built using RDF::Base and included ranked pair condorcet method for voting on lists. The liquid democracy was implemented by letting users delegate voting to other users. If you did not vote, the vote of your delegate would be counted. This also handled prioritized lists of delegates, voting jurisdiction and the temporal information of membership and voting history. I took over the development in 2010 and continued its development until 2017.

I have administered a lot of sites for forums, blogs or facebook pages related to groups I participated in. This includes Perl Mongers, Aktiv Demokrati, Occupy Göteborg, Zeitgeist Movement Sweden, Direktdemokraterna, in addition to many more personal sites. I also produced a lot of IRL events for Zeitgeist and Direktdemokraterna, including several Z-day conferences and election campaigns. This included a lot of marketing on the streets, public speaking and also online campaigns using ads, facebook and emails. Also did a lot of printing material, recording and editing of audio and video.

All of this ended in 2015. Burned out again, but now with health problems. I started investigating what I could do better for recovering my health, including diet, exercise and supplements. Eventually learned what to do to stay productive. I also took more time for rest and relaxation with playstation gaming, renewing my interest in game design. Especially systemic story games.

A new generation for the booking system started development in 2015, now based on Javascript, NodeJS and the graph database Neo4J. I made the jump from Perl to Javascript and took the opportunity to jump to the bleeding edge, with ES modules, web components and low complexity. That which later would be called Modern Web.

I see so many problems in apps from Facebook, Youtube and others. Especially for making systems that support you switching devices or working with other people, with all information kept up to date regardless of their source. I did a lot of work to make it easy to build large interconnected semantic systems with guaranteed consistency in all async scenarios. More on that later.

By 2020, the project was halted. My workplace decided to simplify and outsource all IT. The world-leading system I had developed was not the right match for the company.

Now, I’m looking for my dream job, advancing the state of the web using bleeding edge web technologies like buildless web components and reactive state semantic graphs, connected to the latest of LLM AI using embeddings for ML vector databases.

Contact me

[[https://dev.to/aigan/30-years-dreaming-of-the-semantic-web-411b]] [[https://twitter.com/aigan/status/1667785718175768578]]
[[https://www.facebook.com/aigan/posts/10159401132557393]]

Surviving the Burning Shores

Jonas Liljegren — Wed, 31 May 2023 00:36:47 GMT

You can see my blind, NG, Ultra Hard, HUDless, careful, 4K 60fps HDR, Let’s Play on YouTube, including commentary on the fascinating concepts showcased in the Horizon world.

Survive

Surviving means that you would finish the main quest without dying. Or at least, in trying, do it with as few deaths as possible. Treat the game as permadeath. That includes that you should not restart the game. Do it on the first try, blind, without any outside help.

Why? Because I love how immersive this game can be. I like to behave as Aloy would if it really was life-or-death. Being careful, smart and prepared. Not knowing what’s to come. Behaving realistically, so far as it can be done in the game. That would also mean that I will always try to avoid getting hurt. A low-health strategy is out of the question. No hero would willingly aim to hurt themselves just to get motivated to fight harder. I would ideally do everything without ever getting hurt.

The same goes for NG+. That whole concept breaks immersion. And it's per definition not your first try. That means, to survive the Burning Shores, you would have to do it on a New Game (NG) Ultra Hard (UH) playthrough. No NG+.

Upgrading all the weapons, outfits, tools and skills will give you ample opportunity to survive everything that comes your way. Some experienced players may impose extra limitations to increase the challenge. I fully understand that different players like the games in different ways, with their own playstyles. For me, I gladly use everything I have, if it means that I may come out of all this alive.

I like doing all this carefully, since I’m pretty risk-averse by nature. I prefer to find the safest way to solve any challenge, using smarts and patience rather than combat prowess. For that reason, I have also skipped all of the Arena and melee pits, missing out on some of the beast weapons and outfits in the game. Would not risk hurting Aloy just for sports. Especially not under time constraints.

I set out to experience the Burning Shores blind. After the first teaser, I decided to avoid everything related to the DLC. I usually enjoy seeing other people play the game and after I finished the main game, I looked up more information about things I missed about the world, machines and the game mechanics. But for playing the Burning Shores blind, I decided to not use any guides or tips or any other outside help, from the start to the end of the DLC. That's also how I prefer to experience the media. Preferably not having any information about it. Ideally not even a name or a cover image.

Immerse

Majestic wilderness, awe-inspiring machines and exotic tribes. The world of Horizon Zero Dawn is beautiful. Even more so in its sequel Horizon Forbidden West, in 4K resolution on the PlayStation 5, on a HDR display with surround sound, rendered with 60 FPS. The detail and density of foliage, the thickness of life in the air and the warm saturated colors. The light shining through the gently moving leaves. — Stop and smell the Vigorstems.

I like to spend time in this world. Moving naturally for immersion and for giving myself time to experience the cinematic beauty. Why would you jump and run around and miss all of this? Run when you need to, in combat, but save your energy when you can. And running around in the middle of settlements is just plain rude.

You can use the settings to customize HUD (head-up display). The game UI (user interface) can be flat, diegetic, spatial or meta. I prefer the diegetic or meta variants. Most of the game can be played fairly with all of the flat and spatial UI turned off. This means that you will have no icons, text or bars in the corners of the screen, or attached to objects and places in the world. I enjoy seeing the world in all its uncluttered beauty. I will tread carefully, listening for any sound around me.

There is a “dynamic” HUD preset, that will hide most of the UI, but that is not nearly good enough. I’d prefer turning almost everything off and using the focus or touch to see things on demand. (The HUD will display temporarily when you swipe up (not click) on the touchpad.) The only HUD component I keep is the reticule.

The HUDless config is not done as a challenge. I just don’t like distractions and enjoy the immersion of the minimal HUD. There are times where I temporarily activate some components to help me survive in tricky situations. The nice part is that almost all of the HUD is explained in game with the augmented reality (AR) capabilities of the focus device.

Take a break from all the running. It's time for Games Done Slow! Relax with my immersive slowplay. I will explain my thinking and preparation every step on the way. There will probably be a lot of things you didn’t think of doing. Did you find any part hard to get through without getting hurt? I may have tips for you, even though I did not know what I would encounter behind the next corner.

Was there anything I could have done safer? Please let me know in the comments under the respective video.

Contemplate

Horizon Zero Dawn is built on an amazing concept. I love science fiction exploring ideas related to our world and the human condition. There are so many interesting topics in this game. The tension between nature and technology. How culture and language forms our values and understanding of the world. The idea of a better world. Hopes and fears.

I was hoping to find the time to talk about everything while walking through the world. Thinking freely on all the places, events and data-points, as they happened.

… I got distracted.

But I did take the time to cover some topics. Especially during some episodes after the main quest. Here are some of the things I talked about. Please comment on anything of interest.

All the videos are marked with chapters for easy navigation.

Difficulty and surviving

#00 Ultra Hard, Blind
#01 What is game difficulty? Complexity Open World
#08 Permadeath
#51 Trying to survive
#86 Being careful

Game systems

#01 Playstyle Freedom
#77 Systems vs Random
#78 Machine health
#83 Systemic restoration, Quests in a systemic world
#88 Systemic Story
#89 Tears of the Kingdom, NetHack, Half-Life 2, Systemic World, Systemic Story, Systemic Traversal, Active Climbing
#90 Non-systemic mechanics, Critical Hits

Game Interactivity

#25 Puzzles and locked doors
#78 Diegetic Interface
#81 Mechanics added in Burning Shores
#86 Changes from H1 to H2
#89 Active Climbing

Game Story

#26 Mystery
#81 Realism
#82 Hero's journey, The found family

Game Immersion

#34 Loading times
#89 Simulation fidelity, Walks in nature
#91 Idle Animations

Psychology and culture

#01 Psychopathy
#78 Why so careful?, Sensory overload
#81 Utaru harmony, Utaru relationships
#84 Hunter-gatherer, Brand optics
#85 Environmentalism
#91 The Quen

Artificial Intelligence

#14 Transformer AI
#60 Adjusting the personality of AI assistants
#85 Computability, Machine Learning feelings, Symbolic Logic
#87 Nature of consciousness, Artificial General Intelligence, Artificial Emotions, Artificial Consciousness

Technology

#14 Augmented Reality
#27 Recording dreams
#84 Focus functionality, Dangers of technology

Ecology

#81 Machines purpose for terraforming
#83 HEPHAESTUS, Healing the land, Resilience of animal morphology
#84 Nature resilience, DEMETER, The Hot Zone Crisis, Zero Dawn Project, Ecology, Dangers of technology, Technology in harmony with ecology and humanity
#85 Biological reductionism, Holistic Ecology, Computing ecology
#90 Permaculture

Economy

#16 Unconditional Basic Income
#25 Unconditional Basic Income
#84 Capitalism, Negative externalities, Company reputation, Brand optics, Economic pressures, Basic Income, Zero Marginal Cost

Please comment and share your thoughts. Tell me if there is anything you would like me to cover in more depth.

[[https://twitter.com/aigan/status/1664436297702752257]]
[[https://www.facebook.com/groups/105986599829686/posts/1667272637034400/]]

Embodied manipulation

Jonas Liljegren — Thu, 08 Dec 2022 00:36:52 GMT

This is part of the series about my design for a systemic story game.

I love the controls in the original 1996 Tomb Raider. It feels like I'm touching the world. Holding down the keys for holding objects or holding on to ledges. Using the lower key for the legs and the upper key for the arms. It’s intuitive, consistent and it felt right for me.

Contextual buttons

My main frustration for controls are the contextual actions that depend on proximity to an object. I have been vaulting over campfires in Horizon more often than not just because the quicksave button is the same as the dodgeroll button. I think that the generic “action” button is bad. The action can be radically different depending on what pixel you are looking at in the case of two different targets next to each other. Games with auto-climb often make me climb over tables when I’m just wanting to go to pick something up. It’s another case of immersion-breaking when I’m with a group of companions indoors and trying to talk to them but accidentally climb and jump all over the place.

Keeping control

Most games don’t allow you to cancel, change or modify actions. You should be able to change your mind in the middle of anything you do. Never take away the control from the right stick camera or left stick movement. For example, if you tell the avatar to sit down, and that starts a 1.5 second animation, you should be able to cancel the action at any point, resulting in what would be physically reasonable. If you issue the action to drink, resulting in you reaching in your bag, taking out a flask, opening it and moving it to your mouth, you should be able to cancel that at any time. More important still; If you are knocked down during a fight, you should be able to steer yourself while falling, for the possibility to get back up on your feet faster. You should be able to grab hold of things. You should be able to roll to lessen the damage. It may be hard, but it should be possible to minimize the setback. Never take the control away from the player. Keep the basic things easy while providing lots of things to master.

More inspirations

Death Stranding uses and as grip buttons for the left and right hand. You can throw stuff by swinging while holding something and let go mid swing. The monkey climbing in Astro’s Playroom is wonderful, where you can reach for and grab handholds with and , even using the motion sensor for the reaching and also for swing jumps. Uncharted 4 also lets you steer your hands when selecting where to climb. The Last Guardian use circle as the grip button, allowing you to push/pull and move with objects. The playstation symbol buttons should not be used for things where you also want to keep using the right stick. Dying Light has the right idea by using to jump and holding on to ledges. Off-stick buttons should only be used for things that in-world would interfere with moving or looking around. Half Life 2 was influential in not restricting the movement while people were talking with you, even though you actually didn't say anything. Cyberpunk 2077 gives you the power to select things to say while still letting you look around and move at the same time. The quicktime events of Detroit: Become Human hints at something that could resemble embodied actions, but fails miserably. You should never have to state what button to press, other than as a reminder.

The original meaning of the playstation symbols are viewpoint, document, yes and no. With time, now they usually are used for Interact, Action, Evade and Jump.

Immersive Sim Open World Adventure Game Control Scheme

This is my suggestion for allowing many different actions but in a way that feels natural. Keep the action buttons reachable while keeping the thumbs on the sticks. Slower actions can require long-press.

Playstation	Xbox	Action
	left trigger	Left
	right trigger	Right
	left bumper	Force
	right bumper	Up
	A	Down
	B	Collect
	X	Equip
	Y	Think
	click LS	Sprint
	click RS	Inspect

Your hands

The and trigger buttons represent your left and right hand. The trigger buttons are analog, meaning that it registers gradual impressions from zero to one. The Playstation 5 controller triggers are also adaptive, meaning that they can resist at different positions to different degrees at different points. The adaptive trigger will create a connection between your hands and the hands of your avatar in game. You can feel when you pick something up, the force when you try to pull, push or lift something heavy, the thug when you catch hold of a ledge after a jump or fall, or the resistance while pushing open a door or pulling a lever.

Gradually pushing down the trigger will first raise your arm, ready the item in it and finally squeeze or use the item. Use the right stick to select a target and press down a trigger to reach and pick up that item. Releasing the trigger will put down the item at the place you are looking at, or just in front of you if you are not looking at a place within reach. If an item is just out of your reach, you will reach for it. Use the left stick to move or try to extend your arm towards the item if you're stuck.

The target for your hands is the item you are looking at that's within reach. The default setting would be to first subtly highlight the current target. When a trigger press starts the pickup movement, the target will be more clearly highlighted, and you will be able to cancel the action by releasing the trigger before you actually move the item.

If the target is stuck, you will place your hand on it. Stuck items include things that can’t be picked up, because they are heavy, equipped or connected to something else. You can squeeze the item by pushing the trigger to the max. Squeezing an item while looking at it will enable you to move it with your right stick.

You can move items between your hands. If you are holding with an item in that hand, and then selecting that item by looking at it with the right stick, you may place your left hand on it by holding . Releasing will move the item to the left hand. The looking part is optional if you have no other target within reach, the other hand is empty, and the item is not equipped.

Equipment

Hold to open your inventory as a radial menu of stuff near at hand. That menu will also have options for accessing your bags and other stuff. Select the item and release. Selecting an item from your inventory while not holding up a hand will equip it directly in its place or to the right hand. Selecting an item while holding or will put the item in that hand. Anything already in that hand will be put in your inventory or released if not collectable.

While holding an item, you can press to equip it. When the item is equipped, you will not drop it by releasing the hand. Equipping something that isn’t wearable will make you hold on to it with the selected hand. Equipping a two-handed item will make you hold on to it with your left hand, if you can carry it with just one hand. Equipping something you wear on your arm or hand will put it on the opposite hand. If you are holding a ring in your right hand and equipping it, you will put it on the left hand. You can select the exact placement by raising your other hand and pointing with your right stick. Equipping other wearable items will put them on your body. You should also be able to look at all parts of your body by looking down on yourself.

Looting

While not holding or , pressing will make you collect the item you are looking at, and put it in your inventory. You may hold as a shortcut for unlocking and opening containers.

Looking at an item within reach and holding or will pick it up in that hand. If the item is stuck, you will place your hand on the item. Having your hand on an item and pressing will make you try to unequip it and take it in your hand. For example, you would take your shoes off by looking down at them, hold and to place your hands on them, and then press to untie them and place them in your hand.

If not having your hand on an item, press while holding or to put the items you are holding in that hand in your inventory. Those items are always quickly reachable from your inventory by holding .

Shooting

Let's say you see a bow and arrows on a table. Look at the bow and hold to pick it up. While holding , you can move it to your left hand by holding and releasing . Having an item in your hand means that you use it, if it's the kind of item you use by holding it in your hand. You may also equip it with so that you will not drop it by releasing the trigger.

Now hold for picking up the arrows. While holding the arrows, press to store them in your inventory, or hold to raise your bow while storing all but one of the arrows. Then hold to draw the bow with one of your arrows. Release to shoot an arrow.

You can throw an unequipped item by holding it up, hold to aim and release to throw the item. If the item is equipped, you must also release the hand to actually let go of the item during the throw. You don’t have to do the manual release or even the holding up of the hand if the equipped item has a stash of throwable ammunition. For a stash of equipped rocks, you may just hold down and release to do a throw, as long as you have a free hand.

Having a rifle equipped means that you will raise it with and use it with , using the same principles as for everything else. Gradually pressing will raise your arm to the trigger. The adaptive trigger will push back at the position of the trigger, where the squeeze will fire the gun.

Reload the guns by releasing , look at the left hand and press , meaning that you hold the gun in the left hand and use the right hand to re-equip it. If no other target within reach is selected, you may just press while holding up the gun. Though you still need an empty hand.

This will also allow having one item in each hand, be it single-handed guns, melee weapons, throwables, or any other type of item, like a torch, compass, rope, or a brass key.

Melee

Holding or will block with whatever you have in your left or right hand. Time pressing or to parry. All of these are variations of raising your left or right arm.

Melee weapons can be used by squeezing. Hold squeeze for a strong attack. Modify the type of attack by the direction you move with the left stick and the movement of your pointing with the right stick, for swinging to the left, right, up, down. If your opponent parried your attack, you may follow up with a riposte by pressing .

Use to force your movement. while moving towards a target within reach will kick or tackle the target. in a direction with no target will do a short dodge in that direction. while standing still will apply force towards the target without moving. Do without a target for a nice grunt.

Crouching

Press to crouch. Hold to go prone. Press near cover to hug cover. Then again to crouch if standing behind cover. Press while crouching to duck. Hold while prone to hold your breath and play dead.

While prone, you can press to go back to a crouching position or hold to stand up. While crouching and standing still you can press or hold to raise up.

Pressing against an incline while crouching or prone and holding will make you try to climb while crouching or prone.

Moving crouching or prone will be silent while not in sprint mode, meaning that your avatar will try to not do something that would make noises.

Jumping

Pressing will jump. Combine with for different jump-attacks. Hold while standing still to charge a standing jump. + forward in any direction will jump in that direction. + sideways or backwards will dodge and duck in that direction.

Press + while crouching to roll, or + + to roll while running. This will work in any combination. Begin jumping in a direction and press before your feet left the ground to modify a basic jump ro a roll, or press while in air to roll after you land. Press while in air to pull your legs up for clearing obstacles.

Combining moves with will take you away from the right stick, but I think that is ok since it's something that should be a bit harder and would limit your awareness of your surrounding, since you would focus on the ground.

Climbing

Hold while running at obstacles for parkouring over them. This will work for everything where you don’t have to hold on with your hands. Bracing or pushing off with your hands can be done even while holding items, as long as they aren’t fragile or heavy. You will parkour the thing you look at as long as you keep up your momentum. This will also work for things like ladders that are especially easy to climb.

For climbing with your hands, make sure to have them free. Look at something you can hold on to and hold or for grepping with the left or right hand. With your free hand, look at the next handhold. Move your body and arm with and grab it. Release the other hand and repeat for the next handhold. You can use to lock your latest grip if you want to hang on without holding down the trigger.

Your feet will follow along using the nearest footholds while climbing with your hands. To climb over an edge, hold on to the edge with both hands, move the left stick upward to press your body up and then hold to climb up with your legs.

Press for using your arms to thrust your body to something out of reach. While reaching for a handhold, press to jump in that direction. Jumping while not reaching for or holding on to the environment will let you jump backwards.

You can climb down over an edge by looking at the edge and using an empty hand. Holding the ledge, you can continue to move forward to drop down and turn around.

Balance

You will pause at edges, but can continue for jumping down if it's a comfortable drop. For larger drops, you will have to initiate climbing or switch to sprint mode. This will also help you with balancing on stocks. You will not step of the ledge, but can still lose your balance.

You can center your mass to regain balance by raising your left or right arm. The degree of press on the trigger correspond to how high your arms are raised. Looking down at the stock or ledge and pressing a trigger will take hold on the ledge. You may also crouch or go prone to keep your balance.

Dragging

Use + for putting your hands on the target item in front of you and move forward to push. If you have a grip, you can also drag backward or rotate to the side. Hold to try to lift the object from the ground, or + to force the item in that direction.

Ropes

Hold to open your inventory as a radial menu of stuff near at hand. Select your rope with the left stick and release to place the rope in your left hand. Ready the rope by holding . For binding to something, look at the item within reach and hold and press . Cancel the binding by releasing and/or before finished. Untie the rope by pressing .

Pull the item by moving backwards while holding . Moving while not holding will just let the rope out til the limit of its reach. Hold + to pull the rope while standing still.

Hold + for climbing up/down the rope. While hanging on the rope with , use movement direction to run on walls. Press to jump against the wall with your feets. Release to let go of the rope, for a swinging jump.

Look at the rope and press to lock yourself to the rope, in case you want to use your hands for something else. Press to free yourself again.

For throwing a lasso or grappling hook or similar, you can hold a rope with your left hand and throw the part in your right hand by holding and releasing . Press to collect the rope back to your hand and again to put it back in your inventory.

Widgets

While looking at a stuck item in reach, you can hold a trigger to raise your arm and place your hand at the item. While your hand is placed, use to move it left, right, up and down. will still control your walking, giving you the option to move forward and backward or to the sides.

Squeeze the trigger to grab hold on the item. Use your sticks to move the item in any direction. Combine with to jank the item with force, or use by itself to just punch your target.

Push buttons by squeezing them. Levers can be pulled by squeezing them and moving with the sticks. Wheels can be rotated by rotating the right stick. You may try to loosen it by holding and loot it with .

The shortcut for opening a container is holding down . Not using shortcuts, you will open a chest by placing your hand on the lid and move it with the sticks. Unlocking a chest would be done by equipping the key to your right hand, placing your left hand on the lock and then raising your right hand. Insert the key by squeezing and then rotate it with .

You can open doors in a similar way, or do it quickly by pressing while you are pressing up against the door.

Inspecting

Press to inspect your target. It will mark up situational relevant things in your environment representing the awareness and knowledge of your avatar, lingering for a while like short-term memory.

The thing you are looking at with is your target. Inspecting will display more in-depth information of the current target, including tips for available actions and how the thing relates to your quests and places you know.

Inspecting your hand will let you rotate it with , including the item you are holding. Holding the item in your left hand allows you to manipulate it with your right hand.

Crafting

Hold to get your tool from the menu. Hold the thing you want to modify in your left hand and process it with your right hand by holding , and directing your action with your right stick. You may for example put a knife in your right hand and take hold of a tree branch with your left hand, for making an arrow or spear.

Place things together by releasing an item you're holding while looking at the other item. Attach one item to another by having the thing you want to attach equipped to the right hand, place the left hand at the target or hold the target with your left hand, and then look at the target while you raise your right hand and press .

Talking

The is used for mind-stuff, like dialogue, quest-tracking or magic. Hold to select what to do from a radial menu for fast action or go one step further for a more comprehensive list of options.

Careful or Fast

Press to toggle sprint mode.

While in normal mode, you will behave civilized among people, actively avoiding bumping into things or people and avoiding climbing on stuff just by walking towards things. You will also refrain yourself from stepping over cliff edges and falling to your death.

Tilting in normal mode will increase the movement to running after about two seconds. Bumping up against obstacles while not running will make you stop for a second and then find a reasonable way to continue to the place you’re looking at, by moving in a direction similar to the direction of . You will go around obstacles if you can avoid them by one or two steps in either direction. If there's no way to step over or around the obstacle, you will walk over it.

By entering sprint mode, you will have to take responsibility for your own safety. You may still choose your actual speed by how much you move , but the maximal speed will be much greater and you will also change your speed faster. You will automatically step over or press through anything that comes in your way. The main difference is your speed and lack of safety net and that you don’t care if you break things in your way by pushing them to the side.

You will still have to manually jump or climb over things that reach over your waist. You must still use + to grab hold of edges if needed during a jump. Engaging in combat in sprint mode will trade speed for increased vulnerability and faster stamina drain.

[[https://www.gamedev.net/blogs/entry/2293465-embodied-manipulation-a-control-scheme-for-immersive-sim-gameplay/]]
[[https://www.reddit.com/r/gamedesign/comments/zn12h1/embodied_manipulation/]]
[[https://www.facebook.com/aigan/posts/10159087820897393]]
[[https://twitter.com/aigan/status/1647581129665306624]]

Traversal freedom

Jonas Liljegren — Mon, 05 Dec 2022 22:56:19 GMT

This is part of my series about my design for a systemic story game.

The world can be linear or open. The environment can be hand-crafted or procedural. But more important is the requirements of the story structure. Is the story scripted or systemic? Most games use a mix of all of the above. But the needs of the story will usually result in limits of the available verbs in specific places. Verbs are the actions in the game, like walk, run, jump, hit, climb, open, use. The needs of the story will keep the player from going in the wrong direction or doing the wrong thing by disabling verbs. You will see that you often aren't allowed to hurt friendly characters, or you may not be able to open a door before you do what's expected in a certain room.

A systemic game has locations with properties that interact with each other and the actions of the player using rules that apply everywhere in the game. That allows the player to find solutions to puzzles, quest objectives or scenarios that the game designer did not consider. The much more common variant is the scripted game where places in the world are marked up and rules for what happens depend on quest progression.

Invisible walls

Games like Horizon, Tomb Raider and Uncharted are infuriatingly bad in this respect. It becomes a game about guessing where the creator wants you to go. Some classic adventure games do it better with the avatar just stating that they don’t want to go that way or do that specific thing. Detroit Become Human will show a visible barrier in the world stating that the place or action is not available since it’s not in line with your current objective.

The design team will usually develop a consistent style for indicating where you can and can’t go. In some games, wines indicate unclimbable walls, while in other games they indicate the opposite. And I really don’t like it. Lara Craft will jump and climb all over the place but can’t for her life find it in her to climb over a piece of rubble on the street. Aloy will push through narrow cracks in deep underwater caverns, but stands dumbfounded in front of a relic ruin with gaps between the beams in the wall, far wider.

The very first scene in Horizon Forbidden West has a whole bunch of these walls. There are thickets, rubble and walls she should be able to pass. The invisible wall breaks the immersion and puts a damper on the sense of exploration. Even worse; you see the way forward, but can’t go where. The jump button has been disabled. And if you are like me and turn off all the screen UI for maximal immersion, you will easily miss that the game wants you to both collect and use the healing herbs before you continue. Neither Aloy or Varl says anything at the ledge. The jump/climb button doesn’t work. I was about to reload the game because this seemed like a bug. – But this is just one of thousands of similar examples. You are supposed to be able to read game developers' minds.

There are games with less invisible walls. The first generation of Tomb Raider was excellent. The block based design made everything perfectly consistent. There was a complete mapping between all your moves and everything in the environment. Other examples are Dying Light and Death Stranding that use systems to determine where you can run and climb, rather than manually placed borders and tags.

Level design

Adventure puzzles are usually scripted in a way where the game designer accounted for all the allowed solutions. A systemic puzzle may instead be characterized as a problem that can be solved in several different ways, using the interactions of tools on the environment and objects.

Just disabling verbs in order to limit the choices for solving a puzzle is lazy design. I would prefer to use the knowledge of the game to figure out what I can do. I don't like the manually marked climbing and grappling points in Horizon Forbidden West or God of War. Each tool should have a defined and logical interaction with every other object in the game. See NetHack.

Games will often impose limitations in where you can go as a way to optimize for fun. By limiting the players options, they will have to handle the situation in new ways. I will always try to find a safe way to survive combat, often climbing up to an advantage and peeking out from as far away as I can. But doing the same thing every time might get boring after a while. I hate to get locked in a room with nowhere to run or hide. It feels okay if it happens naturally as part of the story, but I hate it if I see a way to do it better, but the game stops me for no good in-world reason.

A non-lazy level design will naturally vary viable tactics. Don’t have things that look climbable if it’s part of the puzzle to find another way up. Don’t provide a clear view of the enemy from a hidden vantage point if the intent is to have a variety of encounters. Many games do this well for combat encounters, but not so well for puzzle rooms.

A game will usually introduce a game mechanic in the form of a tool or skill and follow that up with a series of situations where the newly introduced mechanic can be used. It’s a common problem that the player may have gotten used to and prefer another tool and try to brute force progression. A non-systemic game can force the player to use the intended mechanic to proceed. A systemic game will have to find other ways to make sure that the player actually learns the intended mechanic. One such way would be an actual in-world guided training scenario with some sort of judge commenting on your result.

A systemic game should provide variety that invites use of different tools and tactics without strictly enforcing those. Let's say you have explosives that would break open a door, but the current puzzle is set up for you to find and use a key. You may start with a hint that the key can be found. The way to the door may go through water, making the explosive unusable. The explosive may also cause sound attracting unwanted attention. And it could also cause the wall to fall down or nearby lanterns to explode or start a fire burning up the things you wanted from behind the door. These are results you often don’t see in authored games, since that would be too many permutations to handle.

The game should continuously evaluate if the player is stuck in a place, or generally seems frustrated. A systemic world will allow avatars to get themself in places they can’t get themself out of. It should always help the avatar to climb or move out of narrow spaces, back to a previous position. The game should always check that the player can solve the current situation. For example, if the avatar is stuck between the door and a recently collapsed hallway, and doesn't have any of the known ways to get through the door or get back out, the game should introduce something appropriate for the situation. It could be that someone opens the door from the other side, or the rubble shifted to provide a way to squeeze through back out, or someone eventually comes to the rescue.

You can also encourage the player to use different approaches by altering the rewards, through the connected systems. Some tools may destroy things that would be valuable to collect using other more specific techniques. It may be an optional reward connected to speed or skill. Varying the situations should be enough to promote variation in approach without limiting what you actually can do. A rich system of interaction would allow the player to find their own way.

[[https://www.gamedev.net/blogs/entry/2283683-traversal-freedom/]]
[[https://www.facebook.com/aigan/posts/10159084463337393]]
[[https://twitter.com/aigan/status/1646553961321705477]]

Health in games

Jonas Liljegren — Sun, 13 Nov 2022 14:45:36 GMT

This is part of my series about my design for a systemic story game. I will be reflecting on aspects of Horizon Forbidden West, how it differs from Horizon Zero Dawn, and what I would like to see in a future systemic story game. Topics sorted in order of appearance. Starting at the beginning.

The concept of health points comes from old tabletop games such as Dungeons and Dragons. It's a simple abstraction of the real world complexities. With computers keeping track of the game, it should be possible to do something much more interesting.

Health bar as user interface

For a typical action game where you are trying to stay alive, the health bar serves as a clear indication to the player of how close you are to death. Even if the game uses a more intricate simulation of several factors, we would still need to aggregate all that data to help the player gauge the situation.

Most people learn to filter out things on screen that's not relevant to the current situation. When things get chaotic, it's easy to miss important information about the state of the player represented by bars and icons in the corner of the screen. New players will often understand the meaning of the UI and will have no time to try to understand what it means while there are dangers in the game.

Game UI can be flat, diegetic, spatial or meta. The traditional health bar in the corner of the screen is an example of flat UI. Example of Diegetic UI in Horizon is when Aloy will turn her head towards things you can interact with. Herbs you can pick up will have blue butterflies flying around them. Machines will display their current state by the color of their lights and their sounds. The interaction markers such as grappling points are an example of spatial UI.

In a third-person game, where you control a character that you also can see on screen, you embody the character but also look at it from the outside. The screen is not the eyes of the character, but some effects modify the screen as if it’s connected to the character. When the character gets blinded, you will experience a similar effect. That is meta UI. When Aloy is close to death, the corners of the screen will display a red haze, and you will feel her heartbeat through haptic feedback.

I personally hate Game interface elements popping up on the screen calling for attention. I usually turn off everything I can to the point where the screen only contains the beauty of the world. Aloy in Horizon will turn her head towards things you can interact with. Herbs you can pick up will have blue butterflies flying around them. Machines will display their current state by the color of their lights and their sounds. I like the system where I have access to the information on demand, by touching/swiping the touchpad.

There could be a lot of diegetic and meta UI that could replace the need of a health bar, such as blurred vision, limping, noises of pain, marks on the body and clothes, damaged equipment, breathing, heartbeats and more.

The Infamous games don't have a health bar. In the Second son, you will get smudges at the end of the screen, then desaturated colors, and then audio changes with vibrations indicating how close to death you are. Uncharted has a similar system, except that it’s actually a luck meter. The more close calls you have in short succession, the closer you are to your luck running out, resulting in the next bullet actually hitting you.

The logic of health points

Having healthpoints is not realistic. There are games where you can magically fully restore health by a potion. Yet, when your companion gets hurt, you have no ability to just use one of your potions to heal them. And at certain points in the story, you get knocked out and have to spend several moments or days or weeks recovering. You could have easily handled much worse injuries in normal gameplay. There is a disconnect between the story and the gameplay.

There are lots of games that don't have or at least expose health as a number of points. In the 1985 game Ghosts 'n Goblins, you will start out almost naked, but can find and put on a suit of armor. That armor will protect you from one hit but you will also lose the armor.

I want to clear up three different concerns in choosing how to design the game mechanics of healing. The first is the simulation of the real world. The second is to have the mechanic understandable with feedback communicating states and changes between states making the player understand the situation. The third is to have a depth of interconnectivity that will give rise to more interesting combinations than anyone can ever grasp.

Simulation is interesting in itself but could easily be boring. A game will bend the physics of the world to suit the gameplay and story. Simulating details beyond the comprehension of the player is useless. The point of simulation is how it creates a relation to the known world. We can connect what happens in the game with knowledge and experience from our life and from other stories and games. There are still so many aspects of stories that haven't been converted to game mechanics.

What does it mean to have 100 health points? How does it differ from 99 or 101? It’s not clear what it means for the player and it’s not deep. When you hit an enemy you want to know what it actually did. You want a reaction and also see the difference. That will also let you know what the enemy still can do and how close it is to surrender. Giving the enemy 100 hit points would mean having 100 different animations and textures. – The practical hitpoints translate to the number of hits it takes to defeat an enemy. As a rule of thumb. You should never have to hit the enemy more than three times before you can visibly see the change.

I like the design in Horizon Zero Dawn where the machines have lots of parts. You will have to remove protective plating to expose vulnerable parts, and usually make the machine stand still in order to find the right angle and hit the right spot. All the damage is predictable. The randomness only comes from the difficulty to actually hit the right spot due to movement. I would have liked the game to develop this aspect even more by not having large pools of hit points but rather many parts for different functions, like sight, mobility, and so on, that can be disabled by using the right weapon in the right spot.

More interesting than hitpoints is the actual states and parts. Some of them can be timed. You could have a boss with no hitpoints. First you knock its shield off. Then you stagger it. Then you knock it down. Then you defeat it. It will try to counter you and strike back, but do so in different ways depending on its state. And it will stand up and pick up its shield if it gets the chance. Rather than hitpoints, it could have levels of stress and tiredness. You could add other stuff, but the point is that the player can learn the state of the enemy without the need for hitpoints. And the same goes for the player health.

Systems

I’m proposing to replace the basic health points with a combination of systems connected to the world you can interact with. It would open up more possibilities to try out different combinations of things to affect your state. You could use more of your prior world knowledge to form ideas about how things might work and what to try.

So it’s not about realism for its own sake. An action oriented game could be frustrating if the player would lose mobility due to injury. The system should not take away from the fun of the game. Making a mistake resulting in an injury should not take away from your survivability. And you should not have to do boring stuff, like gathering healing herbs and resting, just because you weren't perfect in the last encounter.

I often see players run through lakes and jump down cliffs just because it entails slightly less effort than taking a couple of steps to the side and going over the bridge or taking the stairs. Behaving like that outside of battle or time sensitive situations should at least decrease the level of comfort. It should take a long time to dry out clothes and running in wet shoes should increase the risk of abrasions. Doing stuff like that should be visible in the mood of the character, taking her out of the “well rested” state. Discomfort should build up slowly, just as a nudge for players wanting the immersion, without hindering those who choose to ignore it. That is, let players run/fly everywhere if they want, but I would love the game to recognize when I’m taking care of my avatar. The game should recognize and reward things you would do if this was real, while still enabling doing awesome stuff and not take away from the fun of combat.

Generic health-points can be replaced with things like stamina, pain, stress, stagger, daze, bleeding, and so on. Stamina that starts generating after a couple of seconds is loosely based on ATP. You can find suitable connections to the real world through blood oxygen, pressure, sugar, hydration, nutrients, cortisol, adrenaline, endorphins, glycogen and ATP.

A system of adrenaline can be used to give the player a good chance to fight back even after injuries. They have a certain number of seconds to fight back or escape, and then a certain number of minutes until they must stop and rest and take care of wounds. A sprained ankle should result in sound, animations and screen effects, but only have a small effect during the immediate battle. Horizon Forbidden West has the crushed status effect that doesn't stop the player from continuing the fight, but it does stack up future cost, as it would if you would continue to run with a sprained ankle. After the battle and a few minutes after you stopped running, the ankle will swell to begin healing, thus limiting your mobility. You will not be able to sprint, in the same way as you would actively try to keep pressure off the swollen part of the body.

The power of games is that it’s possible to cut out all the boring parts. Finding your way back to safety is interesting if there is a real risk of failure. Taking care of the injury can be interesting the first time you do it. Finding ways to heal can be an adventure in itself. But after you mastered the process, or already gathered all the things you need for it, we could just skip the details. Resting at a camp would imply taking care of injuries and equipment. Games often do this skipping of details through a skill-tree where you don’t have to go through all the steps of upkeep in the later parts of the game.

The level of detail for healing would depend on the type of game. If the game mostly consists of the same type of combat over and over again, you would probably not use this type of system. But I would love it if Horizon had a mode of play where you only could heal at a camp and only craft stuff at a bench.

For the systemic story game I would like to see, every fight would be unique and part of the story. The game will try to give the player different outcomes, in such a way that you would not have to do the same type of recovery in the same way. More on that later.

[[https://www.gamedev.net/blogs/entry/2283684-health-in-games/]]
[[https://www.facebook.com/aigan/posts/10159003994567393]]
[[https://twitter.com/aigan/status/1645444910126964742]]

Horizon Zero Dawn Deep Dive

Jonas Liljegren — Tue, 28 Jun 2022 16:13:49 GMT

Rost: The strength to stand alone, Aloy, is the strength to make a stand. To serve a purpose greater than yourself.

Full spoilers for Horizon Zero Dawn. No spoilers for the Forbidden West. I wrote a mostly spoiler free article here.

Horizon is a beautiful, emotional and intellectually fascinating combination of technology, ecology, politics, psychology and spirituality. I see many connections to both technological optimism, deep ecology, spiritual science and egalitarianism.

I'm interested in positive alternatives for a better future. What can we do to make the Utopia real? I'm envisioning a harmony of nature and technology with people living in peace and creative freedom.

I'm not an expert in these topics. I'm just trying to explain what it is I find interesting in how this world is presented. I'll try to put it into words.

Here is the things I written about, in a series of separate posts:

The Point of the Spear

The beginning mission "The Point of the Spear" gives you the point of the game. To care about the petty narrow-minded people that has done nothing than shunned you.

Aloy: My tribe?! You said I wouldn’t need them.

Rost: But I never said the tribe wouldn’t need you! The strength to stand alone, Aloy, is the strength to make a stand. To serve a purpose greater than yourself. That is the lesson you must learn. And remember it… after the Proving, and after I am gone.

When the tribe finally realize that Aloy do have something of value to give, they fall to their knees:

Aloy: No! NO! Stop this! Up! UP! First you shun me, now this?! I will NOT be worshiped! I’m not your "Anointed!" I don’t belong to you! There’s a whole world beyond your borders. Whole tribes of people just as good as you, and it is all in danger! It’s a world worth fighting for. Not just here. Everywhere.

The game continually shows the limits of dogma. Ted thought the humans would be better of by returning to nature with a life without technology. But lack of knowledge will not end suffering. The technology can be used to destroy nature and all living things. But it can also be used to ease suffering, restore life and build a better world.

I have met people that has developed a scepticism against technology, and especially the view that environmental problems can be solved with advanced technology. There are a lot of valid criticisms against several techno utopian proposals. But that doesn't mean that the only solution is to revert to a life without computers or electricity. I believe nature and technology can live in harmony.

The game as a whole is a meditation on humanity in the space between nature and technology.

Miriam: Being smart will count for nothing if you don’t make the world better. You have to use your smarts to count for something, to serve life, not death.

[[https://www.facebook.com/groups/105986599829686/posts/1436161476812185/]]
[[https://twitter.com/aigan/status/1642919433881493507]]

Gamified education

Jonas Liljegren — Tue, 21 Jun 2022 10:40:27 GMT

Play is the natural way children learn. The passion for play has lead to people developing games in many different forms. We have physical and mental games. Indoor and outdoor games. Imaginative and intellectual games. The advancement of computers has led to new possibilities in the types and scopes of games.

We look at successful games to learn about motivation and engagement. Different people like different games. The important part is that the player is given the space to discover and select their own goals with the prospect to learn something new and achieve something meaningful. The game should give the player clear feedback in a way that facilitates mastery and celebrates accomplishments. It will show the progress towards the player-selected goals. It will adapt the level and pacing of challenges to keep up the interest.

Most traditional systems of educations has some of these things, like tests and degrees. But we can do more to use what we learned about the psychology of motivation to make learning stuff better. Computers also has the potential to personalize the material to each individual person. Combine this computerized gamified education with physical and social activity, creating and carrying out projects to solve real world problems.

[[https://twitter.com/aigan/status/1642386137418199040]]

Jonas blog

Chasing the Sun

Implementing the latest web technologies in a fast and flexible search component

Wikipedia database

Async results

Autocomplete

Flexible style

CSS variables

Material design v3 color system and OKLCH

Material symbols font

Animations

ViewTransition API

Popover API

Everything wrong with hand-written narrative

Open-world

Sandbox

Systemic

Finite content

Guessing game

Story triggers

Finding the good ending

Lacking reactivity

Conclusion

The Promise of Adventure

Who cares about game stories?

Single-player

Immersion

Freedom

Mechanics

Traversal

Story

Conclusion

Getting started with web development in 2024

Short history

The evolution of the web platform

The modern web

VS Code

ES modules

Web components

NodeJS

Optimized delivery

Semantic databases

noSQL

ML Vector databases

Symbolic AI vs Machine Learning

Semantic databases

Data Integrity and Consistency

Performance and Scalability

Data Manipulation

mv-sorter

Adapting a Ghost Theme

Upgrading Ghost

Tailwind

Tags cloud menu

Social accounts

SVG icons

Secret backdoor

Social sharing links

Dark mode

Scrollbar

Discussion links

And more

Ghost replacement

30 years in the Web

Surviving the Burning Shores

Survive

Immerse

Contemplate

Difficulty and surviving

Game systems

Game Interactivity

Game Story

Game Immersion

Psychology and culture

Artificial Intelligence

Technology

Ecology

Economy

Embodied manipulation

Contextual buttons