link: http://imanas.shanghai.nyu.edu/~zw1745/26htmls/index1.html
This is a screenshot of all our html, css and js pages as well as images and music sources.
The name (26 htmls):
The comic project is named after the number of html pages we’ve created for it. For in each html page we have different animations and conversations, it is hard to keep everything within one page and just switch the pictures.
Also. the 26 htmls is also a must if the player wants to go through every plot in this story.
Sketching stage:
Madi and I are both crazy for the Netflix series Black Mirror, its latest work Bandersnatch which allows the players to choose their own plots deeply inspired us. We immediately decided to design our comic into an interactive comic, allowing our players to encounter different plots by exploring the map themselves. Also influenced by Black Mirror, the theme of the comic is pretty dark, originally we planned to make the comic reveal the darkness of humanity through making hard choices between dilemmas, however, we soon discovered that our skills are limited in writing the lines and what we’ve written can’t fully express our ideas, nevertheless, we compromised to the best we can do. We sketched out a thorough plan of our plot, it’s a tree shaped chart which leads to 8 different endings.
(Blurring out the endings to avoid spoilers)
Coding:
We distributed our work well, Madi was mainly in charge of drawing and css layout while I focus on coding in index and javascript. Within two days we sketched out our protagonists and got ready for building index pages. We started with a cool torchlight effect which we got our source code online, I studied the code and changed the original background to what we photoshoped, and turned it into the beginning page we can see now. Then we drew our buttons on photoshop to create a more story feeling instead of using the stiff default buttons in html.
The word changing effect in this comic is achieved by switching png pictures instead of directly showing the words. We didn’t use innerHTML function for we want the texts to appear after the player clicks on a speechbubble. But now looking back, I think I can use “display: none” in html and “display: block” in js to present the conversations and keep them in a stable position.
The only animation we have in the comic is the boy, I used a simple moving code to make him move a little in some pages, we also have footsteps and chewing sound effect inserted within the code and the players will encounter them when coming to certain scenes.
The coding process was very confusing, since we have so many pages and the choices the player chose before will affect how the boy appears in later scenes so we had to create multiple pages with tiny differences for a same scene. The background color changes in some scenes, it is a return to our concept “finding humanity”, lighter backgrounds indicate that you’ve made choices closer to your humanity while darker ones mean you’ve done dark things.
User testing, Conclusion and Reflection:
To conclude, we finished 80% what we had planned originally, we didn’t abandon any originally made plots and completed the 8 endings. However, during user testing, we find that it’s hard for our users to compromise to the unclear instructions in the game. For example, every input the user enters must strictly follow the two choices presented within the question, and the user didn’t know they should click the boy for animation before clicking onto the speechbubble. If I were to do a revision, I would fix the first problem by adding more “or”s to the if conditions, and make the boy move automatically without the user having to click on it.
Overall it’s a fun experience of creating artworks and building interactive website. Though my creation is limited due to my ability in coding, I would try to compensate that by learning more coding tricks in the future, especially those that can help with simplifying my codes.