Interactive Storytelling

 

Research

Stories About Cats by Elizabeth Surr

I choose this storybook because of how interesting the storyline is. Elizabeth Surr wrote this book based on her and the people that she know who had encountered with cats. There is one chapter that catch my attention, so I decided to use that chapter for my assignment.

I have done my research about the chapter inside Google Slides. Please CLICK HERE to check the slides out. I will still include screenshots of the slides here for easy viewing.

Idea References

Interactive References

missed messages by Angela He

when the past was around by Toge Productions

looK INside by Unexpected

Samsara Room by Rusty Lake

Visual References

Gamer Room: Cyberpunk, ExceptRea

Pinterest

Pinterest

Fender Future - Cyberpunk Pixel Apartment

All the references above are used for my idea of this assignments. I want it to be simple and easy to use for users, hence why I found some references of interactive features that is similar to what I have in mind. For the visual references, I wanted it to have a 'modern vs retro' kind of vibes for each of my scenes.

Storyboard Sketches

Above are the sketches for my initial ideas, but I have doubts and concerns of me not having enough time to execute this idea. After consulting with Sir Lin Yew and Mink, they both helped me and suggested to go with flat art style instead of doing perspective art style. This will make it easier for me to do the design assets since it is less time consuming. They also suggested to cut some of locations and scenes. Hence, I changed almost everything when I started to begin my design process in AI.

Design Process

Menu Scene

This is the menu scene that I have designed, I want it to look very pleasing to the eyes. So I use dark and contrast color palette to execute this.

Bedroom Scene

This is the bedroom scene, which is the first scene where user will be in after choosing Chapter 1. User can move their cursor to the edge (right or left) to move the screen. The computer in the middle is interactable.

When user click the computer, a pop-up will appear and user can read about the victim (the cute cat) and the case. After that, user can click the X button to exit the pop-up.

Dave's Room Scene

This is Dave's Room, the second scene after user click the teleport button. User can move their cursor to the edge (right or left) to move the screen. There are multiple interactions in this room.

These are the pop-ups that will be available inside the room. Some of if don't have text, that is because I want to put the text inside Unity later on.

Once user can unlock the safety box, they will be able to read Dave's journal. This will expose all the truth.

Cursor (Default & Hover)

This are the custom cursor that I designed. There will be two states of the cursor which is default state and hover state.

Tooltips

These are the tooltips that will be used in the scenes. This will help users to find all interactive buttons easily.

Interactive Assets

These two are unlocked safety box & unlocked bag. These will be triggered when it is unlocked by user.

Ending Scene

When users reached to the ending, this ending scene will be played. User can go back to Menu by clicking the 'Back to Menu' button.

BG Music & SFX

My Treat by Chillpeach

Mouse Click SFX by Gaming Sound FX

User Testing

I created a form where users who participate my user testing can leave feedbacks. There will be 10 questions can help me to further improve the interactive experience.

There are 8 users who participate the user testing.

For the first question, all of the users understands the storyline of 'Stories About Cats'.

All 8 users also understands that the interactive experience is about a detective who is trying to solve crimes of cats.

Most of the users can find objects that is interactable, meanwhile there is a few who couldn't.

All of the users agree that the tooltip helps them to find the objects that is interactable.

Most of users don't think the puzzles are hard, but there are also a few who thinks it is neutral and hard.

This questions has mixed response, but the most of users enjoy the art style of this interactive experience.

All 8 users give 5 out of 5 ratings, meaning that they enjoyed with the interactive experience.

Half of users found bugs during the user testing. Below is their answers of the bugs that they found.

Some of the suggestions are helpful for me, so I will try to make some amendments for my interactive experience.

Improvements Made

Intro Scene

I added an introduction scene where it gives a little of introduction for users. It gives the information where users is a detective. There is also a small hint what they should be doing when they're in the bedroom scene.

Teleport Transition

Like what the suggestions made from user testing, I added a transition where a spiral will be spinning. It gives an effect for users that they are 'going' somewhere.

Indication of Year

Like the screenshots above, I added a text that indicates which year the users are currently in. This will make them understand that they go back in time.

Final Outcome

1. Screenshots

2. Video Walkthrough

