Designing and Building a 2D platformer

Game development has always fascinated me and I really admire the work developers and designers put in to create an immersive world. This is hard work and this is why games take ages to build. I am a fan of 2D style games as well apart from the modern ones.

I had been trying to create 2D arcade style games for a while, but I rarely got good results in terms of design. When I asked LLMs to create 2D characters, they exaggerated every pixel and added a faint grey grid. The overall colour theme was also ugly. But that was when I was designing in the terminal, along with the game mechanics.

I decided to revamp the approach- I separated design from code. I gave Claude design a try and the results were significantly better. I spent the next few days refining the design and adding characters and hurdles.

This is the result of Claude Design:

Characters:

Once I was happy with the design, I sent the design system to Claude code and resumed development from there.

Over the next few days, I will continue to add new levels to the game. I still need to refine the mechanics. I am excited on how this will look at the end.

This is the current progress: Coin Collector — Movement Test

What tools do you use for making the front end of your apps?

That’s cool, the game is quite cool, but I think some feedback would be that the jumps don’t seem very realistic and its too much like flying.

Hi @zaira_h

Instead of a fox, how about a rabbit, and instead of coins, carrots. This way the jumping animal may make more sense.

For the slime, instead of hopping it can only move left and right, and stays on the ground. It cannot move between platforms, only the other opponents can. Maybe add a temporal slime trail which if the player avatar lands on, it becomes stuck for a few seconds.

The slime and ghost avatars look too similar. Maybe make the ghost pale white. Maybe add a wing design to the bat.

When making apps I used to use an IDE where I could see a live preview of the app. I still do when adding and updating CSS. With HTML and JavaScript, I’d spend too much time fixing syntax errors instead of concentrating on writing code. I use an editor to write code, then save and test it every few minutes to make sure it works as intended.

Now I can write more code, concentrate better, and spend less time on debugging.

I did a weekend game jam and burnt a ton of tokens on copilot, back when it was still “pay per request” rather than token. I used kaplay and actually cheated in regards to design. I made everything geometric shapes such as circles and squares as I knew design/sprites would take up more time than I’d have and I wanted to focus on the gameplay more than anything.

I did a few tests with copilot for generating images and uh… its not every good. I tried the same with claude code a few times and it did OK. I don’t think AI is very good artists so I’d just leverage pre-existing assets or build them using some other tool that is more specialized.

I use gemini to generate images nowadays, I’ve never tried pixel art, but I like the idea of separating the two.

PS. I was going to provide links to the game I built… but I realized with an unrelated migration of my github pages, the links are busted lol.

Yes, I can definitely shorten the length of the jump. Thanks for suggesting this.

I plan to add new characters and a rabbit would be nice :smile:

I like the idea of slime trail. Right now the slime is moving way too fast.

I agree, it can be hard to get AI make good design. I found Gemini to be better at generating images as you also mentioned. Recently, ChatGPT also got much better.

Using pre-existing assets is also a great way as they look quite professional.