1 00:00:09,200 --> 00:00:14,495 Last time we started working on the module 13 doing textile and 2 00:00:14,495 --> 00:00:18,599 XNA so here's a reminder of the learning objectives for the module. 3 00:00:21,470 --> 00:00:24,410 We did the keyboard input last time so that 4 00:00:24,410 --> 00:00:27,500 we could use the keyboard to control the player. 5 00:00:27,500 --> 00:00:29,500 Of course we can use keyboard input for lots of 6 00:00:29,500 --> 00:00:32,260 other things as well, letting the player enter their gamer 7 00:00:32,260 --> 00:00:34,900 tag into a text box and so on, but we 8 00:00:34,900 --> 00:00:38,590 kept it pretty simple for what we're doing in this course. 9 00:00:38,590 --> 00:00:40,930 In this lecture we're going to talk about how 10 00:00:40,930 --> 00:00:45,180 we can provide text output in our XNA games. 11 00:00:45,180 --> 00:00:46,770 Obviously when we had a console 12 00:00:46,770 --> 00:00:51,660 application we could just use console.rightline to output stuff 13 00:00:51,660 --> 00:00:54,560 but in our XNA games we can't use that approach. 14 00:00:54,560 --> 00:00:57,160 We have to do something slightly more complicated 15 00:00:57,160 --> 00:00:59,430 and so that's what we're going to cover today. 16 00:01:00,540 --> 00:01:05,920 The first thing we need to know is to actually display text in our XNA 17 00:01:05,920 --> 00:01:11,330 game we need a special kind of content that we haven't used yet. 18 00:01:11,330 --> 00:01:12,150 So I'm 19 00:01:12,150 --> 00:01:19,110 going to go over to the content. Project in my solution that I 20 00:01:19,110 --> 00:01:24,500 obviously just blasted over to and opened up, and I'm going to add a new item. 21 00:01:25,580 --> 00:01:29,760 And when I say I want to add a new item, I get a number of different choices. 22 00:01:29,760 --> 00:01:35,310 I can add an XML file which can be really useful for saving. 23 00:01:35,310 --> 00:01:37,390 Level design information into XML 24 00:01:37,390 --> 00:01:40,240 files but we're not going to do that in this course. 25 00:01:40,240 --> 00:01:42,100 I could save an effect file. 26 00:01:42,100 --> 00:01:49,330 But I'm going to create a new SpriteFont. So a SpriteFont, and let me just call this 27 00:01:49,330 --> 00:01:49,760 [SOUND] 28 00:01:49,760 --> 00:01:50,390 Arial. 29 00:01:54,612 --> 00:02:00,200 A SpriteFont is a font that will get used within our game. 30 00:02:00,200 --> 00:02:06,810 In fact, what we do is, we specify a particular font name here, 31 00:02:06,810 --> 00:02:12,520 and this font needs to be installed on your computer so that when it's time to 32 00:02:12,520 --> 00:02:18,880 build, it can turn this SpriteFont into an XNB file. 33 00:02:18,880 --> 00:02:20,510 Which is compiled 34 00:02:20,510 --> 00:02:22,190 XNA content. 35 00:02:22,190 --> 00:02:26,670 If you're a MonoGame user, you're not going to be doing any of this. 36 00:02:26,670 --> 00:02:30,520 You can't add a SpriteFont, you can't build a SpriteFont. 37 00:02:30,520 --> 00:02:34,310 There's no content pipeline in MonoGame at this time. 38 00:02:34,310 --> 00:02:39,670 So for this particular lecture I will be providing you with a compiled XNB 39 00:02:39,670 --> 00:02:44,930 file for this SpriteFont we're building. But you should understand you can't do it. 40 00:02:44,930 --> 00:02:45,610 Right? You have 41 00:02:45,610 --> 00:02:48,190 to, you have to build a content pipeline 42 00:02:48,190 --> 00:02:51,930 some other way, at this point, within MonoGame. 43 00:02:53,230 --> 00:02:58,650 But if you're using Visual Studio and XNA, then you do what I'm showing you here. 44 00:02:58,650 --> 00:03:01,600 And you pick the font name, and you can pick a size. 45 00:03:01,600 --> 00:03:03,790 And you can do there's lots of stuff you can do. 46 00:03:03,790 --> 00:03:05,920 You can make 'em bold or italic. 47 00:03:05,920 --> 00:03:10,610 All kinds of things that you can do to specify what this font 48 00:03:10,610 --> 00:03:14,760 will look like when you display it in your XNA game. 49 00:03:14,760 --> 00:03:18,534 All I wanted to do is change it to Arial so I will Ctrl+s. 50 00:03:20,280 --> 00:03:22,500 And I'm going to actually build right now 51 00:03:22,500 --> 00:03:25,280 because this would be the point at which, if 52 00:03:25,280 --> 00:03:27,580 you said, you know, you had a misspelling, 53 00:03:27,580 --> 00:03:31,810 and you said Arialiosity or something like that, then. 54 00:03:31,810 --> 00:03:35,640 It would blow up because it can't build the font because it doesn't have it 55 00:03:35,640 --> 00:03:37,642 installed on your computer. 56 00:03:37,642 --> 00:03:43,480 Okay, so now I have this piece of content that I've built but I 57 00:03:43,480 --> 00:03:49,548 still need to, you know, have a variable that holds it and load it and so on. 58 00:03:49,548 --> 00:03:54,630 So I'm going to, just as before, I have some commented out stuff 59 00:03:54,630 --> 00:03:59,620 that I'm going to uncomment to sort of reveal our solution as we go. 60 00:03:59,620 --> 00:04:00,700 So the first thing that we 61 00:04:00,700 --> 00:04:05,800 will do is, uncomment this Sprite font field 62 00:04:06,960 --> 00:04:12,930 and I will also send you to an in-lecture quiz about. 63 00:04:12,930 --> 00:04:17,510 Wow, I don't want to give away the answer. So about content for fonts. 64 00:04:17,510 --> 00:04:26,100 So go take that in-lecture quiz. Okay, so I've got this SpriteFont 65 00:04:26,100 --> 00:04:28,770 object that was the right answer SpriteFont. 66 00:04:28,770 --> 00:04:33,480 I've got this SpriteFont variable or field that I've declared. 67 00:04:33,480 --> 00:04:36,510 And I want to come down here and I want to make sure I load it. 68 00:04:38,910 --> 00:04:41,230 So that I have that content loaded just like 69 00:04:41,230 --> 00:04:46,650 we've loaded texture 2Ds, just like we've loaded sound effects. 70 00:04:46,650 --> 00:04:48,420 This time of course, we're loading 71 00:04:48,420 --> 00:04:50,885 something different, we're loading a SpriteFont. 72 00:04:52,710 --> 00:04:56,240 At this point though, I'm not drawing anything. 73 00:04:56,240 --> 00:05:01,760 And so we should now add the rest of the code we need to draw stuff. 74 00:05:02,950 --> 00:05:04,420 So, I'll start 75 00:05:04,420 --> 00:05:09,100 by showing you a, a sub-optimal way to draw. 76 00:05:09,100 --> 00:05:10,810 And then we'll fix it. 77 00:05:10,810 --> 00:05:15,430 So, this is not the sub-optimal part. This is a good idea. 78 00:05:15,430 --> 00:05:21,360 So we're going to have some position at which we are going to draw the score. 79 00:05:22,600 --> 00:05:25,580 And at this point, that position will 80 00:05:25,580 --> 00:05:27,270 be WINDOW_WIDTH over 12, and WINDOW_HEIGHT over 12. 81 00:05:27,270 --> 00:05:29,550 And I shouldn't have said 82 00:05:29,550 --> 00:05:30,110 at this point. 83 00:05:30,110 --> 00:05:33,670 Throughout this entire game, that's where it's going to get drawn. 84 00:05:33,670 --> 00:05:37,330 So instead of using a draw_rectangle, For the text we're 85 00:05:37,330 --> 00:05:41,290 going to draw, we're going to tell it where to draw it. 86 00:05:41,290 --> 00:05:45,190 And, and XNA will take it from there when we go to draw it. 87 00:05:45,190 --> 00:05:46,940 So let's actually go to draw it. 88 00:05:48,900 --> 00:05:51,140 This will be less exciting because I can't actually score 89 00:05:51,140 --> 00:05:54,190 at this point, but at least I can draw a string. 90 00:05:55,290 --> 00:05:55,510 So 91 00:05:55,510 --> 00:06:01,100 I'm going to instead of just uncommenting that because this is the commented code 92 00:06:01,100 --> 00:06:05,395 is the better way to do it, lets say I decide to do this, 93 00:06:05,395 --> 00:06:12,030 [SOUND] 94 00:06:12,030 --> 00:06:16,830 so basically every time I'm here notice I'm doing this slightly differently. 95 00:06:16,830 --> 00:06:22,334 Instead of doing a SpriteBatch draw which was for texture 2D's I'm doing a 96 00:06:22,334 --> 00:06:28,890 SpriteBatch draw string which is for, not surprisingly, drawing strings. 97 00:06:28,890 --> 00:06:31,950 And I can provide it there are a bunch of overloads. 98 00:06:31,950 --> 00:06:37,080 I see I'm going to have to open up my declaration of the score variable, 99 00:06:37,080 --> 00:06:38,740 so I'll fix that in a moment. 100 00:06:38,740 --> 00:06:42,580 I have some overloads, but they're all going to require me to pass in 101 00:06:42,580 --> 00:06:48,260 the SpriteFont, because it can't draw it if it doesn't know what font to use. 102 00:06:48,260 --> 00:06:51,370 And then I pass it the string, then I pass it 103 00:06:51,370 --> 00:06:54,040 where I want it drawn, and then I pass it to color. 104 00:06:54,040 --> 00:06:58,230 In this particular overload of draw string just as SpriteBatch draw. 105 00:06:58,230 --> 00:07:00,545 Has a lot of overline, overloads. 106 00:07:00,545 --> 00:07:02,110 SpriteBatch draw string has 107 00:07:02,110 --> 00:07:04,450 a lot of overloads as well. All right. 108 00:07:04,450 --> 00:07:06,480 I'm going to get rid of this compilation error here. 109 00:07:08,170 --> 00:07:10,790 So I will go up to the top, and start adding a 110 00:07:10,790 --> 00:07:14,200 little bit of score support, we're not all the way there yet. 111 00:07:14,200 --> 00:07:15,010 So if I F6, 112 00:07:17,350 --> 00:07:18,950 I get a build succeeded. 113 00:07:18,950 --> 00:07:22,890 If I F5 you can see up here in the upper left hand 114 00:07:22,890 --> 00:07:25,785 corner it's hard for, because the mouse is invisible nor should it be 115 00:07:25,785 --> 00:07:29,030 because I'm not using the mouse in this game but you can see 116 00:07:29,030 --> 00:07:33,450 that its now displaying the score for me in the upper left hand corner. 117 00:07:34,700 --> 00:07:42,020 The reason I said this was sub-optimal is because I am creating, remember, 118 00:07:42,020 --> 00:07:45,730 because strings are immutable, down here in the draw 119 00:07:45,730 --> 00:07:50,390 method, I am creating a new string 60 times a 120 00:07:50,390 --> 00:07:53,190 second, and using it for a sixtieth of a 121 00:07:53,190 --> 00:07:56,200 second and throwing it away and creating an new one. 122 00:07:56,200 --> 00:07:58,520 And that's really not the kind of 123 00:07:58,520 --> 00:08:01,610 inefficiency that we should add to our code. 124 00:08:01,610 --> 00:08:05,490 So let's optimize that part and then we'll actually add some real scoring. 125 00:08:06,820 --> 00:08:07,480 So instead 126 00:08:07,480 --> 00:08:09,090 of doing it that way, I want a 127 00:08:09,090 --> 00:08:13,099 field called scoreString, way back up at the top. 128 00:08:17,510 --> 00:08:21,950 I want a field called scoreString that will hold the current score 129 00:08:21,950 --> 00:08:27,730 string and that string will only change when the player scores points. 130 00:08:27,730 --> 00:08:30,800 And that way we're not creating new strings 60 times a 131 00:08:30,800 --> 00:08:35,990 second, we're only creating new strings each time the player scores. 132 00:08:37,130 --> 00:08:42,530 When I did that, I discovered that here in load content I 133 00:08:42,530 --> 00:08:47,020 needed to initialize it, and of course now I get 134 00:08:47,020 --> 00:08:49,760 a compilation error because it says I don't know what this 135 00:08:49,760 --> 00:08:54,300 get score string thing is, because I need to come uncomment 136 00:08:54,300 --> 00:08:59,790 this private method that I wrote that gets the score string. 137 00:08:59,790 --> 00:09:04,570 So you pass in a score, and it returns a string that includes the prefix 138 00:09:12,660 --> 00:09:13,880 concantonated with the actual score. 139 00:09:13,880 --> 00:09:14,609 Let me Ctrl+Z a little bit there, there we go, concantonated with the actual score. 140 00:09:16,050 --> 00:09:19,790 I wrote this method because we'll see in a couple of 141 00:09:19,790 --> 00:09:23,280 moments that I need to do this multiple times in my code. 142 00:09:23,280 --> 00:09:24,930 And as soon as you start thinking copy 143 00:09:24,930 --> 00:09:28,890 and paste, stop yourself and think private method instead. 144 00:09:29,975 --> 00:09:32,380 Alright, so now when I F5, you're 145 00:09:32,380 --> 00:09:34,780 not going to see any difference in program behavior. 146 00:09:34,780 --> 00:09:37,700 It still looks exactly the same way it did before. 147 00:09:37,700 --> 00:09:40,970 This is an example of re-factoring to fix the 148 00:09:40,970 --> 00:09:45,440 quality of the code without actually changing its performance. 149 00:09:46,510 --> 00:09:49,570 We might have seen some performance hits later on if we had lots 150 00:09:49,570 --> 00:09:55,210 of objects and suddenly creating 60 new strings a second caused problems for us. 151 00:09:55,210 --> 00:09:59,770 So we just fixed it now and did it in a much more appropriate way. 152 00:09:59,770 --> 00:10:02,790 This idea, by the way, is very similar to when I said you 153 00:10:02,790 --> 00:10:05,030 shouldn't be creating a new draw rectangle. 154 00:10:05,030 --> 00:10:08,300 On every call to draw for the same exact reason. 155 00:10:08,300 --> 00:10:10,820 We don't want to create a whole bunch of extra objects that we 156 00:10:10,820 --> 00:10:15,530 use very, very briefly and then let the garbage collector go get 'em. 157 00:10:15,530 --> 00:10:17,340 Alright, so the only other thing I actually need 158 00:10:17,340 --> 00:10:19,400 in this game is to be able to score 159 00:10:20,420 --> 00:10:22,940 and so I'll uncomment these two lines of code 160 00:10:22,940 --> 00:10:26,038 so this is where the bear collides with the fish. 161 00:10:26,038 --> 00:10:28,240 So I'm going to add some 162 00:10:28,240 --> 00:10:31,610 score to my current score and this is the point 163 00:10:31,610 --> 00:10:35,710 at which I now need to go get a new string. 164 00:10:35,710 --> 00:10:39,810 And so I call that get scoreString method that I showed you moments ago. 165 00:10:41,170 --> 00:10:42,820 I need to uncomment. 166 00:10:43,910 --> 00:10:46,250 My bear score constant that I had commented 167 00:10:46,250 --> 00:10:49,503 out up to this point, now I can F6. 168 00:10:49,503 --> 00:10:53,370 Now I can F5 and we'll see that if I run into 169 00:10:53,370 --> 00:10:56,170 bears I actually get scores so now you know 170 00:10:56,170 --> 00:10:57,970 you can play the game and build up your 171 00:10:57,970 --> 00:11:00,280 score and try to get on the leader boards 172 00:11:00,280 --> 00:11:04,130 for this amazing almost commercial quality but not quite game. 173 00:11:06,040 --> 00:11:10,620 So what we didn't do was the other in-lecture quiz 174 00:11:10,620 --> 00:11:15,240 where you go tell me how you actually draw a string. 175 00:11:15,240 --> 00:11:16,500 So you should go do that now. 176 00:11:19,110 --> 00:11:20,830 And that's it for today. 177 00:11:20,830 --> 00:11:26,750 So, as a recap, we learned how we use SpriteFonts 178 00:11:26,750 --> 00:11:31,150 as content so that we can do XNA text output 179 00:11:31,150 --> 00:11:33,330 and we learned how to actually do that text output 180 00:11:33,330 --> 00:11:37,630 by calling the drawstring method on the sprite brat, SpriteBatch 181 00:11:37,630 --> 00:11:38,610 [LAUGH]. 182 00:11:38,610 --> 00:11:42,840 That's the end of this module and that's the end of all the 183 00:11:42,840 --> 00:11:47,540 formal modules in the course. There is one more week. 184 00:11:47,540 --> 00:11:54,650 And that week is for you to do the optional project, if you choose to do so. 185 00:11:54,650 --> 00:12:00,190 For you to study for, if you decide you want to, the final exam. 186 00:12:00,190 --> 00:12:02,640 And for you to take the final exam. 187 00:12:02,640 --> 00:12:03,470 So, 188 00:12:03,470 --> 00:12:06,800 even though there's no sort of official 189 00:12:06,800 --> 00:12:10,000 formal lectures with new material nor are there 190 00:12:10,000 --> 00:12:13,810 assignments due, you do, next week, need 191 00:12:13,810 --> 00:12:17,228 to do your peer evaluation of project increment 192 00:12:17,228 --> 00:12:21,050 five for everyone and I'll post some 193 00:12:21,050 --> 00:12:24,840 lectures talking about the optional project talking about 194 00:12:24,840 --> 00:12:29,360 sort of the core ideas that you should carry with you into the final exam. 195 00:12:29,360 --> 00:12:32,570 And closing out the course with some final thoughts.