Interactive Poster: The Legend Of Zelda

Walkthrough: 

Note: There has been a notable glitch with my buttons, in which due to the placements of them the mouseclick from the previous screen would also affect the next screen, therefore rapidly switching screens. I tried to mitigate this the best I could, but if the buttons don't seem like they are working when you click them, please either wait a short time or rapidly click the button.

PLEASE CLICK THE BUTTONS AND DON'T HOLD THEM!

Now on to the actual walkthrough.

Title and Story

• A short story that I have created, that you can click to progress and Navi will move around with your cursor. There isn't much aside from storytelling. My original plan was for this section to also be more intractable, with sound effects, more original pictures, and animations.

Temple of Time 

• You are completely in the dark and the only hope of getting through the temple is finding the three force gems (Red, Green, and Blue). Once you click on them, you will be asked a question about the traits of the hero. (Red is in the top of the door, Green is left of it, and Blue is on the bottom right).

• You MUST answer YES to all of the questions. If you press NO you are taken to the game over screen.
• There are Hidden Drawings on the temple walls. If you click on them, sounds will play on them (E.g, Midna, Skull Kid, Bow and Arrow).
• Once you get all 3 gems the door will open (The Door disappears and a black pathway shows up), allowing for progression.

Master Sword:

• When you reach the chamber of The Master Sword, you must pull out the master sword from the pedestal. To pull, you must hold your left click on the mouse, and drag out the sword by swiping upward.  The Master Sword will shake to indicate it has been/being pulled.
  • If you want you technically can push The Master Sword back to its original 
  • There are cases as it seems as if Master Sword is fully pulled out from the pedestal, but does not stop pulling. Once you hear a sword slash, a spotlight will come on and music will play. 
• There are cases as it seems as if Master Sword is fully pulled out from the pedestal, but does not stop pulling. Once you hear a sword slash, a spotlight will come on and music will play. 
• After you pull the master sword, You will get an explanation of what it can do

Cutting the screen:

• Now, Navi will wield the Master Sword with you so you can dispel the darkness.
• You must swipe your sword from left to right to cut the screen. 
• A sound effect will play that will indicate you have swung your sword fast enough.
  • You must swing from left to right to progress, however. You can mess around with the sword-slashing as much as you like :)
• It will transition from black to white, then it will gradually go to the hub poster.

Hub:

• The Main poster, which gradually shows more as time passes.
  • More so cosmetic than interactive. Original idea was to have more animations and sound effects, alongside monsters, with each tab going to various character bios, gameplay images, and interactions.
  • However, there is still a bit of interactivity.
    • Credits: Credits for Sound Effects and which games they came from. Couldn't fit fonts so will include them in the design choice.
    • Title: Goes Back to Title. There is a little easter egg included
      • (Thanks for Playing message and the song stays as the hub world version rather than normal music)
    • Misc. : Includes various small talk about what I have done in the project, what may have been planned, etc
    • Secrets: Lists common secrets and trivia about the poster

Design Choices: 

- Overall Poster

When we got the instructions for the Interactive poster, I knew from the start I wanted to make a story about the typical journey of Link in a Zelda game, in which he would travel around the world to get certain items to grow as a hero and eventually go find the Master Sword. I wanted to capture that feeling in this interactive poster, where the player must look around to find what they are after, getting the sword, and freeing the light from the dark with a swing from the sword.

Hence, I went from a dark to light aesthetic. In the Title and Temple of Time, Most of my colors were much darker, with the colors being more muted, and even the contrasting colors being more natural than contrasting. The Temple of Time is pitch black with Navi being the flashlight, in order to give the player some anxiety and want to search around the area. Once they get through the door, their tense feeling eases a bit as they see a reward ("the sword") but still have to pull the sword, thus not ending their path. Once they get the sword and are congratulated, they can clear the darkness, and the soft colors, calm music, and the background easing in gives the player some relief and feel that they reached their goal.

- Design Process

From my previous assignment, I have thought I should focus more on font and font pairing.  Rather than going off of my intuition and believing that certain fonts works with others, I read more about font pairing and used couple of websites to come up with the following 3 fonts: - Eczar, Pacific Nine and Trirong. All 3 of these fonts serve their purpose, with Eczar being bold and more suited for the titles of each chamber (Such as "courage" and "Power"). Trirong has the ability to contrast with Eczar being thinner and less bold, whilst Pacific Nine being in the middle of the road. As I was experimenting with p5js, there were some instances I wasn't sure whether or not the pairings worked, but I felt the 3 were more cohesive compared to my previous assignment.

For color choice, I stuck with 2 - 3 colors within a certain color range, usually contrasting light and dark using Monochromatic or contrasting Analogous colors in order to make the color scheme work in my context (In general, monochromatic each chamber branching from the main path, and analogous for main parts such as the title and hub poster). I stuck with the same idea I used for my previous assignment, in which I would not try to mix colors that are complementary or not harmonious).

While going through the process of the interactive poster, there were both ups and downs. For one, I really enjoyed drawing again. It has been a very long time since I have drawn and this project helped me want to pick up and improve on Art again. Was it something that is what I want to achieve in the future? No. My art is still far from it. Was my artwork satisfying to look at and fun to draw at this skill level? Yes! In fact, The Master Sword and Link drawing were some of my favorite art pieces I have drawn in a while, and the patterns for the door were fun too.  Coding also was a fun experience, because for so many years I have been stuck coding in a terminal with mostly words and numbers being spat out, and it has been a while since I was able to code something that played around with images. I definitely felt I was doing a lot more Google searches, trial and error, going back and forth with my code to make it work right. For example, a big obstacle I hit was the Master Sword (which ended up being my favorite part of the poster). The thing with the Master Sword I wanted to achieve was a gradual pull and not a smooth pull. I wanted the player to actually feel like they are trying to get the sword out of the pedestal rather than it coming straight off with one light push upward. Therefore there was a process of 1: Getting the sword to move up and down while the mouse is held. 2: Getting the shaking effect working. 3: Figure out how to get the pull change gradually. After getting help from peers, online resources, all the hard work paid off. Although, one hardship I faced while coding was that I made each section separately rather than in the same sketch. This meant transferring the code and changing it a bit to match the common sketch took a long, long time. This is something I need to consider in the future.

However, one of the lessons that I have learned from this project was that I need to scale down my work first, then start expanding on it rather than thinking about all the different features. I have learned my lesson that not being able to scope time for creating projects will be disastrous, as there would not be enough time to bug fix and review can cause many, many problems. I have cut many features that were going to be in my interactive poster, such as the following.

• Extra tabs on the main hub poster that would bring the users different images of the characters, as well as "Gameplay Footage"-esk drawings like an  official website
• Travel through multiple walls instead of one stationary wall (E.g. Arrows that would
• More Interactions, specifically animation/transformation and click to change something in the map
• Plus more debugging, settling my Font choices, and Color Pallete to see if they all work together.

One big goal that I have made for my future is that I need to stop comparing my work with others. Once I began to see my peer's work, I began to think whether or not my work was "enough". From raytracing Resident Evil to a Phoneix Wright game,  I began to think what was "enough" in my head, drastically trying to set the expectations within the given time way too high. I am very satisfied with my work in the end, but this kind of mindset is a bad one to have since everyone is different, and you should only be looking at your growth and compare how you used to do rather than others.