Everyone seemed to enjoy seeing more about the behind-the-scenes process stuff I shared in last month’s making an enemy update. So I thought I would continue with something similar this month and show what goes into making a pair of Nemo’s pajamas.
About Nemo's PJs
In Little Nemo and the Guardians of Slumberland, PJs are one of the major upgrade items you can find or purchase throughout Slumberland. Each pair is unique and provides a passive buff as well as a new color scheme for Nemo. You can swap out which PJs you have equipped at any dresser (so when you’re back in your bedroom is a great time to reevaluate which PJs you should be wearing).
In terms of the power level of the buff the pajamas provide, the goal is for all PJs to feel equally useful and balanced, while ensuring each buff is completely distinct from any other. And in terms of how I think about the PJ buffs in terms of how they compare to other major upgrade items, it’s something like this:
Toys grant entirely new abilities that are transformative and affect combat and traversability. Used as a gating mechanic.
Little Buddies are much less powerful abilities, but should be very unique abilities unlike any others you have. No parts of the map should be gated by having these, but some areas or lore might be soft-gated by them.
PJs are like Little Buddies in that they are not transformative the way Toys are, but unlike Buddies, their buffs should enhance some existing ability you already have in some worthwhile way.
Okay, so with that context in mind, let’s talk about how I create a specific pair of PJs. Specifically, we’ll go through the process I went through in making the Dino PJs.
I want each Guardian to have a pair of PJs that matches them, and since there is a Dinosaur-themed Guardian, that means we will have the opportunity to get some Dino PJs at some point in the game. So the first thing to do is to pin down a visual identity for these PJs…
The PJ’s Look 🎨
PJs take advantage of the dynamic sprite re-coloring system I’ve built for Little Nemo (read more about that here), so we need to come up with a palette that somewhat matches Gertie’s look.
Since Gertie is herself using the dynamic sprite coloring system, let’s first just see what happens if Nemo simply uses Gertie’s color scheme when wearing the Dino PJs.
Nemo simply using Gertie's color scheme directly with no modifications. Not quite right.
Okay, that doesn’t work because we’re using Gertie’s skin tone and the hair color is a bit dark and desaturated, but the color of the pajamas is a good start. So we’ll make a new Gradient Map based on that as a starting point and start making some adjustments.
A color scheme is a series of gradients that our shader uses to re-color the sprite as needed.
Something we’ll need to keep in mind during this part of design is we want each pair of PJs to be very visually distinct. Since I know Nemo will also have access to Frog PJs, and I expect these two to both be primarily green, then I might bring those PJs up as well and do some side-by-sides to make sure they’re sufficiently different from one another.
A side-by-side of the Frog PJs next to the Dino PJs so I can make sure they feel visually distinct enough despite both being primarily green.
And after we’ve got something that looks nice, we’ll also just make sure that we still like it in a variety of lighting conditions. And if that all looks good, we’ve got the look down!
And here's how the PJs are looking in a variety of lighting and background contexts.
The PJ’s Ability Buff 💪
Now I need to design a buff for these PJs. I have a PJ doc with all the PJs in there that have already been designed, so I can go in there and see where there’s room for a new ability buff. Some PJs will buff Nemo’s innate abilities (for example, Nemo can of course innately collect candy by walking over it, but the Sweet Tooth PJs allow candy to be pulled towards Nemo from a distance) and some will buff the abilities gained from new Toys (the Yo-Yo Master PJs for instance will allow you hold the attack button down to keep your yo-yo out when you attack).
So while working on the Dino PJs, one of the abilities that had no buff was the Bubble Wand. This toy grants you the ability to create a protective bubble around yourself which will protect you for one hit. Since you can’t move at all while bubbled, there’s some room to make this even more powerful for players that like strong defensive options.
Meanwhile, there was another thought that had been bouncing around my brain at some point, which was a) how much I like the Tanooki suit’s ability that allows Mario to turn into a statue in Super Mario Bros. 3 and b) how that is actually a lot like the Bubble Wand’s ability. So with these things in mind, I decided a good ability for the Dino PJs would be to upgrade your Bubble Wand ability with the ability to turn into a statue, making you completely impervious to enemy attacks (instead of just a single attack). That kind of ability buff feels in line with the level of power that other PJs have and also is just kind of a fun nod to a game I love.
So now we’ve got the buff designed and we just need to actually make it all work.
Engineering the PJs 🛠️
So let’s get into the details of everything I need to do to make these PJs actually function. There’s a step that I already did earlier, which is to add an entry to our PajamaType enum for our Dino PJs. And when we were working on the color scheme, we also would have made sure to wire up PajamaType.Dino with the color scheme we developed.
Since this is a modification of an existing ability, we’ll need to do two things: 1) allow for the Bubble Wand to also work in such a way that it will no longer pop when hit and 2) Ensure Nemo’s Animator knows that we should be using this version of the bubble ability because we’ll need an entirely different animation (and speaking of, we’re gonna need to draw a statue sprite for this animation).
Adding this feature to the bubble ability is relatively easy: we’ll create a StatueDefense component that we can tag the player entity with when they have this buff enabled, and it will piggyback on the existing Defense logic that the Bubble Wand's default ability uses.
Here's a look at the system that piggybacks on the existing defend system and instead handles the statue logic
I only include that picture so you can see that it's not too much logic. This system is essentially just doing a few small things:
Recess the player when becoming a statue (so we appear behind enemies instead of in front as we normally do.
Remove the player's AITarget component (this will prevent enemies not just from hurting us, but from even trying to attack us)
Make the player completely invulnerable instead of relying on the ArmorBox we normally use (which would get popped if hit)
Emit an effect so that we can get some particles and a sound effect happening anytime we transform into or out of statue form.
For Nemo’s Animator, the bubble wand animation is controlled using our animationState parameter, and there is an integer value that corresponds with a defensive animation. So we’ll just add a new integer value for this buffed version of the defensive animation and make sure our animation system handles that based on the boolean we added to the Defense component above.
Nemo's Animator now just has a single new state it can enter as highlighted here. We'll enter this state anytime our animationState parameter matches the integer value that corresponds with our new statue animation.
We’re almost there! Let’s draw that Dino Statue that Nemo will turn into. This should be easy because it’s only a single frame and doesn’t need to be animated. I got João to help out and do some sketches for what this might look like first
Some very cute sketches from João depicting Nemo as a dino statue
But they weren’t quite what I was after. I really wanted some kind of a staff in Nemo’s hand too. Something about the staff that the Mario statue holds in SMB3 just sticks with me in a way that it wouldn’t feel right without something similar. Cid had the great idea to use a crossing guard sign, which is thematically fitting since the Dino PJs will be acquired in Nightlight City. So with that help from Cid and João, I came up with this sketch.
My attempt at combining the ideas I liked into one dino statue concept sketch
Since I'm happy with this one, now I’ll draw a more finalized version of the sprite, bring it into Unity and make sure those new animations for Nemo use the statue sprite. And then we have a new pair of working PJs. And here they are:
The Dino PJs in action! I'll probably continue making minor tweaks, I don't love the transformation smoke effect right now for instance, but it's all working.
And that is a full look at how I’ve made a pair of PJs for Nemo from start to finish! Getting these PJs to the player is simply a matter of drawing a dresser into the world and selecting the PajamaType.Dino enum option, or making it available by using a simple macro via the dialogue system (if we’re purchasing them from an NPC). But I won’t say too much more about that, you’ll have to find these PJs in the game yourself when you play!
Thanks so much for reading all the way down here. I'd love to get feedback on how people are liking these devlog updates and what other topics you'd like to see covered, so please leave a comment down below!