An Interactive Game Poster based upon The Legend of Zelda video game series made for ARTG 80G - Visual Communication and Interaction Design.

Comments

Log in with itch.io to leave a comment.

Credits:

The sound effects used throughout this Interactive Game Poster were obtained from The Legend of Zelda: Twilight Princess, The Legend of Zelda: Majora’s Mask, and The Legend of Zelda: A Link Between Worlds.


Walkthrough:

When beginning this interactive game poster, the user will be presented with the first screen and prompted to make a choice between three The Legend of Zelda game titles: “Twilight Princess”, “Majora’s Mask”, and “A Link Between Worlds”. While the user initially chooses just one of these titles, which will take them to the corresponding poster, they can also click the “Continue” link at the top to cycle through each of the three game posters. Each of the posters has their own sort of interactive element or “minigame” that the user may interact with: for the “Twilight Princess” one, the user is tasked with uncovering four different collectible items that are hidden throughout each of the three posters (one is on the Twilight Princess poster, one is on the Majora’s Mask poster, and the final two are within the A Link Between Worlds poster); for the Majora’s Mask one, the user is prompted to “Start a Countdown”, which will begin a timer, during which the user must click on 15 different items that will appear on the screen before the timer runs out; for “A Link Between Worlds” the user is tasked with traveling through a very short link-based interactive narrative, which they can start by clicking on the “Start Your Adventure” link, where they must travel through a “dungeon”, similar to those within the Zelda series, and complete different puzzles in order to reach the “boss” at the end and escape the dungeon. The link-based minigame contains several different interactive features, but is structured in a fairly linear manner, where the user is able to traverse through the narrative and complete certain interactive tasks along the way. The “Twilight Princess” one features several collectibles that may be difficult to find, so their locations will be described here: the first collectible is at the bottom of the “Twilight Princess” poster; the second one is at the bottom of the “Majora’s Mask” poster, but can only be seen while the timed minigame is being played; the third is contained within the “A Link Between Worlds” minigame, when, in the left room, the user opens the treasure chest and collects a key, if they scroll all the way down to the bottom of the page they will find this collectible; and the fourth is also contained within the “A Link Between Worlds” poster, just after beating the boss and reaching the end, they can scroll down and see a small sequence of text that can be clicked to reveal it.


Description:

My design goals for creating this Interactive Poster was to create a very simple visual design with a variety of different interactive elements that correlate in some ways to the mechanics present in their original games. The visual design was kept fairly simple, using the same basic design for each poster, but with different color palettes and textual effects to the game subtitles in order to incorporate some of the original aesthetics of each of the three games, while also maintaining an overall consistent design and structure. The interactions present within the Twilight Princess poster focused around discovering hidden collectibles throughout the entire Interactive Poster, while the Majora’s Mask poster focused on setting up a timed sequence within which the user must quickly collect each of the items, and the A Link Between Worlds poster involved a link-based narrative experience where the user travels through a dungeon, solving puzzles and collecting new items in order to reach a sort of “boss battle” at the end. Each of these mechanics was meant to be reflective, in some way, of their original games by implementing some of the interactions within Twine. In terms of my design process, I first sought to establish the overall visual design and color palettes, which I displayed as an image on the backgrounds of each of my Twine passages, which I was enabled to do by adding tags to each of the individual passages and changing their backgrounds on the CSS stylesheet. Overlaying text of these backgrounds was somewhat difficult, as there is not set size that the Twine passages can be, however, I was able to use some of these limited features to space out the interactable and changeable text of each of the posters by placing the text of different lines and aligning the text in certain ways on the background image. I also sought to incorporate different sound elements, to produce more user feedback when certain links are clicked within the interactive poster, where some sound effects would be played when clicking on links, when collecting certain items, and when solving certain puzzles within the link-based minigame. In addition, I sought to incorporate a variety of different user interactions throughout the poster, including “changing” the colors and text of the background poster, uncovering certain links, altering different variables to change what text elements or images are displayed, and multiple different timed events. Some of the primary challenges I encountered in completing some of these interactions was the fact that Twine does not automatically update passages when certain variables are changed within that passage, so in order to account for this, I implemented the (replace:) macro in several different instances, which could be used to change the text displayed within the passage while the user is interacting with it. I did this to update certain variables displayed on the screen, as well as hide or reveal certain segments of text. Setting up timed events was also somewhat challenging, but I was able to accomplish this in several different ways using the (live:) macro in Twine. I used this for the timed minigame in Majora’s Mask, as well as several times throughout the “boss fight” segment in the link-based interactive narrative for A Link Between Worlds. Overall, in my Interactive Game Poster, I sought to incorporate a variety of different interactions that the user may be able to experience as they traverse through each of the sections of my game poster, while maintaining a simple overall aesthetic with color palettes that closely correlate to each of the three The Legend of Zelda games that I incorporated.