Digitized Sprites and Floaty Orbs


New Year New Boss

Hi all and happy new year! I ended being more productive over the holiday break and managed to finish up a new boss fight I’d been working on the last few weeks. In this blog post I’ll be talking about making this boss fight and then I’ll also start talking about the process of making live action digitized sprites – as I’ve been wanting to get to this topic for a while.

Screenshot of video game with a man jumping over a floating orb for Lair of the Insect God
Boingy springs and electric brain orbs.

Orbs and Energy

SPOILER ALERT – Skip ahead if you don’t want the details on this boss fight!

So as I’ve mentioned before I’m breaking up the boss fights into “mandatory” and “optional” categories – this boss fight falls into the “optional” category, meaning the player will be able to skip it (or maybe a better way to put it is that the player needs to explore to FIND it). If the player does find a complete this boss fight they’ll be granted a new power, which right now I’m calling an “energy blast”.

The “energy blast” power will shoot a blue… erm… energy blast at enemies which will do minimal damage to their hit points but will pack a wallup to their guard meters. As I’ve mentioned before, many enemies in the game will have both guard points and hit points – in order to start dealing hit point damage the player will need to break the enemy’s guard first (I blatantly stole this idea from Sekiro). Once the guard meter is broken, it can’t refill and the enemy will be more easy to attack and when attacks land it will reduce their actual hit points.

My goal with the energy blast was to add a power that was more strategic towards quickly reducing guard points rather than a big damage dealer (which a lot of the other powers are more focused towards – though not all).

Player character in video game shoots a blue energy blast in Lair of the Insect God
Blasting with energy!

With that in mind I decided I wanted to make the boss fight that you picked up the energy blast to be a bit fitting with the theme of “energy” (I don’t usually try to match boss fights to the power it grants you, but for this one I did). As such an electricity based bad guy seemed fitting. I also had this idea of an enemy that constantly floated in the air – similar to another boss I made which was a floating wolf head – but this one you get to constantly bounce up to their level rather than being stuck on the ground.

I also wanted this boss fight to be in multiple stages, which means the attacks and nature of the fight will change as damage is done to the boss. When coming up with the physical design of the boss itself, my initial thought was to just have it be a floating electricity orb that shoots lightning bolts at the player which the player can hit back and then the boss will change the type of projectiles as it enters new stages.

After some more thinking I felt that the orb by itself wasn’t as visually interesting as it could be, so I drew inspiration from the thing that all pf us 90s kids draw inspiration from – teenage mutant ninja turtles.

A monster brain with spider arms explodes in blood in the game Lair of the Insect God
No tarantula legs brain monster is safe from me when I hit the boingy springs

I kept thinking about Krang from TMNT and how he was a weird creepy brain inside of a robot. So I felt it could be cool to have the outer orb be a shield protecting an inner evil brain.

The fight would play out so that the more damage you do to the orb, the more it cracks, until it finally shatters revealing the inner brain, which will then expose platforms on either side of the brain the player can jump on and do regular attacks to.

So now that I had my concept I had to create the scene! The first step was making the multiple layers of animations – both the outer orb shell (intact and cracked) and the inner brain. For the effect I utilized multiple public domain images I found of things like orbs, electricity beams and human brains. I also added in some tarantula spider legs for good measure, so that when you hit the brain there’s something that moves for some extra zazz.

Once I had my images it was pretty straight forward to animate in after effects, as I just needed to cut out the parts of the images in photoshop and then start doing the animations. When I’m doing animations from photographs, it tends to be a bit more straight forward like this vs when I’m creating animations from video clips (more on that below).

After about a week I had all the animations I needed and I uploaded them into Godot and then plunked them into multiple AnimatedSprite nodes – one for the outer shell and one for the inner brain.

An animation being worked in Adobe AfterEffects
Constructing the brain in After Effects

To create the “bouncing effect” I took an older asset I had previously made of a bouncy spring that increased the height that the player bounced depending on their velocity and created a new scene out of it where the bounce would always be consistent (I kept the boingy sound though).

Once I had all that loaded and constructed in the level it was mostly a question of coding it out The coding was pretty straight forward, with the one little tricky part being the movement of the orb. Since it’s not on the ground it can be difficult to determine where the “boundaries” are for where it can and can’t float – and then being able to trigger it to change directions (since the orb won’t just follow the player around like most enemies). To solve this I placed four Position2Ds (which relay a point on the x/y axis they are placed on) to the east, west, north and south of the where I wanted the orb to float in and then just told the boss scene to “change direction” if it went past the global position of any of those Position2Ds.

And in the end my electro-orb boss fight is working! The orb starts by launching lightning balls at the player that they can hit back to damage the boss (this is the only way to shatter the outer orb). Then as the fight progresses the boss fight enters a stage where the outer orb cracks and it starts shooting both lightning bolts and lightning balls together (the bolts can’t be hit back). When the orb finally cracks, platforms appear on either side of the exposed brain, which now only shoots lightning bolts. The player will need to land on the moving platforms to start doing direct damage to the brain.

