1 00:00:00,720 --> 00:00:05,910 Come back again in this lesson without all the constraints in order to lay out to make sure that all 2 00:00:05,910 --> 00:00:06,600 of our outlets. 3 00:00:06,600 --> 00:00:10,500 They essentially represent the same thing in different devices. 4 00:00:10,710 --> 00:00:15,600 So this is going to be a little bit of a you know boring lesson unfortunately was something that we 5 00:00:15,600 --> 00:00:16,710 have to do. 6 00:00:16,890 --> 00:00:23,190 So the first thing I'm going to do is this I'm going to say game mode and that's going to have a space 7 00:00:23,280 --> 00:00:30,870 a topic a space or the safe area and it's going to be having a leading space the safe area and is also 8 00:00:30,870 --> 00:00:35,580 going to have a height that is always 29. 9 00:00:35,580 --> 00:00:39,200 So those are the values that we have so far. 10 00:00:39,400 --> 00:00:45,780 Then I'm going to let this size the vets of it to be inferred from the text I'm on so I'm not going 11 00:00:45,780 --> 00:00:52,710 to apply a vet constrained whether I'm going to do is I'm going to say the segmented control against 12 00:00:52,770 --> 00:00:55,010 the game your game mode. 13 00:00:55,170 --> 00:01:00,440 It has a horizontal is facing of 20. 14 00:01:00,480 --> 00:01:02,840 So that's always going to be 20. 15 00:01:03,300 --> 00:01:11,880 And then it has the same thing from the top at top spacing of a gain of 14 here which is 22 a safe area 16 00:01:11,910 --> 00:01:12,690 or 40. 17 00:01:12,700 --> 00:01:22,040 The superb view and I'm going to actually let it have a vit which is currently set 246 to make it to 18 00:01:22,040 --> 00:01:27,840 40 and I'm going to say the weight of it always stays intact and the height of it you don't have to 19 00:01:27,840 --> 00:01:35,730 give it a constant simply because it automatically adjust itself to be 29 no matter what then the next 20 00:01:35,730 --> 00:01:37,240 thing is my reset button. 21 00:01:37,250 --> 00:01:43,390 There is a then asked to be from 20 pixels from the top which is the 20 points from the safe area. 22 00:01:43,640 --> 00:01:48,650 I wide to be from 20 horizontal spacing from the segmented control. 23 00:01:48,690 --> 00:01:49,950 So that's another number. 24 00:01:49,950 --> 00:01:52,500 I'm going to go ahead and say that is 20. 25 00:01:52,830 --> 00:01:56,420 I want to have a twenty nine pixels height. 26 00:01:56,550 --> 00:01:58,340 So that is going to be 29. 27 00:01:58,650 --> 00:02:04,080 And then I want it to have a trailing space of a gain having 20 Veach. 28 00:02:04,110 --> 00:02:04,890 It is there. 29 00:02:04,890 --> 00:02:09,090 So what I had placed it it automatically had ended up being 20. 30 00:02:09,180 --> 00:02:13,190 So that's all we have to do for these four or three items on the top. 31 00:02:13,190 --> 00:02:18,780 What you could do is you could select either of them and press the update button so you get them in 32 00:02:18,830 --> 00:02:20,900 their updated location. 33 00:02:20,910 --> 00:02:24,870 So where they are going to be this is how they're going to be. 34 00:02:25,320 --> 00:02:31,230 And then the next thing is I'm going to go to my game view and for the game view I'm going to say it 35 00:02:31,230 --> 00:02:35,470 has a leading space of 20 which is good. 36 00:02:35,670 --> 00:02:41,490 I'm going to say it has a tapas space against any of these three objects because they're all in the 37 00:02:41,490 --> 00:02:42,980 exact same space. 38 00:02:43,020 --> 00:02:49,310 So I'm going to say against the segment segmented control it has a vertical spacing of 20 again. 39 00:02:49,470 --> 00:02:57,120 So that number and when been increasing to 20 and then I'm going to say it has a trailing space of once 40 00:02:57,120 --> 00:02:58,290 again 20. 41 00:02:58,290 --> 00:03:02,280 So as you can see in 20 is the measure I have for almost everything. 42 00:03:02,310 --> 00:03:05,940 Most margins are 20 in this in this application. 43 00:03:06,000 --> 00:03:14,110 Now by now our object or your view as a distance from the top from the left and from the right having 44 00:03:14,110 --> 00:03:19,200 that gap from left and right it means it's a it is already set. 45 00:03:19,200 --> 00:03:27,250 If that is the case I'm going to go ahead and say Give me a kind of strange aspect ratio which does 46 00:03:27,320 --> 00:03:27,860 this. 47 00:03:27,870 --> 00:03:35,250 I'm going to go in here double click on this one and say given that it's a vet is set by default because 48 00:03:35,250 --> 00:03:36,650 of the left and right. 49 00:03:36,810 --> 00:03:47,900 Say height or reversing say height equals Vitt you know 1 to 1 ratio 1 to 1 ratio. 50 00:03:48,060 --> 00:03:56,280 So it means Infeld went from left and right and make the height equivalent to that which is what we 51 00:03:56,280 --> 00:03:56,930 wanted. 52 00:03:56,970 --> 00:03:58,820 I automatically updates itself. 53 00:03:58,830 --> 00:04:02,100 So it's exactly placed where we wanted it to be. 54 00:04:02,100 --> 00:04:09,000 The next thing is these two labels label been a lot of them a little bit the time Laban Aponte I have 55 00:04:09,270 --> 00:04:16,290 a spelling mistake and it's number so I'm going to change that to show Minutes and also I'm going to 56 00:04:16,290 --> 00:04:22,350 say it's a bet is always set as don't know 200 for instance. 57 00:04:22,530 --> 00:04:26,330 So width and height and let's make the height 50. 58 00:04:26,430 --> 00:04:31,370 I like to use bigger numbers numbers that are more accurate and more precise. 59 00:04:31,500 --> 00:04:38,790 So I'm going to say there is a kind of strange phrase vet and there is a constant for its height and 60 00:04:38,820 --> 00:04:46,230 it is always at the vertical space of 20 from the game view. 61 00:04:46,950 --> 00:04:52,960 And it is always horizontally centered in the superb view. 62 00:04:52,980 --> 00:04:59,490 So we got that part taken care of and then we go to this last one the last one I want to have the same 63 00:04:59,960 --> 00:05:01,460 shin as the game view. 64 00:05:01,510 --> 00:05:04,440 When it comes to the left and the right margins. 65 00:05:04,480 --> 00:05:14,270 So I'm going to say a leading space of 20 I'm going to say it's frailing a space of a gain 20 and we 66 00:05:14,300 --> 00:05:17,700 to set it's height to be maybe 40. 67 00:05:17,740 --> 00:05:28,120 So it's always has a constrained height 40 and it is just spacing vertically is facing of 20 against 68 00:05:28,120 --> 00:05:32,080 the time and that's all we have to do. 69 00:05:32,110 --> 00:05:34,360 I apologize if this is a little bit boring. 70 00:05:34,360 --> 00:05:40,080 I personally don't really enjoy doing Konstanz maybe you do but it's quite necessary. 71 00:05:40,110 --> 00:05:46,480 And now that we have all of these we can simply go to any kind of device and everything will stay the 72 00:05:46,480 --> 00:05:47,550 way that we wanted it. 73 00:05:47,550 --> 00:05:55,210 So whether you're using IPART the largest one or the smallest one they all maintain the aspect ratio. 74 00:05:55,210 --> 00:06:01,810 This isn't obviously the best design of what you probably wanted to do was you want to make sure that 75 00:06:01,990 --> 00:06:08,280 this label or that button is essentially proportional to the height of the view. 76 00:06:08,380 --> 00:06:14,920 Because as you can imagine right now when I go to an iPad Pro A largest one will see a much wider bar 77 00:06:14,930 --> 00:06:18,910 then and it's thickness or is height essentially it stays intact. 78 00:06:19,120 --> 00:06:25,330 Maybe that wasn't what you wanted but these are the basics of it and you can just go around and design 79 00:06:25,330 --> 00:06:30,640 this stuff on your own or if you want it you could just you know even not have any of the constraints 80 00:06:30,970 --> 00:06:36,850 and just work on the functionality of these once it works you can decide about the looks of it and how 81 00:06:36,850 --> 00:06:39,280 you want to redesign them. 82 00:06:39,280 --> 00:06:43,600 For me however I'm not going to spend any more time on that and I'm going to assume that this is the 83 00:06:43,600 --> 00:06:47,220 interface that I have and I have to make outlet's of these. 84 00:06:47,220 --> 00:06:49,650 And once they make that up that's about it. 85 00:06:49,660 --> 00:06:55,130 I can actually start working with my with my code and the programming side of it. 86 00:06:55,300 --> 00:06:59,660 So let's go ahead to our system window and in the system. 87 00:06:59,700 --> 00:07:08,770 And when I go ahead and say I need these outlets one of them is called the actual thing is called Game 88 00:07:08,950 --> 00:07:09,680 view. 89 00:07:09,850 --> 00:07:15,100 So this is the you view that contains the actual pieces of my game. 90 00:07:15,190 --> 00:07:22,140 Then I have this one which is time label so it shows us time. 91 00:07:22,420 --> 00:07:32,290 I have this one which is game worn label which shows us when we win the game and then we have two functions. 92 00:07:32,380 --> 00:07:35,260 One of those functions is reset. 93 00:07:35,260 --> 00:07:43,510 So this one I'm going to control that I get here say reset action and then I have the last one which 94 00:07:43,510 --> 00:07:46,020 is the game mode action. 95 00:07:46,030 --> 00:07:49,600 So again I'm going that much zoom into here maybe it's better. 96 00:07:49,810 --> 00:07:57,500 I'm going to control right from here and say this is Game Mode action and that's about that. 97 00:07:57,550 --> 00:07:59,540 I have all of my outlets. 98 00:07:59,620 --> 00:08:02,760 Keep in mind I don't want this to be a surprise later on. 99 00:08:02,770 --> 00:08:05,160 Keep in mind that later on. 100 00:08:05,290 --> 00:08:11,920 And because of the advanced part of the scores I'm going to actually remove these resets Baden's constraints 101 00:08:12,160 --> 00:08:14,520 and I'm going to add a few more objects in here. 102 00:08:14,530 --> 00:08:18,370 I'm going to the game type and a game type segmented control. 103 00:08:18,520 --> 00:08:23,680 But since that is coming up in four further in the future I'm not going to do it right now. 104 00:08:23,770 --> 00:08:27,270 And this is what we need for for the time being. 105 00:08:27,430 --> 00:08:28,740 So that's it. 106 00:08:28,750 --> 00:08:35,600 With that in mind this move on to our next lesson where we begin working with the game objects actually.