1 00:00:08,290 --> 00:00:11,485 This is the continuation of the previous lecture, so 2 00:00:11,485 --> 00:00:16,880 we'll get all the way to actually drawing those teddy bear sprites in this lecture. 3 00:00:16,880 --> 00:00:17,730 So let's continue. 4 00:00:19,030 --> 00:00:23,530 Okay, so let's actually go down to draw and see if 5 00:00:24,850 --> 00:00:30,055 we can draw our teddy bear. 6 00:00:30,055 --> 00:00:35,090 So, I'll say draw teddy bears with the expectation 7 00:00:35,090 --> 00:00:39,570 that later on I'm going to draw all three of them. 8 00:00:39,570 --> 00:00:40,120 Okay. 9 00:00:40,120 --> 00:00:45,070 So it turns out that, the way we do this drawing thing is, 10 00:00:45,070 --> 00:00:50,020 we have the other field that we get for 11 00:00:50,020 --> 00:00:54,110 free, if you will, in our Game class, is the SpriteBatch. 12 00:00:54,110 --> 00:00:56,590 And the SpriteBatch is used to draw stuff. 13 00:00:58,190 --> 00:01:00,940 So the way we do this is we start or 14 00:01:00,940 --> 00:01:05,770 begin the SpriteBatch by calling its begin method. 15 00:01:07,410 --> 00:01:12,530 And if you look carefully at what this is telling us, what this IntelliSense is 16 00:01:12,530 --> 00:01:17,250 actually telling us is that all of the parameters or 17 00:01:17,250 --> 00:01:22,060 the arguments that we provide when we call the begin method are optional. 18 00:01:22,060 --> 00:01:26,600 So in fact, we have control over some of the characteristics of the way 19 00:01:26,600 --> 00:01:31,440 the SpriteBatch works, but we can simply provide no arguments and 20 00:01:31,440 --> 00:01:32,960 it will work in the default way. 21 00:01:34,180 --> 00:01:41,250 Well also, after we've drawn all our stuff, we'll do a spriteBatch.End. 22 00:01:41,250 --> 00:01:45,530 We'll call the end method of the SpriteBatch, so 23 00:01:45,530 --> 00:01:47,260 that it ends the SpriteBatch. 24 00:01:47,260 --> 00:01:51,110 And this is a really good time for you to go take an in-lecture quiz, so 25 00:01:51,110 --> 00:01:54,620 that you can guess if you have to. 26 00:01:54,620 --> 00:01:57,830 What, when stuff gets drawn. 27 00:01:59,610 --> 00:02:03,640 Okay, the answer is when we call sprite badge end. 28 00:02:03,640 --> 00:02:08,850 So it's a batch of sprites that get all sort of put into this set of things that 29 00:02:08,850 --> 00:02:13,820 should be drawn, and when we call sprite batch end is when we actually draw them. 30 00:02:13,820 --> 00:02:17,380 We could override this behavior if we choose to do so 31 00:02:17,380 --> 00:02:20,530 in our XNA game, but there's no need for us to do that right now. 32 00:02:21,540 --> 00:02:24,400 So I'm going to, for those of you who don't believe me, 33 00:02:24,400 --> 00:02:29,690 please believe me, I'm going to deliberately make a mistake here, 34 00:02:29,690 --> 00:02:34,070 because you may find that you make the same mistake. 35 00:02:34,070 --> 00:02:35,900 So I want to draw that first teddy bear. 36 00:02:40,995 --> 00:02:43,130 So I call the spriteBatch draw method. 37 00:02:44,530 --> 00:02:48,100 And it turns out that there are seven different ways that I can call 38 00:02:48,100 --> 00:02:52,650 the spriteBatch draw method, but I'm going to take the very first one here. 39 00:02:52,650 --> 00:02:57,190 So I start with a texture 2D and that's bear zero, 40 00:02:57,190 --> 00:03:00,370 that's the texture 2D that I had the content manager load for us. 41 00:03:01,950 --> 00:03:05,980 I've provided destination rectangle, which I've called Draw Rectangle zero. 42 00:03:07,260 --> 00:03:12,600 And I provide a color so I can, in fact, tint this if I choose to do so. 43 00:03:12,600 --> 00:03:16,810 But I want it to be drawn in it's actual original colors from image. 44 00:03:16,810 --> 00:03:18,360 So I'm going to pick white. 45 00:03:19,390 --> 00:03:24,670 I will tell you that I had a student who regularly gave me wheat tinted stuff 46 00:03:24,670 --> 00:03:30,630 because she got to the WH and hit tab, and it was always wheat colored, 47 00:03:30,630 --> 00:03:34,880 but white is what you want if you want it drawn in actual color. 48 00:03:34,880 --> 00:03:37,620 So at this point, you could reasonably expect 49 00:03:37,620 --> 00:03:42,040 that we're going to see something drawn when we run the program. 50 00:03:42,040 --> 00:03:47,230 And I press F5 And we don't see anything drawn, and we're very sad. 51 00:03:47,230 --> 00:03:52,080 But, that's what debugging is about and I was telling my wife earlier today, 52 00:03:52,080 --> 00:03:55,980 we were talking about debugging and I said well debugging is like solving a mystery. 53 00:03:55,980 --> 00:03:59,440 We gather some information and we form a hypothesis and 54 00:03:59,440 --> 00:04:00,920 we try to figure out what's going on. 55 00:04:00,920 --> 00:04:02,740 It's very exciting, and 56 00:04:02,740 --> 00:04:08,430 you better get excited like that because you'll debug okay, so how do we debug? 57 00:04:08,430 --> 00:04:11,630 Well, what I'm going to do, watch my cursor way over here. 58 00:04:13,550 --> 00:04:16,919 I left clicked in this gray column right here and I got this red ball. 59 00:04:18,320 --> 00:04:21,720 What this red ball is called is a break point. 60 00:04:21,720 --> 00:04:24,200 So when I run my code using F5, 61 00:04:24,200 --> 00:04:26,640 not ctrl+F5 because that just ignores break points. 62 00:04:26,640 --> 00:04:29,480 When I run my code using F5, it's going to 63 00:04:29,480 --> 00:04:33,290 execute the program until it gets to this break point, and then it will stop. 64 00:04:34,420 --> 00:04:38,140 And so that's good because then I can look at stuff 65 00:04:38,140 --> 00:04:40,030 to see if I can figure out what's going on. 66 00:04:41,060 --> 00:04:45,660 Okay, so I press F5 and it runs, and then it's got to the sprite point. 67 00:04:45,660 --> 00:04:48,110 And we can tell because it's all highlighted and 68 00:04:48,110 --> 00:04:50,910 the red ball has a little yellow arrow inside it. 69 00:04:50,910 --> 00:04:55,370 And so now we can look at some things and try to figure out what's going on. 70 00:04:55,370 --> 00:04:56,600 So the two possibilities, 71 00:04:56,600 --> 00:05:02,210 one much stronger than the other is that we don't have a sprite loaded. 72 00:05:02,210 --> 00:05:06,300 And we're pretty sure we do but we'll take a look to make sure or 73 00:05:06,300 --> 00:05:08,970 that our rectangle isn't the way that it should be. 74 00:05:09,990 --> 00:05:14,390 And it turns out that the problem is the rectangle isn't the way it should be. 75 00:05:15,460 --> 00:05:20,580 So we look at bear zero, I hover over it and you can see that there is 76 00:05:20,580 --> 00:05:26,290 in fact a texture 2D there, so okay that's great, it's not null, it got loaded. 77 00:05:26,290 --> 00:05:31,920 But when we look at the draw rectangle, look at x, y, width, and height. 78 00:05:33,110 --> 00:05:37,490 So we have this rectangle and this rectangle is a structure in XNA, and 79 00:05:37,490 --> 00:05:43,050 it has an x and a y location, the upper left corner of the rectangle, and 80 00:05:43,050 --> 00:05:49,500 it has a width, how many pixels wide it is, and it has a height, how high is it. 81 00:05:49,500 --> 00:05:51,290 So what we're saying is, 82 00:05:51,290 --> 00:05:57,050 we should draw this sprite inside a rectangle with zero width and zero height. 83 00:05:57,050 --> 00:06:00,770 And that's a really small rectangle 84 00:06:00,770 --> 00:06:05,590 there are no pixels to be drawn in width and no pixels to be drawn in height. 85 00:06:05,590 --> 00:06:10,180 So that's why we're not getting any output even though we expected it. 86 00:06:11,320 --> 00:06:15,900 So go to the in lecture quiz about the rectangle structure and then comeback so 87 00:06:15,900 --> 00:06:16,700 we can fix this. 88 00:06:20,790 --> 00:06:25,970 Great, so I've taken out the break point and I'm clicking debugging stop debugging. 89 00:06:27,190 --> 00:06:31,070 So we need to, up here where we loaded the teddy bear, 90 00:06:31,070 --> 00:06:33,560 we need to also build its draw rectangle. 91 00:06:34,560 --> 00:06:39,070 So DrawRectangle0 We're going to call a rectangle 92 00:06:39,070 --> 00:06:43,620 constructor just like we've seen as we construct instances of classes. 93 00:06:46,510 --> 00:06:50,560 Two overloads, I don't want to use this one because this just 94 00:06:50,560 --> 00:06:55,220 builds me a rectangle with zero, zero, zero, zero which is not helpful to me. 95 00:06:55,220 --> 00:06:58,430 If you click the down arrow, you can see that there's a different one. 96 00:06:59,480 --> 00:07:03,080 For which we can provide x, y, width, and height. 97 00:07:04,470 --> 00:07:08,130 So let's actually provide x, y. 98 00:07:08,130 --> 00:07:13,340 Let's say we'll put it at 150 and x, we'll put it at 100 and y. 99 00:07:15,490 --> 00:07:20,360 And for now, let's give it a width of a couple 100 and 100 00:07:20,360 --> 00:07:21,690 have a height of a couple hundred. 101 00:07:22,940 --> 00:07:26,490 So now we've created that rectangle so that when we run this thing, 102 00:07:26,490 --> 00:07:31,230 now we get a very scary output with a fat, 103 00:07:31,230 --> 00:07:34,520 big pixelated teddy bear that scares us. 104 00:07:35,600 --> 00:07:38,560 So in general, scaling is cool. 105 00:07:38,560 --> 00:07:41,590 If you want to like feed teddy bears and they get fat and 106 00:07:41,590 --> 00:07:44,260 fat until they explode which is a horrible, well, fun game, 107 00:07:46,120 --> 00:07:50,580 what we might want to do is draw our assets in their original size. 108 00:07:50,580 --> 00:07:57,620 And so instead of using 200 and 200 here If only there were a way, 109 00:07:57,620 --> 00:08:03,550 now that we've loaded this bear0 texture, if only there was a way, given a bear0 or 110 00:08:03,550 --> 00:08:08,350 a texture 2D object that we could find out that texture 2D's width and height. 111 00:08:08,350 --> 00:08:13,140 And of course there is, otherwise I wouldn't have built it up so much, so 112 00:08:13,140 --> 00:08:18,869 the bear0 dot, so object dot, let's access its property, let's access its width. 113 00:08:20,740 --> 00:08:25,530 And bear zero dot access it's height and so 114 00:08:25,530 --> 00:08:29,220 now when we F5 it draws that bear in it's actual size. 115 00:08:31,910 --> 00:08:37,310 So now that we've tested that to make sure that that works, I will 116 00:08:37,310 --> 00:08:42,540 add the rest of the teddy bears copying and 117 00:08:42,540 --> 00:08:46,280 pasting which you'll hear me complain about lots but 118 00:08:46,280 --> 00:08:48,810 we're going to do it right now because we don't know a better way. 119 00:08:53,050 --> 00:08:56,410 And you'll notice that we're getting some errors as we do this which will take 120 00:08:56,410 --> 00:08:57,100 care of soon. 121 00:09:00,160 --> 00:09:06,930 But basically I'm changing all this so it's going to handle all the teddy bears. 122 00:09:08,710 --> 00:09:11,270 Now, if I leave all these draw rectangles for 123 00:09:11,270 --> 00:09:15,860 the same x y, then they're all going to get drawn in the same place, so 124 00:09:15,860 --> 00:09:18,420 it will look like we only have one teddy bear. 125 00:09:18,420 --> 00:09:19,990 So let's change these a little bit. 126 00:09:22,990 --> 00:09:27,460 We'll just do a row of teddy bears, like so. 127 00:09:27,460 --> 00:09:32,516 Now these errors, if I hover over this, it says, the name of bear1 does not 128 00:09:32,516 --> 00:09:37,986 exist in the current context, which really means, I don't have a bear1 field. 129 00:09:42,852 --> 00:09:47,393 So I'll add those, I'll get it so it can compile and run again, 130 00:09:47,393 --> 00:09:51,599 I press F6 to compile, build succeeded, that's great, 131 00:09:51,599 --> 00:09:56,055 we're very excited, it compiled, and I press F5 to run it and 132 00:09:56,055 --> 00:10:01,630 I still only have one teddy bear, so I'm sad again However this is an easy fix. 133 00:10:02,670 --> 00:10:07,490 I did control end by the way to bang my way all the way down to the end here, 134 00:10:07,490 --> 00:10:13,940 just because we've only told it to draw one of the teddy bears. 135 00:10:13,940 --> 00:10:17,170 So let's tell it to draw all three of those teddy bears 136 00:10:24,000 --> 00:10:28,290 like so, when I run it we get that row of teddy bears that we hoped for. 137 00:10:29,350 --> 00:10:34,980 And you'll notice that I loaded all those teddy bears, or I actually 138 00:10:34,980 --> 00:10:37,970 loaded the content for the teddy bear and built the draw rectangles here in 139 00:10:37,970 --> 00:10:41,828 the load content method which is exactly where you would expect me to do it. 140 00:10:41,828 --> 00:10:49,770 So that's really it for today. 141 00:10:49,770 --> 00:10:50,490 So let's recap. 142 00:10:51,800 --> 00:10:55,200 We've learned about how to do some initial stuff. 143 00:10:55,200 --> 00:10:58,460 We've initialized by changing the resolution of our game. 144 00:10:58,460 --> 00:11:02,620 We loaded content so that we could bring in some texture 2D's. 145 00:11:02,620 --> 00:11:07,310 Some sprites for our 2D game and we did some drawing. 146 00:11:07,310 --> 00:11:11,200 And you know, that way we get to see some output from our game. 147 00:11:11,200 --> 00:11:16,110 The sad news is, we never used update, because our game world never changes. 148 00:11:16,110 --> 00:11:18,990 Which makes for a very boring game world. 149 00:11:18,990 --> 00:11:20,160 The good news is, 150 00:11:20,160 --> 00:11:24,550 that next lecture we'll actually have a game world that changes over time.