All language subtitles for 013 Model-View-Presenter In Unity_en

So refactoring our code from this model that deals with everything, including UI to a model and a presenter

and a view is going to be relatively straightforward because essentially what we've got here is this

level represents both the model and the presenter all wrapped into one.

It's dealing with UI logic, but also the game logic, whereas the view is already set essentially because

that's what Unity deals with.

The View is the bit that does all the rendering and deals with the inputs, events, et cetera.

So what we're going to do is we're going to pull out a level presenter object and we're going to stick

that directly on the UI, and that's going to deal with all of the binding.

So this should be fairly straightforward.

Let's go in and add a new folder under patterns which are going to call the UI and under their gains,

create a new file, which I'm going to call the level of presenter access.

And in here, we're going to create a mono behavior, which is going to be the level presenter.

And we know from the arrows in our diagrams that the level presents is going to have references to the

model, but also to the view.

So we're going to have a serialized field.

I'm just going to pop back into unity to nudge my auto complete into working.

So we'll have a serialized field, which refers to the level object.

We'll just call that the level, and we want to take all of the functionality in level that has to do

with the UI.

So one thing that I'm going to do is I'm going to rip out the using statements for events and UI to

kind of give us a hint at where we are using stuff that we shouldn't be using.

Actually, we didn't want to take out events, just the UI layer stuff, and you can see it's giving

me squiggles under the text and button types because those are UI types.

We shouldn't have anything to do with those UI types in a model.

So we're going to pull those out and there's three of them and we're going to stick them in to the level

presenter.

So this now makes sense.

The arrows of our dependency from our presenter match up with the arrows from the diagram in the last

lecture.

We've got a dependency on our model and three dependencies here into our view, which is essentially

the canvas hierarchy.

So what we're going to do here is we need to take a little bit more action in order to take a UI update

UI out and to take the increase button binding in here out as well.

So first of all, the button binding, this is relatively straightforward.

I just needs to create a start method in level presenter and then we want to put our cut and paste increase

XP button binding into here.

And we want to, instead of calling, gain experience just on ourselves, we could introduce our own

gain experience method in here.

We're going to just go ahead and generate that method locally as a private variable.

And within that, we can just call level dot gain experience 10, because that's a publicly accessible

function.

And that's fine.

The model does present us with an interface of how we can gain experience.

So that's fine.

Now, the other thing we want to do is essentially have some sort of private void method called Update

UI in here, and we want to take the implementation essentially of Update UI out of or cut it out from

the level module and put it into the level presenter like so.

So that works.

Except now we need to be, instead of calling get level, we need to be calling level dot level and

level Dot's experience experience.

And now the final piece of the puzzle.

When do we actually call Update UI?

Well, one naive implementation would have it called in update, but obviously we don't update the experience

every frame.

So that's a little bit wasteful.

So the way we want to do this is instead in the places where we were previously calling Update UI,

we want to break that link so that model is not dependent upon the level presenter.

So the way we're going to do this is with an observer pattern, which we've already done this with the

action for on level up action.

So I'm going to create a new public event type action, which is going to be on experience change and

on experience changes, essentially what we want to call here.

So in start, we're going to do and if on experience changes, not now we want to call on experience

change and we want to do the same thing down here where we were previously calling Update UI.

If we gain experience, we're going to do on experience.

Change there as well.

So in actual fact, I don't think we need to call it and start because and start with the UI and presenter

knows that it should get some initial values.

So what we're going to do here in Level Presenter is we're going to register on that observer.

So we're going to look for a level dots on experience changed.

We're going to add a listener which is going to update the UI when the experience changes.

And just to give an initial value to those UI elements, we're going to also call Update UI in Start.

So we'll listen for changes, but we'll also initialize ourselves the first time.

So this is a nice, neat model.

It means that our level no longer even needs a stop method.

You can see here it's now entirely dealing with its own game logic, and it's just calling to observers

when certain relevant events change so things can hook into when the experience changes, when the level

up action takes place.

So that's nice and straightforward.

We now need to set this up over in unity, so we go back into the editor and on the canvas object,

I think might be the natural level up from these UI elements.

I'm going to add a component which is going to be our level presenter.

