Inspiration

Defend earth from invading giant alien heads in this space shooter! It is a world effect on both front and back camera. The front-camera behaves like the back-camera and on the back camera - your friends are part of your game as Alien invaders! I really wanted to create a cinematic long form game experience that makes full use of the medium - the phone, the back camera, the front camera and the phone's accelerometer. I've done 15 second instagram games before and this time I wanted to take my time and craft a game and let the story unfold without rushing through 15 seconds. The giant alien heads was inspired by Rick & Morty's Get Schwifty episode where Earth gets invaded by giant heads. Flying a spaceship and blasting lasers was a personal fantasy I wanted to realize.

What it does

It starts off looking at the pilot, the phone rotations haven't kicked in yet. With instructions to "Tap to continue". The user can tap the screen or start recording, both will trigger the game game to start. Once the user tapped. the game sequence starts. The camera view flips to the pilot's perspective, you see earth under attack and you are flying in to the rescue. This is also the first time you can look around your ship. Users learn to look around the ship by moving their phone, this is important because this same movement is needed for them to play the rest of the game. These precious few moments before the actual fighting starts is crucial for the user to practice moving and aiming with their phone without the stress of battle. Once the user arrives the destination (close enough to the aliens) they can tap to open fire at the aliens (or if they were recording, the laser would automatically fire) The aliens turn their attention to you once you open fire.
You are flying with 2 other ally ships too, these 2 ships are you "Lives". I wanted to use something else instead of a static "heart" graphic to indicate health/hit points and giving the user these 2 buddy ships was perfect.

How we built it

With lots of scripting and patch. I was trying to find a "best practice" for patch and script work. Most of the game logic and sequence flow I handled in script in GameManager.js. Cosmetic stuff I'll pass it to the patch to handle. Also used community member, Pofu's PFTween.js, to animate most of my sequence in script. The music and sound effects were the last to be developed but it is what finally tied the game together and gave it a cinematic experience! The main theme is written by Denelle Tan.

Challenges we ran into

Getting the shooter mechanics to work on the back camera was pretty straight forward, but getting the front camera view to behave like the the back camera was the most challenging part. Getting the ship to smoothly move towards wherever the user was aiming was the next challenging part because of the gimbal lock issue.

Because i was using both patch and script, it was also a challenge to find a "best practice" for script and patch. Which aspects should be handled in patch? which aspects should be taken care of in script. I think I figured it out.

Super optimization was also necessary because no one likes a laggy game, used tricks like shared effects among the enemy heads. all enemy heads share 1 Laser firing effect and 1 explosion effect. Because they don't all shoot and explode at the same time, they can all share 1 object that refreshes its position at the moment they are needed. This would reduce the object count and the number of particle emitters in the entire scene. Also used lights sparingly, the whole scene is lit with 3 lights only.

because it was an epic long game, keeping the file size low was also very important. As much as possible, the textures would be made with SDF.

Accomplishments that we're proud of

Getting the front camera to behave like a back camera for the first time! Creating an epic space battle experience under 2.4mb !

What we learned

Learnt a lot of scripting, how to use import functions between multiple script files. organizing scripts, organizing the patch.

What's next for Face Invaders 3D

Next might be a free space iteration where the users get to drive the ship and explore the solar system!

Built With

Share this project:

Updates