In that last video I left it to you as a challenge to complete this little game the spelling game and
what I've done now is added a few bits of functionality to it so that it will give you a prompt of the
word that it's looking for.
By using a picture of that thing and it also Cape's skua up in the top left hand corner.
So in these next few videos all go through the process I did to get this functionality up and running.
All right.
So to begin with you'll need some images.
Now I've created a folder called images in my assets and in there I've got four images including a little
game over on icon that's going to come up.
Now these images I got from Icon icons and the game over one is from free picks.
Now you'll want an image that represents each of the words that you're going to have and they'll appear
on the screen as a prompt to tell the user what you are expecting them to spell the game over one will
just come up when they've got all the words correct.
OK so to begin we're going to go to the hierarchy and first of all we need to add some placeholders
onto the games canvas which will show the image and also show the score up in the top corner.
So let's right click in the hierarchy where to go Hughey and we're looking for roll image.
So select for image having roll image allows us to inject texture stright into it so we don't have to
do anything fiddly with these textures here which are just Panjwaii falls.
We can just dump them straight on the wrong image.
Now once you done that you'll see that you end up with this wrong image which is white down in the bottom
corner.
Now before we do anything else we to select our canvas and then go over to the inspector find the canvas
Skyla let's set that to scale with the screen size like that.
Once you've done ushe the real image is going to disappear if you double click on it you'll find it
over in the same time.
So here it is here.
Now let me just zoom out.
If you've not used the system before this white box that you can see in this scene is the outline of
what you can see in the game.
So I guess it's the outline of your camera.
Now you can see this white image because obviously it's nowhere near being inside of here to a law that.
And we want to put down this bottom corner here and we're going to select it go over to the inspector.
Select this little gizmo thing here click on it.
Now it's going to allow you to log in and set the pivot points for that image.
So click on the bottom corner where you want to.
This is the bottom left corner.
Then hold down the Alt or option on Mac and then click it again.
That's going to anchor it and position it down in this bottom corner for you.
Now that it's there we can resize it to have a big we want.
So over in the same view if you click on the 2d button at the top it will take you into the same kind
of viewing mode as you're seeing from the camera.
And we can just navigate around using the same case that you do in day select.
Again your wrong image.
Then click on this little button that has the dots in each corner and that will allow you to resize
that raw image to how big you want it to appear.
And if you want it to move it away from that corner you could as well but it's anchored down here.
So as the screen size changes you can say that the square stays the relative size the size.
So it scales but so does the little distance that's in here as well.
So that's just some handy things to know about the system.
Right so we've got to roll image.
We're going to select the canvas in the hierarchy again right click go down to you.
And now we'll add some text with the text.
You get new text and you might be able to see it on a screen but it's in gray right in the center that
says new text.
Here it is.
Over here in my scene view again we want to stick it up in this top corner.
So let's click on it's positioning thing.
And what that's called and when I click on it.
So then set the top corner.
And then again hold down alt and click it and that will move that text up to the top corner all wrought
up this or that me just move down just a little bit.
Now we want to be able to see that.
So we want to make it watch over it in the Inspectah find the taste component.
And what we're going to do is just go down a little bit and you'll find color.
Select the color and make white.
Then we want to make it to be bigger.
So go to the font size and if you hold the mouse over it you can actually scroll it up and down like
that by holding the liff mass button down and then moving or dragging the mouse left and right and make
it bigger.
Now it will disappear some so some time.
That is because it gets too big for a little box that it's in and your same view.
So you can just make that books bigger as big as you want it then come back over and we can then change
that size.
Now this is going to represent your score.
So you need to think you know how big do I need up here.
And in this particular demo we're only ever going to have like numbers like 0 1 2 and 3.
If you had like 10 words that you wanted them to find then you'd have to of course might this box big
enough for 10 but as it is it's fine.
What I will do while we have the takes is first of all just got to the chase where is his new text just
in here in the inspector and just taught in a 0.
Because we want that to be the initial value.
Now we have all our assets and game objects in place we can go back into our spelling controller code
and add the functionality to get this to all work together.
So I've been spelling control in your editor.
The first thing we need is a list of words an H word needs to be linked to a texture.
The one of those little textures that we've added in the images folder so that when the image is on
the screen behind the scenes spelling control knows which would it's looking for.
The first thing we need to do is add in the unity engine don't you.
Because we're working with the UI components.
So that will stop it complaining about us using textures and text boxes and things like that to hold
all of the words which are going to be pairs of a word as a string and the texture.
I'm going to write a new little class that we can then make a list from.
And because I want that list to be available to be sit inside the inspect we're going to make it Serializable
as well.
So above your existing CLOS we're going to add this.
So we begin with a system.
Serializable if you leave this out and try and test it as we will in a minute you'll find that you can't
see the least that we're creating from these and set these individual objects inside of this class.
If you ever want to make an array of a class and have it settable in the inspector This is the way that
you do it.
Now in sort of this class called would list which is not really a good night for it isn't because it's
not the entire list it's just a word and a texture pair.
But anyway you know what I'm talking about.
So this is the word.
And then this texture is going to be called prompt.
So with that class written we can now create a list from.
So down inside of spelling control at the top with everything else let's declare that as a public list
of word list and let's call it words like that.
All right so save that now let's go back into unity and we will click on the spelling control and you'll
find at the bottom there is a words that will drop down.
So use a list not an array an array does the same kind of thing except it doesn't have the extensible
functionality the list does.
And let's say that we want three words because I've got three words.
So how many words you want to talk that in then in each element if you drop it down you can put in the
words so let's say that this is the CA and I need to go into my images folder.
Grab my cock and then drag that on as my prompt.
The next one is going to be cat and drag the cache on as the prompt and the last one will make that
dog and drag and drop the dog on as the prompt.
So you can see that they sit up there now as a little exercise for you before you even do this go back
to code and just comment out that system got Serializable and just have a look at the difference it
makes of being able to see this or not.
It's so handy when you want to populate the contents of an array that is made up of Klaas's or structures
in the inspector.
Now we've got three images that are coming in.
We also need to bring in our guy over image so let's go back into our code underneath my list of words
I'm going to add in a public texture and we will call that game over.
And walk here will create a couple of other publics as well.
What will be the pass in outroar image that's on the screen so that we can set it from inside of his
screen prompt and let's put public text the score.
As well.
And then we can set the school.
While we're processing the image so save that switch back to unity and undo your spelling control.
In the inspector you should now get these things pop up in the bottom so you got game over.
Which is going to want this game out of the image so drag that into the screen prompt wants a wrong
image as a target.
So the raw image is the one that's attached to your canvas.
Drag and drop that there and then the text is the text component that drag and drop that down in there.
Now probably best practice in this case would be to cool these things attached to your canvas but they
also get a prompt and go to score makes no difference whatsoever to your code just makes this hierarchy
a little bit more readable for you.
Now I want to go back into the code and we're going to add in the functionality two to pick one of the
words at random and set that up on the screen with the prompt and also set the word that is trying to
be recognized.
So we already have something that stores the word that's being processed and recognized for us so we
can just reuse this.
I'm going to first create an event called current word and set that to minus one this current word will
be the index into the least of which would we want to display on the screen.
Now we're going to add a method to grab a random word out of that list and also display its image.
So let me just add this in here it's called pick random word.
It then says current word equals random dot range between index zero and words don't count.
So this is going to get us a index value that is either 0 1 or 2 for our current would then we can use
that in the list of words to get out a word.
Put that in our word storage here and then at the same time we can grab the same positions prompt which
is got the image in it and we will put that into screen prompt dot texture.
So that's putting the text just straight onto that wall image which makes things very nice and clean.
Now we need to run these so when we run it let's do it on Stosh to begin with so just up here let me
add in a stop method which we don't already have and inside there we'll just call pick random word like
that.
All right.
So save this.
Now it's time to test it.
And we're only really just looking to see that we get randomness happening down here.
So let me press play and we're getting the dog.
OK.
Stop it.
Press play and we're getting the cat.
That's good.
Stop it.
Press play.
Now we got the car.
Now we've been extremely lucky that we got three different ones this time that I'm running through this
before when I was running these I got like the dog five times in a row because remember it's a random
number.
So at some point we'll get the same thing come up twice which is not really what you want when you're
creating a spelling game or at least I don't walk away.
We probably should just test the rest of the functionality still works and that we haven't broken something
so yet we're looking for dog obviously that's the pitch just so cause not right.
And we're looking for a dog and that guy so that's working well and it should logically still work because
all we've done is just made that word that we're testing for.
Become random rather than sit all of the time.
So we went up and try and find use catch
it's also wrong.
That's that's good working well.
Right so now we can go and add some more functionality.
Back in the code will now make the school go up.
So our school is called school.
It's a text object.
The school has to change when the word is correct.
Now do you remember where abouts in the code.
That part is well it's down here.
It's when Claire starts to do her little dance so inside of this if statement here so we could put the
school increment in here.
So let's do that after the got reward.
I'm going to add this text in now this is doing a few different things because it needs to get the value
of the previous score and the previous score is saved inside of that text box of the score item.
So this is doing and pass on that textbooks because the textbooks is a string value.
So we take whatever is in there which at the beginning is a zero and we make that an integer 0.
Then we add 1 to it.
Now at this point this is an integer.
You cannot put an integer into or back into that textbooks.
So by adding plus empty double quotes is a cheating way of making it into a string.
And then we can just dump that back into school text.
So it's that easy.
It's just remembering this little bit of funny syntax that you have to deal with when you want to change
a string to an end and then back into a string again.
This is always a good thing just tabbed up your sleeve when you're trying to do those sorts of things
because people get stuck with them.
So I'm going to save that.
Let's go back to unity and we'll test this out.
Now we're only obviously going to get a score of 1 because it gives us a random word and then that's
all we get.
But we can still test it.
So we're looking for cat this time.
Let's go straight up to Cat cat
and there we have a one up in the top corner.
You can see right.
So that functionality is working ok in the next video.
We'll come back and continue working on this by having it go to a new wood.
Once you've got the wood you're working on.
Correct.