Secret book suggesting treasure hidden in Queen's Tower
Lion in front of Queen's Tower
Royal Albert Hall
Play now - deployed on https://QueensTreasure.co.uk
As this is our last year at Imperial College London (most of us are going to graduate this year) we wanted to make a game to tribute Imperial College London by setting the game in the iconic place: Queen's Tower. It is our parting gift and we hope you enjoy it!
What it does
Queen's Treasure is a mystery game. Legend says there is a treasure hidden deep within Imperial College London. You find a clue in a book in the library suggesting that this treasure could be in Queen's Tower. Can you find this treasure? Be wary of where your eyes are looking at and think outside the computer! Don't spoil the ending to others ^_^.
How we built it
It's pretty much a frontend app using JS, AngularJS, CSS, JQuery, HTML and CSS. We did not use a game engine (which seems to be the convention for game development) to break the meta. Microsoft APIs were used. The majority of us worked overnight.
We split the work by having 2 artists and 3 programmers:
- The art you see in the game was drawn by Caiwei Zhou and Hongtao Li (drawn using iPad and Adobe Photoshop).
- Silvia worked on using Microsoft Azure (Vision API and training to identify certain items such as a water bottle), eye tracking (and light flicker with eye tracking at entrance of QT) and thinking of the idea for the name of the game.
- Giulio set up the skeleton repository, continuous deployment with Azure (Python server) and the functional AngularJS logic of the game (scene changing, talking/text, audio system, inventory system) and voice acting.
- Alan worked on the frontend (CSS/HTML5), the puzzle logics in AngularJS, retouching art with Photoshop and the animations (door/light/wall moving/panning/fade).
- Hongtao was additionally the director of the game; along with game/story ideas (and the puzzles); however we all contributed to ideas that manifested in the final hack.
Challenges we ran into
- Doing some of the animations were quite difficult.
- The amount of art we had to complete was incredibly challenging.
- In order to use a person's camera, the host of the website must either be localhost or using HTTPS.
- The exact pixel placing of particular objects in each scene was tedious (using CSS).
- A lot of us ran into merge conflicts as we mostly coded in a single JS file.
- In order to accomplish quickly in this hack, we did not use web responsive design.
- The coding was also very difficult.
Accomplishments that we're proud of
We are mostly proud of the teamwork we have as well as the creativity and ideas we have put forward into the game. We managed to finish and deploy our game from start to end while having a secret ending.
What we learnt
We learned how to use Microsoft Vision API and training it - this allowed us to identify objects in real life, which was integrated into the game (take photo of object and it is manifested into the game).
We learned how to use Microsoft Azure, which was very simple to deploy our game on the Internet.
What's next for Queen's Treasure
After the hack, we are first going to work on refactoring, making the code more efficient and work on older browsers; and then buy a domain for it. Edit: done, but we are gonna do some more refactoring in the future.
Okay, so some puzzles were too hard for some. So here are the hints for the hardest ones.
- Chest - use phone.
- Clock - what's the only valid time on the clock that can form a straight line? For example, 3:45 isn't a straight line, neither is 2:40.
Main theme: The Room - Main (Artist: Dave Newby)
Ending theme: Seas (Artist: Giulio Jiang)
Thanks (written after closing ceremony)
We thank you Imperial College London for all the years. Thank you DoC and DocSoc. Thank you to all the organisers of IC Hack 18 (and sponsors) for organising and hosting the most fun and best hackathon ever! Thank you for the cool swag and stickers too. Without IC Hack, many great ideas would not have been made. We'd also like to thank our friends and colleagues at university, and the lecturers for teaching us so much. This was our last IC Hack, hope you liked our game and presentation.