Slide Wand to Unlock

Welcome to Aurore Vihalla!

You have been accepted into the most diverse and determined wizard academy! We are the first educational establishment that focuses on managing over the 'mythological' creatures that appeared on Earth 100 years ago. Now, we will give you a taste of what it is like to interconnect with magical creatures here at the academy. You will experience the three major principles of magic: vision, interaction, and soul.

You can look around the three wizardly houses - Nox, Solaris, and Lumos - by channeling energy to your wand towards the 🔥 Ignis, ☀️ Solis, or 🌙 Luna apparatus respectively and say 'Skadoosh'!

Are you a courageous wizard and up for more challenges? Well, you are in the right paragraph to teleport. Skadoosh your wand here to enter the Epitherium!

☀️ Solaris

Solaris consists of creatures that live beyond the horizons: 🌌 space. We present to you, Stella the Space Kitty, who has travelled across the galaxy with extraterrestrial friends and guardians. She presents her story of how she was born and raised in the Orion Nebula.


🐈 Stella: Space Kitty

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! Cast your energy here to immerse yourself to her story!

🌙 No(t)x Crazy

Nox is placed in under the 🌃 moonlight, with creatures born out of the shadows. They are known to be silent, unpredictable, and/or crazy. The testimony that will be demonstated is about Nox, the first Noxious creature that is told through visions and word of mouth by those who has seen Nox - and most of it tells of how crazy he was, despite how the dog looks 'not crazy'.


🐕 Nox

Woof, I'm Nox and totally not crazy!! Prepare your energy here to his story!

🔥 Lumos

Lumos prides themselves in their burning will of fire ✨, the creatures discovered are born from the determined souls of past wizards. Xyreina is the last unicorn alive that continually trains creatures to bring peace and protection. Her horn serves as the conductor of passionate Lumosian creatures - the Queen of the Light. You can observe how she uses her power by relaxing and enjoying.


🦄 Xyreina's Magical Canvas

I embrace you with courage and magic. Then you can face your fears. Feel Xyreina's magical, dreamy, power touch by tapping your cursor over her magical canvas.

Amanda Patricia Viray

Studying Bachelor of Information Technology (Interactive Media) at my final year, I am passionate about technology, creative arts, and studying. With my enthusiasm on learning new things, resilience during COVID19 as an international student, and determination to grow out of my confort zone, I was able to achieve scholarships like HEX and FEBE Summer Research Scholarship, join clubs like FOCUS and iLead, bond with like-minded friends, and practice my communication skills. As a part of the course called Interactive Media (CMNS3560), this website focuses on the integration and interactions that supports the meaningful content and reacts to the user's actions towards the media. Click the 'Skadoosh' to see different aspects on the project's making. (10/12/2021)

Soul (Story)

I was inspired by my love for animals, fantasy, and magical academy genre. Especially with Bella Sara, which was a part of my childhood, it is a children's card trading game that combined a world of magical horses with game play. I remeber how immersive their website was, just when I opened the page, it welcomed me as their member - it was very impactful to me as a child! Even when creating your own account to taking care all horses in the stable, it made me feel like a part of something, somewhere that I can belong to - and that felt like an interconnection between interactivity (world of magical horses) and integration (website gameplay).

So with Aurore Vihalla, I want users to feel empowered when they open a website, they have a purpose and accepting them into a cool magical academy while integrating mini-games like Nox Crazy and Xyreina's Magical Canvas or a narrative story such as Stella. Using the Self-Determination Theory by psychologists Edward Deci and Richard Ryan, the relatedness it draws the nature to be social, connected to others, and involved in environment enhances the engagement of users.

Thank you to all my friends who has tested the game several times to make sure it was working (Elmo, Sheika, and Jacob) and to my tutor, Micheal Meany for his valuable feedback! My take on integrating the interactive element is to immerse the players into the world of Aurore Vihalla as they open the website by asking them immediately to unlock the slider and their name, reacting to user input already and bringing active participation.

Interactivity (Code)

Interactions

Nox Crazy

  • Hold mouse click - to release Nox from the bubble
  • Object following mouse - Nox swims lika a fish
  • Drag and shoot - Nox flys to get sunflowers
  • Wack-a-mole mouse clicks - Nox turned to a bunny
  • Jump (Space) and Crouch (↓) - Nox as a magical horse
  • Narrative Storytelling

    • Xyreina's Magical Canvas

  • Generative art clicks

    • Stella: Space Kitty

  • Narrative Storytelling

    • Tools

  • HTML/CSS/JavaScript - Used to create the website from scratch.
  • Unity - This is my first time creating mini-games with Unity and C#, and they were absolutely fun to learn with! Found out how smooth it was to learn C#, but it still took determination and long hours of dedication. Although many debuggings had to be resolved and analysed, it was a great learning experience. I enjoyed fixing problems, no matter how many hours it takes just to make it work - hoping to bring it more into future projects and further my goals to be an aspiring creative technologist! Teaching myself to learn Unity will bring benefits in rapid prototyping and my interest in game development, creating a good foundation of coding with fun.
  • CodePen - easier to embed 'pens' to websites.
  • itch.io - previously used Simmer.io but researched that itch.io has more features such as full-screen on web.
  • Github Pages - Used to host my website for free.
  • Twine (Harlowe) - Used to create Stella.

    • References

  • Slider to unlock: https://codepen.io/souporserious/pen/XJQLEb
  • Navigation Bar: https://github.com/fireship-io/222-responsive-icon-nav-css
  • Customizing Slider: https://www.w3schools.com/howto/howto_js_rangeslider.asp
  • https://www.w3schools.com - my all-time favorite tutorial source ⭐
  • And last but not the least, Stack Overflow 💖

    • Vision (Art)

    Tools

  • Aesprite - All my assets in No(x)t Crazy has been drawn by me except the ones mentioned below References.

    • References

  • https://ansimuz.itch.io/magic-cliffs-environment
  • https://opengameart.org/content/underwater-diving-pack
  • www.silvermansound.com/free-music/ - for music in No(x)t Crazy Game
  • https://opengameart.org/content/dog-barking-mono
  • https://freesound.org - for SFX of No(x)t Crazy
  • https://uxdesign.cc/top-navigation-vs-side-navigation-wich-one-is-better-24aa5d835643 - researching website navigation
  • https://99designs.com.au/blog/web-digital/ux-design-principles/ - researching UX principles to apply

    • Credits

  • Fantasy Castle Illustration by Yang Sohyeon

    • See the Pen Dreamy Cloud Star Touch by Amanda Patricia Viray (@_amazellia) on CodePen.