Adding character art to our dialogue scene in Unity

Ok so this is a continuation of my first post here, which takes you through how to create a script for writing dialogue into a scene in Unity.

Creating the Art

I’m just going to quickly go through a couple of things. I’m no award-winning game artist or suchlike, so I can just tell you some basic things to think about before you import your character art.


But I want to know how to draw game art!

Sure, I understand ya. I used to (and secretly still do) want to become a game artist, but haven’t studied art since I was 13 years old. It seems like a super cool job for sure, and if you’re making your own game then the best way to get total control over the aesthetic is to do it yourself, if you have the ability. So here are some links:

This Game From Scratch Guide to Creating Art covers the different types of game art well – do you want to use pixels, voxels, vector art, something else? Read up and find out which suits your game best. If you’re looking for something that has real art/drawing tips then this GameDev post is a good place to start. And if you’re after some more guided and structured learning, and you have a small amount of money to spare then you could consider online courses such as CartoonSmart or a Udemy course. Look around and see what best suits what you want to learn!

You could also have a look at Character Design References or this guide to great character design.


Whatever you choose, you don’t need to be super amazing at art to make your game. You could pay someone else to make the art, or you could pair up with an artist at a game jam. There’s also plenty of games that haven’t needed Cuphead level of artistry to succeed, so don’t worry too much.

When creating your file in gimp or photoshop, think about the size. You’re going to want to draw all of your characters in the same size of canvas, no matter how big or small they are, because you don’t want the art to be stretched or warped to fit the image box later on.

You need to set a transparent background. Otherwise, you’re going to have a big white square around your characters, blotting out the epic background you spend hours painting… To do this, you can create a new image and then a new layer. Draw entirely on the layers above background so that when it comes time to save your art, you can untick the eye next to the background layer. This makes it appear transparent. However – even if you save this as a jpeg or similar now, it will just add a plain white background in anyway. You need to export it as a gif. The way I do this in photoshop is here:

Screen Shot 2018-07-04 at 11.25.54

I do it this way, since I only recently upgraded from Photoshop CS5 to Photoshop CC, so I don’t know all the ins and outs of the new system. I’d also recommend looking at your image with a bright pink or green background first, as this will show up any edges that aren’t smooth, or patches you forgot to colour in the middle of your character’s face. I often forget to colour the whites of the eyes, myself.

Importing and using your image in Unity

Adding your new gif file as an asset is very easy in Unity. Just go to Assets->Import New Asset… and select it in the finder:

Screen Shot 2018-07-04 at 11.17.18

It will then appear in your assets at the bottom of the application. If you like, you can drag it straight into the scene view and scale/move it around. When it comes to putting it into our scene for realsies, we’ll be doing it a bit differently though.

We need to prepare our scene before we add things to our script – much like we created text boxes before, we need to make an empty image object for our characters to appear inside. As before, all you need to do is right click in your hierarchy, then go to UI->Image.

1

I’ve moved and scaled mine so that it fits in the right hand side of the scene, and you should aim to have the same width-height ratio as the character images you’ve created. I’ve also dragged it to the top of the hierarchy, underneath canvas but above the textboxes. Remember – the topmost item in the hierarchy will be put into the game first, and everything else gets placed in front of it. We want our character image to appear behind the text box. You could also place it above with no overlap, but I prefer this because they feel more a part of the scene than just a little box with a face in.

Screen Shot 2018-07-04 at 11.13.24

Now that you’ve set things up, it’s time to edit our code.

Editing our script to include the character images

Here is the gist if you’d rather take a look yourself than follow along.

Luckily, we’ve already done most of the set-up previously. We just need to add our image component to the script in a few places to make it work, then drag and drop our sprites and we’re good to go!

The first step is to add the third line below. This will give us the box in our inspector that allows us to drag the image object in, telling Unity which image we want to change.

Screen Shot 2018-07-04 at 11.05.12

Again, I’ve made this public so that it can be seen in Unity. I’ve used the keyword Image instead of Text, so that the program knows what type of object I’ll be using. Lastly, I have called it character so that it’s easy to understand from a glance.

Next up we need to add a new array (a list) which we can fill from the application:

Screen Shot 2018-07-04 at 11.05.29

If we used string here, then we wouldn’t be able to drop our images inside because the code is expecting and will accept only words. The keyword that works here is Sprite. Like string is the word for text, this is what we call an image inside our game. I’ve followed our previous naming system to keep things consistent.

Now we have an image to refer to and a list of sprites to fill it with. What we haven’t done is tell Unity to actually show those sprites in the space. Instead of creating a new function for this, we can simply add it to our setText function as below. You might want to rename the function at this point, since it’s no longer only setting the text. Be careful to change the name wherever else it is referenced, eg in your Start and Update functions, otherwise you’ll get errors saying that a function you’ve called doesn’t exist.

Screen Shot 2018-07-04 at 11.05.22

The new line follows the same pattern as the two above it. It says “The sprite in our character image box should be the nth sprite from the array characterItems, where n is the number stored in progress”. We can now save the script and go back to Unity.

Connecting up our script to game sprites

Click on the textbox you originally added your script to, and look in the Inspector. You’ll see a couple of changes have occurred.

Screen Shot 2018-07-04 at 11.22.52

Inside the script component, there is a new box called Character (or whatever you named it in the first step above). Next to that, the box says None (image) – all you need to do is drag your image box from the hierarchy and drop it here. This means that whichever images you put inside the list will show wherever you placed that box. Oh, but you haven’t created the list yet!

Screen Shot 2018-07-04 at 11.16.44

Find the Character Items array and adjust the size to match the length of your conversation. This will cause a bunch of boxes to appear. Unlike the text boxes, you can’t type words inside these and make them show up – we told it inside the script that this would be a list of sprites, so we need to add sprites.

If you haven’t imported your character art yet, then now’s the time to do it. Simply drag the correct sprite from your assets into the boxes, and that’s it! Now when you play the game, your character art will appear in the scene!


Bruce, I followed your instructions, but the textbox covers a chunk of my art!

No worries, this is an easy solve. In the example below, I need to move my character up anyway as it looks bad to have the mouth hidden under a box like that. This is just a random portrait I drew for a DnD campaign, so not perfect for this purpose, but what if you’ve got some pretty detailing on a jacket you want to show off? You don’t want to hide your design work.

Screen Shot 2018-07-04 at 11.33.02

All we need to do is make our textbox background semi-transparent. If you’ve been playing around with colours and making everything look nice, you will probably have seen the setting for this. You need to select the white box we created to go behind your textbox, then click on the colour in Inspector. This brings up a colour wheel, and underneath it the RGBA value. The A stands for alpha, which means how transparent or opaque your colour is. Mess around until you have the colour/opacity you want!

Screen Shot 2018-07-04 at 11.33.52.png

Screen Shot 2018-07-13 at 09.07.12

Ahaha what a great joke. No one I know has ever gotten fed up of me telling it. For sure.


Okay, so this has been a guide to adding character sprites that change to our conversation. We could go a step further and add a background to really set the scene, but that’s just a matter of dragging and dropping one in. Or you could have a changing background using the same method as above. Up to you! We’ve now got two characters – Charlie and Timothy, who have their own lines. Name text, conversation text and character sprites all change when the space bar is pressed, to give the impression of a back-and-forth conversation.

What happens after this conversation though? How do we make it so that the end of this talking scene triggers the beginning of the next part of our game? I’ll cover that in the next post.

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.