This is an Interactive Storytelling, inspired by Elizabeth Surr's 'Stories About Cats'. Through this interactive experience, users will be in a point of view of a detective that is trying to solve crimes of cats. Then, users have to solve all the puzzles in order to find out the truth of the case. It could be tricky, so they have to be keen and think properly to solve the puzzles!

Reflective Evaluation

For this assignment, it was really challenging to think of the ideas. It was quite hard to think what interaction that I can make for the users to stay engage. It took a lot of time for me to finalize the ideas. Even though I went through some troubles, lecturers guide me to make sure I won't be on the wrong direction. Nevertheless, I am very happy with what I manage to do! I learnt a lot of things, and I think 'Edge Pan' is an interesting thing to learn. At first it was hard to understand, but Mink helped me to understand it. I didn't know you can move the screen just by make some script attached to your cursor. It reminds me of how interesting Unity is. Not going to lie, I am starting to like Unity, haha! I also discovered some interesting ways to make my project to work smoothly. Anywas, I am thankful for my lecturers and my fellow friends. They helped me a lot during this assignment, I'm very proud of myself. I wish to work harder and better next time!

Annotated Bibliography

Elizabeth Surr and Oxford University (1882). Stories about cats. [online] Internet Archive. Available at: https://archive.org/details/storiesaboutcat00surrgoog/page/n52/mode/2up?view=theater.

www.youtube.com. (n.d.). missed messages (All 4 endings). [online] Available at: https://www.youtube.com/watch?v=WRTjY4stv1Y&t=1s.

www.youtube.com. (n.d.). When The Past Was Around Full Playthrough / Longplay / Walkthrough (no commentary). [online] Available at: https://www.youtube.com/watch?v=QxkxF688tfE.

www.youtube.com. (n.d.). Explore Living Photographs - looK INside (Northernlion Tries). [online] Available at: https://www.youtube.com/watch?v=a9vnnQO1Mbg&t=1s.

www.youtube.com. (n.d.). Samsara Room Full Walkthrough [Rusty Lake]. [online] Available at: https://www.youtube.com/watch?v=x1m_HTuLRo4&t=2s.

www.youtube.com. (n.d.). [no copyright music] ‘My Treat’ cute background music. [online] Available at: https://www.youtube.com/watch?v=hKf5xQwgkgA.

Gaming Sound FX (2020). Mouse Click - Sound Effect (HD). YouTube. Available at: https://www.youtube.com/watch?v=h6_8SlZZwvQ.

ExceptRea (n.d.). Gamer Room: Cyberpunk. Available at: https://www.artstation.com/artwork/4XdRKY.

Pinterest. (n.d.). Pin de Karen González en Fondos de pantalla estéticos en 2022 | Fondos de pantalla en movimiento, Pixeles, Pantalla en movimiento. [online] Available at: https://www.pinterest.com/pin/938296903590110068/.

Pinterest. (n.d.). Pin de Ada en Green en 2022 | Fondo de pantalla macbook, Fondo de pantalla de ipad, Fondo de pantalla mac. [online] Available at: https://www.pinterest.com/pin/938296903590227124/.

SickChickenStudios (2019). Fender Future - Cyberpunk Pixel Apartment. [online] Available at: https://www.reddit.com/r/PixelArt/comments/d89rwt/fender_future_cyberpunk_pixel_apartment/?utm_medium=android_app&utm_source=share.

Pinterest. (n.d.). ArtStation - Night Shift ll in 2022 | Cool pixel art, Pixel art landscape, Pixel art. [online] Available at: https://www.pinterest.com/pin/938296903590227750/.

Pinterest. (n.d.). Caramel, Pixel art landscape, Pixel art background, Cool pixel art. [online] Available at: https://www.pinterest.com/pin/938296903590227122/.

Pinterest. (n.d.). Chill Mario by Pixel JeffFew months ago I designed this animation for X-Team Radio The main idea is Mario theme c… | Cool pixel art, Pixel art, Pixel art background. [online] Available at: https://www.pinterest.com/pin/938296903590110018/.

Pinterest. (n.d.). Norma2D — Cyberpunk room As entry for pixel dailies, theme:... | Cyberpunk room, Cool pixel art, Link pixel art. [online] Available at: https://www.pinterest.com/pin/938296903590110017/.