How to add an NPC with Dialogue to a Top Down Adventure Game

This tutorial was put together by our community member shawnBuilds for Rosebud AI, the AI-powered game creation platform. Check out shawn’s games here, and join our Discord to find more tutorials and connect with other creators!

‍

Ever felt like your game world is a little too quiet? That’s where NPCs (Non-Player Characters) come in.

They’re the friendly, or not-so-friendly, faces that can turn a game into a story the player can't forget.

In this guide, we’ll walk through adding an NPC to your game who responds with dialogue when the player approaches them. We’ll be using the Top Down Adventure Game Template by Kanos , which comes with a beautifully crafted town and a player all set to go.  

Here's what we'll end up with by the end: NPC Dialogue Demo.

Project setup

To follow along, remix the Top Down Adventure Template in Rosebud. Here's how:

1. Open the project at: Top Down Adventure Template

2. Click the 'Remix' button at the top right, below 'Create Game'.

Now, let's get started!

Step 1: Add NPC

Submit this prompt to Rosie:

Let's add NPCs to the game. The position, size, id, name, and image of any NPC should be easy to customize. We will only add 1 NPC to start. This NPC, Joedave, will look like the player when they are facing down and standing still. Place Joedave above the player. so they can be seen on the screen immedietely. That's all right now.

After using the prompt, you'll see something like this:

I suggest positioning the NPC before changing the NPC image. When the NPC is somewhere you can see, with an image you already have in the project, it will be easier to see visual changes.

Also, I mentioned we will add multiple NPCs, so will be easier for Rosie add more NPCs to the game in the future, if that's what you want to do.

Step 2: Change Character Image

Submit this prompt to Rosie:

Ok. Let's change the picture of Joedave, so he stands out from the player. Use a new sprite sheet for joedave. The spritesheet has the same settings as the player sprite sheet. Pick the standing, facing down pose. The sprite sheet is at @https://play.rosebud.ai/assets/brownhairedman.png?g5be

After using the prompt, you'll see something like this:

It's convenient to add new character images by using a sprite sheet, a collage of images, which is structured like the player sprite sheet, which is already used in the project.

If we do this, then all we have to do is describe which sprite sheet and pose to use for any new NPC. Rosie will handle the rest, since the project already has a system for loading and using sprite sheets to change the character image. You can learn more about sprite sheets here: How to use spritesheet animations on Rosebud.

Step 3: Add Character Dialogue

Submit this prompt to Rosie:

Let's make it so NPCs can greet us with dialogue. Use an modern, stylish HTML container for a dialogue box which will appear at bottom of the screen. Open or close this dialogue box when then the mouse clicks the character who's responding with dialogue. Fill the box with text for the NPC name, and 1 dialogue line at a time. A button will be at the bottom for continuing to the next dialogue. Make the text and button in the dialogue box large, bold, and centered. Also, create a few lines of dialogue about Joedave being freaked out cuz we aren't wearing pants.

After using the prompt, you'll see something like this when you click the NPC:

Pro tip: Give Rosie the benefit of the doubt when it comes to making you laugh.

Jokes aside, I suggest using an 'HTML' container for the dialogue box. It's easier for Rosie to follow descriptions of what the dialogue box should look like when she's coding with HTML. And, I explain that the box should show one dialogue at a time, and a continue button, so Rosie generates easy to follow dialogue that comes in bite size pieces.  

Big thanks to Kanos for sharing this awesome game template, and creating the spritesheet I used for our new friend, Joedave.