Assignment_Interactive Storytelling

Story Research

The Wind in The Willows 

by Kenneth Grahame, Gillian Avery (Introduction), Ron Keith (Narrator)


The book has created several cute animal images: the timid but adventurous Mole, the hospitable and romantic water rat, the chivalrous and leader-like old Badger, Toad who likes to brag, show off, and pursue fashion, the honest Otter - they live on the banks of the river or in the big forest, and they have both pleasures and difficulties. The story contains 12 chapters, showing the animals' live, their journey or how they pursue new and different things, leave home for adventures, and how to work together to retake their occupied homes.

Content Sequence

Chosen Chapters
The chapters I chose for this interactive storytelling is chapter 11 and 12. These two chapters originally are about after Toad escaping the prison, he received a bad news about Toad Hall being taken over by the Wild Wooders from Rat. Badger and Mole attempted to care for Toad Hall, but they were ousted by the weasels and ferrets. Badger who is also a friend of Toad's father, tells the animals of a secret passage known only to Toad's father afterwards. The animals then make a plan to enter through the passageway and overtake the Wild Wooders. Rat arms Badger, Mole and Toad for the showdown at Toad Hall with swords, pistols, sticks and so on. After that, they make their way through the secret tunnel that leads to Toad Hall, whack the weasels with their sticks and chase them out of the windows. Toad Hall is reclaimed. In the end, the animals prepare a celebration banquet, and Toad promises to turn over a new leaf and accordingly writes letter of appreciation to the goaler's daughter, the engine driver, and the barge-woman who help him to escape prison.

Storyboard 1.0



My initial idea was to create a map of Toad Hall, allowing users to control the Toad's movement so users can walk, jump, hit and shoot the weasels. Unfortunately, it was not a good idea for a point and click interactive. I should think more creatively rather than go for very technical way that I might not be able to code. 

Storyboard 2.0
Instead of  making every single room in Toad Hall with technical coding, I was suggested by the lecturer to just focus on the two scenes that have already mentioned in the original story. Thus, I do a minor changes of the chosen chapters, making the secret tunnel as the animals' preparation room that they can collect weapons there. Other than that, it remains the same as the original story.

References

Visual elements references
Toad

Badger
Underpass scene














    


icon


dining room























Art style references

    

























Design Development

These are the assets that I created in Photoshop.






I used my reference images to do the coding at first while I was creating my own assets. Later on, I slowly replaced with my on design. However, I realized that I shouldn't scale too much with my reference images because some of the assets that I created were in the different sizes, so I wasted a lot of time readjusting the assets and their position in Unity, causing lack of time to code and animate. 


Video Walkthrough



User Test

After doing user test, I received feedback about my storytelling is a bit confusing on the 'reclaiming home' part, some of the users thought it was a fighting story. Others talk about the sound effect can be improved, such as the weapons collection, the sound effect is way too loud. Other than that, they said they like my visual design. 

Self Evaluation

I think this assignment is quite challenging for me, especially the time management. I started coding and creating assets almost at the same time, but in the end, it was still a bit rushed for me. I'm not that satisfied with my interactive object and animations, because at first I had a lot of ideas that I wanted to try out like randomizing different weasels at different positions, and not only stick to one ending and so on, but due to my poor time management, I simplified a lot, even the sound effect, I just applied the same. Nevertheless, I learned a lot of new coding in the process, such as the dialogue system, the randomize system and the password system, although not every one of them is used. I do think I need to strengthen my storytelling and interaction design because during the consultation with the lecturer, I found a lot of things I wouldn't have noticed when I was designing. But overall, I think it is still a good try for me, although there are still quite a lot of parts that I'm not fulfilled with, but I like my visual design.

Comments

Post a Comment

Popular posts from this blog

IP_Do Good Project_v2

Image
  Learning Plan & Project Management Chart Learning Plan The Do Good Project is an independent project with open brief that offers opportunities to study and explore various genres of digital media design while making a positive impact on society. In this semester, I plan to explore interactive websites, either in 2D or 3D, in order to provide users with an engaging learning experience. Before proceeding with the ideation, I decided to work on the self-determined learning plan to provide a clearer direction for my studies. The first stage in this approach is to define the learning objective which allows me to reflect on myself, understand my current circumstances and identify my learning challenges. Next, I move on to the action plan which helps me obtain a better understanding of the obstacles I might face and potential solutions. Also, I've made a basic project schedule that shows the different stages of the work. This helps me plan their implementation within a limited of ti
Read more

IP_Do Good Project

Image
Learning Plan & Project Management Chart Learning Plan The Do Good Project is an independent project with open brief that offers opportunities to study and explore various genres of digital media design while making a positive impact on society. In this semester, I plan to explore interactive websites, either in 2D or 3D, in order to provide users with an engaging learning experience. Before proceeding with the ideation, I decided to work on the self-determined learning plan to provide a clearer direction for my studies. The first stage in this approach is to define the learning objective which allows me to reflect on myself, understand my current circumstances and identify my learning challenges. Next, I move on to the action plan which helps me obtain a better understanding of the obstacles I might face and potential solutions. Also, I've made a basic project schedule that shows the different stages of the work. This helps me plan their implementation within a limited of time
Read more

Assignments_UI Challenge 2_Slider

Image
Analysis Analysis 1 Liquid Slider Purpose: To adjust value by dragging up and down. Function: Value selection (degree / °) Coherent: The slider is designed as a graduated cylinder to let users know it’s a vertical slider. While the marked line on the graduated cylinder represents tick mark. One thing is users may be confused on where to drag (bubble or cylinder). Visual:       1. Graphic Asset: Oval callout       2. Color: More rainbow gradient colors appear as the degree increases.       3. Text/Label: The degree is shown in the oval callout.       4. Animation: Wave effect on the water.       5. Position Interactivity:  Low degree, low water level, showing only the blue part of the rainbow gradient. Water level rises following the degree, showing till middle colors of rainbow. Almost a complete rainbow gradient shown when degree getting higher.  Usability & Engagement: For me, overall is well designed. The colors are eye-pleasing, the percentage is labeled clearly and the tick ma
Read more