The level presenter needs hooking up to some different things, so the first thing it needs hooking

up to is the level text needs hooking up to the experience text and the increase experienced button.

So we hook all that up and then we need to hook up to the actual level model script, which is on observe,

for example, so we can just pop that in there.

And now you can see that on the actual observer.

We no longer have all these dirty, horrible references to UI.

That's all gone.

It's now the UI itself, or rather the presenter that is hooked up into the model.

So if we go ahead and just check that everything is still functional and working as we would like it

to, you can see that by gaining experience, I can eventually level up so my button input is working,

my UI presentation is working.

All that remains to be done is to do the same thing for the health bar.

So here are the steps for you to take to make your health and the app you're going to create a health

presenter class MVP class.

You're going to move the logic over from the health module.

Anything that's to do with you, are you going to move into that present class?

You're going to add observers to the module so that the presenter can hook into those observers without

the model knowing anything about the presenter.

And you're going to hook up all of the dependencies in unity, pause the video and have a go.

OK.

Welcome back, so we're going to go in and create the class first of all.

So a new UI file called Health Presenter.

Yes, and we're going to create a lot of behavior within here that we're going to go over to our health

model, we're going to eradicate the using unity engine UI and move it over to our presenter so that

we can see what needs changing.

What needs changing is this health bar image reference that needs to come over to the health presenter.

And like I said before, we also need a serialized field, which I'm going to need the autocomplete

for.

So I'm going to go back into Unity Engine have it's just bumped my auto complete so that I can now do

auto complete this year?

Let's field and I'm going to have a serialized field to the health component, which I'm just going

to call health, says the health model, essentially.

And then we need to have a look at where we've got our update UI.

I'm just going to take the update UI method wholesale over into our health presenter like so we are

then going to needs to cool that in our start method.

So we're going to add start and we get a call update UI in here.

We're going to need to where we've got current health and full health.

This is not currently exposed.

I think we've got we've got get health, but we don't have a get full health from our model, so we

could have that exposed.

We'll have a float, get full health, which is simply going to return the full health variable out

of there.

So now we need to update this code.

So that does health dot get health and divide that by health?

Dot gets full health like so and that's going to achieve the same thing now.

If we go over into our health component, the thing that we need to do is have some sort of notification

method because we can see that we're updating the health.

When we health train, we're updating the health when we reset the health, and that needs to notify

any potential observers.

So we're going to add a public event of type action called on health change.

And we are going to call this where we were previously calling update UI.

So we're going to say if on health change is not equal to null, then we're going to do on health change

parentheses and we're going to do that same thing over in health drain.

So when we change the health value by decreasing it over time.

And that should call to anything observing.

Currently, the health presenter is not observing.

So in start, we do want to set that up.

We want to do a health dot and on health change, we can do a plus equal and add update UI to be called

as an observer.

So now what will happen is the first time on start will get an initial value from the health and then

thereafter we are going to update ourselves when the health system tells us to.

So if we go to check that it's doing the first reset in a week, which is great because stuff is going

to happen after that and get the fully set value for health.

So let's go over into our editor, let things recompile, and we just need to hook everything up now.

So on the canvas, I'm going to add a health present presenter mono behavior and now we need to hook

it up.

So first of all, where is the health image?

Well, it's the one called bar here.

So I'm going to drag that in and then I need to drag in again, the observer example, which has the

health components model on it.

So if we go ahead and play now, hopefully everything should be unchanged and we still getting the decreasing

happening over on a regular basis because we're getting those events come through.

If I add enough experience and it causes us to reset the health that also comes through instantaneously

updates the UI.

So essentially, what we've got from a functionality standpoint is completely unchanged.

But now we've split that into two separate classes one that deals with gameplay, albeit health and

level, and two that represent UI, which is the level presents are in the health presenter.

And we notionally have a third level of abstraction here, which is the view itself.

And that's all handled passively.

Essentially in unity.

There's no code that we're writing that handles the view.

It's all pushed and manipulated by this middleman, which is the presenter.

So hopefully that's made it clearer for you.

What model view controller is, what MVP Model V presenter is and how it's relevant to games and your

implementations in Unity.

I'll see you in the next lecture.