1 00:00:01,240 --> 00:00:06,020 Just doesn't begin to talk about touch hasn't moved function and what you could do with it. 2 00:00:06,040 --> 00:00:10,250 I'm going to show you something very simple and then I'm going to try to make things a little bit more 3 00:00:10,640 --> 00:00:16,700 advanced by showing you more details of what you would actually want to do when you use methods such 4 00:00:16,700 --> 00:00:17,460 as this one. 5 00:00:17,580 --> 00:00:19,000 So let's go ahead and do x4. 6 00:00:19,040 --> 00:00:26,540 I'm going to start a new application touches more at the I'd just like the last time I'm going to have 7 00:00:26,540 --> 00:00:30,590 something in my screen which is going to be another you I view. 8 00:00:30,680 --> 00:00:36,740 These files are my shit rushing around madly explaining what I'm doing simply because I see by the time 9 00:00:36,890 --> 00:00:41,440 you got to this portion of the course you know exactly what's happening. 10 00:00:41,750 --> 00:00:49,100 So this one is the red box and that's about this quote world you controller and I don't need to view 11 00:00:49,170 --> 00:00:49,530 it. 12 00:00:49,550 --> 00:00:52,760 Look So here's what I wanted. 13 00:00:52,940 --> 00:00:57,520 I want to say touches move with. 14 00:00:58,260 --> 00:01:01,920 And that Tieri are for they want to do is this. 15 00:01:01,920 --> 00:01:03,120 Let me write it down. 16 00:01:03,120 --> 00:01:08,890 Place the red box where my torch is. 17 00:01:09,120 --> 00:01:14,220 Now this may seem quite simple at the beginning but once you actually get in with details of it you 18 00:01:14,220 --> 00:01:17,320 will not start so many things that you have to account for. 19 00:01:17,430 --> 00:01:21,060 One of them is how many touches are there. 20 00:01:21,240 --> 00:01:27,000 So you have to make sure that you do this only if there is only one touch on the device and then the 21 00:01:27,000 --> 00:01:31,030 more important thing is your touch lands under that box. 22 00:01:31,260 --> 00:01:35,500 But you want to find the position based on the overall view. 23 00:01:35,520 --> 00:01:42,290 So much for the red box but the location for the main view. 24 00:01:42,300 --> 00:01:45,580 That's the next thing we have to do Man view. 25 00:01:46,110 --> 00:01:48,460 Finally and this is more of an advanced model. 26 00:01:48,590 --> 00:01:51,810 Becomes a model of the offset against the touch. 27 00:01:51,810 --> 00:01:53,760 And I would explain this in a socket. 28 00:01:53,790 --> 00:01:56,720 Let's go ahead and do the easier ones first. 29 00:01:56,730 --> 00:02:03,420 First thing you want to know how many touches are there so that one should be easy if touches count 30 00:02:03,570 --> 00:02:05,010 is one. 31 00:02:05,370 --> 00:02:08,760 Only two things in this only situation. 32 00:02:08,820 --> 00:02:13,350 So if there are two touches I don't want to move anything maybe I want to rotate or a scale or do something 33 00:02:13,360 --> 00:02:18,420 else but I only want to do this particular thing moving the red box. 34 00:02:18,420 --> 00:02:25,680 If there's only one touch if that's the case then let my touch just like the last time become touches 35 00:02:25,680 --> 00:02:28,210 that first let's get the very first touch. 36 00:02:28,220 --> 00:02:30,780 And you know that's the only touch right now. 37 00:02:31,140 --> 00:02:35,430 And then we have to check if the touch is for the red box. 38 00:02:35,430 --> 00:02:48,720 So if my touch door view is a red box so now becomes about this one knowing the location not inside 39 00:02:48,720 --> 00:02:51,680 the red box or rather inside the main view. 40 00:02:51,690 --> 00:02:57,660 So I'm going to say to let's call it look in. 41 00:02:57,720 --> 00:03:05,940 In view and that's the C-g point of course because that's a location that's going to become my touch 42 00:03:06,300 --> 00:03:16,850 dart location in view and the view I'm interested in is self got to view and go ahead and say this until 43 00:03:16,880 --> 00:03:21,660 you actually does exist because I know I have to touch some. 44 00:03:21,660 --> 00:03:25,350 But on the view I'm going to make it explicitly onda. 45 00:03:25,550 --> 00:03:27,010 So let's see what we have done. 46 00:03:27,110 --> 00:03:32,810 We said if there is one touch and that touches on the red line find the location of that touch on the 47 00:03:32,870 --> 00:03:33,940 actual view. 48 00:03:34,040 --> 00:03:40,160 Because as you can imagine when you land the tap on the device you're touching both on the red box as 49 00:03:40,250 --> 00:03:45,660 well as the main view and if there are more objects than you touch with so many different objects. 50 00:03:45,770 --> 00:03:48,860 But for now you are only interested in in this one. 51 00:03:48,860 --> 00:03:51,280 The one that is for the self that view. 52 00:03:51,590 --> 00:03:53,650 And then the next thing is actually very simple. 53 00:03:53,660 --> 00:03:56,410 I'm going to say Redbox thought. 54 00:03:56,750 --> 00:04:02,800 Make it look in your so let's go ahead and see how this works out. 55 00:04:02,830 --> 00:04:09,970 Taking out the first for some of them I only need this one and there on my app on while it is running 56 00:04:09,970 --> 00:04:13,830 and when I do a little bit of a clean up you know I'm a stickler for that. 57 00:04:14,660 --> 00:04:15,580 OK. 58 00:04:15,640 --> 00:04:18,430 But that is simulator Yes. 59 00:04:19,350 --> 00:04:20,760 So let's see what they can do. 60 00:04:20,760 --> 00:04:25,350 I can grab this guy move him better I want to perfect. 61 00:04:25,440 --> 00:04:27,440 It's working exactly the baby Y. 62 00:04:27,530 --> 00:04:32,520 And you know this is a very good way of doing interaction if you want to make a little puzzle game or 63 00:04:32,520 --> 00:04:33,540 anything of the sort. 64 00:04:33,540 --> 00:04:34,890 This would really help you. 65 00:04:35,070 --> 00:04:36,750 Now even though this is really great. 66 00:04:36,750 --> 00:04:40,530 Let me show you where the system breaks if I talk somebody on the sensor. 67 00:04:40,530 --> 00:04:46,050 You don't really notice it but if I tap on one of the corners you will see that the box immediately 68 00:04:46,050 --> 00:04:47,530 jumps in there. 69 00:04:48,180 --> 00:04:54,150 And that is because I'm actually going to give you a second to think to yourself why is it that I tap 70 00:04:54,400 --> 00:04:59,150 anywhere on the red box the center of it jumps to where my mouse pointer is. 71 00:04:59,160 --> 00:05:03,640 Or if you were on an actual device your touch is. 72 00:05:03,860 --> 00:05:05,480 So here's the problem. 73 00:05:05,480 --> 00:05:09,530 We are setting the center after box to that location. 74 00:05:09,680 --> 00:05:16,190 So we are not accounting for the offset I might have when I first touched the red box. 75 00:05:16,190 --> 00:05:19,930 So at the beginning of touching the red box maybe I was in this corner. 76 00:05:20,120 --> 00:05:23,680 So that corner should be going. 77 00:05:23,780 --> 00:05:24,910 I am going. 78 00:05:25,010 --> 00:05:27,460 Not the center of the red box. 79 00:05:27,530 --> 00:05:32,650 So that becomes a little bit of a mathematical problem rather than a programming problem. 80 00:05:32,660 --> 00:05:36,720 But in solving the mathematical problem we have to write code. 81 00:05:36,860 --> 00:05:40,110 So I'm explain to you how I intend to solve it. 82 00:05:40,260 --> 00:05:48,360 When I top some doubt tap against the center of the red one has a little offset. 83 00:05:48,380 --> 00:05:54,560 So imagine dislocation in my mouse pointer is in the center of the red box and I tap this little much 84 00:05:54,830 --> 00:05:59,790 that vet and the height is the offset against the center. 85 00:05:59,930 --> 00:06:04,760 So I have to find that offset and apply that any time I move. 86 00:06:04,790 --> 00:06:10,500 The problem is that I find that offset that offset is going to be moving with my mouse. 87 00:06:10,640 --> 00:06:15,850 So as a result of that I have to find the offset at the beginning of the touch. 88 00:06:15,860 --> 00:06:20,980 Not in this method in a method called Touch has begun in that method. 89 00:06:20,990 --> 00:06:25,670 I have to find how much offset I have and applied that in that I just move. 90 00:06:26,120 --> 00:06:33,380 And that itself will introduce new problems simply because you can not add things such as C.G. points 91 00:06:33,380 --> 00:06:34,170 to each other. 92 00:06:34,300 --> 00:06:37,180 But it will solve one step at a time. 93 00:06:37,190 --> 00:06:43,490 Let's go ahead and do the very very first thing I'm going to go ahead in here and say I have a variable 94 00:06:43,730 --> 00:06:51,110 called miscalled the tap offsets and that's going to be a C.G. point. 95 00:06:51,110 --> 00:06:56,860 So let's say somehow magically we calculate this knowledge and we know what's the value for the top 96 00:06:56,860 --> 00:07:03,620 of set and then when we come here we want to actually move or object we say well find a location in 97 00:07:03,620 --> 00:07:07,440 view and always at the top offset to it. 98 00:07:07,850 --> 00:07:12,970 So for now this is obviously going to crash the application because the top offset is not really working. 99 00:07:13,130 --> 00:07:20,880 And also is going to tell us you cannot do binary between two values of the type C.G. point. 100 00:07:20,880 --> 00:07:26,750 I mean with the exact error for you it says binary operator plus cannot be applied to operators of type 101 00:07:26,750 --> 00:07:28,570 C.G. point C.G. point. 102 00:07:28,580 --> 00:07:33,980 So we have two issues that we have to address one is we have to find out what is this value type of 103 00:07:34,000 --> 00:07:34,420 set. 104 00:07:34,430 --> 00:07:38,850 At the very beginning and then we have to find a way to add them together. 105 00:07:39,020 --> 00:07:43,390 So I suggest we first solve the easier problem easier problem is this. 106 00:07:43,490 --> 00:07:44,900 What is the top of. 107 00:07:44,900 --> 00:07:45,950 At the very beginning. 108 00:07:45,980 --> 00:07:49,810 So for that I'm going to have a method called Touch has begun. 109 00:07:49,820 --> 00:07:55,280 This is right at the very beginning when a touch lands and I have to almost for the same thing I have 110 00:07:55,280 --> 00:07:58,040 to check if that touches count is 1. 111 00:07:58,160 --> 00:08:02,820 Because that's the only situation where things are going to happen in the touches move. 112 00:08:02,840 --> 00:08:08,040 So because of that when I actually count for that in here knows that I'm going to say if that happened 113 00:08:08,070 --> 00:08:13,110 and I was valid then let's do these two things because it's exactly the same thing. 114 00:08:13,110 --> 00:08:20,390 Didn't get the first touch and then if that touch is on the red box here is where we have to actually 115 00:08:20,390 --> 00:08:22,910 calculate the value of the offset. 116 00:08:23,030 --> 00:08:24,620 And let's see how I'm going to do that. 117 00:08:24,620 --> 00:08:30,890 The first thing I'm going to do that I'm going to get the location of my Touch not on the actually view 118 00:08:31,230 --> 00:08:33,670 right there get it under red box. 119 00:08:33,740 --> 00:08:41,420 So I'm going to say Let's call this one that was called look in view so let's call this one let's look 120 00:08:41,810 --> 00:08:44,110 in red for instance. 121 00:08:44,230 --> 00:08:46,340 And that's again going to be is C.G. point. 122 00:08:46,340 --> 00:08:49,610 We know that and that's going to be exactly the same thing. 123 00:08:49,610 --> 00:09:01,330 So essentially my touch but location interview red box and I know that this thing exists so it is on 124 00:09:01,350 --> 00:09:08,360 draft's forcibly because I know it is there now to find the offset this value we actually have to find 125 00:09:08,360 --> 00:09:12,320 the difference between dislocation and the center of the red. 126 00:09:12,320 --> 00:09:19,130 So if we go in here and I tap in that corner I have to find the distance between this location and the 127 00:09:19,130 --> 00:09:19,970 center. 128 00:09:20,210 --> 00:09:29,000 The problem is the center of red which is the red box that's there that is not what I want because red 129 00:09:29,000 --> 00:09:33,390 box that center shows the center of red against the view. 130 00:09:33,550 --> 00:09:37,000 While I want to know what is the middle of the right. 131 00:09:37,100 --> 00:09:40,740 So it's going to do something that is actually the middle of the road. 132 00:09:40,970 --> 00:09:44,140 I'm going to go ahead and say let's call it red. 133 00:09:44,150 --> 00:09:51,070 The middle let's go to the values Louds or let's decode that middle. 134 00:09:51,140 --> 00:09:54,630 I'm just trying to make sure that the names are kind of explanatory. 135 00:09:54,710 --> 00:10:00,530 I'm going to say read the middle is the point of I want to have two values. 136 00:10:00,530 --> 00:10:15,070 Both of them float the CGA point values of red box dot frame size dot vent divided by two and the same 137 00:10:15,070 --> 00:10:21,720 thing with the height and how it works is I'm going to say get the red box. 138 00:10:21,740 --> 00:10:24,450 Escalate it to a half on the beat the height. 139 00:10:24,460 --> 00:10:26,860 Those are the values for the middle of it. 140 00:10:26,860 --> 00:10:31,190 So for instance this box is 200 pixels by 100 pixels. 141 00:10:31,330 --> 00:10:34,750 Then the center of it is out the 100 pictures and 50 pixels. 142 00:10:34,780 --> 00:10:36,350 And that's what we want to know. 143 00:10:36,580 --> 00:10:44,920 Now that I have that I'm going to go ahead and say well let's let's call it our difference of x or x 144 00:10:44,950 --> 00:10:54,220 difference x difference is going to be red middle dot X and then I'm going to subtract the location 145 00:10:54,310 --> 00:10:56,410 in red X from it. 146 00:10:56,410 --> 00:11:05,350 So that's the difference between the axis I'm going to copy it out say why differences are obvious differences 147 00:11:05,350 --> 00:11:06,840 between the two wise. 148 00:11:06,970 --> 00:11:09,150 So so far we have managed to do this. 149 00:11:09,160 --> 00:11:16,600 We have managed to find this center here and that corner that we touch of it is here or here or anywhere 150 00:11:16,870 --> 00:11:20,850 and we found the difference between the x and between the lines. 151 00:11:20,890 --> 00:11:22,180 So we got these two. 152 00:11:22,260 --> 00:11:24,810 And now that they have that then it becomes very easy. 153 00:11:24,820 --> 00:11:34,200 Hypothesis becomes a C.G. point value of these two guys x difference and y difference. 154 00:11:34,240 --> 00:11:37,740 So here is what happened in the patches began. 155 00:11:37,740 --> 00:11:45,160 We found a very have it we found very in the middle of it we found that this sounds two doors that difference 156 00:11:45,160 --> 00:11:51,800 between the X's and the difference between the wise and even made in UCG point that represents depth 157 00:11:51,850 --> 00:11:53,020 of sets. 158 00:11:53,320 --> 00:11:56,190 And that happened right at the beginning of the torch. 159 00:11:56,350 --> 00:12:01,700 So every time we wanted to just move that you is already a sword. 160 00:12:01,990 --> 00:12:08,080 Is restored only if the count is one and the view is right which is the only situation that touches 161 00:12:08,080 --> 00:12:14,750 most of the value is 1 and the view is the level now with a much bigger problem. 162 00:12:14,770 --> 00:12:21,380 We want to move the center of the red to be a combination of the location in the view and the top offset 163 00:12:21,990 --> 00:12:28,420 but we can not add them together let me show you a little or not a very good approach but it's going 164 00:12:28,420 --> 00:12:32,170 to help us understand what we should do and then I'm going to do it the right way. 165 00:12:32,440 --> 00:12:42,760 I'm going to say let's have it let us call it Kumba compound combined that is going to be a CGI point 166 00:12:42,850 --> 00:12:44,490 of. 167 00:12:44,830 --> 00:12:52,360 So the tool values for the x and y of these C.G. point is going to be location and view that X plus 168 00:12:52,490 --> 00:13:06,070 cap offset that X and then location and you dot y plus top offset that Y and I'm going to say the red 169 00:13:06,070 --> 00:13:08,530 box center is this right. 170 00:13:09,070 --> 00:13:11,530 So don't worry about that that I commented out there. 171 00:13:11,580 --> 00:13:15,990 It's simply we are making a point by adding the X's. 172 00:13:16,020 --> 00:13:23,530 Otherwise of very very overview are moving in the view in the touches of wherever we are moving as well 173 00:13:23,620 --> 00:13:27,010 as the little offsets that we have to apply. 174 00:13:27,040 --> 00:13:28,100 Let's see if this works. 175 00:13:28,150 --> 00:13:36,130 And then I'm going to come back and do it in a bed of the Essentially that is the simulator. 176 00:13:36,160 --> 00:13:39,690 So now in the sense that works in a corner it also works. 177 00:13:39,700 --> 00:13:45,220 You see when I grab a corner it actually follows me exactly because it's accounting for that little 178 00:13:45,220 --> 00:13:47,710 offset that I had at the very beginning. 179 00:13:48,130 --> 00:13:50,060 So we know this is working. 180 00:13:50,200 --> 00:13:52,180 Everything we have written is correct. 181 00:13:52,180 --> 00:13:58,510 That type of set is calculated properly and the touch has begun and the touches moves up buying it properly. 182 00:13:58,510 --> 00:14:00,310 So I don't need that anymore. 183 00:14:00,460 --> 00:14:06,690 But here's the part we haven't solved we have manually added the Xs and Ys of two vectors and there 184 00:14:06,690 --> 00:14:08,300 is really nothing wrong with that. 185 00:14:08,470 --> 00:14:14,770 But if you want to really push your work to kind of the next level I would suggest that we do something 186 00:14:14,770 --> 00:14:15,230 like this. 187 00:14:15,250 --> 00:14:19,090 And this is something that we call a function overload. 188 00:14:19,090 --> 00:14:26,560 So I mean this function overload and function overloads are things that you have done in the past but 189 00:14:26,560 --> 00:14:29,800 not just in not in this particular format. 190 00:14:29,800 --> 00:14:35,300 Imagine if you had a function of Maime of our own which was called functions. 191 00:14:35,410 --> 00:14:36,450 Hello. 192 00:14:36,700 --> 00:14:40,260 And this was a situation with. 193 00:14:40,570 --> 00:14:46,570 And we had this function and for whatever reason I needed to have this function to take two different 194 00:14:46,570 --> 00:14:48,170 types of arguments. 195 00:14:48,190 --> 00:14:51,680 So one of them was which was an integer. 196 00:14:51,880 --> 00:14:58,740 And then I needed another function which is hello and this one is an F and that is a float. 197 00:14:58,930 --> 00:15:02,100 So these two are essentially called function overloads. 198 00:15:02,110 --> 00:15:08,140 They are forced the same function are called the same thing but since they get different arguments or 199 00:15:08,140 --> 00:15:12,670 different parameters they become overloads of the same function. 200 00:15:12,700 --> 00:15:14,060 And here's what we want to do. 201 00:15:14,080 --> 00:15:23,290 We want to add in your function overload for plus that is going to help us not just add binary integers 202 00:15:23,290 --> 00:15:29,230 or binary float values but also be able to C.G. points or anything. 203 00:15:29,260 --> 00:15:36,310 Let's say you want to write a plus function overload that helps you add two vectors such as this one 204 00:15:36,340 --> 00:15:40,420 or two CGI rechts that they're going to do so many different things together. 205 00:15:40,420 --> 00:15:42,210 So here's what we want to do. 206 00:15:42,210 --> 00:15:43,390 I'm going to go down here. 207 00:15:44,870 --> 00:15:51,310 In my functional overload I'm going to go ahead and say function and the function is plus because something 208 00:15:51,310 --> 00:15:55,160 that exists is an overload of plus that's already there. 209 00:15:55,510 --> 00:16:03,770 And then the arguments of it I'm going to say Let's call this one of the first vector which is a CGU 210 00:16:03,850 --> 00:16:13,890 point and let's call the second one second vector which is a C G point and it also gives us like a C 211 00:16:13,890 --> 00:16:15,220 G point. 212 00:16:15,690 --> 00:16:24,130 And here's the body of the function in the body of the function I'm going to say return C.G. point of. 213 00:16:24,540 --> 00:16:34,050 I should have let him autocomplete float of the same thing we did here first Vache back x plus. 214 00:16:34,360 --> 00:16:44,960 So I can vector Da'ath X and then do the same thing first y plus second after that y. 215 00:16:45,430 --> 00:16:53,230 So what they have done is simply saying there is an overload plus that also takes seems C.G. points 216 00:16:53,500 --> 00:17:00,970 up until this point they used to take integers floats potentially as strings but now they also do take 217 00:17:01,240 --> 00:17:03,410 vectors into them C.G. points. 218 00:17:03,430 --> 00:17:05,390 So instead of doing this anymore. 219 00:17:05,590 --> 00:17:13,060 Acworth simply go ahead into my touches move and say the value that I want to have for my center is 220 00:17:13,060 --> 00:17:20,440 location view and using this very new function that you have introduced Plus the offset and that's about 221 00:17:20,450 --> 00:17:21,160 that. 222 00:17:21,190 --> 00:17:27,490 And now everything should be working using attaches more than touches began on our new function overload 223 00:17:28,020 --> 00:17:31,710 and then it's working exactly the way we want it. 224 00:17:31,990 --> 00:17:37,030 But of course write a new function overlock if you want to subtract them I'm gonna write that because 225 00:17:37,030 --> 00:17:39,600 that's the easiest one I can think of right now. 226 00:17:39,670 --> 00:17:42,990 You just subtract the two of them that's about. 227 00:17:43,170 --> 00:17:48,280 And if you want we could depending on what you're doing you might want to write tens of different function 228 00:17:48,280 --> 00:17:54,970 overload because you're trying to do things this kind of thing really happens when you work with coding 229 00:17:54,970 --> 00:17:58,830 for games particularly in two dimensional games. 230 00:17:58,870 --> 00:18:04,480 I have and the writing so many different overloads for different matters because I didn't want to rewrite 231 00:18:04,480 --> 00:18:10,890 that long piece of code every time I wanted to add to C.G. point so every time I wanted to calculate 232 00:18:11,440 --> 00:18:14,510 the rectangle of a view or so on and so forth. 233 00:18:14,800 --> 00:18:16,320 So that's about that. 234 00:18:16,330 --> 00:18:24,730 We got the touches moved using a set as well as using a touch has moved itself based on a number of 235 00:18:24,730 --> 00:18:28,140 the count and it works the way we wanted it to work. 236 00:18:28,210 --> 00:18:30,870 Let's keep it up to here on we want to our next lesson.