 Hi everyone, it is Crypto Grounds here and welcome back to another tutorial. In this tutorial I'm going to be briefly going over texture atlases or sprite sheets as another name for them. I will be showing you all how to use them in text mesh pro. Additionally, I will be showing you how to automatically import them into your game as a sprite array, which can be done in code. So here's an example of a sprite sheet I will be using for this video. These are all of my completed achievements that I am using for the idle research achievement system and I also have another one that looks just like this. So here is our very basic file structure. You have a resources folder and inside of that is a subfolder and the completed tube achievements, which is just a PNG and inside of the subfolder is another PNG and that's going to be called the completed Flask achievements. So we have two different ones and I will be showing you how to import both of these into a sprite array. So let's start with that first. In order to import these as sprite arrays we need to mess with them settings real quick. So let's head to our completed Flask achievements and in the inspector you should see all of these settings. So head down to sprite mode and click single and change it to multiple and then hit apply. After you hit apply click on sprite editor and this window should pull up. Hit the slice button and hit type and make sheet change the automatic to grid by cell size and you should type in the pixel size based on whatever square size everything is. If we were to do automatic it wouldn't really work properly. So you just it's just one giant box around this entire thing. So we have to type in a grid size manually. So in our case it's just 250 by 250 because all of these are 250 by 250 squares hit the slice button and everything should be great. So you can click on each individual box. And now you have a little mini sprite for each one of these little boxes. So when you're done with that hit apply and if we were to go back to our resources folder in the assets and you hit that drop down right next to it. You can see you have all of the all of the sprites for each individual ones. And it looks like some of them are bit off like this one's a little funky. I think that's just the picture I messed up something. But anyways, if you were to check them all out everything should look great. You'll be doing this for any picture you have that looks somewhat like mine. I have another one. So I'm going to do that real quick. And sometimes you may have extra boxes that you don't need. Now you can just hit delete. I'm going to create two things one a canvas. So UI canvas and then I'm going to create an image. OK, next I'm going to create an empty game object and just throw that outside of the canvas just whatever I'm just going to call this. I'm going to call this this will be where our script is going to go. So just name it whatever you want. So I called mine sprite sheet manager, but yours may be different for your purpose and open that up. All right. So now we need to create two sprite arrays because I have two pictures and you can do that however you'd like. You may have more than one. You may only have one sprite sheet, but that's up to you. All right. So first I want to load in this completed flask achievement sprite sheet. So just a note, this is inside of a sub folder. I can easily move this out and just keep it like this. But I want to show an example of how to load how to load in a sprite if it's within a folder. All right. So in our start method, we want to load in these sprites and we only want to do it once and that is in the start method. So that is just right before everything happens. We could put it in our wake method, but I'm just going to put it in the start method for simplistic purposes. So we want to assign our sprite array, our completed flask achievement sprites equal to resources that load all and make sure you include the care so you can determine what type of asset we are importing in our case, it's sprite. And then we're going to put the directory inside of these parentheses. And for the flask one, it is inside of the sub folder. So we got to include that. So it's sub folder folder slash completed flask achievements. And that's all we need to do for this. So resources is a class that includes a method called load all. And this will load every single sprite within this completed flask achievements. So it's not going to load in this big guy. It's going to load in every single one of these little sprites into a sprite array. So we're going to do the same thing for our completed two achievements. And this one will be more simple because it's not inside of another folder. So in my case, it looks just like this. So let's save it and let's give it a run. And as you can see in our specter, we have all of our sprites in here. So there's no need for us to drag these manually one by one over and over again. It just does this automatically and it's very wonderful. And it happens once so we don't need to constantly import our sprites, that would be a little silly. And then they're there and done. So now let's grab a random sprite and try to sign it to this picture right here. So in our script, we're going to create an image object. Make sure it's within the unity engine dot UI namespace. And we'll just call this sample achievement. I don't know, just just because I'm going to put this in the update method. I'm going to create another variable, which is going to be an end. And we'll just call this ID. So we're going to be we're going to be able to change this within the editor so we can see whatever achievement we want. So we're going to set the sprite of our image equal to completed flask achievement sprites at index ID. So by default, it's going to show the very first icon because ID will be set to zero. But we're going to adjust that within our inspector. So let's unpause this, let it load in and then hit play. So yeah, no reference. Don't forget to assign your image because that's that's not good. All right, so as you can see, this is the very first image in our completed flask achievements. And let's just move this ID around and it should change. Oh, yeah, it's going crazy. And don't go out of bounds because then you'll get this index out of range exception, but yeah, so you can change this ID and cycling through all of the different sprites within the sprite sheet. Cool. So now you know how to import tons of sprites within just a few lines of code. Now let's find another way to use these because these can be very powerful. So in your project, if you haven't already imported text mesh pro, I would highly recommend you do that. I would not suggest using the default text here because it's very outdated, it's not good. I've had issues with higher resolutions such as like 4k or even 1440p. Text would just not render pop properly. I would highly recommend you not to use the legacy text anymore. Otherwise, we're just going to import all of our essential resources for text mesh pro and which can be found in the window text mesh pro and then the import button. And you want to make sure you import all of these if you haven't already. All right, so we're going to be using something called a text mesh pro sprite sheet. So so what we're going to be doing with this is taking the sprite sheet here and making it accessible for text. So if you have a bunch of icons you want to access through your game within a text like currencies and stuff like that, you'll be able to use this with text mesh pro, unlike the legacy text. So first thing, let's create a text within text mesh pro and just give it some random text and stuff. OK, so we're going to be creating our sprite assets for text mesh pro. Also, I've probably been calling these sprite sheets, but so we have sprite sheet or texture atlases, which is what this guy is. And then we have a sprite asset, which will be used for our text mesh pro. So we so we are creating a text mesh pro sprite asset right now. So do that. You need to right click on a picture that is on multiple sprite mode. Go to create and go to text mesh pro and then create sprite assets. So automatically create one and you can see the character table and all that. And you'll be able to adjust all these funny numbers. So and you're going to do that in order to position your sprites correctly. But anyways, we have created this sprite asset. Let's do the same thing for the other achievements. In order to use these, we need to go to our text and use the sprite tag. So it looks something like sprite equals. And then we have our quotes and we'll put our name in here. And then index equals whatever we want. So we want the access. The first achievement will use index equals zero. And it's the same thing as the ID system we have here. But this is not going to work even if we type in the name of this actual sprite asset, see, it would just look like this. So this is no bueno. It's because these sprite assets are not in the correct location. What we need to do is create a folder inside resources called sprite assets. So let's do that. And then you need to move both of these there. Hit save and you might need to refresh it a bit and it should eventually show up. Oh, it never moved. Silly me. There we go. All right, so just try to remain them and oh, there we go. So now it should look like this, which is kind of not looking good. So what we need to do now is move these. Oh, and it looks like I moved the actual sprites instead. My bad. Anyways, what we need to do is go to our sprite asset and adjust our global offsets and scale so you can just mess with this number. Generally, the X position is just fine. You can set that to zero, but the Y you're going to need to mess with. So yeah, you just move it up and down. Find a good position, which I think like 200 is good here. And then you can just mess around with it so you can copy paste a bunch of these. You can change the index. I want one, ten, sixteen, twenty nine, forty five. You know, you can change the index and you'll get a different sprite. And it looks like that, which is cool. But let's do this in code now. So let's create a text public TMP text and make sure you import the TMPro namespace and we'll just call this the sample text. And inside an update, we're going to set the text equal to achievements. And then we need to do the same sprite tag. And to get the quotation marks, you need to put backslash then the quote like that and make sure you set the equal. And then you want the name of the sprite asset and then index. We're going to set it to ID. So what I just did here is called string interpolation, which is where we put the curly braces around a variable inside of our text. However, in order to get to work, we need to add a dollar sign at the beginning of the string. So now so now our text should change based on whatever our ID is. So let's go take a look and we need to assign our text to our script. All right, so something's wrong. What's so we forgot the final threat, the care at the end. So if something looks like this, then you most likely did something wrong. Either the name is wrong, the index is off or your sprite are in the right location. OK, cool. So let's change this ID. And as you can see, both of these are now changing. This looks kind of funny, but that is pretty much it. I use Sprite assets all the time in idle research. If you haven't checked out my game, make sure you do that. It's on Steam and you'll probably see similar text with like an energy icon or flash just on the text. And yeah, it's it's definitely a lifesaver. It makes your game look much better. And yeah, I love TechSmash Pro and Sprite assets. But anyways, that is all I'm going to be showing you all for this video. I think these two skills are very crucial. And that is all you need to know to do a lot with Sprite assets. Obviously, you can do probably much more than this, but I hope it was helpful. And if you learned something new and if it was helpful, leave a like, subscribe to my channel if you are new around here and turn on the bell if you want to be notified for whenever I upload and hit the thanks button if you want to support my channel. One final note, it's been a very long time since I've like sat down at my desk and recorded a video and for previous subscribers who used to watch my videos, I'm probably in a different location as you may notice, but I just want to say thank you for waiting. Thank you for being patient. It's finally summer break. I am out of freshman year and I'm doing my best to make videos. So I think the plan is record a video one day, edit the video the next day, and then switch off so I don't get burnt out. And believe it or not, I feel like I forgot how to talk because I like stutter, merge words and all that. So if some of y'all noticed that throughout the video, that's pretty much it. So I'm very sorry about that. I'm doing my absolute best to talk like a normal human being. But anyways, I'll shut up now and I hope you all have a wonderful day. And thank you very much for watching. See you later. Peace. I'll show you magic. We born in different.