#39 UI: Cybertext

"Substance before Style"

 Another post, another storytelling device: The user interface, or for short UI.

Principles of Interaction Design

On his website, Bruce Tognazzini gives a holistic (my favourite!) introduction to what he calls "interaction design". The background he is writing from is that of the great design, UI, UX (user experience) trends which came up with the arrival of digital interfaces. He writes about core topics such as aesthetics, anticipation and autonomy. Here's the link for anyone interested:

First Principles of Interaction Design

However, while Tognazzini is primarily interested in communicating correctly with the user, I as a storyteller am equally interested in the question of how to give the designed interface a style consistent with the narrative or: what options I have to tell a narrative via the interface.

I think the answers lie in all the gaps, the variables that are not determined by interaction design principles. Today's project will serve as a demonstration of this thought:

The User Interface of Cybertext

A recurring reader of this blog or a person studying game studies with me might remember this project. It is, essentially, an interactive novel enriched with some audiovisual and interactive features.

You'll notice that various elements are at times heavily inspired by Cyberpunk 2077, especially its UI (see e.g. this great portfolio). Note however, that this is an unofficial fan work and is not approved/endorsed by CD PROJEKT RED.

Before the actual game starts, the player is presented with a view allowing to determine
herself when the actual gameplay starts.
Also: Opens up a void, which wants to be filled. Color and character usage sets up the theme.

 

When pressing ENTER, the logo is faded in and distorted,
accompanied by an electronic, distorted sound. Link

The standard gameplay view is accompanied by soundtrack and has several
sub-elements with specific thoughts put inside.

The lines and boxes framing text, decision and quest UI have two-fold meaning: Once, they create the impression of a system that can be steered - this is especially reinforced by the line's fading in and out over time. Second, they create the impression of being boxed in, unable to break out of this system - a thought which is reiterated in the game's tutorial and ending, where seemingly corporate messages are delivered about how the game should be enjoyed, for instance. It tells the meta-story of this game.

Regarding the story happening inside the boxes, the right UI is a visualization of the non-linear quest graph with its current state and possible future events. It tells the story that is written down and decided on the left in a way that may generate interest in the future or alternatives.

The entire visual style with mechanical moving elements and a clear reference to Cyberpunk aesthetics sets the atmosphere, thus possibly helping with immersion.

Conclusion

Even if I'm surely no "native" UI designer or 2D Artist, I do am a little bit proud of my work. It feels coherent in the right way - and this, in the end, is what a good production should be like, I guess. Anyway. I would have uploaded the whole game on itch.io already and embedded it here, but I'm not sure yet whether I'm allowed to.

If you already found this post and want to play - stay tuned! As soon as I know more about the legal stuff I'll post this on Twitter with an updated post including the - possibly altered - game.

Until then, have a good time!

#38 NPC Communities: Langeness Pt. 2

 The second post in this series is about concretizing a NPC community concept.

Environmental Storytelling

By placing certain actors in certain places, having certain looks and being surrounded by certain objects, we can tell something about the place and the people living there. This telling becomes even more evident when things are moving: People work, birds fly, plants move in the wind and a mill might be driven by water. This all certainly is worldbuilding and might even be storytelling, if the used actors/places/objects/.. are part of a story. The following video shows how the environment in Cyberpunk 2077 heavily influences its storytelling by mood-setting, contextualization etc.

Cyberpunk 2077 Environment Breakdown with 3D Artist

I decided to not share one of the countless articles on the craft of environmental storytelling itself here, since on the one hand it is a pretty well-discussed topic in narrative and level game design, and on the other hand I simply didn't have a concrete ressource to recommend. 

A Witcher 3 Community: Langeness

First step for community creation and environment art with the radish modding tools (besides basic project setup) is defining a new layer. A layer is like a container for anything that can be placed into the gameworld, including e.g. regular assets like tables and such, but also waypoints, areas and actionpoints (a point that defines the execution of a certain NPC behaviour without yet saying who does it).

A layer definition might look like this (written in YAML):

You can see that a layer "nekkerlayer" in skellige is being defined. It has six actionpoints, each with positional data (x, y, z, rotation) and an action (e.g. "nekker/nekker_angry_jt") assigned. Next come two areas, which consist of a height parameter and an arbitrary number of corner points. Under "statics" various assets are listed; here a blood decal referenced from the engine's asset depot is used.

