July 2021 - November 2021

CMNS3560: Interactive Media

Interactive Website (HTML, CSS, JavaScript) with

• Choose-Your-Own-Adventure story (Twine and Aseprite),

• mini-games (Unity 3D), and

• AR experiences (Sparks AR Studio and Blender 3D)

For my course CMNS3560 (Interactive Media), we are tasked to create our own interactive medias displayed in a website within a semester (~3 months). My website is about Aurore Vihalla's Magical academy where you learn and play with magical creatures.

Creating 'Aurore Vihalla' has been a fantastically rewarding experience as I was given creative freedom and opportunity to self-learn different programs such as Sparks AR Studio, Blender, and Unity 3D while learning while learning tools taught by our lecturer and lab demonstrator such as Twine, Wick Editor, and Adobe Animate.

Task 1: Interaction

Scripting for Interaction

For the first part of our project, we are tasked to create our own Choose-Your-Own-Adventure (CYOA) story using Twine within four weeks. It was my first time using this software but thankfully with my previous experience with programming and scripting, it was a smooth transition to learn the format called Harlowe 3.2.2 by experimenting and reading their documentation. Although it was easy to create a simple interactive story using Twine, we can extend its capabilities with variables, conditional logic, images, CSS, and JavaScript and it publishes as a HTML.

Using Twine for CYOA web story

At this time, I have not thought of creating Aurore Vihalla until Task 3, but this task and the next will weave together to the final project. So, for this task, I decided to create an interactive storytelling on taking care of a kitty in space! Creating a story while learning Twine was difficult at first because you have to keep in mind the multiple decisions and outcomes you want in the story and how they must weave together, but after managing how you want the players to decide, I started to enjoy it.

In the depths of the galaxy, there lived four guardians who protect the star sanctuary, the Orion Nebula. Until one day, a huge blast of light shook the entire Nebula. Once they discovered the source, a huge responsibility has fallen on the guardians – no, not fighting aliens or saving planets – it was to take care of a space kitty called Stella. Hop in for a journey to help Stella grow and make friends!

After I created my story in Twine, I started to draw and animating art assets for Stella using Aseprite. Created all the art assets within 3 days which helped me learn how to work and draw under pressure. Furthermore, I made time to survey feedback from my friends on what I could do better for this Stella, so very grateful for their time and effort to play through it (Huge shout out to my bestie, Sheika Mae!)

Snapshots of Stella: The Space Kitty

Examples of art assets used in Stella. Made by Amanda Viray.

I seriously enjoyed doing this project because I was surprised with how quick I was able to create the art assets and did not expect that I could create a story - especially a CYOA story! I received a perfect score for this task.

https://github.com/amazellia/Stella-SpaceKitty

https://amazellia.github.io/Stella-SpaceKitty/

Task 2: Integration

Accessing Data and Content

Integration Task requires us to create a web page that contains at least one interactive media element, with the element reacting to user input and contain at least one graphical element while the web page must have meaningful content (imagery and text) to support the interactive element and must have consistent visuals.

I have honestly gone above and beyond with this task because the interactive media element I used was Unity 3D, even though the course only taught us Adobe Animate and Wick Editor. Because among the software occupations I am interested, I want to be a game developer so doing this helps me carve that career path. So, what I have done is just created a simple HTML web page embedded with my interactive game called 'Nox', which was uploaded at itch.io.

Snapshots of the 'Nox' game in Unity 3D

I was pleased to learn how to code in C# while creating the game, I also had to design the music, sounds, gameplay, and story! It was pretty fun to create and glad to also earn a perfect score for this assignment.

Task 3: Final Project

Combining Physical and Digital Interactions

Last but not the least is the final project, where we can expand from the previous two tasks and must have a physical component (be it cards, boards, pieces, books) to support or drive user interactions. Since this task gave us the freedom to choose, I decided to try out AR (Augmented Reality) for the first time! I always wanted to dip my toes into the realm of XR (extended reality, which includes AR/VR).

I called my AR project 'The Emphemerality Unveiling' to experience cool powers with AR. It was a challenging yet enjoyable project to do because I enjoyed solving problem when I come across bugs and error in Sparks AR Studio and self-studied on how to use Blender to create 3D assets. This task was an huuuge learning curve for me because I had to self-study programs that I am not used to and had no one to ask for help, especially when we have only a month to complete this but thanks to Google Search and documentations, I was able to get through it!

AR project within the website.

All assets used are my own for this task. The AR experiences included are the following: image-tracking, plane-tracking, face-tracking, hand-tracking. For the image-tracking AR, I wanted to create a puzzle-matching experience to interact with the user. So I created 2D square images that can be tracked by the AR imaging as seen in the pictures below, then in Sparks AR, I added animation effects and coding to the 2D images when scanned. Each image is a part of the whole AR 3D effect.

Used Sparks AR Studio to create AR experiences and drawn AR trackable images to mix and match.

Behind the Scenes with Blender 3D.

And to tie all of my three projects together, I used HTML, CSS, and JavaScript to create an interactive website that has all of them in one place - here is where Aurore Vihalla is born. I was able to refine my web programming skills more by creating user interaction to choose three different modes and more!

Three different modes when you click 'Skadoosh' button.

https://github.com/amazellia/Aurore-Vihalla

https://amazellia.github.io/Aurore-Vihalla/

Overall, I truly enjoyed these projects because not only I was able to learn new programs and skills within 3 months but also explore my creativity that I wish I have used for the past few months because I was busy with work and studying full-time. I have earned a High Distinction on this course.