Ludum Dare 56
This weekend I took part in the latest edition of Ludum Dare which also happened to be my first for quite some time. The theme this time around was Tiny Creatures and once again I opted to use React to make my game. React remains an unusual choice for making games, but I love a constraint!
What is Ludum Dare?
Ludum Dare is an online event where game developers work solo or in teams to create a game over a weekend. There are a two versions of the event, the compo which is more hardcore where you must work alone and create everything yourself, and the jam, where you can work in teams and use assets found online. You have to make a game based on a theme which is released at the start of the jam after a week long community vote.
Lee the Flea
I made a game called Lee the Flea where you play as a… flea, and are trying to make your way up a climbing wall. Like a real-life climbing wall, you use a series of holds to navigate the wall and there are different routes that are easier with difficulty represented by different colours.
As Lee the flea, you need to jump and land on the holds with the holds being smaller and more spread apart as the difficulty increases. You win when you get to the top and you’re trying to get there in the shortest time possible.
What went well?
As I write code less and less in my day job it makes sense to try and use tools like ChatGPT to help speed up the process. Therefore the highs and lows of using AI will feature prominently in the following sections.
Automatic level generation
Rather than creating levels by placing tiles manually, I instead created a custom level editor.
- I start by creating a 10 x 45 version of the level in MSpaint. This marks out the wall itself and the routes up it.
- Then at run-time I load the image onto a HTML canvas and inspect each pixel to allow me to construct the wall based on a series of rules:
- e.g. if pixel (x,y) == (r 255, g 0, b 0) then create a red tile.
- The level itself is consists of 10×10 HTML img elements. As the player moves up the wall, the source for these imgs updates to give the illusion that the player is moving.
This worked so well and generally wasn’t too difficult to manage! Of course the more tiles you add the more cumbersome it becomes to manage the various rules required and therefore is unlikely to be scalable.
The main issue I had here is that the level generator was loading more slowly than the rest of the game and I was having problems in React forcing the game to wait until everything loaded correctly. This took most of the first morning to fix, hoovering up valuable development time!
Faking physics
React is not a game engine and therefore I have no way to make use of fancy physics features such as gravity for my jumping mechanism. Instead, with the help of ChatGPT and a little magic called Bresenham’s line algorithm I’m able to fake it (tip: technically I have no idea how this works, so don’t ask for the technical detail).
- The player identifies the next hold they need to jump towards.
- They select a tile to set the direction of the jump and then hold space as they try and guess the power required to get there.
- Through the wizardry of Bresenham the path is generated and the flea image will visit each of tile in the path. If the player uses too much power, Lee will keep flying along Bresenham’s line.
- Once the player runs out of power they just fall directly down rather than following a fancy arch pattern.
I really can’t believe this worked as well as it did! It’s by far the biggest achievement of my entire jam and makes the game actually fun without looking terrible too. There are some problems however. ChatGPT did a lot of tuning and I ultimately have no idea how it works under the hood. Also there remain some quirks with Bresenham’s line where sometimes jumping doesn’t work as expected and the flea veers off in the opposite direction.
A polished experience
Having completed many a game jam one thing you learn is that almost nobody spends time on the title screen and instructions. It’s always the feature that gets left until the end but is the first thing that players see. Whilst I don’t think my menus look particularly good, they are at least there, and the tutorial screen is in-depth and gives players enough information to play the game.
It would have been nice to added some gifs to actually show the game being played as part of the instructions. Right now I don’t have the software or workflows to create these but it’s something I should put in place for the next one.
What could have gone better?
As with all jams there’s always something to learn and it’s usually nothing to do with the game; eat better, sleep more and don’t jump straight into the code. Overall I did ok in most of these departments, I even managed to run a half-marathon on the Sunday morning!
ChatGPT was frustrating
ChatGPT is great, it can help give you a starting point for a difficult programming puzzle – but after that point, efficiency quickly declines. When you challenge it about a single line of code it has produced it always insists on reprinting the entirety of the solution and doesn’t do a good job at telling you what it has changed. It’s also not great at remembering / or believing what you have said further up in the conversation. Quite often I find myself needing to start new conversation threads to force ChatGPT to discount our previous chat to allow it to be a little less biased.
Code structure
I have never been a very good programmer and have a lot of confidence issues when it comes to creating a good project structure. I worry about refactoring code in case I can’t get it to work again and ultimately this leads to awful bloated classes that are great on day 1 of the jam, but impossible to maintain by day 2. I need to remind myself that doing the hard work up front and getting the structure correct will pay dividends as the jam progresses.
Mobile support
One of the reasons I use React is because I feel it will one day help me build games that are more accessible. It’s my understanding that a HTML canvas’s can’t be interpreted by a screen reader and a collection of semantic HTML elements are better. As well as this it should be easier to make games more mobile friendly too by simply making a game that consists of elements that are responsive. Lee the Flea is simple enough that it should be able to support mobile devices but I didn’t have the time to make those small tweaks required in the end to make it possible. The game requires the use of the space bar, which players on mobile devices won’t be able to use as I don’t force the use of the virtual keyboard. I will go back and correct this once the voting period is over.
Conclusion
Overall this was a highly successful jam. I continuously need to remind myself that games are hard to make, and even harder when you don’t regularly write code throughout the year! This is one of the only jams where I’ve made something that is actually fun too whilst being incredibly simple. In the next few weeks I’m going to tighten the code to enable me to add new levels more easily, allow for mobile input and make gameplay more interesting.