Such layers can be defined via a game mod and their definition can be dumped directly into the right format.

Not all work, however, has a nice GUI-tool. The community definition itself, meaning the definition of NPCs and assignments of NPCs to actionpoints, possibly also for different phases, times and dynamic world conditions is all written manually.

In the screenshot above you can see how both shown communities (bear- and nekker_community) have actors defined based on existing templates and phases. Phases are used to define different community states that change via quests, e.g. when the community is happily living in one phase, and after the player triggered a local assault a phase were the community is devastated.

In a phase, for one actor (who might be used multiple times) it is defined how they spawn and behave. They might wander around in wanderareas (bear), guard an area and follow an intruding player up to a certain distance (bear), spawn in packs (there are always 2 bears spawning, with a respawn time intervall of 20 seconds). They might also have a pursuit area defining how far they follow the player and show different behaviours (be at different actionpoints) at different times.

After defining layer and community in a file, the radish encoder from the modding tools and the official mod kit translate these definitions into game data and bundle them into mod/dlc extensions, which can be easily plugged into the game.

This makes the main task understanding the concepts behind the many options for layer and community definitions, of which I showed only a fraction here. I'm quite grateful to be able to work on such a high level at all, considering the fact that the official mod kit at release had a much more narrow scope and was much more technical.

Conclusion

Next time, I'll either be done with this trial and present the final post in this series or - and considering the problems I'm having right now with the remaining tasks this might very well be the case - another project will find its way onto the blog.

Hope you're doing well and are taking your time to do nothing!

#37 NPC Community: Langeness Pt. 1

 In this post we're gonna take a look at NPC communities: How NPC are integrated into the gameworld, doing actions, reacting to events and being integrated in quests or small dialogs.

Quest Design in The Witcher 3: Wild Hunt

A neat article including this topic is one written by now Lead Acting Quest Designer Phillip Weber. It covers the technical process of creating quests and communities, explaining how in tools like REDkit or radish modding tools NPCs can have time-bound actionpoints in the world where they repeatedly exercise a certain "job", how they might have different phases in which they show different behaviour, and how they might react to dynamic events like rain. Here is the link:

Making Games Classics: Quest Design in The Witcher 3: Wild Hunt

A more abstract but interesting lesson is that quest designers, while obviously focused on getting quests done with the help of other developers, may also do related tasks like setting up a small scene which doesn't need much cinematography or creating a NPC community which simply enriches the environment the quest plays in.

A Witcher 3 Community: Langeness

In the last post I mastered stage six of the learning course dubbed "trial of radishes". Stage seven is about advanced communities: They should have special guarding or walk behaviours, or dynamic assignment of actions and such things.

From the task description it become evident that it would be sensible to design three communities, each fulfilling multiple criteria. First I thought of a place for them. The Witcher 3 is already quite filled with content, but my long roamings in Skellige reminded of the northern isles there, which are uninhabited and probably unknown to many.

Visiting this place, I decided to name it "Langeness", referencing a "Hallig" (a kind of small isle) in the North Sea to which I lived close for many years. Unfortunately the place wasn't as empty as memory told me: There were a lot of harpies which would later disturb my communities much too often. On the land I found three fitting places:

The majority of the communities NPCs were intended to be in the areas I, II and III, with

• I being a skellige pirate/warrior camp
• II being a couple of bears
• III being a couple os small monsters (ghouls or nekkers)

To make all this more interesting I decided to include some environmental storytelling. On the peaks at 1a-d I intended to place guards looking to the sea, but it turned out terrain probably wasn't plain enough, so I had to reduce this to guards at 2 only. At 3 some times one to two skelligers should show up, mocking a helpless fellow at 4, trapped by the bears. The bears are angry because at III some skelligers had killed one of them (although some skelligers themselves were killed), causing nekkers to appear.

The next post will dive into how I set up communities technically and which ideas guided me when faced with options.

Conclusion

I enjoyed writing this little impression of work that might very will be part of quest design. After all, quests often work with characters and these characters need a place in the world. A community.

Hope you're doing well - until next time!