END SPOILERS

So that’s the Orb boss fight! I’ve now completed 10 boss fights and have 6 more to go. The next boss fight I’m going to work on is the last boss fight I think – when you finally face the Insect God at the end of the game. So that next blog post is gonna have LOTS of spoilers in it as a forewarning.

Making of a Digitized Sprite in a Video Game

So now that orb boss is done, I wanted to talk a little bit about the process I’ve used in making digitized sprites for the player character and enemies that were made with live action actors. I had previously mentioned in a blog post that I was inspired by old 90s fighting and side scrolling games such as Mortal Kombat and the Batman Forever Sega Genesis game I used to play as a kid, which also used digitized sprites for their graphics.

A man dressed in costume in a green screen room recording animations for the Lair of the Insect God game
Behold the majesty of the most high tech green screen garage this side of the Hudson

My method for making these digitized sprites (as they are called) was pretty much the same as those games did (as far as I can discern). Basically, I (or the actor) go into my very professional green screen room (my garage I painted green), put on a costume and then stand as if in a 2D plane (so profile to the camera). I then have a list of animations that need to be done which the actor will act out. Sometimes this will require the use of a treadmill (for walking and running animations), sometimes it will require the use of a crash pad (for flinging yourself on the ground when doing a hit animation), most of the time it just requires the actor and the given costume or prop in use.

The amount of animations that need to be recorded can vary wildly – anywhere from 40 to over 300. When I first started doing the animations the recording process took around one to two weeks to complete. Now that I know what I’m doing more, we can bang one out within 2-4 hours (depending on how complicated the animation is or how tired the actor is).

Most of the time the animations aren’t very exciting to record – stuff like “turn left” or “stand up from a crouch”. Other times it’s a lot of fun – “do an attack!” or “cast a magic spell!” Other times it hurts a lot lol – “fling yourself onto the crash pad as if your getting hit by a grenade blast!”

A man in costume throwing himself onto a crash pad in a green screen room while recording video game animations
The crash pad is nicer to fall on then what I was originally using – yoga mats

Once all the animations are recorded I go into After Effects and process the footage. Processing the footage consists of splitting up the animations into 1-3 second chunks (as I’ve discovered you get lots of ram issues if animations go longer than that), green screen them out onto a transparent background and then add any effects or color correction I want. One step that’s also important is making sure that the character in the cut out clip always physically stays in the same spot on the screen (as they’ll move out of the collision boxes if they move across the frame on the clip). This step is pretty tedious, as I basically have to go frame by frame and animate the position of the character so they’re always anchored to the same spot on the screen – actual movement of the character is handled in the code in the engine.

Once the animations are complete I export each one as a “PNG Sequence” which effectively just exports the video clip as a series of transparent PNG images for each frame of the video clip (24 images for each second of footage!). I then take those images, compress them (gotta save that ram) and then upload it into the Godot Engine and place it into a node called an “AnimatedSprite”, which basically treats the images the same as a cell in a traditional animation loop.

Once it’s all uploaded and each animation has been broken out into their own individual blocks and a state machine has been created it’s coding time! I think I’ll get more into animation blocks and state machines in a future blog post, as it gets a bit complicated.

Space for Space

One thing I’ve had to learn the hard way about building the animations in this way is that digitized sprites take up a TON of ram on the system. Before I was paying attention to how much ram was being eaten up and I was uploading 30 second long animations uncompressed, I started noticing that the scenes were taking like 5+ minutes to load. I couldn’t figure out what was going on so I looked at the ram usage and I had maxed out 64 gigs of system ram and 11 gigs of vram just to load the player character! Holy crap!

So now I’ve learned that you have to cut the animation lengths down to ideally 1-2 seconds (and no more than 3 seconds) and each of the sprites needs to be compressed way down and then compressed again in the engine in order to keep the ram usage at acceptable levels. The quality of the images is ok after all this – but there are particles that can be seen and it doesn’t look as crisp as when I was running a single idle animation as a 30 second loop at 1080p for each frame. Oh well – that’s how it goes. I think back to when they were making games like this back in the 90s and I really don’t know how the hell they did it with how little ram there was in those early consoles and computers. It must have been quite a task.

Well that’s about it for this post! As I stated, next project is going likely be the big final boss fight and I have 6 more boss fights to finish up overall. Then I’m going to work on adding a couple more base level enemy types (I think the total base enemy types will be 8 right now – I currently have 6).

As always you can see a video of the Orb Boss fight in action on my social media accounts (links in the footer) .

Until next time!

-Charles


Leave a Reply

Your email address will not be published. Required fields are marked *