I started making this thing as a one-day experiment: a fun little browser-game I could craft before committing to the everlooming neverending self-judo one-man-deathwrestle called exams. But it instead ended up spreading out sparse as intense hour-long coding sessions throughout the Quarantine months.
This is how it turned out finally:
To play this game in your browser, click here.
Before starting, the question was how I would simulate the motion of an octopus in the ocean. So I started with a prototype in javascript. After some trial and error, and some primitive physics, I had the rough behavior of the octopus down.
It worked as I'd envisioned but looked rather drab. So I found a placeholder animation on Dribbble by Narubalie and put it in. At this stage I had to write an animation-player for the game, because HTML5 canvas can't directly play a gif.
Next I wrote an AABB collision detection system (meaning non-rotating rectangular bounding boxes can now detect when they overlap). So now I could finally make a little island for the octopus to land on.
Next up is obviously an angry enemy angler fish. I found a cool animation on Tumblr made by Blabberf, and coded it's motion.
Now I wanted the octopus to be able to explore the ocean outside of the rectangular box it's confined in. So I wrote a camera system that will follow the octopus wherever it goes. I was also experimenting with different speeds at this time so it might seem jumpy in the video.
Then I wrote the level management system and made new components (text, static image, etc) to build the UI of the game with. I found a nice octopus icon made by FreePik from flaticon.com for the title screen.
At some point, I realized that I could decouple the game code from the game engine code, so I did. Then, just for kicks, I made a Flappy Bird clone using only the Engine code, which was rather fun.
Now I wanted to animate my own main character instead of using some random image on the internet. So I studied a lot of videos on octopus motion, and got to work on Piskel app, which is a nice browser-based pixel art software. After laboring over the motion for days, this is what I came up with:
You'll notice that this octopus is far more exaggerated in motion than the previous one, which is intentional, and I'm rather proud of this.
Next, I made the animation of the octopus crawling on the floor.
You might notice that the sprites are lacking colors. That's because I'm not a good artist, and colors are difficult.
Next I coded a quick background parallax system and a minimal emitter system to emit bubbles convincingly. This is the end result.
Then I burned out. And now I can't bring myself to even look at the code. Maybe you can, though. So check out the code on GitHub.
Conclusion
I worked on this project without much planning, or design. So it was interesting to see the abstractions almost form themselves, and to see the architecture emerge spontaneously from beneath the insignificant lines of code as I typed them.
Right in front of my eyes, the coordinate-based motion wrapped itself in a
physics interface and neatly exposed methods like
applyForce (magnitude, angle). The Spritesheet animation system amalgamated
with Motion and Collider to from a high level Character object for my
benefit. Components organised themselves into categories like drawables and
managers, which allowed for other interesting experiments like
duck-typing-aided composition.
Not to mean that it is perfection, of course. Far from it. On the engine side, the API is painful, there's a lot of vestigial code, scenes are not isolated (and colliders leak through by default), there is no obvious way to handle instantiation of multiple objects, and there's a lot of cohesion among components. On the game side, the controls are terrible, the world is incomplete, and moving around is clumsy at best. The only consolation is that my next game will be easier to make because of this exercise.