{"id":47886,"date":"2020-06-22T14:41:26","date_gmt":"2020-06-22T21:41:26","guid":{"rendered":"https:\/\/www.microsoft.com\/en-us\/industry\/microsoft-in-business\/?p=47886"},"modified":"2020-06-22T14:41:26","modified_gmt":"2020-06-22T21:41:26","slug":"unraveling-the-azure-maya-mystery-and-building-a-world","status":"publish","type":"post","link":"https:\/\/www.microsoft.com\/en-us\/industry\/microsoft-in-business\/business-transformation\/2020\/06\/22\/unraveling-the-azure-maya-mystery-and-building-a-world\/","title":{"rendered":"Unraveling the Azure Maya Mystery and building a world"},"content":{"rendered":"

Last Hallowe’en, it was my pleasure to help launch the\u00a0Azure Mystery Mansion<\/a>, a text-based game built using\u00a0Twine<\/a>. Users explore the various rooms of an old house, picking up keys that allow final access to the attic where they claim the deeds to the house. In the process, rooms are unlocked by discovering solutions to small puzzles and gathering clues from\u00a0Microsoft Learn<\/a>.<\/p>\n

\"Azure<\/p>\n

I learned a great deal on the making of this type of game from Em Lazer-Walker, who led the development of the original Mystery Mansion and enhanced Twine to work better for multiple developers. She also perfected its\u00a0integration with PlayFab,<\/a>\u00a0the game’s backend.<\/p>\n

\"playfab<\/p>\n

The game was a hit. A big hit. So big that it caught the imagination of many folks at Microsoft. We were soon making plans for a V2 of the Mystery Mansion, which I envisioned as a continuation of the old-house motif. But the Mansion storyline ends so nicely, with the user gaining the keys to get the house deeds in the attic, that I couldn’t seem to find a good way to continue the trope. Do we continue with a tour of outbuildings and old antiques stuck in a shed? Somehow the “Mystery Outhouse” doesn’t have quite the same panache. Clearly, a new tale had to be told. In addition, we wanted to somehow localize the experience to make it more pertinent to a regional audience.<\/p>\n

From Mansion to Mystery<\/strong><\/p>\n

Enter my work with my brother, an\u00a0Art Historian at Cal State Chico, Matthew Looper<\/a>. Inspired by his work, it struck me that a game centered around ancient Maya culture would resonate with our pan-Americas group with cloud advocates and project managers who cover Canada, US, and LATAM who were particularly interested in continuing the project. We gathered a team of regional PMs and marketing experts to make this idea a reality. Foremost in my mind was to not spin up an ‘Indiana Jones’ type mish-mash of exploitative cultural tropes, but to create something genuinely respectful of ancient Maya culture that was both educational and fun.<\/p>\n

And so, our path became plain. We would partner with experts to create a game that taught about Maya glyphs while exploring a mysterious pyramid, encountering surprises along the way. Working with an illustrator who is an expert in creating architectural drawings and reproducing glyphs would ensure its cultural appropriateness, so we contracted with illustrator Dana Moot II to create accurate depictions of a fictional Maya pyramid.
\n\"An<\/p>\n

In addition, our experience in December with the success of our\u00a025DaysOfServerless<\/a>\u00a0event, also a large group effort centered on exploring aspects of Microsoft Azure, provided a supplemental road map for the game. By building a scavenger hunt that also pushed users to solve puzzles by actually shipping code, we would showcase product launches progressively over a three-month, three-part release. The first one would be Azure Static Web Apps, and the user would be given a challenge to discover the meaning of one of the three glyphs that makes up the temple’s name. Not to reveal too much, but didn’t you always want to chat with a goddess? You’ll deploy a chat interface built with Gatsby and use Azure Static Web Apps to view it live, learning the name via chat.<\/p>\n

Tech challenges<\/strong><\/p>\n

While Twine worked brilliantly for the Mystery Mansion, I wanted to try a tool that gave me a little more design freedom and was a JavaScript-native tool that would foster collaboration. I wanted something that would enable many people to write parts of a game or to localize it, and that would be easier to scale and maintain. And of course, I reached for a tool that was most familiar to me (my blog is built using it):\u00a0VuePress<\/a>.<\/p>\n

The tech stack<\/strong><\/p>\n

As a\u00a0Vue.js<\/a>\u00a0developer, I immediately gravitated towards VuePress, a static site generator that would work well for storytelling using files written in markdown. By using this toolset, which allows both styling via\u00a0Tailwind.css<\/a>\u00a0and importation of standard Vue.js single-file components, we were able to get better control over the interface and more flexibility in the way we designed it while keeping the ‘vintage’ look of the text-based game intact.<\/p>\n

An example of the storytelling-friendly format of the game can be seen by perusing the markdown files that tell the tale of the pyramid exploration:<\/p>\n

\"coded<\/p>\n

\"coded<\/p>\n

Child components display a glyph to collect, and once that condition is solved, the matching page navigation is displayed. Props are sent from the parent page to its child, to display instructions and actions to take. Item clues are contained in a localized json file:<\/p>\n

\"coded<\/p>\n

\"coded<\/p>\n

The game engine<\/strong><\/p>\n

Jen: “Let’s use VuePress! How do we make a game in VuePress?”<\/p>\n

Chris Noring: “Hold my Gl\u00f6gg.”<\/p>\n

Within a ridiculously short amount of time, Chris had spun up a basic\u00a0VuePress-based game engine<\/a>\u00a0using scoped slots, local storage, and a basic storyline written in markdown. I took this kernel of a game and built it into a\u00a0journey<\/a>\u00a0to explore a pyramid, taking pictures and solving puzzles to restore glyphs vandalized by looters.<\/p>\n

A camera interface displays the ids of images stored in local storage:<\/p>\n

\"coded<\/p>\n

\"coded<\/p>\n

\"infographic\"<\/p>\n

Localization<\/strong><\/p>\n

Since we knew, given that the game was for the regional team, that we would need to localize it, providing translations in French, Spanish, and Portuguese as well as English, we had to create an interestingly hybrid approach to translate both the markdown files supported by VuePress as well as the localizable strings used in the Vue.js files for the more complicated game play.<\/p>\n

While VuePress has a built-in way of handling translations using routing (\/zh\u00a0vs.\u00a0\/fr\u00a0routes, for example, will display appropriately translated content), there needed to be a way to propagate those changes to nested Vue.js files, such as puzzles embedded as child components. Enter the EventBus, a good way to signal to child components that changes to translations have occurred, and to pick up different translated strings.<\/p>\n

When the UI is told to switch locales, the EventBus emits a command:<\/p>\n

EventBus.$emit(“lang_changed”, lang);<\/p>\n

And this command is acted upon, informing the child components that the language has changed and that the locale controlled by the i18n plugin must be switched:<\/p>\n

EventBus.$on(“lang_changed”, lang => (this.$i18n.locale = lang));<\/p>\n

\"infographic\"<\/p>\n

The backend<\/strong><\/p>\n

Since this site is deployed on Azure Static Web Apps, the game is contained in\u00a0\/app\u00a0and any API calls are contained in\u00a0\/api. Using the PlayFab SDK for Node, we are able to consolidate all API calls to the backend in this separate area and use Azure functions to invoke them. A login request can thus occupy only 20 lines:<\/p>\n

\"coded<\/p>\n

\"coded<\/p>\n

Deployment<\/strong><\/p>\n

Dogfooding is a great exercise, and the Azure Maya Mystery lives in the very product showcased by its embedded challenge, Azure Static Web Apps. It was shockingly easy to deploy the app; the challenge for us occurred when we were obliged to move the game into a subfolder so that it could be deployed on the Microsoft.com subdomain. This requirement forced some reshuffling of assets and the addition of a postinstall script after the app is built by VuePress, to copy images to an internal folder, but the deployment process was quite smooth.<\/p>\n

Learn how to\u00a0Publish an Angular, React, Svelte, or Vue JavaScript app and API with Azure Static Web Apps<\/a>.<\/p>\n

\"screenshot<\/p>\n

And also check out:<\/p>\n