 Hello guys, it is Crypto Grounds here. Welcome back to another Unity idle game tutorial video. This is episode 4.3 and today we're going to be adding WebGL support for our important export system. So currently if you were to build this on WebGL, which is the web and play it and try to export or import your saves, it's not going to work at all. But we're going to fix that today. If you end up enjoying this video, make sure you leave a like means a lot and it helps out the videos, comment your feedback, suggestions, questions, all that good stuff below. Subscribe to my channel if you're new around here and turn on the bell for future notifications of videos and live streams. Let's just hop right into it. So all right, guys. So for the first thing we need to do is to download a unity package. So this unity package has a different input field. I'll explain later and why we need to do this. But basically we need to download this unity package. We need to throw into our project. So the issue I ran into is trying to actually find the original package because I've been using this for quite a bit of time, but I couldn't find the original unity package online. So what we're going to do is download the one that we use for idle research. And I think I use it in crypto clickers as well. But here it'll have all the correct scripts and everything we need. So again, I wish I could show you where this came from and show you the person who originally made this. But unfortunately couldn't find an updated version online. Okay, so the link will be in the description below. But once you click that link, you want to download this zip file. So let's download it. Okay, so we're going to open up the zip. And we should see a folder in here. So this folder is going to go inside of our unity project. This is our assets folder. And we have our input field folder that we need to add. So just drag this into your assets. And next we need to go back into unity and we'll start importing anyways inside of our setting screen. I have created an empty game object called safe system. It wraps around our import and export objects. So make sure you do that. And the purpose of that is to just easily copy and paste that hide the other one. And we're going to rename this to our web. So we're going to create a brand new save system or UI at least for our WebGL. So let's start with our import field. So what we're going to do is get rid of this input field, which is from text pro. So do that just click the three dots and remove component. And then what we're going to do is add components. And we're going to add our WebGL native input field. So you can see we have our dialogue types, we have a bunch of settings and stuff for the dialogue type, we're going to be using our overlay HTML, it's going to cover the entire screen. And it's going to have a text box in the center where you can put all of your information in. Now the prompt pop up. So the reason why we don't want to use these is because you can block these in browsers. So some people may have these pop ups blocked by default. And then the save system or the import export system won't work. And that'll become an issue. So we want to use the overlay HTML because that won't be an issue. So once we do that, we need to assign our viewport and our text components. So the viewport is the text area. And our text components is just the normal text. So we also can assign some font asset. So we're going to do the exact same thing for our export field. We need to actually change some things inside of our safe system script. So let's open that up. Alright, so in our safe system class, we need to add a few objects. So we're basically going to add all of these before the jail. So I'm gonna do that real quick. Okay, so I have created two more input fields, images and the copy and paste button text. So also for the input fields, remember, we changed these. So we're going to be using the WebGL native input fields instead. Alright, so now we need to actually use them. So let's head to our import, export, copy paste, all that good stuff. So let's start on the import method. So we need to determine which input field we need to use. So we're going to be using something called platform dependent compilation. So basically, it checks to see when see right now we're compiling our C sharp script. So whenever we do that, it's going to tell us which sorry, once it's done, which OS we're using. So right now we're using the standalone for PC Mac and Linux. There are different ones for Android, WebGL, and so on. So so basically to check to see for using WebGL, we just do hashtag if unity underscore WebGL, then we can just do some code in here. And I'm just going to do it and if so, if we're currently playing and unity WebGL, it's going to do stuff inside of this if statement that we have created. It's a little funky, I know. But this is how it works. So we can also add an else as well. And so what we are going to do is if we are currently playing on unity WebGL, we're going to write to our WebGL input field. So this would be import field WebGL. And I just want to make sure it's the right name. Yep. So the problem is that it doesn't tell you if there's anything wrong, like you could just spam a bunch of stuff. And it's just I won't show. It's like it's commented out. And then otherwise, if we aren't playing on WebGL, we're just going to write to our normal input field like that. So yep, this is how it works. All right, so next onto our export method, we're gonna be doing the same thing. Except instead of writing, we're reading. So we can do this exact same thing. So this is what it looks like. All right, now for a copy. So copy and paste, I have to remember on top of my head, I believe the system copy buffer works for WebGL. I believe it does. I think if there's some setting in your web browser, that can screw this up. I'm not really positive, but we're just going to do this anyways. That doesn't hurt to try. Okay, so this is what it looks like. So again, doing WebGL stuff just like we do normally, and make sure you have the correct variable names. And for our paste method, it's exactly the same. All right, so this is our final result. And for clear, we can just clear all of the text. All right. And last but not least, our copy, paste buttons normal, I numerator. So we can just copy all this and replace all the variables with the WebGL ones. All right, so we are done here. I'm not going to test this really, I mean, I'm going to run it just to see if we have any errors just to be safe. But I'm not actually going to show you guys the demo, because I'm not going to build to WebGL. I'm going to do a separate video. And I know if I build it to WebGL, you guys are going to ask, how did I do it? How did I build it? I'll get there eventually. So we're just going to have to see if this works in the future. But anyways, let's assign all of our inside of our scripts, save system, we're going to assign the new input fields, buttons and text. So let me do that real quick. All right, so one more thing we need to do inside of our save system script is to determine which save system to show. So I'm going to go to the top here and create two new game objects. Okay, so we have save system, object and save system, object WebGL. So let's just determine which one to actually show up. So I'm going to create a private void start method. And inside here, we're going to use the same hashtag if we're going to use the same if statement here to determine which one to actually show. So in here inside, if we're playing on, let's just start in here in the L statements, just because we can actually see what we're doing. So if we're not playing on WebGL, we're going to want to turn on the normal save system object. So we're going to set that to true. And for the WebGL version, we want to set that to false. Okay, and the opposite for the WebGL. So that is all we need to do inside of our save system class. So I'm going to drag our save system game object into the save system object and our web into the correct slot. So let's test to see if it actually shows the correct one. So when we run the game, this one should be hidden and this one should be shown. So let's see. Okay, cool. So we know that works. Alright, so again, I can't really show you guys a demo. I don't want to build for WebGL right now. Anyways, guys, so if you enjoyed this video, make sure you please leave a like on the video as they help out, subscribe to my channel if you're new around here, and turn on that bell for future notifications for videos and live streams. I'll catch you guys in the next one, which will be episode five. And we are finally getting started with the notation system, which should be fun. So thank you for watching and have a great day or night. Peace.