#36 Scene: The Father

 This post presents the conclusion of long ongoing project of mine, a scene for trial 6 in the trial of radishes, which are a tutorial for the radish modding tools for The Witcher 3: Wild Hunt.

Cinematography Techniques

The active reader might remember post #18, where I introduced how the creation of scenes is organized in the radish tools. There, I begun with the dialogscript for my The Witcher quest around Alene and Co., more specifically the moment when Geralt and the player first meet Alene's father.

The dialogscript, though, is only text and structural organization of the scene flow. The visual, the actors placements, animations, shots and props - the cinematography - was missing. A starting point provided by the trials and a nice ressource for beginners is the following booklet:

Cinematography Techniques: The Different Types of Shots in Film

A much more holistic and thorough review of cinematography can be found in the book Film Art, which already had a lot of appearances on this blog.

A Witcher 3 Scene: The Father

So, here is the final scene:

As you can imagine, progressing from a dialogscript (dialog + basic scene flow) to a storyboard (the central point for the cinematography of a radish scene) is not trivial. And while thinking of a cinematic concept wasn't that difficult, implementing it and fixing all problems was quite laborious. There are a lot of special workflows and technical difficulties involved that required a persistence from me that I did not have all the time, leading to several longer pauses in working on the project.

Here are some shots and trivia I am proud of:

While the flowers are being talked about, a shot from their perspective is shown,
highlighting the beauty Alene has in her mind.

After three shots of Geralt trying to do conversation, we get this close shot focusing
on Geralt stopping (that) and Alene's silentness.

A view from the village, representing the fact that the villagers, too, have a
perspective on the situation: Left: The door to the father, right: Geralt & Alene.

At the door, for the most time Alene is present...

...until her father demands of her to come in, leaving Geralt.
This shot highlights the absence of Alene via negative space.

When the father has left and until he speaks again, Geralt is shown from behind a lot, making for a change in what the eye sees and bringing a feeling of Geralt grinding thoughts.

Geralt in the foreground, the door in the back.

An overhead shot, framing the choice as something that is above single actors.
Inspired by Psychonauts

Also:

• in order to open/close the door, I specifically had to implement the cat, which usually sits in a small basket in front of the house

• the weather starts getting worse from some point on, reinforcing the tragedy of the scene
  

• if Geralt chooses to not get involved, in the last shot, a small leaf flies down, marking a line between the house and Geralt, symbolizing him parting from the situation
  

Conclusion

I am grateful to have finally finished this project. It turned out much more laborious than the previous trials, but then, so did every trial stage so far.

Hope you had fun reading this and/or found something interesting.

Until next time!

#35 Quest: The Lonelines of Old Eremites

After writing the last post, I decided to take another step against my drive for theory. This is on the one hand to get closer to the root motivation for the whole project - practical quest design - and on the other hand a reaction to the simple fact that I'm slowly but surely running out of theoretical content that is not redundant. It might take some time and change until my theory batteries are recharged and then I'll surely continue with those larger text constructions.

The devil is in the details

Instead, these passages will be filled with short reading recommendations. The first one is "The devil is in the details" by former CD Projekt RED Quest Designer and Director Mateusz Tomaszkiewicz.

You can read it here.

It is old, true, but also one of the most accurate depictions of the craft I've ever read (point given, there aren't many depictions at all). Maybe this is due to the fact that I myself am quite CDPR-adjacent in many game development matters.

A Witcher 2 Quest: The Lonelines of Old Eremites

This mod was my first attempt at Witcher 2 quest modding and it turned out to be a long work with some problems not having been fixed even in this release. But oh well: Sometimes, projects and lines of thought need to be closed to make room for new ones.

I know for example, that the lighting is off. And that the NPCs and monster's names do not work correctly. But since time is limited and ressources at times inaccessible, I'll have to live with that. Maybe I will be able to address these issues in future mods.

Conclusion

I'm reinventing, but also modifying my own wheels and I think this is a sensible approach to my learning journey at this point: Right now I still have the freedom to explore in different directions, grasp the width of the field before step by step narrowing my focus. So I wouldn't be surprised if more such turns arise in the course of this project.

I hope you, too, take your time to do the things in your own pace.

Have a good time!