Aladdin

Aladdin - The Endless Journey

Inspiration

The Theme Abracadabra took us back to the good old Wizardy shows and movies. From Wingardium Leviosa to the 'Bibbidi-Bobbidi-Boo'.From the magical land of Disney fairy tales to the old-tales of The Arabian Nights.

We had a couple of ideas such as creating a spellbook or a story-depicting site, but all of this is already made available by other sources. The enchanting and magical collection of Middle Eastern tales, particularly 'Aladdin and his Magic Lamp' inspired us to create something magical and modern at the same time.

Hence, our team came up with the idea of creating 'Aladdin'- a game which is similar to Rolly Vortex by Voodoo games, but with a subtle touch of magic. We wanted to incorporate a 'magical' feel as we were inspired by Aladdin's Magic carpet.

What it does

'Aladdin' is a game in which Aladdin, who is on his Magic Carpet enters into an ever-ending loop of a tunnel inside the cave. He was pushed there by Jafar, who used Aladdin to get the Magical Lamp. Now Aladdin has to make sure that he clears the tunnel without hitting any of the obstacles. Use the controls to help Aladdin clear this tunnel and get back to Jasmine!

For crossing every obstacle you earn a point. As the game progresses the speed of the game increases hence increasing the difficulty level of the game.

How we built it

We built this game using ThreeJS. We also used 'Blender' for building and editing some models for the game. We used 'Sketchfab' to search for 3-D models for our project. GSAP used for creating simple animations that provide us with smooth control as Aladdin's carpet keeps moving in a specific position and makes it come alive.

Challenges we ran into

We came across a lot of challenges to complete this particular project. Some of the challenges were:

1) How could we make the animations look more seamless and infinite? The wall would keep coming forward and never end. This wall is made of two very long tubes, which go out of the render region. Hence, we can't see further beyond it as it fades out. We made the tubes so long that we can't see the region beyond render. The camera is placed inside this tube from a perspective. On looking through it the tube appears to taper and slowly fade out. Thus, people notice that it goes out of the render region, and they can't see.

2) We moved the tube towards the camera that gives the feel of diving inside the tube. And when the tube moves out of the frame, i.e., behind the camera, it loops behind. We used two tubes to make it look more seamless so that when we traverse the whole tube, we can see its end since we didn't want the users to see this. We placed the second tube just behind the first one and the first behind the second, and so on. Hence, we made it so seamless that you can't tell the difference between them. Similarly, for the walls, we placed them randomly at a distance of 32 units which makes the game look a bit harder.

3) The challenge of moving Aladdin: Aladdin moves from left to right and up to down which depends on the value of Pi. When the mouse is at the centre of the screen, it returns 0 as a value. And when it is at either side of the edges of the screen, it returns 1 as a value. As the value of Pi is 3.14, i.e., half of the circle in radians, if we make the rotation of Aladdin to be 3.14 then it would turn upside down as it's half a circle, but we need it to turn 90 degrees, so the developers had to come with a formula to compute the same, i.e., divide the value of (Pi *(% returned by the mouse(-1:leftmost, 0:middle, 1:rightmost)/2) hence, it returns a value within the range -0.5 to 0.5 and when you multiply this value by Pi. Hence we get the required value, i.e., when we have 90 degrees, it moves as per our wish, and since the origin of the model is considerably high and not at the centre, we had to come up with this mathematical computation. 4)Yet another challenge was how could we detect Aladdin crashing into the wall, for which we used a library.

Accomplishments that we're proud of

We are glad we tried to be creative and make the code optimized. We came across a lot of hurdles. We overcame those hurdles and learned a lot of new stuff. We are proud we could complete this project using ThreeJS and would like to have much more advancements if possible.

What we learned

We learned how to position our Character in the game using ThreeJS. We even tried to smoothen the control of the game so we could use it on other devices effectively and the complexity behind planning a creative and fun-filled game to meet the user's standard. We all worked together on designing our game on Figma and blender, helped correct the flaws in each other's work. We had meets lined up to discuss the project which enhanced our communication skills.

What's next for Aladdin

We have plans of adding new characters in our game such as Tinkerbell, Peterpan, Barbie with magic wings, etc. We will even try to keep the walls more attractive and try to place some diamonds on the path. The Diamonds will allow users to purchase new characters or add new features to their present character.