Boyks

D Tier Internet Sensation

Twitch Partner, Variety Streamer, Speedrunner, Pepsiman SGDQ 2016/2018, Retro Console Modder, Indie Dev, Mashup Artist, Ex-Card Gamer, Co-host of @RuffCuts, Cat Dad.
He/Him. Bi.


Hello! Last year I made and released a Game Boy game called What's Updog? using GB Studio which is a really cool program! The Game Boy is super simple hardware when it comes to game dev and this tool really makes it easy to get started. So I've been thinking about how I can lower the bar for entry into making games with it and getting into how I went about making the different parts of my own game sounds like as good of a spot as any. So let's make an animated moving NPC You can do this!!!

GB Studio

Your best place to start with any software is the documentation. In this case, there's some really good docs on the GB Studio website for how to do things within the application. For example: Here's the Sprite page. This will give us some basic rules to follow when making our own sprite. Namely:

  1. A basic sprite is 16x16 pixels. 16x16 sprite of a seagull

  2. Animated spites consist of 16x16 sprites stacked next to eachother with each new 16x16 animation frame being placed to the side. 16x32 sprite of an animated duck bobbing

  3. Generally speaking, a sprite we intend to move should have three states (facing forward, facing backwards, and facing to the side). 16x96 sprite of an animated seagull flying

  4. Sprites can only contain 4 colors. One of which is always used for a transparency layer. The four colors available in GB Studio for sprites These colors are (in order): #071821, #65ff00 (Transparency), #86c06c, and #e0f8cf.

The duck above is an included asset but I made the seagull sprites using the pencil tool in a photoshop editor with antialiasing off. That worked surprisingly well!

So once we've saved the sprite as a PNG we are ready to import it into GB Studio. Simply drop the sprite into the project's assets/sprites folder and then refresh assets if GB Studio was already open. To add your cool new seagull to your game just click on the big plus sign and Actor to add an actor. Plus sign and Actor menu in GB Studio

Then change the selected sprite to your seagull. Sprite Sheet Selection (Notice how the transparency layer is gone?)

We're not done adding the sprite however! This sprite has animations and we intend to use them. Now click on the top left and choose Sprites to switch to the Sprite Editor. Sprites Menu Sprite Editor In the sprite menu there's a few things we'll need to do for our sprite to animate. On the right hand side I've set the canvas size to 16x16. You can make really big sprites if you want! Simply change the canvas size and go ham. The collision boundary is also 16x16. This can be moved to a different part of the sprite (the anchor for which is the highlighted blue background on the sprite) if you wish to make only part of the sprite a collision zone for other actors/objects.

I've also set the animation type to Four Directions. This particular sprite will always be moving so I don't need to set it for Four Directions + Movement and can simplify this. Make sure to check the Flip 'Right' to Create "Left" Facing Frames option for when the sprite moves Left.

Okay so if you look at the bottom left you'll see the frames. In this case this is for the facing "Right" view. I have two frames, so I simply made one for each of the animations. Then repeat for Animations Up and Down on the left-hand side of the screen. And you're done!

On the sprite sheet you may have noticed the Direction arrows. If you change the direction here you should notice the sprite change accordingly. Sprite Sheet Selection Forward

Now how do we get it moving on the scene? So the first thing you need to do is initialize a temporary value we will use to keep track of what the seagull should be doing next. In this case I made a variable name $Temp1. This value resets on screen transitions so it's perfect for actor movements in a small scene. $Temp1 Value

Next I'm going to make a looping switch with a condition that happens during the screen update (which already regularly occurs while the game is running) under the On Update section for the Actor. Switch $Temp1

This creates a loop that does a different thing on each value specified. In this case we will be using the numbers 1, 2, and 3 to denote what state the seagull is in.

First I want the seagull to move right to a specific spot. So I set the sprite direction, move it, and then increase the variable from 1 to 2. Switch condition 1

Then I have the seagull move back, turning the other direction, and increment the variable from 2 to 3. Switch condition 2

Lastly, I reset the variable value so on next update this can repeat ad infinitum. I also add an "else" as a catch-all in case something unexpected changes the value. Switch condition 3

And now the seagull flies to the right, stops, and then turns around and goes back! We're almost there. I want to talk and interact with this actor. When I do so the seagull will turn towards the player (awesome!). However my script for it's animation doesn't take this into account, so the seagull will stay in that turned direction and finish it's movement before the loop can fix it for the next repetition. In order to fix this I simply add another switch to the dialog display which checks the current movement $Temp1 variable and reassigns the direction after dialog before the actor starts moving again. Dialog On Interact

And we're done! We have a moving sprite which can talk to us and then go back to flying around that beach. Congratulations!

Seagull flying saying dialog and resetting

I hope this was helpful to any aspiring devs out there.


You must log in to comment.

in reply to @Boyks's post: