It was a sunny, hot morning in July when I opened Outlook and took a look at the messages scrolling slowly past. Meeting, meeting, meeting, ... and a request! My colleague, Chris Noring, had cc'ed me on a message about an innovative code-challenge project that had been launched several months ago. It involved a Power Animal Quiz to engage developers and raise awareness of Microsoft Learn, a repository of educational modules that help developers learn about Azure, Microsoft's cloud offering.
Apparently, the Power Animal Quiz had been a hit, and the hunt was on for a new and cool project to engage developers. "They are building an awesome campaign with compelling content and a fun challenge", Chris wrote. I was curious and immediately thought of puzzles such as those created by Google to reveal the date of Google I/O. Could we create an online puzzle for developers? Would they like it? What would it look like?
Over the next few weeks Chris, who has a degree in game development, and I started thinking about the type of project that we could create that would both be fun and innovative to build and that would engage developers in a cool, retro way. A scavenger hunt? A "choose-your-own-adventure" clickable game? We settled on a text-based game that would be entirely clickable to proceed, something like the old-school games we used to play in Middle School like Raaka-Tu. The premise would be to wander through an old house, picking up objects and solving puzzles along the way. The first prototype used a library I discovered on GitHub with art likewise borrowed from the internet. It looked like this:
As the project progressed and Halloween approached, we pivoted slightly both with the folks who were involved in the project and its overall atmosphere. Dubbed the "Azure Mystery Mansion" (a nod to work I have been doing recently on Beatles lyrics), the project started integrating custom art and new puzzles:
As Chris turned his attention to other projects, a new team member was added, Em Lazer-Walker, a specialist in text-based games as well as other innovative game experiences. An ideal team-member for this project, Em introduced a new architecture to the project: Twine, "an open-source tool for telling interactive, nonlinear stories". I'm certain I never would have found this project by myself, but having worked with it, it's a super way to build this type of game, which has been used to build other well-known text games such as Zoe Quinn's Depression Quest. You should give it a try!
Building a Text-Based Game with Twine
If you've never tried Twine, you can download it for free. Using Twine 2, you are given a graphical interface where you craft your users' pathways. For example, from a front porch, a person can enter a foyer, from which several rooms branch off; the user can wander into a library, a salon, a dining room, or go upstairs to the bedroom.
You can style your app using basic CSS, and you write your logic in one of several possible game engines that come with markup formats. We used Harlowe, which looks like this:
(set: $inventory to (a:))
(set: $chest to (a: 'a shield', 'a suit of armor'))
(set: $chestOpen to false)
:: inventory [header]
You are currently carrying:
<!-- if the inventory contains nothing, show "nothing" -->\
(if: $inventory's length is 0)[\
nothing.
](else:)[\
<!-- we iterate over the array and print each item -->\
(for: each _item, ...$inventory)[\
_item (unless: $inventory's last is _item)[, ]\
].
]
In this sample, the inventory array is initialized and the items in the chest are assigned to it. Then the inventory is printed out.
To progress in the game, you write the narrative and then enhance it with arrays, variables and macros.
You find yourself inside a small room. In the corner, you see a sword, and decide to pick it up.
(set: $inventory to it + (a: 'a sword'))\
[[Continue|hallway]]
:: hallway
You see a chest here in the hallway. \
(unless: $chestOpen)[\
Do you want to open it?
{
(link: 'Open the chest.')[
<!-- adding to arrays together can also be done with the + operator -->
(set: $inventory to it + $chest)
(set: $chestOpen to true)
(goto: 'chest')
]
}
](else:)[\
It's open, and there's nothing inside.
]\
[[Move on.|dart trap]]
In the above example, you explore a space, pick up items and perform tasks such as opening a chest to view its contents.
Using Twine, we created a spooky mystery mansion experience where folks can solve problems in each room, like entering codes into an old rotary phone to open hiding places. Twine exports the entire game to a flat html file, which you can then commit to GitHub to be picked up by Azure Pipelines to complete the CI/CD process and build out the game's website.
Game Analytics with PlayFab
You may have written a blockbuster game, but it won't do you any good unless you have analytics behind it to show you your users and their paths. We are lucky to have a Microsoft-owned game platform called PlayFab that serves as a robust and easy to configure and manage game PAAS. PlayFab can provide a scalable backend for large-scale online multiplayer games, handling everything from matchmaking to in-game economy to social features. It provides a backend for the Mystery Mansion, even though it's a much smaller game that's not using any of those features. We're only using it to gauge numbers of visitors and to gather some basic analytics data about how players are doing:
We're using basic PlayFab login to track how many daily users we have, and where in the world they're coming from. We're also using the real-time PlayStream events API to log whenever players do things like solve a puzzle, so we can get a clearer sense of questions like how much time people spend on the game, what percentage of players beat it, and which puzzles are stumping people. Integrating PlayFab into our Twine game only took a few minutes!
Dare To Play!
Do you want the deeds to the Azure Mystery Mansion? Solve the puzzles, collect 8 keys in the rooms, and climb to the attic for your prize. Then tweet about your experience to spread the word!
Top comments (0)