A short 3D action game for the 2021 js13kGames Competition.
Our hero, Captain Callisto, blasts through space, seeking adventure. What will he find?
Play here: https://js13kgames.com/entries/the-adventures-of-captain-callisto
Controls:
- Arrow keys or WASD to move
- Z or spacebar to jump
- X or shift to jetpack
- R to restart level
- M to toggle music
- Escape to show main menu
Demo video:
callisto-demo-video-480.mp4
submission branch was submitted for the competition
main branch includes post competition bug fixes
Install: npm install
Fast build: npm run dev
Release build: npm run build
Start a web server: npm run server
You can then point your web browser to http://localhost:3000/
Note that the npm run dev command does not have a "watch" mode, so you need to rebuild every time you want to see your changes.
The compo is over. To my delight, The Adventures of Captain Callisto won 3rd place overall! It was also voted #2 for Theme and #4 for Graphics.
FreeCodeCamp made a video about the top 20 entries. Here is the section on Calliso, where I discuss goals and some technical details:
https://cody.ebberson.com/js13k-callisto/codyebberson-callisto-2021-10-25.mp4
This was my third time participating. In 2018, I submitted JS13K Battlegrounds, a multiplayer battle royale. In 2020, I entered Minipunk, a cyberpunk 3rd person action game.
In those entries, my goal was to create an impressive technical demos. They did well graphically, but they weren't considered "fun". I also noticed that a significant portion of the js13k audience does not particularly enjoy 1st person or 3rd person games.
My goal this year was to make something "fun", relatively easy (at least for the first few levels), and something with a more global appeal. I took a lot of inspiration from 3d Mario and Zelda games.
The rendering engine uses WebGL2. There were 3 new features added to the engine from my previous entries:
First, instanced rendering. This is built into WebGL2 without requiring extensions. The net impact is that it makes it faster and easier to render basic primitives.
Second, spheres. Lots of spheres. The combination of instanced rendering and sphere geometry provided the building blocks for most of the characters, enemies, and items in the game. It felt good to throw spheres into the scene, and maintain 120 fps without breaking a sweat.
Third, shadow maps. I don't know how much this actually contributed to the overall experience, but I had a lot of fun learning about projected textures, shadow maps, shadow acne, etc.
In the next version, I hope to add a few more advanced rendering techniques such as SSAO and Depth of Field filtering.
For audio, I used ZzFXM by Keith Clark and Frank Force. The music is a transcribed version of Milky Way by Ben Prunty. The sound effects were the result of spending way too much time playing with ZzFX Sound Designer.
Next year I hope to use some form of FM Synthesis or Modular Synthesis. I am completely addicted to Andrew Huang's videos such as Modular synthesis EXPLAINED or 5 Techniques for Generative & Ambient Music. I think these will translate well to the JavaScript audio API.
For tools, I continued with Google Closure Compiler, but the major breakthrough tool was Roadroller by Kang Seonghoon. In the past, I had looked at RegPack, but it couldn't handle 20kb input. Kang Seonghoon created the industrial strength version of RegPack, which is perfect for js13k. The tool was released in the middle of the competition, and it was essentially a gift of roughly 5kb additional space. In the end, this project was not size constrained at all.
Next year, I intend to use TypeScript and Vite in the toolchain from day one. TypeScript is fantastic for providing structure and discipline to the code, and frequently catches hidden bugs. Vite is lightning fast, and provides a delightful dev experience. I have become spoiled in my day job. I can't be bothered to manually restart dev servers or manually hit the refresh button anymore.
- Core prototype was done in the first week. This step gets easier every year, as my js13k engine stabilizes, and I continue to tweak it throughout the offseason.
- New rendering techniques all look nice. The game received a fair amount of praise for graphics.
- The non-gameplay features such as the opening scene, after-level cutscene, and end-of-game cutscene were all praised.
- The game was fun! People actually liked it!
- I still have a tendency to add features rather than exploring fun or novel gameplay. The level design was simplistic, primarily because I didn't spend enough time on it.
- I didn't have a clear vision of what I was trying to build. I wanted something slower and more thoughtful, such as Captain Toad Treasure Tracker, but that wasn't natural, and I defaulted to more action and jumping.
- The jetpack mechanic was fun, but landing was difficult due to depth issues. This was not game breaking, but it added cognitive load.
- The audio was not cohesive. For example, the sound effects are out of key with the music, which sounds off.
The js13k competition is one of the highlights of my year. I have a blast every time.
Kudos to:
- Ryan Malm for the excellent Space Garden, which deservedly won the competition
- Matthew Diamant for Welcome to Space, which I thought was the most "fun" entry this year
- Dominic Szablewski for the insanely impressive Q1K3, a proper Quake clone
- XEM for LOSST and producing so much content on code golfing
- jaburns for Galaxy Rider and always being available in Slack for play testing
Can't wait for next year.
Keith Clark and Frank Force for ZzFXM
Nicholas Carlini for the starfield shader in Yet Another Space Shooter
Music: Milky Way by Ben Prunty
MIT