Posture & Balance is the first challenge in a series of games for Cavalier, our proprietary platform for experimental experiences. Built on the latest web technologies, including WebGL, SVG animation and 3D WebAudio, Your Majesty uses this platform to create immersive experiences in a way that encourages R&D and experimentation.
Creative & Art Direction, Design, Motion
The Cavalier platform plays on the metaphor of historical challenges, in which you have to reach excellence in order to rise a knight. In the game design we looked for an aesthetic that is very polished and well crafted. You start in a dark mystical scary forest that you have to ride through to reach the castle, this little light spot in the distance, aka Your Majesty.
You (the knight) and your horse, dressed in heavy metal armor, charging through the dirt, dodging trees and branches, demanding the best from yourself, not just challenging the forest and your goal, but also your inner thoughts and fears.
For the logo animations we used a mix of elegant and technical styles, tightly tied to the Your Majesty brand. These animations were created in After Effects and then exported as SVG animations using the bodymovin plugin. SVG animations help to keep file sizes down, browser performance up and they can be used for both regular and retina screens.
The main buttons and page transitions are using smoke like transitions to tie in with the mystery of the scene, and was on its own another technical challenge.
After we figured out the game narrative, I challenged myself to learn Cinema 4D and create a couple style frames. Using styleframes made in 3D software helped us to create a base for our WebGL developers.
To promote the game I created a matte painting as a poster and we made a fully 3D animated trailer. All of these elements were made in-house.
The trailer has a similar dark atmosphere as the game start screen. Preparing for battle, creating tension and mystery with close crops of the horse. We didn't want to show too much, so there’s something left to imagine for the user.
The 3D sound design, which we made in collaboration with Studio Takt, is a big part of the full experience. In the beginning the sound and music go from very mysterious, dark and empty, to more intense, and pushy. And when you are done riding, the music becomes euphoric.
The sounds and music contain a mix of modern influences and medieval times. During the gameplay the sound design provides feedback when certain actions appear, like picking up a gold nugget, hitting a tree, correctly speeding up by hitting the space bar, or even notifying the user when they are running on the left or right side of the game by balancing the sound effects on the left and right audio channels. This gives it a true 3D immersive experience.
To top things off we hired a voice actor to introduce you to the concept of Cavalier and congratulate you at the end with your score results.
Creative Direction by Jens Karlsson and Alvin Groen. Art Direction by Alvin Groen. Technical Direction by Tore Holmberg. Production by Maree Frakes. Design by Alvin Groen. Motion by Jonathan Kinnander and Alvin Groen. Development by Szenia Zadvornykh and Ruud Luijten. Sound & Music by Studio Takt. Voice Acting by David Seys. Copywriting by Karen Sulkis.
Your Majesty
Awwwards—Experimental / Innovation Site of the Year
Awwwards—Site of the Day
The FWA & Adobe—The Cutting Edge Award
The FWA—Site of the Month Nominee
The FWA—Site of the Day
W3 Awards—Silver, Experimental
CSS Design Awards—Site of the Year
CSS Design Awards—Site of the Day
Creativity International Awards—Platinum, Web Games & Entertainment
Creativity International Awards—Silver, Self Promotion
Communicator Awards—Award of Excellence, Websites - Self Promotion
Communicator Awards—Award of Excellence, Websites - Branding
CSS Design Awards—Greatest Cl/cks 2010-2016 Book
Awwwards—Brain Food! Volume 2: Winners of the year 2016
Awwwards—365 best websites around the world 2016 book
The FWA—Insights... Cavalier: Conqueror of Excellence
IdN Magazine—v23n4: Interactive Media and Installation
Creativity Online—Cavalier: Conqueror of Excellence
pixijs.com
Adformatie.nl—FWA Highlights