Hello guys.
Welcome to the video.
In this one we're going to work on a skin selection UI.
But before we set up skin selection UI, we need to set up skins on the player itself.
This will be not that difficult to do, and we're going to use a method that we use before we're going
to use Animator Override controllers.
Let's go to sample scene I'm going to save it.
It's okay.
Over here I want to make fade image transparent because I don't need it now.
And there we have a player.
Very good.
So now we need to make a bunch of animations.
Then we need to make animator override controller.
And we need to reassign animations on the animator of a player.
All right, I don't see animations.
I need to restart unity again.
Let me save the project.
All right.
There is my animations.
Very nice, very cool.
Now let's go ahead and make a bunch of clips so we can use them later on with the animator override
controller.
How it's going to be.
Yeah, it will take some time, but it's totally worth it.
So let's select animator of a player and here we're going to make new clip.
Let's go.
And I think we're going to start with a let's start with a ninja frog I'm going to go to enemies.
No sorry.
Uh asset animations player here I want to make a folder.
Or ninja frog.
And over here I'm going to do player Progue idol.
Now we need sprites for this animation.
So we're going to go to Asset Graphics main character.
Ninja frog.
And we're gonna select them all, make pixel per unit 16.
Then we're going to take idle sprites.
Drag them here.
Sample array 20.
And you can even play this animation and see character in the idle.
Now we're going to need other clips.
So I'm going to do player rogue move.
Let's take the run animation.
Drag it here.
Sample array 20.
Now we need player progue hit.
Gonna take the heat.
Drag it here.
Sample rate 20.
Now we're going to need new one layer rock.
Uh, wall jump or wall slide.
Wall slide layer.
Frog wall slide.
Yeah.
That's right.
Sample rate 20.
Open wall.
Jump spreadsheet.
Take the sprite.
Drag them here.
Now we need, uh, one more.
Uh, player.
Frog jump.
Also, I realized we did not use this double jump animation, but we're going to fix it.
We're going to just use it later on.
It's fine.
So for the jump, we're going to just take this sprite here.
And then we need.
Layer prog all and this is going to be the full animation over here.
Okay, so now if you want you can check them.
Basically it's the same as with the main character, just different look of it.
Nice.
Now we can go to animator.
Take this frog animations and just delete them.
We're going to delete them from the animator, but animations are still there.
Here in a folder.
We have them now we can make.
Animation animator override controller and I'm going to do player.
Ninja frog.
Nice.
Now, as a base for this controller, we're going to set.
Player.
Animator.
Controller.
All right.
And this is the animator controller we use over here.
If we don't replace the animation, it's going to use default animation, but we also can override the
animation with the one we just made.
So that's what we're going to do.
Jump.
I guess player knocked is used for the heat, so we need to rename this to player frog knocked.
Okay, let's drag it here.
Layer.
Move.
Uh, wall slide and respond.
We do need to change because it's the same for everyone.
So this can be none and it will use default animation.
Very nice.
Now, uh, in the game mode we can see the main character, same as before, but if we go to animator
and replace animator with a player Ninja frog, it will have a set of new animations.
And basically we changed the skin for the main character.
Simple as that.
What we need to do now is to.
Uh, what happened there?
Yeah.
It's fine.
It's just.
We have animator replaced only on the original one.
Great.
What we need to do now is to assign this animator override controller in the script.
All right.
That's what we need to do.
So we can use a player script, or we can add one more script.
That depends on us.
I think we can do it all in here, because why not?
It's totally fine.
And we're going to have.
I'm sorry.
We need to go all the way up here and make some sort of a header for visuals.
Uh, let's rename this header to, uh, Player Visuals.
Then we're going to have serialized field.
Private.
Animator override controller array, and we're going to just call it animators.
Nice.
Let's save this and let's try to change main animator for the one we have in the script at start.
That's what we're going to do.
We're going to do animator or actually anim run time animator controller equals to animators with a
zero.
So we're going to take first one in the array.
Let's go back.
And let it compile.
Now on the player over here we have animators and we can go to Asset Animations player Ninja Frog and
assign it into the field like so.
Now when I start the game, this animator override controller will be assigned to the animator over
here.
Boom.
Very cool.
I like it, so it works.
Now we need to make more.
So let's go ahead and do this.
It will take some time, but we need to do this.
What?
You can do nothing.
Let's go to animator here.
We're going to make a new folder for.
What was that mask dude.
Now we have mask dude folder.
Let's go and make a bunch of animations for him.
We need to make new clip.
And actually I think you know how it works.
So I'm going to speed up the video a bit so it doesn't look so boring to do the same thing again.
I left L.A. in 20.
16.
Left move.
High level alert.
So la la la la la la la la la la la.
Any last minute missed call.
And fall over here.
Very cool.
Now we need new clip.
Uh, sorry, we don't need new clip.
We need to go to the main character, actually.
Asset animation player mask.
Dude, let's make animator override controller.
Layer Mask dude is a regional one.
We're going to choose player.
Then we're going to reassign them.
Why it has so many.
Because we have so many here.
Let's delete the extra.
Delete.
Now it's fine.
And we need.
All this one should be player.
Musk knocked.
Okay.
-- it!
Move!
Nice.
Now let's go ahead and make new bunch of animations.
This time it's going to be Pinkman, right?
And Pinkman.
So we're going to select animator new clip player.
Ping idle.
Move!
I think.
I think a lot.
I think her.
My.
Friend.
And I are not.
Going to take the heat.
Drag it here.
Sample array 20.
Okay.
Very nice.
Now let's go to animations player.
And.
Oh, no.
Did.
Where did I make them?
Where did I make this?
Animations, man.
Animations.
Player.
Graphics main character Pinkman.
Oh, where are the animations?
It's in a mask, dude.
Okay, we're going to do this.
We're going to make a folder pink, man.
I'm going to take this pink animations, drag them to the folder over here.
And I'm going to go to an explorer like that.
Take the mask dude.
Sorry.
Yeah.
Go inside of the folder.
Take pink man.
I'm going to cut it out.
We go to player, paste it in here.
Based.
Okay.
They're all here now.
We're going to delete it from the animator.
And let's go to Pinkman and make animator override controller.
Player.
Pinkman.
Then we're going to select original.
Layer.
And then we're going to reassign them and.
Love it.
So we have everything ready basically.
And let's go to the player.
We need to log this.
Then we need to go again to player folder with Animator Override controllers.
And let's drag one more here and one from the Pinkman.
Now it's up to you to decide which order you want to have for them.
Like what is the default one?
If you want original to be default one like I have, then just do everything like I do.
If you want to have one of these as original one, then you would have to do something else here I guess.
Yeah, like take the original, make another animator override controller and oh, actually, let's
do that.
Why not?
Let's just.
Make.
Animator.
Override controller player virtual GUI.
Then I'm going to unlock Inspector over here.
I'm going to select player as a regional animator override controller.
And we don't need to override animations because for the virtual guide, this is the default animations.
So we can go to player now and choose virtual Guy.
Drag it here.
Now we have four of them.
What you want to be default is up to you.
Just place it first in the list and that will be default.
For example, I want to have Pink Man as a default skin because I like it.
All right.
Now we need, uh, some sort of.
Variable that would have information about individuals.
So I'm going to do serialize field private int skin index or maybe skin ID.
And that's what we're going to use to define what skin we want to have.
Then in the start method I'm going to cut this line away and I'm going to make a method.
Public void.
Choose skin you're going to pass in skin index and we're just going to do this.
Anim Runtime Animator controller equals to animators with a skin index just like that.
And I think this is good for now because we have set up for choosing the skin.
Later on, we're going to just call this method with the help of some skin manager or something like
that.
So now player is ready to choose skins.
I only need to check something.
I need to check if.
Yeah.
Let's call this method at the start for now to skin with, uh, index zero.
So by default for now we're going to choose first animator override in the array over here.
Very nice.
It's going to work I think I like it.
Yeah.
Very cool.
Now let's go back to skin selection and set up skin selection in the main menu.
We're going to go to scene main menu.
You're going to save the changes here.
And in the canvas we have this skin selection UI.
Let's enable skin selection UI.
And let's focus on the grid over here.
So what I want to do is to make a game object that looks like a player with only two sets of animations,
and we're gonna.
I use this GameObject to display what skin we are choosing at the moment.
So I'm going to go to Asset Animations.
I'm going to make a folder.
Main menu.
And over here I'm going to make animator controller.
Menu.
Character.
All right, now let's go to graphics.
Main character.
Now let's take the weight.
I need to decide what I want to be.
Default one.
I think I'm going to use Pinkman as a default one.
I just feel it.
Okay, so I'm going to drag it here now.
But wait.
If you set it as a default one, then it means it works.
Not as much as another skin, right?
So let's use the default one as a default one.
The virtual guy and Pinkman will be purchasable and it will be expensive.
Yes okay.
So this one going to be menu character.
And let's increase the scale to something like.
Maybe 1.5.
Yeah, this is good.
I'm going to place it over here and we're going to take animator.
From the main menu and drag it on the menu character.
Now let's go to animator itself.
And over here we need to give it a bunch of animations.
I'm not going to create an animator override controller for this object, because that would be an overkill
kind of.
So we're going to go to player.
We're going to take.
Idol and move, and this is what we're going to do.
We're going to make a parameter.
Boolean is moving because we're going to need it later.
But we're going to set up this right now.
We're going to make transition from idle to move.
With the exotherm unchecked and transition duration zero.
And we're going to make transition back.
Weather is moving false and check.
Exit time.
Transition duration zero.
Now look, we have a game object with these animations and we have only one animator controller.
Our goal is to select different animations and they will depend on the ID of the screen we have.
And at the same time we want to use only one animator controller.
For this purpose we could use layers.
Uh, usually layers are used in 3D development, like you want character to move hands in one animation
and legs in another animation so character can run, reload, and shoot at the same time.
Okay, but in this case we can just use it to display different set of animations.
I'm going to rename this to virtual Guy.
And then I'm going to add another layer that I'm going to name as.
Um.
Ninja progue.
And now we defining the order.
So Ninja Frog will be a bit more expensive than virtual Guy.
And then we're going to add mask.
Dude, it will be a bit more expensive.
And then we're going to have pink man the best skin in the game.
Now look this layer has uh parameters and animations.
And if we select Ninja Frog it has nothing.
So we could set up different.
Like we could do entirely different setup here.
But what we can do.
Is go to parameters and click sync over here.
Now this animator will be synchronized with the virtual guy over here.
But at the same time we can replace motion over here.
So we're going to go to Ninja Frog and replace move like that and idle like that.
Now we're going to select mask dude.
We're going to do sync.
The move would be from a mask, dude.
An idol would be from the idol.
And again, we could repeat this process for the main player in the game.
But you can see it's a bit annoying to do.
So if we would have like 28 animations or how many we have.
Yeah, 28 Overriders are better for that purpose, but for this purpose, layers are pretty enough.
We don't need override controller here, so let's do synchronize.
And also it's a good opportunity for you to learn how you can differently apply skins to characters.
Yeah.
For the Pinkman we're going to go to Pinkman.
Choose move over here and idle over here.
Cool.
Now we have a goal to switch between these layers.
How usually it works.
I'm going to open play mode and I'm going to show you.
These layers over here.
They have weight and priority goes like this.
This one has more priority than this one.
But weight on these layers is zero.
If you take one of the layers and increase weight to one, it's going to be changed.
If you take next one and increase weight to one, it's going to be changed again.
Now, it doesn't matter what you have here because the lower one has more priority.
But we're going to do is we're going to select one of the, uh, skins and just increase weight of that
layer.
Simple as that.
And we have count from 0 to 3, zero, one, two, three.
Okay.
Let's exit play mode.
Let's go and make skin selection UI.
Script.
I mean, let's go to scripts.
I'm going to make C sharp script UI skin.
Selection.
Now I'm going to drag it on the object.
UI.
Uh, sorry.
Skin selection.
Let's go there.
Let's make a serialized field private int um.
Current.
Index.
We also need serialized field private animator skin display just like that.
Then we're going to make two methods.
For two functions we have.
We know that maximum lengths of the skins is three I mean four, but last index is three.
So we're going to make public void next skin.
And here we're going to do.
Current index.
Last class and if.
Current index.
He is bigger than three, then current index is equals to zero.
In case you have different setup in your game, let's make a variable serialized field private int max
index.
So you can change settings in the inspector.
And we're going to need public void previous skin in which we're going to do current index minus minus.
So we're going to do minus one every time we click the button.
And then if current index is less than zero then current index is equals to max index.
So we're going to choose the last one right.
So we can scroll them endlessly.
Now this will change the index but it will do nothing for the animator.
For the animator we have to do this.
We're going to make a method public void.
Actually let it be private.
It's fine.
Private void update skin display.
And in this one we're going to do something simple.
We're going to do a for loop with a max index.
And we're going to do anim.
Now we have okay skin display.
Set layer weight.
So we set in weight of the layer and first parameter is layer index.
Second parameter is this the the weight we want to have.
So we're going to do I for the index and for the weight going to be zero.
So this one will basically set weight to zero for all of the layers we have.
Then we're going to take anim set layer weight sorry skin display set layer weight.
And we want to give the index we want to have.
So current index.
And then one over here.
And we need to update skin display every time we change the index.
So we're going to do update skin display here.
And we're going to do update skin display here.
Very nice.
Let's go ahead and check this first.
I'm going to save everything.
I'm going to go back to unity and a skin selection.
Uh, first of all, we want to take menu character and drag here so we have access to the animator.
Then maximum index is going to be three.
And then we're going to select next skin button.
And over here we're going to drag skin selection UI and choose.
Next skin.
For the previous skin, we're gonna drag skin selection UI.
Previous skin.
Perfect.
Now let's go to play mode.
And you can see I can switch between different skins.
Okay.
Something went wrong.
Let me see.
What is that?
Savoy.
So the problem is in this value over here.
And instead of max index I think it's better to use skin display dot layer count.
And this will.
Use all of them.
Let's try again.
And if that does not help, then we just need to add an equal sign.
Let's go.
Yeah it's fine.
It's working now because this layer was not included.
Uh, yeah.
All right.
Now we can switch between skins.
Very good news for us.
Now, the next goal would be to bring this information into the main game.
Because switching skins here does not change it for the main character.
How can we do this?
There are multiple ways to do that.
And I want to make an object that will not be destroyed when you start the game.
Uh, let's go to assets.
Scripts.
And I'm going to make this script that is called Skin Manager.
And believe me or not, it's going to do, uh, like just one single thing, honestly.
Uh, where is the skin manager?
Lost it.
Okay.
Here we're going to make.
Public static skin manager instance.
Then in the wake we're going to do instance equals to this.
And do we want to have duplicates.
Actually possibly we can have duplicates if we run cycle okay.
We need to destroy this object.
If there is more than one for that we can use this if statement from the game manager.
So I'm going to copy it bring it here.
And also we don't want to destroy this object when we transfer to a new scene.
So we're going to do here don't destroy on load this game object.
All right.
Simple as that.
Now this object will be transferred between scenes.
We can go ahead and try that uh select button will start the game I believe so.
What we need is to create new empty object.
I'm going to call it Skin Manager.
I'm going to put the script on like that.
And now when you go to play mode and press select button.
You're going to start the game.
And over here you have don't destroy on load.
And it has the very same skin manager.
So we can save information on this object over here.
And then when we start the game or when we start the level, we can just pull information from this
script.
Okay, let's go here.
I'm going to do public int chosen skin ID.
We're going to use methods to get and set the value.
Public void.
Set skin ID, we're going to pass int id and is going to be chosen skin ID equals to ID and also we
need public void get skin ID.
And actually this can be not void but an integer.
Int and it will return us chosen skin ID.
Nice.
That's all what we need.
Now every time we select the skin, we can update information on the skin manager.
Or we can update information when somebody press select button.
Let's do select button.
Yeah.
Let's do another method.
Public void.
Select skin.
And over here we just need to do something simple.
Skin manager dot instance set skin ID to current index.
We're also going to set up the purchase mechanic.
Like we're going to pay fruits for the skin.
But later on let's go back now.
On the select button.
We're going to add one more event.
And let's put it before we go to a new game, then we're going to drag skin selection UI and we're going
to choose.
Uh.
Select skin.
Nice.
Now something I forgot to check.
And it's the order on the player.
So, yeah, we're gonna have to go to scene.
Main.
Uh, sample scene.
I'm going to save the changes on the player.
First of all, we need to apply overrides.
And over here.
We need to choose.
We had virtual guy ninja frog mask dude Pinkman.
So this is how it's supposed to be.
The order.
Same as in the menu.
Oh, we can see animator here, so it's fine.
Ninja virtual guy, Ninja frog mask.
Dude.
Pinkman, let me apply overrides again.
Then I'm going to go to main menu.
Yeah.
Let's save it.
Let's play the game.
And I'm going to switch skin to what I want.
This one.
And it didn't work.
But it's okay.
We just need to check information.
We have Add.
Very good.
Now we need to go to the player script.
And inside of this method over here we just need to check if we have skin manager in the scene.
And if we do we're going to update the skin.
So this is how it's going to be.
We're going to do skin manager.
Skin manager equals to skin manager dot instance.
Then we're going to do if skin manager is equals to null then we return.
And after that we're going to do anim runtime animator controller equals to animators with a skin manager
dot chosen skin ID.
Nice.
Now we can remove this parameter from the parentheses and we can rename this to Update skin.
And let's go to start method and call here Update skin.
Just like that.
Now it's going to work.
Even if you start the game from a main menu and it's going to check if you have skill manager or not,
and if you don't, it's not going to update the skin.
But if you do, going to choose the skin that you chose in the main menu.
Very nice.
All right.
I know it took a bit longer than usually, but you know a lot of things to set up.
All of them are very simple one just lots of steps to take.
I hope you like it.
Thank you for paying attention.
Let's go to the next video.
We're going to do more.