{"id":107,"date":"2014-10-31T09:54:03","date_gmt":"2014-10-31T17:54:03","guid":{"rendered":"http:\/\/ice-bound.com\/news\/?p=107"},"modified":"2014-10-31T09:54:03","modified_gmt":"2014-10-31T17:54:03","slug":"visualizing-the-combinatorial","status":"publish","type":"post","link":"http:\/\/ice-bound.com\/news\/visualizing-the-combinatorial\/","title":{"rendered":"Visualizing the Combinatorial"},"content":{"rendered":"

We’ve covered most of Ice-Bound<\/em><\/a>‘s narrative\u00a0system so far in our three-part post, ranging\u00a0from how we make flexible story fragments to the\u00a0combinatorial system that drives the sculptural quality\u00a0of the narrative. Here are links, in case you’re just now coming across this:<\/p>\n

1: General overview<\/a>
\n2: Constructing Combinations<\/a>
\n3: Shifting Story Text<\/a><\/p>\n

For the last part of this “under the hood” overview, we wanted to talk about how we troubleshoot the narrative possibility space.<\/p>\n

The Setup<\/h2>\n

\"Ice-Bound<\/a><\/p>\n

As a refresher, each level in Ice-Bound<\/em> has several symbols which can be activated and de-activated by the player, triggering a cascade of events and\/or endings. That’s what we mean when we say Ice-Bound<\/em> is a combinatorial narrative. Ideally, when the maximum number of symbols is\u00a0active we want to see 3-5 events and 2-3 endings. That’s our self-defined “good amount of content”. It’s not so much text\u00a0that the string of events run the risk of degenerating into narrative incoherence or overwhelm the UI, and not so low that it can’t make a story (or afford the player the ability to choose between endings).<\/p>\n

But how, when designing a level and writing for it, do we make sure that any possible combination of active symbols makes\u00a0a “good amount of content”? It’s a tough problem, both logically and as a visualization. We can’t just run a complicated data viz and call it quits–if it takes too long to immediately grasp the situation, it will bog down the authoring process. We need something we can use as we’re authoring, which means it needs to show the state of the possibility space in a fast and intuitive manner. We ended up developing two linked visualization tools to address this problem. First up: visualizing the possible combinations in a built level.<\/p>\n

For a Given Build of a Level…<\/h2>\n

Each time you visit a new level in Ice-Bound<\/em>, the system builds a new story, based in part on the way you resolved prior stories. This means each level has a large number of possible “builds.” Each build, in turn, has a number of possible states as the player explores it, based on all possible combinations of active\/inactive symbols. To visualize the possibility space for a single level build,\u00a0we use a graph like this:<\/p>\n

\"bars\"<\/a><\/p>\n

There’s a lot of information condensed into this, so let’s break it down:<\/p>\n

    \n
  1. Each vertical bar represents one combination of active symbols.<\/li>\n
  2. The top of a bar (the lighter bit) shows the number of endings activated by this combination. The bottom of the bar shows events.<\/li>\n
  3. If the combination for a bar fails one of the “good amount of content” rules, it’s yellow. If it fails both, it’s red.<\/li>\n
  4. All possible\u00a0symbols, events, and endings for this particular build are shown\u00a0below the graph<\/li>\n
  5. The %s next to events and endings tells us what percentage of this build’s combinations involve those texts.<\/li>\n
  6. If you hover over a symbol, event or ending, it lights up the bars involving that text, showing all possible configurations of symbols in which that element is present.<\/li>\n
  7. Conversely, if you hover on a bar (like in the picture) it lights up the texts active for that particular symbol combination.<\/li>\n
  8. If you click on a\u00a0text, the graph\u00a0re-sorts so that all bars involving that text move to the left, allowing you to see if that text in general needs to be associated with more combinations, or if that symbol doesn’t have enough triggered events and endings for it.<\/li>\n<\/ol>\n

    \"Ice-Bound's<\/a><\/p>\n

    That’s a lot, right? What it boils down to, though, is that by just clicking around a bit, we can quickly answer questions like “do most combinations have enough content?” or “if I’m adding content, where’s the best place to add new content?” or “is that thing I just added getting used enough?”.<\/p>\n

    But there’s more…<\/h2>\n

    There’s a problem, though. Because\u00a0you can build an Ice-Bound<\/em> level many\u00a0different ways, we author more symbols for a level than there are “sockets” to put them in. That’s how we ensure levels can adapt\u00a0based on what stories the player has built in the past. But this\u00a0adds to the number of possible per-level builds.<\/p>\n

    It gets worse, too. For maximum flexibility, we also have a large pool of\u00a0what we call “global symbols”, which can go in any level. They’re really tricky to write<\/a>, but are at the center of what makes Ice-Bound<\/em> deeply responsive to player input, so they’re also super-important. But because of them, there are even more possible per-level builds.<\/p>\n

    How many are there? Depends. Currently, one level with eight sockets and a three-symbol activation limit has ~5,000. Another level with nine sockets and a four-symbol limit, though, has ~50,000 possible builds. You could hit refresh and re-load that bar graph, but the graphs differ widely\u00a0depending on the symbols involved, and pressing a button 50,000 times is considered in general a bad workflow.<\/p>\n

    Browsing Problematic Builds<\/h2>\n

    To tackle this problem, we came up with a second\u00a0visualization tool. We started with\u00a0the idea that of all possible builds, the ones we’re most<\/em> concerned with are those\u00a0with “red bars”,\u00a0which\u00a0have at least\u00a0one\u00a0combination of active symbols that doesn’t produce\u00a0enough events and<\/em>\u00a0endings.<\/p>\n

    Since this generally happens because a certain symbol isn’t connected to enough events\/endings, we categorize these problem builds by symbol, using a bubble graph:<\/p>\n

    \"Ice-Bound<\/a>
    A viz display for a well-authored, balanced level.<\/figcaption><\/figure>\n

    There’s a couple things going on here:<\/strong><\/p>\n

      \n
    1. The black labels are the symbol names<\/li>\n
    2. The number \/ size of the bubble is how many “problem builds” the symbol is involved in<\/li>\n
    3. The color reveals\u00a0what percentage of all possible\u00a0builds\u00a0involving that symbol are problematic…traffic light style. Green = good, red = bad. If a symbol doesn’t trigger enough events and endings, it will be redder, indicating it\u00a0needs to be a trigger for more content (or more content should be written that involves it).<\/li>\n<\/ol>\n

      That’s pretty good, but what if I want to get more specific?\u00a073 combinations involving “Romantic” doesn’t tell me much. Fortunately, this viz is also interactive. Clicking\u00a0on any bubble rearranges the graph to show only the distribution if\u00a0the symbol you clicked stays active. So drilling down looks something like this:<\/p>\n

      \"figure1\"<\/a><\/p>\n

      This helps you explore a pretty complicated space of possibility by using two criteria: shoot for big bubbles, and shoot for red bubbles.<\/p>\n

      You might need a bit more info though. So there’s also a panel:<\/p>\n

      \"figure2\"<\/a><\/p>\n

      This tells us that:<\/strong><\/p>\n

      A: we’re looking at all combinations involving these three symbols
      \nB: there are 13 total combos with these symbols, 3 of which need content. So if you’re adding content with these three symbols as triggers, it’s 23% effective (because you’re also adding content to things that have enough content, which we’d like to avoid if possible)
      \nC: here let’s make that a pie chart\u00a0so you don’t have to read numbers all the time
      \nD: let’s keep it in perspective too, so how much of the total combos needing content are we hitting if we author stuff for these?<\/p>\n

      So for the picture I gave, you could look pretty quickly and think “huh…looks like I should maybe de-select one of these symbols and see if I can find a combination with a higher ratio, so the content I author is more effective”.<\/p>\n

      That’s…complicated.<\/h2>\n

      Yes. But the feedback is fast and rather immediate. Crucially, these two visualizations are linked together, so clicking on a specific build in the second viz loads the first viz with that build<\/em>,\u00a0so you can move from a generic “problem build” to teasing out the exact cause of the problem.\u00a0Essentially this lets us have a troubleshooting\u00a0workflow\u00a0like this:<\/p>\n

        \n
      1. Hey “Lonely” is\u00a0a big bubble. Is it a little more yellow than the others? *Click*<\/li>\n
      2. Huh, yeah. Oh look…”dogId” is bigger than these others! *Click*<\/li>\n
      3. Cool. Let’s try “shaft” *Click*<\/li>\n
      4. Nooope. All the circles are tiny now. *Click to de-select*<\/li>\n
      5. Eh…that’s pretty good I guess. Ratio’s pretty high. Let’s look at a sample level build with that combo *Click*<\/li>\n
      6. [bar graph viz loads] Yeah, I should totally write two events with “Lonely” and “dogId”…maybe with a “not iceAx” so I don’t hit these others, since they look pretty good<\/li>\n<\/ol>\n

        \"Visualization<\/a><\/p>\n

        So that catches everything?<\/h2>\n

        Not everything…<\/em>but short of more complicated, involved visualizations, it does the job pretty good! Tools\u00a0like this help us navigate the “combinatorial wilderness”, and make sure we have enough content\u00a0to cover all our bases, without requiring that we write a thousand novels of text.<\/p>\n

        Thanks for reading! If you want to read a more technical write-up, you can check out our paper on the viz tools from the 2014 Foundations of Digital Games<\/a>.\u00a0We also want to give a shout-out to Melanie Dickinson, who worked with us in summer ’13 and was instrumental in getting the viz tools off the ground!<\/p>\n

        Our Ice-Bound<\/em> Kickstarter is in\u00a0its final days<\/a>, and our next stretch goal is open-sourcing the narrative engine behind the game, including these tools. Help us make it happen by becoming a backer<\/a> or\u00a0spreading the word online\u00a0via\u00a0Twitter<\/a>,\u00a0Facebook<\/a>\u00a0or your communication network of choice.<\/p>\n","protected":false},"excerpt":{"rendered":"

        We’ve covered most of Ice-Bound‘s narrative\u00a0system so far in our three-part post, ranging\u00a0from how we make flexible story fragments to the\u00a0combinatorial system that drives the sculptural quality\u00a0of the narrative. Here are links, in case you’re just now coming across this: 1: General overview 2: Constructing Combinations 3: Shifting Story Text For the last part of … Continue reading Visualizing the Combinatorial<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":109,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-107","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"_links":{"self":[{"href":"http:\/\/ice-bound.com\/news\/wp-json\/wp\/v2\/posts\/107","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/ice-bound.com\/news\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/ice-bound.com\/news\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/ice-bound.com\/news\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/ice-bound.com\/news\/wp-json\/wp\/v2\/comments?post=107"}],"version-history":[{"count":1,"href":"http:\/\/ice-bound.com\/news\/wp-json\/wp\/v2\/posts\/107\/revisions"}],"predecessor-version":[{"id":119,"href":"http:\/\/ice-bound.com\/news\/wp-json\/wp\/v2\/posts\/107\/revisions\/119"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/ice-bound.com\/news\/wp-json\/wp\/v2\/media\/109"}],"wp:attachment":[{"href":"http:\/\/ice-bound.com\/news\/wp-json\/wp\/v2\/media?parent=107"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/ice-bound.com\/news\/wp-json\/wp\/v2\/categories?post=107"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/ice-bound.com\/news\/wp-json\/wp\/v2\/tags?post=107"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}