Foo Flighters

GIF
the basics in playground
working with models in sandbox

Inspiration

I'm cooking my way through school and interning in the summer as an SWE. This will be my second internship coming up, and I'll be halfway through my 2nd year in school. I really wanted to endeavor on a hackathon and prove to myself mostly that I am capable of making a decent project. I was fortunate to find two people who would join my crazy idea. I took the inspiration from the difficulty of flappy bird, and added a higher level of impossibility.

What it does

Space to climb, left and right to move, you must navigate the glowing sphere through the windows in the walls in front of you with perpetual forward and downward motion working against you.

How we built it

Babylon.js, like many things, is simple to learn, and difficult to master. I did the entirety of the frontend, going from a react in js idea over to typescript webpack and back and in the playground.babylonjs.com and back and finally settled on node.js in ts for the frontend, although not without tradeoffs. My teammates did the backend leg work with the OCI infrastructure with terraform and docker. The intent was to use Colyseus for connection to gamestate but lo...too much to do with too little time.

Challenges we ran into

I ran into many. Specifically, there is a lack of documentation for a react environment for babylon.js, mostly deprecated use cases and the one or two video series and docs dives. Was really difficult for me, even having used typescript quite a bit, to implement scenes in Babylos on react typescript. I spent a lot of time decided on how to do the perpetual motion. I did not use a Physics Imposter, but instead do a series of checks and corrections. Due to this check/move system, which I do perfer better than gravity for its controllability, you'll notice a few bugs.

For one, the ray casting to determine if we are not climbing checks an object within a small directed area. In this case the whole in the wall which, to stop over-acceration (and also for camera purposes), is being hit and stopping the sphere. Also, boundaries are tough...never knew how tough they were before now.

Cool, but sometimes confusing like, "where is this going". Also, following a perpetually moving sphere as it goes through small holes takes a lot of camera work.

Accomplishments that we're proud of

This is the first hackathon for my two teammates and I. Although my submission is a few dozens hours away from being something complete, it does have many workable elements and attitude. I am proud of the endeavors and sacrifice of my team. Also, this is my first full front end project and I learned an incredible amount. I am proud of the lack of sleep that oddly enough hasn't caught up with me yet. On a lower level, all of the walls are randomly generated throughout the course but then loaded into the model via Babylon Playground -> Babylon Sandbox for verification and performance concerns when generating a course this long. Please check out my playground link to the randomly generated course which includes a randomly generated sky and clouds, I'm quite proud of it: https://playground.babylonjs.com/#DJBP5R#14 (if you iterate backwards through the #14 on the playground you will find earlier versions of a 'simple' track, walls, and sphere.

What we learned

I can't speak for my other team mates but having spent twice as much time on this as my full-time job in the past week (quite literally), I've grown. It's those little works throughs that I've noticed build my maturity in the code. The lesson that I've learned here, and continue to learn (getting better every time) is to step back, and look at where I'm going. Yes, x needs to be done, and it's right in front of me, but is doing this x what I'm suppose to be focusing on in the scope of the project right now?

What's next for Foo Flighters

I've added a todo list in app.ts. I believe this game has incredible potential. The idea originally started as a ship, but after some early, but seriously time consuming model issues, I adjusted to the sphere. I would like to have that ship back. I would also like to add a looping mechanism. The app does have an untested (but probably working) oracle object storage instance to push and update leader board in the LeaderboardEntry.ts and also a connection over to OCI vault. //I really want to move into what a lobby looks like, how it communicates--how matchmaking works etc. Other than that, maybe I'll return to her this spring and get her prettier.