So well come back again.
This lesson is going to make her fixation a lot more interesting.
In this lesson we are going to replace every text label with an image image of you essentially.
And that's going to make things a lot more difficult in terms of playing the game because you have to
remember that different images by those ads are of interest to our game.
Now I want to suggest something to you that is before we get started.
And that is don't start this part of the game on the same application that you have been developing.
If you already know how to use version control such as get a start a new branch and if you are taking
this as a part of the Iowas bootcamp and we haven't reached a version control just yet I would suggest
you do something like this one.
Close your application.
Duplicate the folder that you have for your application and rename it.
So I currently have two folders one of them is the text which is up until now everything that we have
done.
The other one I've coded images which is exactly the same thing as the text but now I'm going to go
work on the images memory puzzle game ex-coach project and I'm going to change this stuff and that's
just in case you want to go back and forth between the two of them and you want to see some of the changes.
Obviously the way that we have to do this the right way the correct way of doing it is adding a new
branch but that's just in case you already know how to use version controls.
If not just duplicate it like this.
And let's get this thought in this new ex-coach project which is exactly where we left it up when we
were working on the text based one.
Now before I jump into changing stuff let me run the application one more time to make sure that we
know exactly where we are and if we and if I have changed anything I should let you know.
I think the only thing I have changed I have shortened the amount of time that it takes to flip the
tiles.
I think that has been the only thing I have I have changed so now it takes only half a second and it
is exactly where we used to be.
So now we're going to go ahead and start with the images for our application.
Now the first thing you want to do is you want to add the images that I provided you which are all of
these into your project.
By the end of the development I will explain to you how you can add your own images.
These images are nothing new or nothing out of the ordinary.
There are a lot of J-P images as well as two images that one of them is called question that PMG and
they are the ones that take P and G.
So you could actually have your own images if you want here.
But for now you have to keep in mind that the naming of them should maintain this particular format
or EMG underscore.
And then it starts from 0 0 I goes up 1 to 3 all the way to I think I have like 35 with three different
images.
So I'm less like all of these and I'm going to add them to my project somewhere up there I'm going to
copy them and then the other thing I usually do is because I don't want to let my ex navigate to be
so crowded like this one and actually going to select all the images and I'm going to put them all inside
a group I'm going to say no group from selection right click group from selection and I'm going to call
that one.
Maybe images group or my images or anything like that.
So the majors group would do.
So that's what I have all the images in here.
Now we have loaded all the majors in here and they are named in a very particular format.
I m g underscore part doesn't obviously mother but they're all there from zero to 33 and that's something
that is important.
And I just like I said I will explain to you how to not have that or that because I understand that's
a tedious work if you want to take I not healthy images and rename all of them.
But for the sake of simplicity at this beginning I chose to make it like that.
Now let's go ahead and see how we're going to use the actual images.
Now if you remember we had a mild label class that actually holds onto the information for our neighbors.
The one we are using which has an internal number a question marks symbol and a symbol of a smile.
Let me reformat this properly so it is easier to view everything.
Something like that.
I don't need to know any of the comments anymore because you guys already know what they are.
So in order to use an image instead of is you I labels I have to make a new class for my images so I'm
actually going to write the class in here and then I'm going to duplicated or cut and paste it in a
new find.
So the class is going to be like this class and is going to be my image and it is actually a subclass
of you.
Image view because it has to show us something just like how label shows us things.
Then built into it.
I have our internal internal Nahm just like the last thing we had with the neighbors.
And that's an integer not so.
So far it is exactly like my label.
When you initialize my major with an internal number that number is used to compare the content of the
two tiles that we top on.
But there are some other things that we need for the email that are different than my label.
One of them is this thing.
I need to have a static value let's clone this one our last name be called the Smile.
This time it is called a tick and tick is going to be a white image and that image is an image name
and the name of it is actually the name I have in here.
It's actually called sign that PND your Tic-Tacs PMG So that's going to be take that P and G.
So that's essentially De Courval and of the smile.
Then I'm going to have to duplicate this whole thing.
Obviously the next one seems easy.
That's going to be question and the e-mail for it would be this guy question that PMG.
So that's easy question.
P N G.
Now here's the thing.
Last time when we had laborer's we could get the internal number convert into a text and shoy it on
the text value of the label on an image view we have to do something similar.
If you have to get the internal number produce an internal image and show that image on our image of
you.
So I'm going to go in here and say I have another label let's call it into an image that's going to
be a new image.
So unlike the last time that we only had to deal with the internal number this time we have to deal
with the internal number.
I'm going to write it for comparisons and we have to have an internal image for display.
Now you could argue that we could actually use the internal number only if we wanted to stick to this
naming convention.
If you have the number we can find the image we don't have to have the actual image but because you
may not have the same format of the numbers I would actually rather if you have an internal image that
produces an image from anything that you might have in there and that's something that is you know looking
for forward into things that might happen and that really helps me from developing an application to
know that things are going to happen in a certain way obviously in this particular example I have done
it before and that's how I know it.
But sometimes when you're developing You can also think of the situations that might come up later.
Now in any case I'm gonna go ahead and start a new file called this new file my image on my image has
this thing that's placed in here.
And of course I need to get the UI kit.
So import you get.
So now we have an image class that can show us images but obviously we haven't really done anything
like that.
And there is loads of code that we have to change because of that.
I'm actually going to go one file at the time so I'm going to go to View Controller and see in here
that we have toys or a mate of my labels actually have to be made of my image.
So that's the first thing they had to change.
And then I can see that the first and the second time are meant to be my label.
They actually have to be my image so I have to change that everywhere.
They found tiles are meant to be of the type labeled.
I'm going to make them my image.
I should mention this right now for some of you who are wondering this doesn't seem like a very intuitive
solution.
It certainly is not.
And in the coming lesson which is the advanced stuff I will essentially go through a solution that we
make something called My toilet and that tile can either be an image or a text and we'll talk about
that when the time comes.
But for now I want to go one step at a time I don't want to overcomplicate things for you.
Now let's go to the reset reset.
Does all of these things.
None of those is really relevant and we don't have to do anything in here.
Now that's all well in there isn't this go to the touchiest and that isn't that I'm going to say if
the top Time is of the type might emerge.
So that's good.
We found that one then I did in there and then do all of these things and then compare them against
each other.
And then it says the tool functions revealed and compare it to reveal.
Are not expecting something of the type.
Might you make there rather expecting something of the type.
My label and that's something that we have to fix real soon.
So I'm going to go to reveal and compare say the type of argument is my image then we do all of those
things.
Here's the first thing that we have to correct in here.
If the time that we are revealing and comparing is not a label it doesn't have it takes time.
So is sort of a text thinks it actually has an empty title that EMH that it has to become implied that
internal image.
So that's something I'm going to keep in mind and I'm actually going to comment this out.
I'm not gonna delete it so you can see the comparison between the two of them.
If the tires were off the type text or label it would have a text value in them.
If they are of the type you are made you view they will have an image.
And if they were labeled they could use the internal number converted and formatted.
And if they are of the type image views the internal image to show on them next thing is flip to a smile.
Very similar situation.
We have to have an image as an input value and we have to say if that happens then input time not the
major becomes my EMH dot tech sign because the smile and take are exactly the same thing.
I mean in the sense of they are the equivalent of each other between my age and my label.
And I'm going to comments this one out.
It's go to flip back and the flip back again.
We have to read the type of tile that is my image.
If we do that we have to set that into a question so I'm going to say imply that image becomes my image
dodged question.
So it Coupeville end of question in terms of a text label is question image of my image and I'm going
to comment this one out as well.
This go to flip to reveal a very similar situation because that might emerge instead of getting that
text based on the internal number.
Now we have to say empathize dot image becomes input tied that internal image and that's all we have
to do.
It's got to compare the compare We don't really have to change anything because they both still have
internal numbers.
They compare against each other.
And a decision gets made based on that.
Let's to the state and the state.
Again the count of them hasn't changed not the value changes.
So everything is good in the game mode.
Obviously nothing changes.
We go to make time which is the most important one.
And so much has to change in here.
So if you are making tiles we sit Altoids and centers will be empty values.
We get our tile size based on the game mode.
We get our CGI size all of these things are well except that when we make it tight we shouldn't make
it half the time type my label.
You have to make it tough to type my image.
Now if you make it time of the type might image it doesn't have a font anymore and doesn't have a text
alignment anymore because it's not a UI label.
So you don't have to set those to be just enough to set its center.
We still have to go through the counter models and this is actually a good thing for us to be doing
a quick review of everything that we have done so far.
And then we have to say is interaction enabled value.
We have to say it's internal number.
The next thing that we have to do is that instead of sitting at text for it which is something that
we usually have for a new label we have to set an image for it which is based on the number that we
have.
So I'm going to say tile Daut internal image that internal image.
I'm going to say it has to become a you image and that image is name and the name for it.
It needs a string format so that you actually get it in a separate entity.
I'm going to say let.
I am J'en name to be a stream.
And the next thing I'm going to say it has a format and the format is like this.
It's all I N G underscore because they all are like that.
I m g underscore.
Then I need at least one leading zero.
So zero to the.
And then dot J.
P. G.
And the value of it will be based on counter so counter here.
So what happens in here is this.
We say if count that is for instance 12.
This becomes MGE underscored 12 Dadge EPG.
If the counter is 3 it becomes our AMG at least 1 0 3 that JP G which is exactly the same numbering
or that we have in here because our numbers they have in leading zero is not I m g underscore to it
is IMJ underscore 0 2.
So now that they have that I'm going to put the AMG name in the name for the internal image and I'm
going to make sure that my tiles they actually show the question marks so tile that image becomes my
image dot question and I don't need that anymore because it's not a label anymore.
I think that's all we had to do in this fight so let's move on to the next one in the randomise we're
going to go ahead to any time in the tiles or hit you with a new center that we don't have to change
in the timer function.
We don't have to change anything in the view did load up.
We don't have to change anything because we're just resetting the values.
And I think that's all we had to do.
It's just issuing two errors.
Let me see what are those.
Maybe they're going to go away because they're just haven't cleaned up yet.
The Reveal and compare are now different values.
Let me save these files.
I'm going to save that and save save save that and save that.
And if I bought that much isn't that now these 20 years will go Covais automatically will clean itself
up.
So these are the ones they go away on their own because these two functions are now expecting topped
tile of the type might image.
So let's go ahead and run the application now so now we have all of these.
Which is a question mark based on image.
And if I tap on it it shows me an image and then we can compare them against each other.
Obviously it becomes a feast for me personally become surprisingly difficult to find them because they
all seem very similar to each other but that kind of does the trick for me.
Maybe you want to change the background color because that take itself is red and against purple doesn't
really show itself but I'm not going to worry about that right now.
Here is another thing that I have to mention before we move out of this lesson is that if you play the
game in a six by six that is 36 so we're going to need 18.
This thing emerges if we play the game in an 8 by 8 mode.
That would be 64 blocks and we would need at least half or not that is exactly half of that.
Thirty two distinct images.
That is why my image is in here.
I have 33 images.
I think I have one or two extra ones but that doesn't really matter.
But keep in mind that if you're replacing the majors the number of them matters.
So if you have less than the number that you need obviously some of them are going to be empty.
That's one thing I should mention.
The other one is this.
Let's say you had a group of images that they didn't have the naming convention.
Evey I have them.
You have just randomly named them or you read them from some online resource.
And the names are quite random.
So I'm going to go ahead and show you a solution for that which is a very very simple solution.
You would come to your viewpoint or you would introduce a new valuable called Images array that is going
to be an array of strings.
So those are the names of your images.
Then you would go to your view controller view the load or something like that and you would say I am
the array that would become an array of all the names that you have.
Maybe one of your files is called My email does JP G.
And maybe your other one is some random numbers because you read it from some online resource and maybe
that one is again names such as Sky beauty foun Sony camarade dirth JP or something that if it doesn't
really matter what the names are for it does that is that you place them in an array.
And if you have the NRA and the NRA has an order built into it then in your make tiles function which
is here you can actually go ahead and say instead of producing the name based on this particular format
I would say give me images array and I would get them at the counter.
And this is how you could replace my images which are numbered properly with an array of random objects
the objects that they don't have any any meaning for you know not naming convention between them and
this would work exactly identical to to what we have in here.
So for now I don't want to go that route.
I want to stick to this naming convention because it simplifies my life.
But that was just for you.
So you know if you need it you could actually add other images as well.
They don't have to be named like that.
It is important to keep that in mind because most likely the images you deal with are coming from another
resos Internet online banking back in network.
And you won't have any control over the namings of them.
So you have to get used to using essentially any name that that comes on.
So with that in mind we now have a functioning application that can work with images.
It's very difficult to solve.
And let's move on to our next ascent which is the advanced stuff about this application.