Posting Dummy Fighter

Dummy Fighter was my first actually enjoyable game, and it was also the game that showed me how much I enjoyed coding JavaScript. In this blog, I’ll talk about (how I remember) its development.

The game has humble beginnings, and was actually inspired by a “fighting engine”(that was its actual title) I saw off Scratch. The game featured simple Ryu-inspired characters, with a punch, a kick, and the game had QCFs and a heal input that made you input every cardinal direction twice. Because the players were gray and black, I took them to be dummies. Thus, the idea of a fighting game that functioned more so as a physics and logic engine for a more complicated fighting game came to mind.

In April of 2024, I got a friend to code the building blocks of the game with me on Replit. The fighters(as of now) were just some rectangles that could jump. And because I wanted the game to allow characters to move more freely than movement in a game like Street Fighter, and in fact wanted movement to be more akin to the way movement works in Kung Fu Kickball, each character can jump very high on the screen, and move very far in the air.

Then, in May of 2024, I saw that a game jam was coming out. Figuring that this would be the perfect place to show my idea off to the world, I began working on Dummy Fighter. And I might’ve finished, if I had understood that you shouldn’t use setInterval for making video games. This is because setInterval doesn’t care about anything else that happens in the program. So, setInterval to loop the game and setTimeout for delays(like animations) caused some animations to look way too fast, even though I could delay each frame for two whole seconds. Because I didn’t have the time to migrate my code to requestAnimationFrame and get the game working again, and animate the game, I didn’t submit anything to the jam.

Speaking of animations, what did they look like? When designing the dummy’s animations, I had to remember to make the dummy look as emotionless as possible(because the dummy is a literal inanimate object). Because of this, it was really hard to get the dummy to look hurt. So, the hurt animations are just the dummy’s head and body getting chopped off. A lot of the attack animations were inspired by animations from Dragon Ball Fighterz, actually. For example, the jumping light attack is Master Roshi’s jumping light attack. Standing Medium is SSJ Goku’s standing medium. The standing heavy actually takes inspiration from Naruto’s f-smash in Super Smash Flash 2. Crouching Medium was taken from SSJ Vegeta’s crouching medium.

Now that the game jam was over, the new deadline for finishing the game was the end of the school year, because I wanted my friends to see what I was working on. By now it must have been late May to early June of 2024. To save time, the other character was a simple pallet swap(to orange) of the yellow one. Also, you might have noticed that I used the 8-bit Mega Man sprite as a basis(this is because I can’t draw).

Now I needed to flip the sprites. For some strange reason, scaling functions were failing me. When I called ctx.scale(-1), the rendering wasn’t flipped around. I tried rendering with a negative width value, but that also didn’t make the sprite look like it turned around. So, the only other option was to completely flip the sprite’s frames. Another high-res, 49 frame image for each character. And, you might be able to tell how this went. The limitations of canvas rendering meant that when you jumped over someone else, JavaScript had to change each dummy’s image to the flipped one. This took a lot of processing, and on a high-end CPU it might not have been noticeable, but I didn’t have a high-end CPU. So, I tried asynchronous programming in JavaScript. But asynchronous programming in this language wasn’t what I thought it would be. Turns out, even with async functions, setTimeout, and promises, JavaScript is single-threaded. This means that every function you call or every process you perform in JavaScript is executed one after the other, even with promises and async functions. When I realized this, I realized that JavaScript might not be good for what I needed it to do. Back then, I didn’t know about image scaling(I actually just wrote a function that scales images, and the performance improvement was substantial. I am writing this post in July of 2024, when all of this was taking place in June.). And I was on Replit, so even if I did try to migrate my whole game to WebGL right before the deadline, Replit wouldn’t be very good at running the game. At first, I took this to mean that I shouldn’t write games in JavaScript, if this is what would happen. I didn’t understand it then, but I was learning a very important lesson about the limitations of software rendering, and why we use hardware-accelerated rendering for games nowadays.

But, back to the game. Development was almost finished, but that didn’t mean that I could slack off. I remember working for hours every day, trying to get this game to a finished state before the deadline(which was in a few days from now). I had to implement collision detection(because if I didn’t you would be able to walk inside of the players, and the limitations of software rendering would make the game look more buggy than it already was), and code in hitboxes and hurt boxes for each player(so you could actually win).

I did actually finish the game, however, it was on deadline day(the second to last day of school) and I finished the game at school, in the third period out of four. This was fine, actually, because I didn’t have many friends in 1st and 2nd period.

That night, I played the game with my family as well. Instead of playing like Dragon Ball Fighterz, though, it played like Smash if Smash was a traditional fighting game.

The next day was the last day of school. Because there weren’t many school computers available, not very many of my friends played the game. But, that’s not my fault. My laptop wouldn’t have been able fit inside my backpack(it’s easily wider than the 2023 ACT book) or connect to the school WiFi anyway.

Dummy Fighter nowadays

I actually haven’t worked on Dummy Fighter ever since the school year ended. I guess I wanted to get out of the Dummy Fighter mindset. I’ve since learned how to use Java. I love how Dummy Fighter started out as an engine intended for a more complicated game, but then evolved to be more of a party game like Smash. Now I want to port Dummy Fighter to WebGL. It’ll allow me more power and control over the GPU, which will allow me to show my original vision of the game.

Dummy Fighter’s code: style.css — Dummy Fighter — Replit

Dummy Fighter, the game(The game has controller support): Dummy Fighter by Biscuit the Bear (itch.io)

I'm on Medium too: Biscuit's Cookie Algorithms – Medium