Transcript Part 1
Hey guys, my name is Austin Gregory. And in this course, I’m going to teach you how to create a simple little multiple-choice quiz game where you can ask questions in different forms, from audio, images, or just simple text questions, and then you have a choice of answers ranging from two choices up to however many you can fit on your screen.
So I can continue a game from where I left off. It will take me to the set or the topic of questions that I made it to, whereas New Game will start me from the very beginning here. What I can see is my first question is an audio question. I can listen to the sound. (gentle music) Okay, that sounds like a flute. Go to the next question. What color are these flowers? Well, they’re not orange or black. I want to say they’re magenta. Then I have a nice little score screen here that says you had two questions, you got two right, so your score is 100%.
Now typically you would have more than two questions, and you’d probably get some wrong. But that’s just how this is going to work because I know the answers to these questions unfortunately. What country does this shape most represent? This is going to be Germany. It’s not Italy or France for sure, so that’s Germany. Which of these items is cheese? Now that could be a difficult question if I tried on this question. There’s a lot of cheese names that are confusing and unusual. But in this case, provolone, umbrella is obviously not. And there we go, back to the main menu, and I can continue from the last set that I opened up. So in between sets, we have a score screen, and then the last set we go back to the main menu.
Just a nice little system that will allow you to create whatever kind of quiz game you have in mind. My name is Austin Gregory, and I will see you in the first lesson.
Transcript Part 2
Hey guys, my name is Austin Gregory, and in this course we’re going to build a cool little quiz game that’s going to allow us to ask questions and provide optional answers where the player will then have to choose what is the correct answer for this question.
Now it’s pretty simple and pretty straight forward, but we’re gonna have basic questions that are just strings of questions, then we’re gonna have image questions that are gonna provide an image, and then an optional caption. So you have an image of a bird, the caption can say what is this bird? That kind of thing, and then we’re also gonna have audio clip questions where we can click a button to play an audio clip with a caption as well. And it’ll be like what is this instrument playing, or what animal makes this noise? And then you’re gonna have options to choose from. At the end of each question set or each topic set, or however you wanna organize your questions, you’ll see how easy that is to do once we get our system set up. You’re gonna get scored on how you did for that set of questions. So if there’s 10 questions and you got seven out of 10, you got a 70%, or a 70, or whatever kind of arbitrary rating system you want to add for your game, but in this case, it’s gonna be all pretty straight forward, and all pretty simple stuff.
So I wanna create a new project. I’m gonna call it Super Quiz, and I’m gonna use the latest version I have available to me, which is 2018.3.2, and I’m just gonna make sure that I just have it on 2D. It doesn’t really matter for this, but it’s just gonna be a UI game. There’s not gonna be any game graphics beyond just the interface. So it’s gonna be pretty simple stuff, and I’m gonna click Create Project. And while it’s doing that, I wanna show you that in this folder here, I have a couple bits of media. I have a picture that’s going to just be a field we can just use for a dummy question. And this is just a Wikimedia Commons image, and then I have an outline of a country just for an example of another image question, and then I have an audio clip here that’s just a flute. So what I wanna do in this first lesson is I wanna set up the UI for our quiz game. So what I wanna do in this first lesson is get started by setting up our UI for our quiz game. Let’s see if we can knock it all out in one quick lesson here.
So what I wanna do is create just a UI. Let’s create a UI panel object here. Now what this is gonna do for us is create a canvas object and an event system object, which we need to work with the Unity UI system. So I’m just gonna just lay out my quiz question and answer layout here. And that can just be a half and half 50-50 thing here, or we could do, I don’t know, whatever you’d like to do here, but I’m just gonna have a section for my question and then a section for my answers. And I don’t want this to have an image on it, necessarily. You could, if you would like to do that, but I just wanna just have the object there to help me lay out my game here. Now this isn’t gonna stretch. We’re not gonna do any fancy UI stuff. I’m just gonna make sure that it works. So I’m just gonna anchor this to the left side here just like that.
So now this is going to be where we can put our questions. Whatever the template may be, but we’re gonna start with a simple, just a string question. Just a text question. So we’re in this panel, I’m gonna create a UI TextMeshPro Text object. We wanna use TextMeshPro because it’s just better. Then I’m gonna just import the TMP essentials here. Which is going to give me all the stuff I need to use TextMeshPro. So we had this text. I’m just gonna center this up top a bit here. Then we can just stretch it out. Let’s see. We’ll just do something like that. It depends on what kind of questions you plan on asking here. I plan on my questions being pretty simple and straight forward. Just a sentence, but you may want to do some serious paragraphs. So you wanna set up your layout and your design to accommodate that, but in my case, this is where my question is going to go. Pretty cool? Let’s make it a question at least. Okay, I want to make sure that I have it centered. And I want to center it horizontally and vertically. Just like that, and we can increase the font size a bit here. You can also make it auto size so it fits in the text area that it has. So if you were to keep typing, for instance. This is cool too, it’ll resize to match that. Which is pretty cool, I guess.
So you probably wanna do that, in fact, and I was actually lining this up so that I could put something below it, but this is just the text question. So it doesn’t have to have anything below it there. So we’ll just do it just right in the center, and now off to the right here is where we’re gonna have our buttons that are gonna be the answers for the question. So if the question what color are elephants typically? You would have blue, green, gray, and purple, I don’t know, and then you would just click on gray. You’d get the answer correct, and move on. But even if you get the answer incorrect, you’ll still move on, and at the end you’ll just see that you got one incorrect. So to do that, what I wanna do is add another panel that’s going to go off to the right side of our question here. So just drag this off just like that. And again we’re just going to anchor this to the right. Now fancy UI stuff for this.
We’re keeping the UI very simple. We’re focusing more on the data and the interaction with that data. The storing of that data, and the displaying of that data, and we can just name these answers, question. Now I wanna be able to have how ever many answers I want for every question. So one could have true or false, one could have three different numbers as an option, one could have 10 different options. So it doesn’t really have to conform to four answers per question. It’s just a silly restriction. So we’re not gonna have that. So in order to accommodate for that we’re gonna have to make sure that we have a flexible system that can deal with how ever many buttons we throw in there. So to do that, I’m going to have on answers, first of all, let’s just throw a button in here so that we can see what it’s going to look like. So if I just throw a button in my answers panel here.
Now on answers, I’m gonna go add a component, and I wanna add, it already has it there. Vertical layout group. Now vertical, you know, up and down. We’re going to lay out or objects that are within this panel. We’re gonna stack them on top of each other, and we’re gonna make sure it fills the space that we have. So to do that, we’re gonna say child control size width. Which means gonna stretch to the width of the panel, and child control size height. Which means it’s gonna stretch to the height of the panel. Now that doesn’t really work if we have one option as an answer, but also one option doesn’t work for a question in a quiz game. So we’ll never have that issue. But if I were to duplicate the answer, now we have two. You see then we have two buttons, and they just divide the space evenly. Which is exactly what we want, but I can tell we’re gonna need some spacing in between there, so let’s add a little spacing. And I can also tell gonna add some padding around the side of this panel so we’re not just snug up against the corners. Maybe you want that. It’s kinda cool looking in fact, but for this we’re just gonna add some padding around the sides.
Cool, now if we added more buttons, you can see what happens there. As many buttons as you want. Now I wanna make sure that I take this text that’s in here, I wanna delete that text and I’m going to make sure then I add TextMeshPro Text. We wanna keep all of the text using TextMeshPro. It’s just sharper, has more options, it’s more efficient to use. It’s just better all around. Answer, and again we’re going to make sure it’s centered vertically and horizontally, and let’s take this button here and we’ll just change the color on it a little bit. I don’t know what we’d do with it. Just do something with it then, and on the answer text here, we could do, if we do auto size, that may work pretty good because we can have any size answer in there, and also we have options for auto size. So the minimum size could be 14. The maximum size could be 60. That would work pretty good. That way they can get really small, but it can also not get too big. Notice the size goes down there.
But I don’t like the margin around that. So if we were to look at what’s happening here, I can grab this yellow box and drag it in, and it’s gonna be my margin on the text element. If we go down to extra settings, we have margins, left, top, right, and bottom. I can just add margins all around, just like that, and now let’s try this again. There we go, now it’s not snug up against the button. Look in the game view here. The game view is in free aspect, and since our UI is a little, it’s not fancy like I was saying. We’re gonna make sure that we restrict everything to 16 by nine, and just for this example, and we see that, that causes an issue here, because of the size of this. So what we could do, is I know we said we weren’t gonna do anything too fancy, but I wanna make sure that we work at every size. Go to my canvas here and go to UI scale mode. I can set this to scale with screen size. Which means when my screen size changes, this also scales. I’m not gonna be completely static, but we have a couple things to do here.
I wanna make sure the width and the height is 50-50. The way that it affects the scaling, the width and the height both do it exactly, and the reference resolution I would like to be a bit more than what we’re looking at there. So maybe just 720 P, and that gives us a starting point so we can start scaling our objects to work with this. So I just sort of drag this in here, and then we’re gonna drag this over. And we can just make this fit. We should have done this before we did the layout, but sometimes you gotta go back and make a few changes, and that’s perfectly fine. So there we go. Now if I were to go into here and I were to go back to free aspect, it doesn’t completely break like it was before. Because we’re scaled down to match, but as long as we stay within 16 by nine resolution, we should be fine. If I were to pull the game view out here, it’s gonna stay within 16 by nine, and the last thing I wanna do for this lesson is I wanna create a prefab of our buttons that we have for answers, because we’re gonna be able to create those at run time for every answer that we have per question.
Pretty basic stuff. I’m gonna create a prefab folder really quick here. Prefab, and we’re going to put an answer button in there. Just gonna name this answer button. And I’m gonna delete these other buttons here. And I wanna call this, actually as our question prefab, as our question panel. Text, it’s gonna be called text question, and that’s because this is going to be the default question layout. We’re gonna have the audio layout, we’re gonna have the image layout, and we’re going to design those in the next lesson, guys.
So my name is Austin, and I will see you there.
Transcript Part 3
Hey guys, my name is Austin Gregory, and in this course, we’re gonna build a cool little quiz game that’s going to allow us to ask questions and provide optional answers, where the player will then have to choose what is the correct answer for this question.
Now it’s pretty simple and pretty straight forward. But we’re gonna have basic questions, that are just strings of questions. Then we’re gonna have image questions that are gonna provide an image and an optional caption. So you have an image of a bird. The caption can say, what is this bird? That kind of thing. And then we’re also gonna have audio clip questions, where we can click a button to play an audio clip with a caption as well. And it will be like, what is this instrument playing? Or, what animal makes this noise? And then you’re gonna have options to choose from at the end of each question set, or each topic set, or however you wanna organize your questions. You’ll see how easy that is to do once we get our system set up. You’re gonna get scored on how you did for that set of questions. So, if there’s 10 questions, and you got seven out of 10, you got a 70%, or a 70, or whatever kind of arbitrary rating system you want to add for your game.
But in this case, it’s gonna be all pretty straight forward, and all pretty simple stuff. So, I wanna create a new project. I wanna call it, Super Quiz. And I’m gonna use the latest version I have available to me, which is 2018.3.2. And I’m gonna make sure that I just have it on 2D. It doesn’t really matter for this, but it’s just gonna be a UI game. There’s not gonna be any game graphics beyond just the interface. So it’s gonna be pretty simple stuff. And I wanna click, create project. And while it’s doing that, I wanna show you that in this folder here, I have a couple bits of media. I have a picture that’s going to just be, a field. We can just use for a dummy question. And this is just a Wikimedia Commons image. And then I have an outline of a country, just for an example of another image question. And then I have an audio clip here, that’s just a flute. So, what I wanna do in this first lesson, is I wanna set up the UI for our quiz game.
So, what I wanna do in this first lesson is get started by setting up our UI for our quiz game. And we’ll see if we can knock it all out in one quick lesson here. So, what I wanna do, is create just a UI. Let’s create a UI panel object here. Now, what this is gonna do for us, is create a canvas object and an event system object, which we need to work with the UI system. So I’m gonna lay out my quiz question and answer layout here. Now, this could just be a half and half, 50/50 thing here, or we could do, I don’t know, whatever you’d like to do here. But I’m just gonna have a section for my questions and then a section for my answers. And I don’t want this to have an image on it, necessarily. You could, if you would like to do that, but I just wanna have the object there to help me lay out my game here. Now, this isn’t gonna stretch, we’re not gonna do any fancy UI stuff. I’m just gonna make sure that it works. So, I’m just gonna anchor this to the left side here. Just like that. So, now this is going to be where we can put our questions. Whatever the template may be.
We’re gonna start with a simple, just a string question. Just a, you know, text question. So, within this panel, I’m gonna create a UI Text Mesh Pro text object. We wanna use Text Mesh Pro because it’s just better. And I’m gonna just import the TMP Essentials here. Which is going to give me all the stuff I need to use Text Mesh Pro. So we have this text, I’m just gonna center this up top a bit here and we can just stretch it out. Let’s see. We’ll just do something like that. It depends on what kind of questions you plan on asking here. I plan on my questions to be pretty simple and straight forward. You know, just a sentence, but you may want to do some serious paragraphs so you wanna set up your layout and your design to accommodate that. But in my case, this is where my question is going to go. Pretty cool. Let’s make it a question at least. Okay, I want to make sure that I have it centered and I want to center it horizontally and vertically. Just like that. And we can increase the font size a bit here, you can also make it auto-size, so it fits in the text area that it has. So if you were to keep typing, for instance, this is cool too. It’ll resize to match that, which is pretty cool I guess so you probably want to do that, in fact.
And I was actually lining this up so that we could put something below it, but this is just the text question so it doesn’t have to have anything below it there. So we’ll just do it, just right in the center. And now off to the right here is where we’re gonna have our buttons that are gonna be the answers for the question. So if the question, you know, what color are elephants typically? You would have blue, green, gray and purple. I don’t know. (laughs) And then you would just click on gray and you get the answer correct and move on. But even if you get the answer incorrect you’ll still move on, and at the end, you’ll just see that you got one incorrect. So, to do that what I wanna do is add another panel, that’s going to go off to the right side of our question here. So just drag this off, just like that. And again, we’re just going to anchor this to the right, no fancy UI stuff for this. We’re keeping the UI very simple, we’re focusing more on the data and the interaction with that data.
The storing of that data and the displaying of that data. And we can just name these, Answers, Question. Now I wanna be able to have, however many answers I want for every question. So, one can have true or false, one can have three different numbers as an option, one can have 10 different options. So, it doesn’t really have to conform to four answers per question, that’s just a silly restriction so we’re not gonna have that. So, in order to accommodate for that, we’re gonna have to make sure that we have a flexible system that can deal with however many buttons that we can throw in there. So to do that, I’m going to have on Answers, first of all just throw a button in here so that we can see what it’s going to look like. So if I just throw a button in, my answers panel here. Now, on Answers, I wanna go Add a Component and I wanna add, it already has it there, Vertical Layout Group. Now, vertical, up and down.
We’re going to layout our objects that are within this panel. We’re gonna stack them on top of each other and we’re gonna make sure it fills the space that we have. So to do that, we’re gonna say Child Control Size Width, which means it’s gonna stretch to the width of the panel. And Child Control Size Height, which means it’s gonna stretch to the height of the panel. Now, that doesn’t really work if we have one option as an answer, but also, one option doesn’t work for a question in a quiz game. So, we’ll never have that issue, but if it were to duplicate the answer. Now we have two, you see then we have two buttons and they just divide the space evenly. Which is exactly what we want. But, I can tell we’re gonna need some spacing in between there. So let’s add a little spacing, and I can also tell I wanna add some padding around the side of this panel.
So, we’re not just snug up against the corners maybe you want that, it’s kinda cool looking in fact, but for this we’re just gonna add some padding around the sides. Cool, now if we add more buttons you can see what happens there. As many buttons as you want. Now I wanna make sure that when I take this text that’s in here, I wanna delete that text and I’m going to make sure then I add Text Mesh Pro Text, and we wanna keep all of the text using Text Mesh Pro, it’s just sharper, has more options, it’s more efficient to use, it’s just better all around. Answer, and again we’re going to make sure it’s centered vertically and horizontally. And let’s take this button here and we’ll just change the color on it a little bit. I don’t know what we’d do with it, just do something with it there. And, on the answer text here, we could do, if we do Auto Size that may work pretty good because we can have any size answer in there. And also, we have options for Auto Size.
So the minimum size could be like 14, the maximum size could be like, 60, that would work pretty good. That way it can get really small but it can also not get too big. Notice the size goes down there, but I don’t like the margin around that. So if we were to look at what’s happening here, I can grab this yellow box and drag it in, and that’s gonna be my margin on the text element. If we go down to Extra Settings, we have Margins, Left, Top, Right and Bottom. I can just add Margins all around, just like that, and now let’s try this again. There we go, now it’s not snug up against the button. Look in the Game View here. The Game View is in Free Aspect and since our UI is a little, you know, it’s not fancy like I was saying. We’re gonna make sure we restrict everything to 16 by nine and just for this example. And, we see that, that causes an issue here because of the size of this.
So what we could do, I know we said we weren’t going do anything too fancy, but I wanna make sure that we work at every size. Go to my Canvas here and go to UI Scale Mode. I can set this to Scale With Screen Size, which means when my screen size changes, this will also scale, it’s not gonna be completely static. But, we have a couple things to do here. I wanna make sure the width and the height is 50/50. The way that it affects the scaling is, the width and the height both do it exactly. And the Reference Resolution I would like to be a bit more than what we’re looking at there. So maybe just like 720p, and that gives us a starting point so that we can start scaling our objects to work with this. So I just wanna drag this in here, and I wanna drag this over, and we can just make this fit, we should’ve done this before we did the, the layout. But sometimes you gotta go back and make a few changes. And that’s perfectly fine.
So there we go, now, if I were to go into here and I were to go back to Free Aspect, it doesn’t completely break like it was before because we’re scaled down to match. But, as long as we stay within 16 by 9 resolution, we should be fine. If I were to pull the Game View out here, it’s going to stay within 16 by nine and the last thing I wanna do for this lesson is I wanna create a prefab of our buttons that we have for answers because we’re gonna be able to create those at runtime for every answer that we have per question.
Pretty basic stuff. So I’m gonna create a Prefab Folder really quick here. Prefab, and we’re going to put an answer button in there. Just gonna name this Answer Button, and I’m gonna delete these other buttons here. And I wanna call this, actually that’s our Question, Prefab, or that’s our Question panel. Text, it’s gonna be called Text Question, and that’s because this is going to be the default question layout.
We’re gonna have the audio layout, we’re gonna have the image layout and we’re going to design those in the next lesson guys. So, my name is Austin and I will see ya’ there.