Creative Coding Showpiece:
An Interactive “Choose Your Own Adventure” Game.
In my project Wonderland, I use a coding software, Twine, to create an interactive game based on the story of Alice in Wonderland. As a graphic design student at the Tyler School of Art and Architecture, I have experience creating digital art in programs such as Adobe Illustrator or Photoshop. This is my first experience delving into programs such as P5js and Twine that uses CSS, HTML, and Javascript. CSS, HTML, and Javascript always sounded so confusing to me who had no experience in coding but through this class and project I was able to learn and understand how to create interesting artistic effects through code. In this project I wanted to explore Twine and how to create a functioning interactive game with type and imagery. This case study will detail my process, troubleshoots, and final product from start to finish.
Objective
How can code be used to tell an interactive story? This was the initial question I asked myself when brainstorming ideas for my creative coding showpiece. The goal I had coming into this project was to create a way for viewers to interact with a story to produce different outcomes or endings through the use of coding. Through the brainstorming process and looking at other coding projects for inspiration I came up with a few ways on how to solve my initial question.
Brainstorming
While brainstorming I looked at what was the best way to combine storytelling and interactive elements to create an interesting coding showpiece. Some of the things I had to decide upon was what format I wanted this project to take, how the user would interact within the space, and what story to tell. For format, I looked at side-scrolling games, RPG formatted games, and static formats. With how the user would interact in the space, I looked at having the user control a character through key controls or use the mouse to click on interactive elements. Lastly, I thought about what kind of story to tell, whether I wanted to focus on creating a linear story or one that would branch off with multiple endings/outcomes. I eventually came to the decision of creating a “choose your own adventure” styled game that incorporates type and imagery into a static space for the user to click through. The next step was to script the story.
Process: Script
I decided to base my choose your own adventure on an existing story adding in my own humor and twists. By doing this I gave the story my own voice while also slightly modernizing the content. I decided to script the story and design some of the imagery for the project first to get a clear visual.
Planning the Layout and Script
First Drafts for Illustrations
Process: Prototype
Working in Twine I started off building a structure similar to my script and added in the text and links first before focusing on stylizing the code. Twine starts you out with a single passage that you then build off of by creating links that connect to other passages. I found tutorials to help get a basic understanding of twine before starting. The tutorials I found helpful were from adamhammond.com/twineguide/.
Starting a Story in Twine
So as I was working I found that there are different versions of story editors that twine uses. The image below shows me using the default version, which I later changed to the SugarCube Story Editor version. Switching the story format made it easier to stylize the CSS. The default version had nice built in features but made it harder to stylize in the stylesheet. Since the built-in features were almost a stylesheet on its own, it was confusing to stylize the CSS in two separate places in the document. SugarCube does not have the built-in features which made it easier to work in CSS.
Building Passages in Twine. (Left: Passage Entry with Default Version)
After adding in the script and links it was time to start working on the CSS stylesheet to incorporate the styling and also adding in the illustrations through HTML.
Final Layout of Twine Passages
Process: Working in CSS and HTML
One thing I found while working in Twine is that the program does not have a specific HTML coding space but instead the HTML code needs to be placed into the Twine passages themselves. To place the images I uploaded the them into P5.js web editor and then embedded them into the twine passages. For CSS I started to work on adding the background color, changing the font and the alignment of the images and the text. One resource that helped me in this process is the CSS tutorials from https://www.w3schools.com/css/.
Experimenting in CSS Story Stylesheet
I created classes named “justify” and “center” for aligning the text and images. The “justify” class was used to center the images on the page and the “center” class adjusted the alignment of the type. I made two separate classes to center the text and images because when adjusting the margins to center the image, the type would also adjust with the margins. I wanted the text to stretch past the images, so making a separate class was the best option.
Adding Classes to Change the Alignment of Text and Images
Process: Troubleshooting
I think what I had the most difficulty with was aligning objects and stylizing the type. There were issues with adjusting the placement of the type and images and I also had some difficulty with incorporating different fonts. I was able to get the type to align correctly through using the “center” class in the CSS stylesheet. The other issue I had was also aligning the images, which I later added the “justify” class in the CSS that helped to center them on the screen. Some of the things I tried in my code was making the type go over the image. This briefly worked but it was difficult to move the image along with the type on top. I compromised to have the image small on the page and separate from the type but centered aligned as I wanted it to be.
Attempts at Adjusting the Alignment of the Text and Images
Another problem that arose when stylizing the text was that the spacing between each header became larger when applying different styles to the text (h1, h2, h3). It took a while to figure out what was causing this and I found that it was actually caused by the formatting of the story instead of CSS styling. Where there was a space in the passage the spacing between elements was also affected. So deleting out the spaces in the passages fixed the spacing between the elements in the layout.
Left: Example of Spacing Issue, Middle: Spacing Shown in HTML, Right: Fixed Spacing in Passage
When stylizing the fonts in the layout, I also ran into some issues with including two separate fonts.I solved this issue by adjusting the html link to the google fonts and pasting it into each passage of the Twine story. The incorporation of fonts does not work the same in Twine where the link would be pasted into the top of the html code and apply to all the text. In Twine's case, the link to the fonts had to be repasted into each passage for them to work.
Adding in Two Fonts to Layout
With the illustrations, I wanted to add in some animated elements to make each screen different, especially with some of the illustrations repeating throughout the game. I went into P5.js and created an animated sprite to filter through the same image but with a different color. I changed the speed at which the image filtered through by repeating the images so they would stay on the screen longer. I also resized the images using the scale function since the sprite was showing up larger than the canvas at first. After creating the animation, I then embedded it into the Twine stories. I adjusted the illustrations to add color and inverted the image from the original to fit with the dark background as well.
Final illustrations
I wanted to adjust was the color of the links and text to match the color scheme of the illustrations. When I went into the CSS and changed the colors it didn't work at first. I went back into the Twine tutorials to look at why the CSS for the links was not working. After comparing the code in the video to the code I had in my CSS, I realized I named the links incorrectly in my CSS which was causing the issue with the link colors. By going back in and renaming the links in my stylesheet I was able to get the colors to show up in my design. Through this I realized that Twine does not accept all terminology within CSS. Also, small errors within one or two words of the code can affect whether something works or not.
Correcting the Naming for the Links in CSS
One thing I wanted to try was to make the layout more responsive. When I resized the screen, the images were shown to be off centered. I figured that the "justify" class was causing this and went in to change the CSS. After testing a few things out I found that the width setting was what was causing the image to be off centered and adjusted it to be 100 percent. With this small alteration in the code I was able to achieve the responsive layout I was looking for.
Adjusting CSS to Make Images Responsive
Final Deliverable
To play the game, use this link to access the shared Google file and download the zip folder. Click on the html document in the download to open the game in your browser.
Full Play-through of “Wonderland”
I think I would like to further expand this project by adding more interactive elements into the piece. Since the images were uploaded through P5.js, I could potentially add more coded interactions and animation within the illustrations. Another element that could be interesting to add is audio that would play throughout the Twine story. Working in Twine was very interesting as the format is different in how CSS and HTML are set up in the program. Overall, I think with more time I would like to expand more on the animation and interactive elements within the illustrations.
