1 00:00:00,550 --> 00:00:06,070 So it will come back again in this lesson and I'm going to show you how to begin writing the Tiley great. 2 00:00:06,090 --> 00:00:12,390 So let me go to school and explain that once in Interface Builder once our game runs we should be able 3 00:00:12,390 --> 00:00:16,390 to see toilets in here that they each represent some number. 4 00:00:16,530 --> 00:00:21,630 So essentially I'm going to have a label and this is not something you have to do this is just for the 5 00:00:21,630 --> 00:00:29,100 sake of demonstration but they even have a label for instance like this and that one will be showing 6 00:00:29,100 --> 00:00:37,750 us a number maybe one and it can have a not an hour for a different background color and then I even 7 00:00:37,770 --> 00:00:41,630 have another one next to it and another one next to it and then either one. 8 00:00:41,640 --> 00:00:45,930 And if you're playing a four by four you have to have four of them into it and the four of them on the 9 00:00:45,930 --> 00:00:46,510 right. 10 00:00:46,710 --> 00:00:54,530 And then we have to find the size of each of them so that the properly fit inside the game you're obviously 11 00:00:54,620 --> 00:01:00,810 the one I just did a try to eyeball it and I missed some of it but that's why we are doing things programmatically 12 00:01:00,810 --> 00:01:03,410 to make sure that things happen properly. 13 00:01:03,570 --> 00:01:09,450 So few things we learn from this experiment is one of them is we need to know what is our current game 14 00:01:09,450 --> 00:01:09,920 mode. 15 00:01:10,110 --> 00:01:15,440 And Cygan thing we need to know what is the size of each title which is very important. 16 00:01:15,480 --> 00:01:22,200 And then of course we need to know where to place each child tile number one is placed in this particular 17 00:01:22,200 --> 00:01:23,690 Rock Center tile. 18 00:01:23,700 --> 00:01:28,150 I'm going to call this one for instance who is placed in this particular location. 19 00:01:28,260 --> 00:01:29,870 So on and so forth. 20 00:01:29,880 --> 00:01:35,700 So let's go ahead and do all of these things programmatically delete all of these. 21 00:01:35,890 --> 00:01:41,550 I'm going to go to my view controller and I want to mention this early on because it will happen more 22 00:01:41,550 --> 00:01:45,910 and more as we go through this development a lot of the code that you're right now. 23 00:01:45,910 --> 00:01:52,290 I will end up changing them later on simply because I don't want to tell you what is coming up. 24 00:01:52,320 --> 00:01:58,570 I have obviously done this code before and I know why am I doing something but that is not how a programmer 25 00:01:58,590 --> 00:02:05,040 thinks is not that you know you will know exactly what is coming up in let's say after two hours of 26 00:02:05,040 --> 00:02:05,810 development. 27 00:02:05,910 --> 00:02:11,550 So it stands to reason that I develop it for you as if I was doing it for the first time. 28 00:02:11,670 --> 00:02:16,250 I would put the code in here and then as I go along I realized I have to change things. 29 00:02:16,350 --> 00:02:20,980 We come back and we change it whenever a channel or whenever I remember. 30 00:02:21,000 --> 00:02:25,980 I will tell you in advance that this is something that might have to change down the. 31 00:02:26,130 --> 00:02:28,440 But you won't always be the case. 32 00:02:28,470 --> 00:02:34,560 So with that in mind and based on what we just learned and then go ahead and get it a little bit better 33 00:02:34,560 --> 00:02:42,030 you know formatting in here and I'm going to say I have a valuable Let's call this one game maudit which 34 00:02:42,030 --> 00:02:48,870 is an integer and it has a default value of 4 because by default our game is being played in a four 35 00:02:48,870 --> 00:02:56,640 by four situation then and then go ahead and say have another variable that is a high level size. 36 00:02:56,850 --> 00:03:01,230 And that's going to be a float value and this float value. 37 00:03:01,230 --> 00:03:09,330 I don't know what is its size simply because its size depends on the vet of the game view divided by 38 00:03:09,330 --> 00:03:10,620 the game. 39 00:03:10,800 --> 00:03:14,550 So let's go ahead and put that into an actual practice. 40 00:03:14,550 --> 00:03:23,010 And when we hear an I'm way to add a new function and we call this function let's say M.H. tiles function 41 00:03:23,370 --> 00:03:26,300 which is going to build us all of our tiles. 42 00:03:26,460 --> 00:03:31,360 Now in the make tiles the first thing I need to know is the size of a tile. 43 00:03:31,560 --> 00:03:46,440 And we just say tile size becomes game view dart frame size that it's divided by game mode. 44 00:03:46,890 --> 00:03:52,710 And because the player is facing now and we get an error and this is actually a bit of a confusing error 45 00:03:52,770 --> 00:04:00,080 it says cjra is ambiguous even though that is not the error or the areas that you are trying to divide. 46 00:04:00,130 --> 00:04:02,610 C.G. floored by an integer. 47 00:04:02,610 --> 00:04:11,760 So to remedy that I'm going to say seach fruit values e.g. float value of game mode and that's going 48 00:04:11,760 --> 00:04:12,740 to fix the error. 49 00:04:12,990 --> 00:04:18,600 So the tile size is now being the calculation of the size of the width of the game. 50 00:04:18,600 --> 00:04:21,730 You divide that by the size of the game more. 51 00:04:21,780 --> 00:04:27,120 Which at the moment is for now that they have now they can go ahead and the tiles. 52 00:04:27,150 --> 00:04:34,710 So to do that I'm going to go ahead and say we need two times both horizontally and vertically essentially 53 00:04:34,710 --> 00:04:36,660 both under and under height. 54 00:04:36,690 --> 00:04:41,160 For now I'm going to add only one tile to my game to you. 55 00:04:41,240 --> 00:04:49,180 I'm going to say let's say let Tyler is going to be a U I'll label and this UI labored. 56 00:04:49,200 --> 00:04:51,020 I'm going to make it five frame. 57 00:04:51,180 --> 00:04:54,650 So they have to decide where you want to place this one. 58 00:04:54,690 --> 00:05:02,210 So the frame of it I'm actually going to make it based on a CGA record of the different formats. 59 00:05:02,220 --> 00:05:09,230 Obviously I'm going to use a an origin and a size simply because the origin doesn't matter. 60 00:05:09,270 --> 00:05:12,790 We're going to move the trial to somewhere else. 61 00:05:12,810 --> 00:05:15,250 What does matter is the size of it. 62 00:05:15,420 --> 00:05:19,150 So I'm going to say let's try. 63 00:05:19,230 --> 00:05:24,410 I'm going to call this one a C G size simply because I don't want to confuse it. 64 00:05:24,500 --> 00:05:32,580 The other size and that's going to be a C.G. size of it and the values of it are going to be twice the 65 00:05:32,580 --> 00:05:38,120 size and type size because the width and height of it are exactly identical. 66 00:05:38,340 --> 00:05:45,940 So every new tile that I'm going to make I'm going to place it at CGU point zero with the size. 67 00:05:46,000 --> 00:05:53,760 Tyler C.G. size and that's going to be a tile that is going to have the same size as a quarter of the 68 00:05:54,210 --> 00:05:59,030 of the game view because the game for this country for now. 69 00:05:59,040 --> 00:06:04,350 Once I have the time I'm going to actually add some stuff to it so we can basically see it. 70 00:06:04,360 --> 00:06:11,520 So I'm going to say tiles are background color make with maybe your eye color that dark gray color so 71 00:06:11,520 --> 00:06:13,240 I can actually see this one. 72 00:06:13,470 --> 00:06:17,080 And I'm going to see a game view that I had this. 73 00:06:17,220 --> 00:06:24,210 Time now I'm going to have to call this matter inside my view that lot so it does happen at some point 74 00:06:24,210 --> 00:06:27,410 eventually so many times it happens there. 75 00:06:27,490 --> 00:06:34,280 And if I run the application we should be able to see one label with no text with like a background 76 00:06:34,370 --> 00:06:39,920 on the top left corner of C.G. point to zero which is exactly what's happening. 77 00:06:40,200 --> 00:06:45,160 And then I'm going to have to repeat this process in this case 16 times. 78 00:06:45,210 --> 00:06:47,810 But for now I'm only going to do it for four times. 79 00:06:47,820 --> 00:06:51,200 I want to have one in here one next to it one next to it. 80 00:06:51,210 --> 00:06:57,640 Essentially going on the vet and add them are the columns of of different times. 81 00:06:57,840 --> 00:07:01,130 So just go ahead and say How are you going to do that. 82 00:07:01,150 --> 00:07:05,610 The first thing I want to say is I want to set the tile in your center. 83 00:07:05,730 --> 00:07:09,650 So go ahead and say let's just call this one. 84 00:07:09,660 --> 00:07:13,880 Maybe a new center or tieless center. 85 00:07:13,920 --> 00:07:21,900 I want to say C-g point and I want to put us a center for it that is going to be the location here the 86 00:07:21,900 --> 00:07:23,700 location for the next one. 87 00:07:23,790 --> 00:07:27,740 The next one and the last one so I want to calculate all the centers. 88 00:07:27,930 --> 00:07:33,630 So to do that I'm going to break it down into the X envoy of the center. 89 00:07:33,780 --> 00:07:43,880 So we go up here and say maybe after the tiles size I'm going to say very let's call it X Center and 90 00:07:43,890 --> 00:07:48,060 the X Center at the very beginning is half the vote. 91 00:07:48,060 --> 00:07:55,800 So essentially it becomes tile size divided by two and that's as simple as that simply because at the 92 00:07:55,800 --> 00:07:59,850 very beginning the vet here is whatever it is. 93 00:07:59,850 --> 00:08:02,510 Half of it will make the accent. 94 00:08:02,820 --> 00:08:04,050 I'm going to copy this. 95 00:08:04,120 --> 00:08:05,360 Going to call this one. 96 00:08:05,370 --> 00:08:06,460 Why. 97 00:08:06,690 --> 00:08:09,540 And that's going to be half the time as well. 98 00:08:09,810 --> 00:08:14,510 And these two values essentially make a new center for us. 99 00:08:14,850 --> 00:08:22,520 So now they have that and I have the x and y of the tile center I'm going up right center to my tyed 100 00:08:22,790 --> 00:08:31,080 went to say the tile dot center becomes tile center and that's going to not change anything right now 101 00:08:31,080 --> 00:08:37,250 because you still only have one tile but soon enough and we'll have more tiles is going to change things. 102 00:08:37,380 --> 00:08:41,580 So in order to have more times I'm going to go ahead and say four. 103 00:08:41,880 --> 00:08:43,330 Let's call it h. 104 00:08:43,340 --> 00:08:49,560 For now in 0 0 until we reach game mode. 105 00:08:49,800 --> 00:08:53,740 And that's important because we need four of them 0 1 2 3. 106 00:08:53,820 --> 00:08:56,700 Let's repeat this process. 107 00:08:56,700 --> 00:09:02,910 Now let me quickly explain something that might not be very clear at the beginning why do I call it 108 00:09:02,970 --> 00:09:03,600 h. 109 00:09:03,600 --> 00:09:06,670 It's simply because these are the horizontal ones. 110 00:09:06,670 --> 00:09:08,100 Why yet another one in here. 111 00:09:08,130 --> 00:09:09,920 Another one here another one at the end. 112 00:09:10,080 --> 00:09:11,900 So that's why we call it h. 113 00:09:11,920 --> 00:09:17,940 You could obviously call it or I could call it horizontal whatever that makes sense to you but for me 114 00:09:18,240 --> 00:09:22,800 this makes a lot more sense to call it h because I know down the track I'm going to quote another one 115 00:09:22,830 --> 00:09:25,230 every four for Varitek. 116 00:09:25,500 --> 00:09:31,770 Now what is happening is this foretop is happening four rounds and every time he's making a tile is 117 00:09:31,770 --> 00:09:37,800 placing the exact same place and is doing it the same by Goncalo so on and so forth. 118 00:09:38,040 --> 00:09:39,450 But that's not what I want. 119 00:09:39,460 --> 00:09:45,750 What they want to happen is this every time that we run the for loop I want to push the accent a little 120 00:09:45,750 --> 00:09:47,320 bit further to the right. 121 00:09:47,320 --> 00:09:50,850 So if the first sign is here the next one should be there. 122 00:09:50,910 --> 00:09:52,740 The next one should be there. 123 00:09:52,770 --> 00:09:54,990 The last one should be somewhere about here. 124 00:09:55,200 --> 00:09:58,800 So what is the difference between each of these two. 125 00:09:58,800 --> 00:10:04,550 What's the difference between center of the first one and the next one and that is going to be the vet 126 00:10:04,670 --> 00:10:06,860 of one of the titles. 127 00:10:06,920 --> 00:10:17,600 So every time I make a I'll and I apply it to my center I'm going to say Exxon plus equine tieless size. 128 00:10:17,600 --> 00:10:21,780 So push yourself as much as one tile to the right. 129 00:10:22,100 --> 00:10:30,800 And let's run app now and in here once it knows we should be able to see four of these are two or three 130 00:10:30,800 --> 00:10:37,040 times sitting next to each other and I know there are four of them but we can see the gaps between them. 131 00:10:37,040 --> 00:10:38,910 That's why they show up like this. 132 00:10:38,960 --> 00:10:42,640 It feels like your whole essentially like a band up there. 133 00:10:42,640 --> 00:10:50,210 And to fix that I'm going to try to see CGI size and subtract a little bit from it maybe five points 134 00:10:50,390 --> 00:10:57,320 just a number just a static number that's going to help us see a little bit of a little bit of a gap 135 00:10:57,320 --> 00:11:00,410 between them which is going to make things a little clearer for me. 136 00:11:01,280 --> 00:11:07,610 So now we see that little gap between them and they're all perfectly placed one two three four essentially 137 00:11:07,610 --> 00:11:09,130 zero of one to three. 138 00:11:09,320 --> 00:11:14,180 And every time the accent is helping us pushing it to the next location. 139 00:11:14,270 --> 00:11:17,750 So let's keep it up to here and in the next lesson I will help you. 140 00:11:17,750 --> 00:11:24,810 We show you essentially how to duplicate this process across the vertical side of the game view as.