Victor, a sprite-based SHMUP

Published on 2020-12-20 by David Norton

In 2019 I wrote Viktor, a sprite-based shoot-em-up (SHMUP) drawing inspiration from 1942 and Galaga.
(code is here, play it here.)

This was again written in Javascript, using P5.js as the base library again and adding P5.play for sprite and animation handling.

Neat things I ran into working on this project:

• p5.play's vanilla version was not updated to support images correctly beyond p5.js v0.5.4 (Released October 01, 2016).

  • I chose to use the vanilla version of p5.play with the older p5.js v0.5.4, rather than patch it to another, later, arbitrary p5.js version.

• I added a particle engine.

  • I played around with a few different ways to store the particles
    • Originally it was pushing onto the end of the array and splicing out particles when they reached the end of their time-to-live
    • But as discussed in the Asteroids blog post, this is expensive compute work (n to 2n) to save (say) a kilobyte of memory
    • I then adjusted the renderer to just not display particles that had passed their time-to-live, and made the size of the array fixed
    • this means we're no longer allocating and de-allocating memory, we're just incrementing our way along a fixed array and updating and displaying only live particles
    • Computer science (and engineering) is mostly about tradeoffs, and in this case we're increasing memory usage by a few kilobytes in order to save on processor time.
    • Additionally I simplified the code by just iterating over the array and not modifying it; trading increased memory and compute (iterating over the full length of the array) for less complex code.

• Adding the particle engine meant I wanted to use it a lot, so I:

  • added shields (popping the shield just used the particle effect again)
  • added a slight warning puff of particles when an enemy was about to burst on the screen
    • This is an example of the Game AI maxim "The best Game AIs are ones that the player can understand, not necessarily technically brilliant."
  • Used particles for bullets annihilating each other and chipping armor off an enemy.
    • This required me to know what the color of the sprite was before I spawned particles off of it
      • so once-per-frame (60 frames per second) I'd check a single sprite to see if I needed to get the particle color to be used for a sprite, and then get it if necessary.
      • Since "get pixel color at this coordinate" was relatively expensive, again, I needed to keep it to an as-needed, once per frame basis.
  • I do think this particle system really added to the feel of the game and made it feel more active and lively

• While I want to avoid flashing lights (for people who have epilepsy), there is a single frame that flashes the screen when you beat the boss.

  • I thought this was a fair tradeoff: it cements the game finale and hides the boss ship transition to a wrecked boss ship.

• I re-used the sound manager which was so successful in the Asteroids clone

• the moving background stars are not actually particles, they are a separate system.

  • I debated putting them together but I think this would over-complicate the particle system, since background stars are reused and particles are (mostly) not

Screenshot of the game:

Takeaways

• SHMUPs are fun and an excellent way to get into game development
• Particles are easy, fun to add, and quickly add a bit of energy to the game; just don't overdo it.
• I'm not going to be making any money off of this game (it's 10 minutes long) but I learned some cool tricks and have a cool finished project to show off as well.
• I worked with my son on the sprite artwork, and it's cool that he now has a published work given that he is in middle school at the time of writing.