In this Sprite Sheet tutorial you will learn how to use sprite sheets.
Tags:How to Use Sprite Sheets,adobe software tutorials,adobenicnacs,digital manipulation,sprite,sprite tutorial,use sprite sheets
Grab video code:
Transcript
Hi this is Daniel Messias from AdobeNicNacs.tk, and in this tutorial, I’m going to talk about sprite sheets. Now, if you’re making the game in scratch, the chances are you’re going to need characters. And a good working character is sprite. And to get sprite, you’re going to need sprite sheets. So a good website for this is this one here, which is http://sdb.drshnap.com. You should be here. If not, I’ll put the link in the description.
And basically what a sprite sheet is, is it has a picture of the charter from lots of different—with lots of different snaps from the animation, as you will see in a minute. So I just go to one of these categories here and I'm going to be showing you how to use a Star Wars one, so I'm going to go to media and then other, Star Wars. As you can see we have a selection files here and if I just open up one, I’ll choose Anakin one. If I zoom in here, you could see there is lots of a picture of Anakin. Now this is ripped from the Game Boy advance one, and this just being annoying.
You can see lots of pictures coming. You can see them doing the different stage of an animation. So as you can see here, it stops there then he moves on to this and so forth and so forth and he performs the animation. And if you put this in your scratch, there's lots of different costumes and then play it fast enough speed, it will actually look like he is performing this animation.
Now to start off, I'm not entirely sure if that is completely legal. So please, please check. I didn’t get a chance to check, but I default for none profit, use some scratch, the would be legal because you’re not selling them, you’re not doing anything with them. You need to give credit to this guy because it—otherwise he could probably ask you to remove them and then you might get into a bit of trouble. So two things to do there, check to make sure it’s legal and remember to give credit.
So what we’re going to need to do is download a load of these shapes or whichever one. I’ve downloaded a couple to my desktop. Now, I'm just going to drag one in. I’ve got one of a clone. I want it to Camtasia into Photoshop, I'm tracking this. You can see this is quite nice because it’s already got the transparency. We won’t have to remove the transparency.
And so, now what we need to do is we need to cut out each of these pictures. There’s an easy way we can do this. We can use slices in Photoshop. Now, I'm not going to go into depth into slices. We’d just go to this button here, click on it and then just drag a field over the top row and then drag another field over the next row and then one there and so forth, then what you can do is you can start to divide them out, and you have to do each one individually, otherwise you get problems and then it becomes a bit of nightmare. Easier to just do a lot of these.
If you’re experienced in Photoshop, you may have a way, in which case, please do so, but this is the only way I know. So I'm going to force the video and finish off drawing out all of these, and then when I come back, I’ll show you what to do next.
Okay, so I finished slicing up all my storm troopers or clone troopers, whatever you want to call them. Next we need to do is go to file and save devices. So now we can select the settings for each of these slices and because we want them all to be the same, we can hold down control key and press A and choose them all. So the setting we’re going to use is a PNG-8. We’re going to use transparency and I'm going to set the colors to around 50 because there isn’t really many, and that will do. And then you want to click save.
Now, I’ve made a new photo in my desktop, I’ve got clones and you won’t have these two files in it because I’ve already save these out. This is what you get. So you want to choose HTML and images only. You want to give it a name, click save and then what you get is in your clones folder, clone.html and then images folder. And the images has all of your images then. Now, you want to click the Photoshop document, so you can refer to the numbers. Here it’s clone 01. That’s my first one, 01 there. So let me just cancel this.
So you can see, new animations starts at 17, as you can see there. So now from 17 through to 28 is the next animation. So it’s 17 through to 28. So I could just use these and that’s the next animation. Okay, that’s how to save or indeed slice and save out sprites for scratch using Photoshop. In the next tutorial, I'll show you how to put them into scratch. I hope you have enjoyed this tutorial. Please check out my site, that’s www.adobenicnacs.tk ad please comment, rate and subscribe to my videos. Thank you.
Comments