DT: Conversation Visuals

Hey everyone, welcome to another Stonehearth Desktop Tuesday! This is week three of our deep-dive into the conversation system, as part of an ongoing series that illustrates how a Stonehearth feature goes from a concept into the game. Stonehearth is a game about a small group of people optimizing their environment in order to thrive, so the primary goal of the conversation feature is to commemorate your achievements from your hearthlings’ point of view.

Last week we explored how Artist Malley made a ton of new animations to turn each conversation into a mini-story, one that conveyed that hearthlings had opinions about the things they encountered. Today, let’s look at how Artist Allie, with the help of Malley and Engineer Max, designed the look and feel of the thought bubbles so that they both show subjects—things hearthlings have recently interacted with—AND how each hearthling feels about these subjects.

Conversations – Visual Design

Recap from the video:

  • Thought bubbles first display a subject—something hearthlings have recently interacted with—and then how each hearthling feels about that subject.
  • At first, we thought this task would be pretty simple! In a stream from last year, we did a quick mockup of a rabbit head in a thought bubble. A little badge, or a red border, or some colored hearthling language, denoted the hearthling’s emotion about this critter.
  • When Allie looked over the project she immediately identified some key problems with that approach, the first and most important being that the conversation bubbles had to read well even at tiny sizes.
  • Unlike hunger or sleep or harvest toasts, which give you actionable gameplay data, or that signal that you’ve taken an action, and therefore remain clamped at a certain size no matter the camera’s distance, conversations are an informational enhancement to the game, and therefore ought not to be fixed size, or they’d be all the player would see, potentially drowning out more relevant information.
  • Conversation bubbles may have to appear very small on screen.
  • Having multiple things inside the bubble, like a face to show mood, was not going to work; the more shapes you have in a tiny space, the harder it is to read. Allie then made a study of a number of possible dialog box shapes, some of which would denote joy, others of which would denote sadness, and the last of which would be a plain neutral opinion.
  • Allie, Malley and Max put some drafts of these shapes in the game, but it turned out that even the simplest of these complex shapes could not be distinguished from each other when zoomed out. Only the very basic box shape survived their tests, so they knew that they’d have to find another way to denote positivity and negativity.
  • Allie began to work with color to convey this—light yellow for happiness, and dark blue for sadness. This was tricky, because colors are actually hard for the eye to distinguish (and colorblind people can’t distinguish them at all) and the Ascendancy in the forest has a very mid-tone palette, so when zoomed out, a mid-tone yellow blended right into a mid-tone green or blue.
  • In the end, Allie solved this by making the happy color a very light yellow, and the sad color a very dark blue, emphasizing value differences as well as color differences.
  • The other complication we ran into was the fact that while zoomed out, subjects were quite hard to distinguish. Though when zoomed in, it’s quite tempting to put in headshots of goblins or rabbits or wolves, because then you get more resolution on their faces, we discovered that if the bubble is really small because you’re reading it from a distance, you’re much more likely to recognize the subject if the whole subject’s profile is depicted, since that is how you’re used to identifying the subject when you see it in game.
  • When making the silhouettes of wolves or ogres, for example, we made them distinguishable when you see a full body shot of them from far away, so it makes sense that they would be most recognizable from far away in this shape.
  • We did hit upon the idea of hiding the subjects if the player was sufficiently far from the balloon, since if a subject is too small there’s no hope of seeing it at all. In this case, all you’d see is the emotional tone of the conversation. Max suggested using happy and sad faces for this, to make the tone really explicit, but we ended up feeling that this conveyed that the hearthlings mood actually increased or decreased when they talked about happy or sad things.
  • In actuality this is not the case—agreement causes mood increases, and disagreement causes decreases—so in the end, we moved Max’s face idea to the end of conversations, at the point in which the conversation itself actually changed a hearthling’s state.
  • Once we had this design, we still encountered a daunting number of technical problems before Allie, Max and Malley felt the system was good enough to put in the game.
  • The primary issue was that all the subjects and all the balloons were incredibly fuzzy, because the game allows you to zoom in and out. This resizes the pictures and causes aliasing, or fuzzing, between pixels.
  • To alleviate the issue, Max set a minimum bubble size that would display pixel-perfect no matter how far away the bubble is.
  • We also changed how we scaled the bubbles, moving from world-space scaling to screen-space scaling, over which the game has more control.
  • Finally, bubbles had halos because transparent pixels were being displayed with weird colors. Allie and Malley fixed this by switching some of the items to .tga instead of .png in some cases.
  • Saving out specific subject portraits for all the objects in the game was taking forever, so Max solved this by creating an automatic camera that will take pictures of every object from a predefined distance and angle. Some items like jerky still needed to be fixed up manually, but this saved the team as a whole a ton of time.


Other Announcements

Stream! Stream is happening this week on Thursday at week it’s Artist Matt Malley, so hop in with animation, vfx or general art questions!

Work! This week, aside from conversations, the team is working hard on bugs—our recent push to Steam Unstable uncovered an issue between Symatec and our version of the sound library SFML. We haven’t updated our SFML instance in 3 years, so we’re sure nothing has changed on our end, but Symantec is unconvinced. We’ll keep petitioning them, but in the meantime, Justin is upgrading our instance, which is always fraught; in our case, a bunch of our audio now crashes on load.

The rendering abstraction work we did altered the way we use the pathfinder, which was the source of some of the idle hearthling bugs you guys noticed earlier this week. It turns out the pathfinder was giving up earlier than before, and also consuming more CPU than before. Max, Linda and Chris tanked this one, and hopefully it should be fixed in the version we shipped last night.

In addition to this, the team continues to work on conversation features, on tuning conversation frequency, and on some long term projects—building performance and AI, metagame design, water, and concept art, with some notable experiments from Chris in improving the UX of building walls and rooms. You can see these in his devstream from last week, or on YouTube here! Stonehearth Dev Stream 275: Moar building