Make an Educational Computer Game for Kids to Play, Video Game Making for Non-Techies & Beginners | Kate Pullen | Skillshare
Drawer
Search

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Make an Educational Computer Game for Kids to Play, Video Game Making for Non-Techies & Beginners

teacher avatar Kate Pullen

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

    • 1.

      Introduction

      1:59

    • 2.

      Let's Get Started!

      5:03

    • 3.

      How to Save & Open

      2:06

    • 4.

      Add images

      4:53

    • 5.

      Add Game Controls

      10:11

    • 6.

      Bells and Whistles (& the Bunny)

      13:59

    • 7.

      Add Sparkles

      3:49

    • 8.

      End of Game Graphics & Play Again Button

      12:31

    • 9.

      Start Page & Finishing Touches

      29:39

    • 10.

      Export & Put Online

      5:17

    • 11.

      Game Over :)

      2:20

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

140

Students

--

Projects

About This Class

In this class we will learn how to make a simple educational computer game for kids to play. The game we are making will help youngsters practice counting from 1 - 10, and it will also teach you some of the fundamentals of game making which can be developed further to create a whole range of different computer games.

I will teach you:

  • How to create a simple counting 1-10 2d game
  • How to put the game online to share with others (if you want)
  • Key game making skills which we can build on to make more games in future classes

For Complete Beginners

I have designed this class for complete beginners. We will be making a simple game (but one which we will develop further in the next class), which uses some key basic techniques.

Learn By Doing

I'm a visual learner and I learn best by doing. I have used the same approach in this class. You will follow along with me as we create this game.

Free Software & Graphics

We will be using the free trial version of Construct 3 to make this game. In fact, the trial version we will be using doesn't even require us to register on the platform (although we will do so in future classes).

ABOUT THE DOWNLOADS

I have provided the graphics and audio files for you to download and use in the game.

You will see a folder called 'Carrot Count Graphics'. This contains the graphics & audio.

You will also see a folder called 'carrot count source'. This is a c3p file (this will open the game in Construct 3, and this will mean you can check my code against yours if something isn't working correctly.

TO DO THIS CLASS YOU WILL REQUIRE

Other than a enthusiasm for learning new things, all you require to take this class is:

  • A computer with internet access
  • A cloud storage service such as Dropbox or Google Drive (optional)
  • The folder of game assets which I have provided
  • A couple of hours split over as many sessions as you are comfortable with

I hope you enjoy learning to make this simple educational computer game and in the next class we will develop the game we've made further and introduce some different game play and objects.

Meet Your Teacher

Teacher Profile Image

Kate Pullen

Teacher
Level: Beginner

Class Ratings

Expectations Met?
    Exceeded!
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Introduction: Welcome to the first of a series of tutorials looking at how to make educational computer games for children to play. And I should subtitle this the non-game make his guide to game making. This is a class for non-tech ECE who would like to learn how to make some simple and fun educational games for kids. Don't worry, we're not going to be learning how to make the next fortnight and that you don't need super technical skills to be able to join in this course. Making your own educational games is fun and rewarding, whether it's for your own kids, for the classroom, for homeschooling to share with others or even to sell. And best of all, simple educational games are not difficult to make and can be developed and a whole host of different ways. When we make our educational games for kids, we don't need to worry about them finding inappropriate content or inotrope it. Protrusive ads. We can create sorts of games that we want them to play. We will be using easy to use and free tools. And again, making platform that we're using, which is construct three, works in your browser. So there's no huge game engine files to download and install. And when we're finished, I'll show you how you can put the finished game online to share with others, again, for free. I've also provided the graphics and the audio you will require with the aim of making this a great no cost way to try your hand at game making. This is a learn by doing class. You will follow along as we make this simple counting game and learn some key basic game making skills, as well as following along, you can download the source file. Should you want to take a look at the finished vowels? The game we're making is ideal to help young ones practice counting from one to 10. However, importantly, I have designed this game specifically to teach you some of the foundation skills that we need to make simple games which we can use to build on and create more complex games later. I hope you enjoy the course. 2. Let's Get Started!: This is the game that we're going to make. It's a simple counting game for children, and it's called carrot gangs. And this is how it works. First place to start. And we see a row of carrots. And when we click on a number, the bunny jumped to that number. And we hear a voice saying the number. Paul. And the number at the bottom here changes according to the carrot that the bungee jump soon. So in this tutorial, we're going to learn how to create this game from scratch using free software. And I've provided all the graphics for you. We will learn how to create simple animations, will learn the foundations of gameplay. And with the techniques and skills that you learn in this tutorial, we'll be able to go on in future tutorials to make different rain, different types of educational games in a variety of styles. So this is the game making platform that we're going to use. It's called Construct three, and it's a really good 2D game making engine. And it's suitable for beginners as well as more advanced game makers. And it's a great way to actually learn the basics of gang making. Another good thing about construct theory is that it has a free level. And even better than that, we don't even need to register to start using it. So let's go ahead, go to construct.net. And then if we click on Try it now. And there's details of the trial that we're using. And then if we click on Launch nine, you'll see that the game editor opens up in a new window. Now another feature of constructor is it's actually browser-based, so we don't need to worry about downloading and installing any software on our computer. One of the things to notice when we're using the free edition. In this instance, we're using the free edition and were not registered that the number of events that we can use to make our game a limited. So as we haven't registered on the site, were limited to 25 events, though I've designed this game, so it falls in within the free limits, so we don't need to worry there. If we actually sign up and verify your e-mail, we have up to 50 events, which gives us more flexibility again. And then there's number painful plans which actually opened up everything to us. But for today, we've got everything that we want within this free plan. So the very first thing that we need to do now is to create a new project. So if we click on New Project, give the project a name, I'm calling it character count. And we'll leave it so it set at landscape 16 by 9. The viewport size should be 1920 by 1080. And we'll leave it so it set at landscape and Event sheet. We can change these, these details later when the game, if we want to, but got it set up now. So click on Create. And this is the editor that we will be using to create our game. So let's just talk a little about, a little bit about what we're actually seeing here. On the right-hand side, we're seeing the project details. So this is all the different objects and elements that make up the project done at the bottom here we've got layers and that we will be using two layers to make this game, but we'll set up the second layer later on. And then on the left-hand side is the Properties panel. And this is where it gives you details about what's actually happening within each of the objects. Now, if we zoom out a bit so we can actually see more of what's going on. On the page. You will see that we have a gray dotted line along here. And then we have space outside to the gray dotted line. And the reason for this is because we could make a game where we scroll from side-to-side, but we're not going to be working again that scrolls from side to side. The viewport acts as a window. So we want the viewports and the game layout to be the same size. So first of all, if we go and click on carrot count at the top here. And then if we look at the properties panel, you'll see that we've set the viewport size to 1920 by 1080, which is what we want. So now we need to change the layout, which is the bit that's outside the gray dotted line to the same size. So if we click on layout one, you'll see at the moment the layout size is, is twice as big as the viewport size. So if we just change this to 19, 20, and 1080. And now our layout is exactly the same size as the viewport size. 3. How to Save & Open: Before we go any further, let's take a minute to talk about how to open and save files in construct rain. If we go to menu project and then save, as you'll see, we have a number of options here. We can Cloud Save or we can say for single file, these are the two main ones that we're looking at. Cloud Save. This is the option that I personally use and this allows me to save the project to Google Drive or Dropbox. And because construct three is browser-based and we can open it on any device, it means that I can open it, for example, on my tablet. If I want to have a look at the project on my tablet, it means I don't need to worry about transferring files around. The other option is saved as a single file, and this will save a dot cpp file to your computer. And then as you go through the project that we can continue to save it and it will update. And when you want to open it, that will be the file that you open. Now, when it comes to opening a file, Let's close this moment. So project, close project. If we go to menu, project open and then we've got open a recent file, Cloud open. So if you've saved to something like Dropbox or Google Drive, this is where you will click to open the file there, or open a local file, which is the file that you have downloaded to your computer. Now, I provided a source file, which is the complete project with the different events in it, which you can open and compare with yours as you go along, if you like. So to open that, that's the case of clicking on open local file. Go to where you have saved the file that you download it and just double-click on that. And that will open up in the window for you. So that's all there is to saving and opening files and remember to click on there. It'll save icon up here as we go through the project to make sure that you save everything. 4. Add images: So let's start creating. The first thing that we'll do is bring in the background image. Now, there's a number of ways that we can go about creating images within construct ring. And one of the easiest is just to simply drag in the image from a folder on your computer. So if you've opened the folder that I've provided with the game graphics, if you've got that open on your computer, look for the background image and just drag that into place. And you'll see that it's created the image on the right-hand side in the project section and object types, it will, when we import an image this way, it will automatically bring in the name of the file. So if the file name doesn't mean anything to you and if it's not a, you know, if it's just a jumble of numbers or something, if you click on the text here, you can actually rename it to something that is more meaningful. Next, we're bringing the carrots. And to do that, we'll do the same ways we bought in the background. So if we go to the folder with the character images in it, select the carrots 1 to 10, and drag them Onto the layouts. We've got a carrot, so we now need to duplicate this. So we've got 10 carrots on the page. So to do that, we can either right-click on the carrots, make sure it's selected, and click Copy and then Paste. Or we could use keyboard shortcut, which is Control C and then Control V, and then click to create a new carrots. So we need ten carats on the page. So I'm just going to quickly now go through and put in the rest of the carrots. Okay, so I've got my 10 carrots in place, but you'll see that they all say number one, which of course isn't what we want. So let's go to the carrots object that you'll see under object heights on the right-hand side and double-click on carrots. And here you see the different sequences that make up the carrots image. We've got one and then we've got 10. Well obviously we don't want that. So if we just click on the number 10 carrots, we can drag that into the correct position. It's a bit fiddly to do. Let's try again. So now the carrots are in the correct order. So if we just close this window down, we don't need to save when we're in the image editor. So we can just close this window down. So what we have is we have an object with ten different frames, and each frame is a different numbers we just saw. So if we now click on a carrots and go to the Properties panel on the left-hand side, we can actually see the initial frame number. So here, the initial frame number is 0. And as we saw when we looked at the carrots in an image editor, number 1, 0, frame count number 2, frame number one. So we need to go through and change the frame number of these carriers. So initial frame for this one would be number 2. Click on the next carrots. Like that, number 3. Make this one number 4. Initial frame. I'll quickly go through now and change these so that they're showing the correct frame number. So here we have our carrots now correct numbered one through 10. So let's preview this and see if it is correct. To preview. Click on this little Play button at the top here. So click on preview. And you say, or varchar, suggest to entertain. Now why is it done that? The reason why it's done that, let's close this window, is because if we click on the carrots object, you'll see that it's got animation properties and it's got a speed of five. So the game thinks that we're actually animating this carrots. And it's been trying to present us with an animation, but we actually want the carrots to not move. We don't want anything to happen. So we're going to change the speed to 0. So now if we play, you've seen the numbers stay where they are. There's no animations that have taken place, so that's good. So in the next video, we'll look at adding touch controls so we can actually start making things happen within the game. 5. Add Game Controls: Now we're going to add the touch control. The touch is another object. So to add an object to the game, if we right-click on the layout, anywhere on the layouts, right-click, Insert new object. And we're looking for touch because there's so many different options that we have here. The quickest way to find an object type is to start typing in and then double-click to add it. So we've now added if we look on the property on the project sorry, on the project section on the right-hand side, you'll see that we've added the touch object. We'll also add the audio objects, and this is what we'll play the numbers as we commence with the game. So Insert new object, and this time we're looking for audio. I would like that. We'll also add sound to the game name. So if we scroll down the menu on the project panel where it says signs, if we click on signs, right-click and import signs, then import audio. We've got the audio files in the folder which you've got and have downloaded and we'll download. It's all of these, including the fanfare. So we've got the 10 different numbers and we've got the fanfare file and click to add things. It's processing the files. And then if we click Import, you'll see that those have now appeared under the same section here on the right-hand side. So we've got our touch control, we've got our audio, we've got our same files. So now it's time to actually make something start happening. Before we go any further, let's just click to save. So click on the little save icon and the game is saving. Right up to now, we've been working on the layouts. So that's, you could call it a stage. That's actually what the game looks like. We now want to go to the event sheets. And this is where we add the events to the game, which is actually what makes things happen. So click on event sheets and it's currently open. We're going to add an event. So if we click on event, an event is made of two parts. The first part is the condition. So for example, we will be telling it that when a character is touched, we want something to happen. So the first part of the event is the condition. So in this instance, It's going to be a touch event. So if we double-click on touch and we want to tell the game that when an object is tapped, when an object is touched. So we're clicking on untap object next. And we want it to happen when the carrot is clicked on. So we double-click on the carrots and we add that. So now we're saying to the game, when the carrot is tapped or touched, let's add an action just to test this for now. We want the carrot that set an angle of 25. It really doesn't matter. This just for test purpose. Now let's go to Play and see what happens. So we click on carrot and it changes angle. So that's looking good so far. So we've said that when a character is touched, we want the angle to change. But let's just look at that again. At the moment. The carrots changes, angle. It randomly, that there's nothing that tells it that it's got to be clicked in sequence. So we actually want children to use this game to learn into practice, to count in order. So we want them to be able to click 12345 and knots click randomly on the carrots. So if we close this down, this is where we need to introduce something called a global variable. Now a global variable is simply something that holds a piece of information. And in this instance, it's holding the number of the carrot that we want somebody to click. So if we right-click and add a global variable, we're going to call the global variable g count, because that's what we're going to use it for. We want it to be a number, that we have some choices here, but we want it to be a number. And we'll just press Okay. So now when a character is count it, we actually want this global variable to count the number of carrots that had been clicked. So if we add an action here, system, and if we go down to where it says global and local variables, you see that we have an add to option. Click on that. And we're saying that every time a character is counted, we want one to be added to this global variable. So we'll use this to make sure that the carrots are clicked in sequence. And that we're going to add another condition here, which will check that the number of the carrots is the same as the number of the global variable here. So to do that, if we right-click on touch, adds another condition. We want this to be conditioned based on the carrots. So double-click on carrots. And if we look here, we can actually ask the game to compare the frame with something else. So this is what we want. We want to make sure that the frame number is the same as the global variable count number. So if we double-click on that and we're saying that we want compare frame. We want the frame number to be the same as g count. So when the carrots is clicked, if the carrot number is the same as a global variable, g count number, then the angle is changed to 25 degrees and the system adds one onto g count. So that will keep progressing as the different currents are counted. So let's see how that works. I'm going to press on the preview 1, 2, and nothing happens if I try to click out of order. So that's all working correctly. Global variables, it sounds a bit confusing now, but they're actually a really, really useful feature to help us manage our games. So I'm going to press Save so that we've got that saved. And let's add the audio files at this stage. So that's another action that we want to happen when the carrots is touched. So let's click Add action. This time we want to select audio. We have a number of different options here. We want to select the play by name. So play audio by name. It's going to play audio from the same section, which is correct. And we want to add the name of the file. We're also going to use the g count variable to ensure that the correct file is played. So one thing that we need to do now is to make the audio filename so automatically changes as the G count number changes. So to do this in-between the quotation marks here, we'll put a 0 because we need to follow the structure of the filename that we can see here, which is 0, 1, 0, 2, 0, 3, and then dash S. So we've got 0. And then we're going to add an AND which appends a number. And now we're going to put g count. And then we're going to, I'm just gonna put a space. And then I'm going to put, and again because we want to append the dash S. So at the dash, oops, we put these within quotation marks as well. So open quotation mark, dash capital S, close quotation mark. So this is replicating the numbers that we see in the filenames here. So 0, Jie count. So say gee, count is 11, dash S and done. So I'm going to click done. And now let's play it. And hopefully that will hear a little chimp monkey noise. Monkey voice, sorry, reading out the numbers as we go through. So let's see how this goes. Okay, so if we close that down, Let's save that. And in the next video, we'll look at adding a few bells and whistles as what is the bunny to the game? 6. Bells and Whistles (& the Bunny): Before we add the rabbit to the game, we're going to change the way that the carrot behaves. At the moment. We've set it so that when the character is clicked, the carrots changes its angle to 25 degrees. We're going to change this so that it does something a little bit different. So if we make sure that the character is selected in the project panel and then head over to the Properties panel on the left-hand side. And you'll see here that we have something called behaviours. And behaviours do just that. They changed the way the object behaves. Let's click on that and add a new behavior. And you'll see we have a variety of different behaviors that we can add to our object. We're looking for something called tween. So it's the same as it is when we add a new object, it's quicker to actually start typing it in and select from here. So if we double-click to select tween, and that's now added to our object. Tween is a form of animation and it tweens and object between two states. So for example, that it can tween an object between 100% opacity and 0 or positive, or it could tween An object, move it between two points on the page. Let's close that down and let's put this into practice. Let's delete the carrots action that we've got at the moment. So right-click and delete, and then add an action carrot. We're looking for tween. We're going to tween one property. We're going to select Opacity. And when it's clicked, we want it to become more transparent. So let's change this to 50. 50. So that'll be 50 percent opacity. And we want it to take, let's say 2.5th to do that. So that's 2.5th. And we want it to go partly transparent and then back to full capacity again. So we want it to ping-pong. So we will select Yes here and it will ping-pong from full transparency, full opacity, sorry, slightly transparent and back again. Let's have a look at that in practice. It's telling me this is another good thing about construct away. It won't let you put in commands that don't make sense. And I forgotten to put a 0 in front of the half a seconds. So advise me of my mistake. So 0.5 done. And now let's press Play. And we can see that the carrot, it's got a nice little animation going. Every time it's clicked. Let's bring in the rabbits will do that in exactly the same way as we did before. So if we go to the layout sheets and open the folder with the graphics, and we've got bunny. So let's open that. We'll bring in the bunny graphics, but not the one of him blinking. So highlight the ones we want to bring in and drag it into position at the moment. Don't worry about where he goes because we actually just want to make sure that the animation is working correctly on them. So let's have a look at the image editor for the bunny. We've got our different images here. And unlike the carrots, we actually do want animation to take place here, and we want him to move slightly as the game goes through. So let's change the speed here to seven. And we do want it to loop. We want the animation to continue. And we wanted to ping-pong, which means we want it to go forward and then back for the sequence of the animation to run forward and then back. And then let's close that. I'm going to save before I go any further. And then let's see what the rabbit looks like. So he's got a little bit of movement going on there. And I'm quite happy with the speed. If I wanted him to be faster or slower, I would change that number in the image editor and change that from Seven to something else. If I wanted that to be different, we want the rabbits to move across the carrots. So I'm going to just change his size slightly. So that's just a case of grabbing one of the handles and changing the size of him. And then we want him to actually start the game off of the layouts. We want him to actually jump across to the number one. We're number one is clicked. So we want to add a behavior to the wrap-up that actually moves him. So let's make sure that the rabbit object is selected. If we go to behaviors, add a new behavior. And that you'll see we've actually got a behavior called move to. So if we type in move, there's the move to behavior. So now we can program that so that the rabbit moves to the carrots that has just been touched or tapped. So we'll go back to the event sheet and add an action. And this is an action that we want to take place on the bunny. Let's look for move. Moved to position. Double-click on that. So we want the rabbit to move to the place that has just been tapped. So if someone is tapped on carrot number three, we want the bunny to move to carrot number 3 to where it has just been touched. So let's put in touch dot x and touch dot y. Oops. Okay. And that's telling the rabbit to move to the place that was last touched. So let's, I'm just going to move this up to the top. And let's press Play and see how that works. Okay, well, he's moving to the right place, but he's obscuring the number. And I don't want him to do that. I want the young ones when they're playing this game to be able to see the number that is being clicked. So let's close that down. Let's double-click on this to open it up. So at the moment, the y position, which goes up and down the page. So he's going to where it's just been touched. I want him to go to, let's say, 200 pixels above that touch point. So in that case, I want to put in minus 2000 is the top of the page. 1080 is the bottom of the page. So if we put in touch minus a figure, it will go above where something has been touched, touch plus a figure that will go below. So let's put in minus 200. This is going to be sort of trial and error until we have worked out the number that we want to make it look right, so let's try this. Okay, it's guessing that but it's not perfect. So I'm going to change that to 300. And let's play this. Well right now he's hovering above the number. So the youngsters can actually see the number. As you can see as he's going through, he's going off at an angle sometimes not. I quite like that. However, if you'd actually prefer for him to be going well, so he's always upright. We can actually change that. Three. What we will do if you want, you can skip this step if you'd like. I'm going at an angle. We're going to add a new event. And we're going to add an event which says is a system events tick. We want something to happen. Every tick and a tick is a fraction of a second. So constantly we want the rabbit to be put up rights. We don't want him to fall at an angle as we've seen. So if we click on every tick, adds an action bunny and we've got set angle. So set angle to 00 is his stock position. Let's click Done. So now every tick, every fraction of a second through the game, the bunnies position is going to be set to upright. And now the bunnies, that price as he moves through the different Carol's. Okay, so let's close that down. The next thing that we're going to do is add a blink to the bunny, a blinking animation to the bunny, so he blinks randomly through the game. So to do this, we need to open the image editor. So if we double-click on the bunny object and we need to add a new animation. The first thing that we'll do is change the name of this. To the first one to idle. And then if we right-click and add Alana, add an animation and change this to blink to add a new image. If we go to the icon second in on the left, click on that and select the blinking bunny, the blink bunny. And we'll bring him in. We'll leave the speed to 5 because we don't want to set it to 0, because we do want the game to believe it is an animation even though it's only one frame. So we can close this. And then if we add an event, we're going to tell the system that we want the system to choose the frequency that the bunny blinks. So system every, because we're going to get its Jews every however many seconds. So if we type in, choose open bracket 0, no, not 0, 1, 2, or 3, we're going to let it choose to change the animation so it blinks every 12 or three seconds, done and add an animation to the bunny. So we select bunny, we set animation and that we want to set the animation to blink. So in between the quotation marks, type in the name of the animation, and that's got to be exactly the same as we typed it in the object editor. So if we capitalize that, we must capitalize it, etc. So this is the same done. Now let's press Play and see how this looks. Okay, well, it's, it's worked in so much disease blinking, but he's actually just doing one long blink, which isn't what we wanted. So now we want to say when that animation is finished, we want something else to happen. So add an event, select bunny animations on finished. So when any animation has finished, he's only got the one. So we'll just select this. We select him again and we want to set the animation back to idle. So once he's blinked, we want to go back to the idle animation. So in-between the quotation marks, we'll type in idle and done. And let's have a look and see how this is playing. So we can see now that the bunny is blinking and it's just got a bit of random blinking going on there. So to me that looks fine. So I'm going to close this down and I'm going to save. So I mentioned that we were going to add some sparkle to our game, and that will do that in the next video. 7. Add Sparkles: We're going to add some sparkle to our project, and we're going to do this using a feature called particles. So to do this, we need to head over to the layout, right-click and insert new object. And we're looking for the particles objects. So if we start typing that in, here we go with particles. If we now click somewhere on the layouts, it will open up the image editor. And I'm going to use white, but you could use the color palette to create any color. And I'm going to create little circles. I'm going to draw three or four circles within this square here. That will, that will do. And I'm going to close that. I'm going to move this dang. I have sub-sites. And if we look in the properties panel, we've got particle selected. You'll see that we're looking at particles properties. And you'll see here we have a number of settings. So the spray cone at the moment is set to 60. So 60 degrees, I'm going to set it to 350. The rate is 50 and going to change it to 80. It's a continuous spray. We don't want to continue a spray. We just want a one-shot. We want when the carrot is clicked, we just want a little puff of, of sparkle. So we're going to select one shot. And the speed and the size will change the effect of it. So we'll come back and we'll tweak these later. We'll go back to the event sheet and actually make the sparkles happen. So we go to the event sheets and what we want is when the carrot is collected, is collected. So when the carrot is tapped, we want the particles to appear. So we're going to add an action. We want the carrots to create the sparkles. So we're going to click on carrots and we're going to look for sport. We want the carrot to spawn another object. And in this instance we wanted to spawn the particles. So double-click to add that. We're looking for particles. We want it to happen layer one image point exactly as that is. And I'll just click Done. Now if we play, we'll see what actually happens. And there's our sparkles. Paul. Now, that looks okay. Maybe I might want them a bit bigger and maybe I want to add some randomization in there. So I'm going to close that down again to change the size to 40. I'm going to change the speed to 300s. And I'm going to change the speed randomizer to a 100 and the growth rate to a 100. This is the sort of thing that you can play around with and see what sort of effect you like. And it is sort of trial and error. So let's have a go and see how that works. And I like that. So I'm going to keep that as it is and save. In the next video, we're going to look at adding into play graphics to the game. 8. End of Game Graphics & Play Again Button: In this video, we're going to add end of play graphics to the game. We don't want the player to get through to the end of the game and for it just to stop and have them not to be able to do anything. We want to congratulate them for finishing and give them the option to replay the game. So to do that, we'll head over to the layout again and we'll add the image is the same way as we've heard images up to now. So we will drag the images in from the image folder. I've got a play again image that we're going to use. And there's also a play button that will use that starts with the play again image. We want this to drop down. When the player hits the 10th carrot. We want it to come to about this position. And this position. We know that center on the x coordinates That's going width wise is 960. So we'll set that to 960. Oops, click to highlight it again. And we'll just make this 390 so it's easy to remember. So we want the graphic to appear at 916 across and 390 down when the player gets to the 10th carrots. So I'm going to move this now. So it can't be seen when it starts. Let's just check that it's halfway through the page again. So change this to 916. Okay. And what we'll do before we go any further is we'll add the tween behavior to this. So add new behavior tween. And if we go to the event sheets, going to add an event system. The way this would work in the game is when the player gets two carrot number 10. So that's the counting variable. G count will be number 10. This drop-down text will appear. However, because we're testing it, we don't want to have to go through click, click, click, click, click all the different carrots to get to it to test. So we're going to test it by using g count to, for example. So we're going to compare the variable. We want the system to do this action when g is equal to two. We must remember to change it to 10 when the games ready to be played. But this is for testing. So in GKE is equal to 2. We want the end text to twin. We've set the tween up. We want the y to go to 390. And let's say we wanted to take a second to get there Done. And let's have a look and see what this looks like in action. Two. And there's our player game. That was quite slow, it coming down. So let's change this to nought 0.5. And it happened a bit quickly that we didn't get a chance to actually realize that we had done that successfully, that the last character had been clicked successfully. So we'll actually make this happen after a delay. So we're going to wait. So wait for 1 second. Sounds good to me. I'm not going to drag that up above the text action. We're now saying that when g count equals two, we're going to wait one seconds. And then the text is going to come down hopefully a bit quicker than it did last time. So let's press Play. So 1, 2, and play graphic. That looks good. Okay, I'm going to save that. And we want now to do a similar thing with the Start button. So click to highlight that we're looking at the stars properties. Want to add the tween behavior came. And if we go to the layouts, and we want that, that looked about the right position. So that was why we can see where we can see where it hears it at 921. Let's put this off the screen so it can't be seen. We change the x to 960, So it's exactly halfway in the page. And go to the eventual means. What we could do here is actually duplicate. This last texts, one that we did. So just Control-C, Control-V or select Copy and Paste. Now if we click on that, we have the option to replace the object, replaced the object. So we want this to happen, not on the textbook, happened on the Start button. And we don't want it to end at 390, otherwise would be shooting up to the top of the page. We want it to end. I think it was 1920 where it was before. Same time. It's just a quick way of changing or a adding a new action. Let's see what this looks like. Paul 2. And we've got the player game and the Play button have come into place. So that's looking good. So at the moment, let's just go back a moment. So at the moment, if we click the Play button, nothing happens. So we need to set another event. So add event. And this is similar to how we set it when we set the carrots, where it's going to be touch events. So when an object is tapped, Oops, I can just go back. When object, I'm selecting the start button. So when the Start button is tapped, going to add an action. We're going to use the system and we want to wait a little bit so that it doesn't suddenly happen. So we're going to wait, wait for nought, 0.2 seconds. We're going to add another action. And we're going to say, after it's weighted nought 0.2 seconds, we want the game to restart, so the system restart game. So restart and restart the layout. This is what we want to happen. And then the other thing that we want to happen is in game making is always good for a player to know that there, if they've clicked or they touch something that we want to know that the game has registered there, click or their touch. So it could make a sand, the object move a bit. Or what I quite like doing is actually changing the opacity a bit. So I'm going to add another action here on the Start button. And I'm going to use the tween feature between going to tween it to 50 percent opacity. And because we're got to a nought 0.22 delay, there's no point in me making that any longer than that. So I'm going to change it. So it's tweens to 50 percent opacity in nor 0.2 seconds. I need to drag that above the weight. So it happens while we're waiting. And now let's have a look and see how this plays. Paul 2. We've got play again. Now, the reason why this is happening is because we haven't told the game to reset g count to 0 when the game is restarted. So it thinks that we're still on G count 10, it's still thinks wrong carrot 10. So let's close this down. And I want to add a new event. It's a system event and its onStart of layout. So at the very, very beginning of that layout, on Startup Layout, I'm going to drag this to the top. So sequential, we actually don't need to do that because the game engine knows that this command is telling it to do something on the start of the layout wherever it is on the page. However, I like to have things so that I can see that it quickly and logically when I'm viewing the Event sheet. So I put it at the top of the page. So at the start of layout, add an action system. We want the system to set the value of q0 Gantt to 0. So now it's not going to think that we're on ten at the end of the page when we, when we restart the game, and it will restart the game correctly. So let's have a look and see how this place were. To click. And we pulled out the game again. We need to address why this button is shooting off to the other side. But there's one other thing that I want to show you while we're here. If you keep an eye down here in this left corner, you're going to see that we have a little bit of sparkling going on here that we don't want. There is just on the corner there. And that's because if we go to the layout, particles object is actually being executed when the page loads and that we're seeing it in the corner here. So I've just moved that out of the way so that we no longer see that's now let's go back to the event sheets. Okay, So why is it going off to the side? It's going off to the side because I have set its, I'd wanted this to change opacity and I'd set it to x. So I want it to change the opacity 50, NOT x 50. So it was actually changing it to the x-coordinate, which is far on the left. So now let's have a look at this. This should be correct. So you've got Paul 2. We don't have any sparkling going on at the bottom here. We restart the page perfectly and that the game Paul starts. So we're going to close that and save. And in the next video, we're going to create a start page for the. 9. Start Page & Finishing Touches: Now we're going to set up a start page for the game. A lot of this is going to be very familiar to you. If we go up to the layer, we want to create a new layout for the start page. So if we click and then right-click and add a layout, we want to add a layout, and we also want an event sheets. So click set those up and you'll see that it's created new layout and a new adventure for us. Now we have two of these. I'm going to change the names so that it's easy to see what we're looking at. So layout one is the game. So I'm going to change that L underscore game. And layer 2 will be the start. So L underscore start. And eventually it's bent sheet one. I'm going to use the same naming convention. So underscore game and then sheet to underscore stops. The other thing that we need to do is when we set the game up, we set it up with one layouts. So the game thinks it's going to start on the game page. Now we've created a start page. We actually wanted to start on the start page. So if we go up and click on carrot count, and then in the properties, if we go down to where it says starter, and you'll see we have the opportunity to choose which layout we want to start on and we want to start on the Start layout. And we also can change the, what people see as the game is loading. I'm going to leave it on the construct three splash page. Now if we go to the layout, the start layouts, you'll see we have the same situation that we had when we set up the game. Where let me zoom in or zoom out. Where we have the viewports is smaller than the layout. The layout is twice the size of the viewport. So we'll do exactly the same as we did then. We'll change the width to 1920, and we'll change the height 1080, 1920. That should be okay. And now we can see that the viewport is the same size as the layout. So we want to add the background to this. Well, we've already added the background image, so it's just a case of dragging it into position here. And we've already added the start button so we can drag that into position here. We don't want to do anything fancy with it moving around. We just want to put it into a good position. We know that 960 is central zone. Just going to change this to 960. We want to, I'm just gonna make this slightly bigger than the layout just so we don't have any whitespaces. And we're going to add the title to the page. So a case of dragging that in and the title current counts, drag that into position. And that should be 960 as well. You could do it by sight, but because I know that 1960s halfway across horizontally, it's as easy just to type it in. Okay, that looks okay, but it's a little bit boring, so we'll add the bunny to it. So we just drag him into position. And we'll add a couple of carrots so that the players get a bit of an idea what the game is abeyance. We have the same issue is we had when we set up the carrots on the same page, we need to change the animation frame. So it's showing what we wanted to say. I want it to say 1, 2, 3. So just changed the animal animation frames accordingly. Now, if we play, we've got the bunny moving but not allow sit. Not a lot else is going on here and I think we can just make this a bit more interesting. So we're going to add an animation effect to the title and taught them to the button called assign. Now, that's under behaviors. And we'll search for it, sign. And if we look under behaviors now we've added the sign behavior. If we have a look at the movement options, we've got it set to horizontal at the moment. So it will move from side to side. It move up, down, forward, backwards, change width. Change height, change size, change angle. I'm going to keep it on horizontal. I'm going to change the period to eight because there weren't quite a slow and gentle movement. 50 is quite crazy. I'll show you that's just press playing. We can see what 50 looks like as a movement is quite a lot from side to side. I going to change that to 13, 25. And I'm going to do the same for the Play button. So I've clicked on the play button again to add to behavior. And again that adds the sign behavior again. And this time, instead of having it going horizontal, I'm going to get it to change the angle. So I'm going to change again the period to eight. And let's have a look what it looks like. I'm 50. Like that is too much. So I'm going to change the magnitude, I think to 20. And let's have a look and see what that looks like. Okay, I think that looks good. So now we need to go to the Event sheet. So it's not currently open. So double-click on e, start to open the event sheet. And we want to add an events, and we want to say the same as before. When the Start button is touched or tapped. We want to go to the game layouts and we want the game to start. So the condition is when an object is tapped and we want the object to be the startup object. The action we want to happen. I'm going to put in a delay again system. Wait. I want to wait for 0.2 seconds. So 0.2. And I am going to tween it again. So start tween the same as we did on the replay button. I want the opacity to go to 50. And I want it to take nought 0.2 seconds. And then after it's weighted nought 0.2 seconds, I want it to go to the layout. So if we type in layouts, go to Layout. And we want it, we have the choice of layouts and we want it to go to the game layout. So that's done. So now let's press Play and see what happens. So I click in here we are at the game. Paul, ready to play. And of course it's ending on to, so we must remember to change that global variable in a minute. So let's close this down. One important thing to notice now is now we have two lamps. When we preview the game, it will actually preview the last layout that we looked at. So if we were actually want to preview the whole project, we need to select the whole project, preview project. I'm just going to preview the project again. Because one thing that sprung to mind is the fact that in the end, because we set up the sign behavior on the play button, it's actually moving around on the play again screen as well. So let's go to the game events, and let's on starts of layouts. When the game starts as an event, this as an action, sorry, we want to switch the sign behavior off. So if we go down and look for sign where it says Set enables, we want to have it disables done. Now, let's have a look at this game ends and that we don't have any movement there. Of course, if you'd like to the movement there, then there's actually no reason to stop it, but I've just stopped it. At the moment. The transition from the start screen to the game page is a bits instance. It's not very subtle. So I'm going to add a small fade feature to the game, and this is quite simple to do. So let's go to the Start layout. And I'm going to add a new sprite. So new image. So right-click, Insert new object sprites. I'm going to create this myself. So I'm going to just click. If we go to these two arrows, this exercise, I want it to fill all of the scene, the layout, so I'm going to set it to 1920 by 1080. Ok. And I'm going to make this quite a dark green. So I'm going to use the bucket fill tool and that's created the green effect. I'm going to rename this because at the moment it's going to be called sprites, which is going to be confusing if I have lots of sprites. So I'm going to change this to fader because that's what it is. That's a function that's going to play. I'm going to add a behavior and I'm going to add tween on this as well. I'm going to put it in position like this. And I'm going to set the opacity to 0. Now, one of the disadvantages of having this fader over all of the layouts is the fact that when I tried to click on something, I click on the fader. So I'm going to add a new layer at the top, and I'm going to make that the fader layer. So add layer at the top. I'm going to change the name of this to fader. I'm going to click on the fader object in the project panel. And if we go over to Properties, you'll see layers. I'm going to change the layer to fader. And I'm going to make it invisible. So I can't see it. It's still functioning, but it just means I don't need to worry about not being able to click on anything now I can click on things quite happily. Go to the event start. And on tap gesture. We want the fader to come in. We want it to go to full capacity. So add an action fader. We're searching between tween one property. Opacity. Wanted to go to Let's get it to go to 80, not go to full capacity. And we want it to happen in nought 0.2 seconds. So 0.2. And if you remember, we have a number of options at the bottom here, and one of them is destroyed. So we could get it to destroy itself when it's finished because we don't need it anymore. So we'll just do that. Now. Let's have a look and see. I want this to happen, obviously before we go to the game layout. Otherwise people won't see it and I want it to happen before the weights. So let's get this into the correct position. Now we want the fader to happen. We want the tween opacity. We want it to wait nought 0.2 seconds, and then we want to go to the game. So let's have a look click. And we've got the fader that happens before we went to the game. But of course that's just going in one direction, the fader when from naught to 80 and then to nothing onto the game page. So we want to reverse this. So if we go to the game layouts and we're going to do the same. So we're going to add a layer at the top. I'm going to call that fader. Make sure the fader layer is selected and drag in the fader. And change the opacity this time to 80. And we'll do the same as we did on the other page, will switch off, make sure that the learner 0 is selected and we can click things again. And we'll go to the event sheets for the game. And at the start of the layout. So we want to add an action, so add fader. We want that to be tween. Want to tween the opacity to 0. We want that to take nought 0.2 seconds. So nought 0.2. And we want it destroyed on the end. It's not going to serve any purpose. Okay, so now let's have a look. Let's play the project. Look at the complete thing. So click to start, got the fader come in and the fader goes out. Subtle, but it just breaks up that instances of change from one layout to the other. While we're adding sort of like bells and whistles to the project. You'll notice in the image folder there were a couple of clouds and a son image. So we can add those to the, to the page. So let's start with the game will go to gain layouts. And let's bring in the sun. That's a bit small. So I'm gonna make that a bit bigger. And let's bring in the clouds. So there's two images for clients. I'm going to bring them together, bring them in together. Gonna make that a bit bigger. I'm going to select the clouds image, open the editor. And I going to change the speed to 0. And I don't want it to loop. There's no animation them. I don't want anything to happen. I'm going to copy and paste. So at a couple of clouds and change the size so they onto uniform. And I go in to change the initial frame of one of them to animation frame number 2, just so it looks a little bit different. Now we could actually get the clouds moving a bit so we could use the sign behavior for this. So when ADA behavior at new behavior at sign. So this is the same as we have done before, and we will make the sign, so it's vertical. And also it moves horizontally, sorry, will change, will make this so that they move at different speeds each. So we'll make this one move over a period of eight and a magnitude of 20. This one will change. So it changes over a period of nine and has a magnitude of t. And this one will change, so it's a period of 10. And we'll make the magnitude 15. And let's see what this looks like. Okay, so we've got a bit of cloud movement going on there. And we'll do the same with the sun, and that will put the sun so it has a angle. So it moves at an angle, rotates slightly. So we need to add to behavior. So adds sign is this object here. So the sign is added and I'm going to change it. So it moves on an angle basis. I don't want it to move too quickly, so I'm going to change the period 28, and I'm going to change the magnitude To 25. Ok, now let's have a look. Okay, So that looks good. One thing that we need to be aware of is if we play and we get, which at the moment is still on two, so we must remember to change him. Play again graphic is coming down behind the clouds. And that's because the zed order or the order that the items are stacked, the most recently added item, the most recently added image will go on top, automatically goes on top. So because we added the clients, they were the last objects that we added. They are on top of the play again image. So we need to go to the game layouts, which is where we are. If we select Clouds, we've got all of the clouds saved selected. So if we right-click and we go to zed order, we want to send the clouds to the bottom of the layer. Now we've sent them to the bottom of the layer, which actually means they're now behind the background. So if we select the background and go to the zed order again, oops, and sent to the bottom of the layer. Now let's play this. Paul. And we've got the plaguing graphic coming down on top of the clouds. We just need to do the same with the bunny. So if we select the bunny, right-click and we're going to move him to the top. So Zed order sends the top of the layer. Now he will know when he moves that he will be in front of the the cloud and the son, and he would obviously be in front of the game graph, the play again graphic. But that doesn't matter because. That stage, he will be over this side. So let's just take a quick look and see what that looks like. So the bunnies in the right place, we've got the buttons in the right place. It's looking good. So let's save that. And before we go any further, because I'm happy with the way that looks. I'm going to change the end graphics, which we've got here. So when G count equals two, which is how we've had it for testing. And going to change that back to ten. Okay, let's go to the Start layouts and let's do the same here. Let's add the sun. We don't need to worry about setting up the animations because that's already done. That's already happening. Let's add the clouds. Start. A couple of clients, put one over here. The clouds have in front of the title. So I clicked on the title, right-click zed older, sent to the top of the layer. So that's now in front of the clouds. And let's play. Okay, so that's looking good. So that's pretty well. Let's just close this. One thing that we haven't done is to make there, as a baker signed when the player has finished the game. So let's go to the game. Eventually it's when g count equals 10. I'm going to change that back again to, to for testing. Okay, we want to add a new action. We're going to add an audio action. And we want to select Play. We want it to play the fanfare file. So we'll look for fanfare. Click to select that. We don't want it looping. We can leave all the other settings as they are. So select. And we've got this. So it appears at the bottom. So the system is going to wait for 10 seconds before it does these actions. And this is, this is fine. We we want to hear the voice say the number ten. And then we want to weights, and then we want the fanfare to play. So there's one other very important thing that we need to do, and that's where actually want this to happen. Just once. We want the fanfare to be triggered just once and not to repeat. So to ensure that happens, we'll add another condition. So add a condition and we want the system to trigger this one. So we're looking for the trigger, trigger once while true. Now let's play this and see how it sounds. So Preview one, Paul 2. So that sounds okay. And there's one other thing that we can do and that's to put in the number panel at the bottom. So the number that the word of the number will change every time the next character select it. So to do that, we'll go to the game layouts and we'll add the numbers the same ways we've added the other graphics. So we'll select numbers one to 10, and we'll drag that into place. And we want that to be in the middle. So around about 960. That looks good to me. We'll double-click to open the editor and we'll see that 10 is in the wrong place again. So we'll move the ten, so it's in the right place. So 1, 2, 3, 4, 5, 6, 7, 8, 9, 10. That's looking good. We will click on the default animation so that we see the animation properties. And we're going to set this to 0 because as with the carrots, we don't want this to be animated, so we'll just set that to 0 and close MPT. Go back to the event sheet, and we'll go back to the on top of carrots. And we will set a new action. So the numbers we want when a character is tapped, we want the frame to be set to the G count number. So GK ain't done. And we want this to happen obviously before the new number is added to G count. So it's showing the current number. Okay, and let's have a look and see how this looks. So showing one to start one. Paul 2. That's looking good. We obviously need to change the position of it. Let's do that now before we forget. So layout game. We want the, oops, We want the text to be at the top of the layer, and we want the button to be at the top of the layer. So that will put them on top of that number panel. And then the other thing that I think that will do is we'll make the number panel. We don't want it to actually show until the number one is clicked. So we'll make this now. So it's 0, 0. Let's select it again and we'll give it the tween behavior. So tween. And we will say, we go to the Event sheet and we'll say as an events. So system when G KKT is equal to one, then we will change the opacity of the number panel. So the number panel we're looking for tween between when we change the opacity to 100. And we'll do that over no 0.2 seconds. So now let's have a look and see what that looks like. So playing the number panels not showing, we click on one and we see the number one. Okay. Wow. 10. Export & Put Online: Okay, So we've now finished the game and we're happy with how it looks. Obviously, there's a number of other things that you could do to the game. If you wanted to, you could swap out the chipmunk audio for your own voice or other types of RDA. Change out the graphics. But let's, let's export it now and actually get it online. So you had someone sat next to you. Of course, you could just use the preview button on the page for them to play the game. But we want to share it with others. We want to send it by email and share the link and show people what we've created. So we're going to put the game online so that you have a unique URL that you can share with others. It's easy to do. So first of all, we need to export the game that's different to saving the game. When we export the game, that we create a folder of all the different elements of the game that we can then put online. So we go to menu, project export. And we have some different options here we're going to use because we're going to put it onto the web. We're going to use the HTML5 options. If we just click on that, double-click on that. We can speed things up a bit. So we can tell it to D duplicate images, recompress images, and then we can also minify it. And it says here, it makes it faster to start. Now on again with this size is not going to be noticeable, but hopefully in the future we're going to be making bigger games and more exciting games and games with lots of different elements and objects which are going to be slower to load. So this is just to show you how we do it. So we're going to select the simple one. And then next. This is going to take some time. Don't worry, if this takes upwards of minutes to do. So, I'm just going to work its way through and catch up with you in a bit. Okay, So when it's finished that we'll see the Export tab. That probably took three minutes. So now we click to download the folder. That's download it. I can close. So we've got the folder downloaded before the game details and amp. We're going to use a service called Netlify to put the game online. And this will allow you to put the game online so you have a unique URL that you can share with others. And this is another free service. However, we do need to register in order to use this service. If you have a blog, for example, a WordPress blog, that you will be able to load the game directly into your WordPress sites. But I'm going to assume that you haven't, and that we're just going to put the game quickly online using the Netlify service so that you have a URL that you can share with others. So if you go to the app.net, the fly sites, and then register and confirm your registration and then login. So I'm just going to login. And if we go to sites. And if you see here, Great Dane, grayed out, Sorry, want to deploy a new site without connecting to get yes, drag and drop your site folder here. So you've downloaded the game folder and that will probably be in your downloads folder. So we know then just need to drag that into place. So I've dragged that onto that box there and it's uploading and it's published. So let's go back up here. And this is the unique URL of the game. So let's just copy this and see if it's working. I'll open a new window. And here is our game loading. So that's behaving as we'd expect. So if you want to share your game with others, then that's it. The top here is your unique URL. And it's as easy as that. 11. Game Over :): So we finished and we've created a simple game and we've got to online and that you've got a URL that you can share with others and show them what you've done. And of course, this is a simple game. There's not a lot to it, and there's lots of ways that we could improve and build on what we've created. But what is important is that we've learned some important skills while we've created this game. We've learned how to set the game up. We've learned the infrastructure of construct way and what it actually looks like, how things work. We've learned how to use global variables so that they can't, and it controls how people move from one object to another objects. We've learned how to use animation techniques to bring the game alive and just make it a little bit more interesting. We've learned how to add audio and how to make the audio play in the right place. We've used subtle techniques, such as the fading between the scenes, between the layers. So instead of it going from one to the next layout and it not being an elegant feel, we've actually introduced our faders. So it's a nice smooth move from one to the other. So with the techniques that we've learned from creating this game, we can then go on and create a variety of other games. We could, for example, instead of having carrots, we could have books which are numbered in which move around, and that the player has to click on the right bug. In order, winds that are books, it could be balloons. The balloons are floating around the page or floating up and down the page, and that the player has to click on the balloons in the right order. Instead of having carrots sat there on the page static, we could have the carrots so they fall from the sky and the rabbit has to catch the rights carrots in the right order. So there's a number of ways that this game can be developed. And I really hope that you'll join me in future tutorials where we'll look at building on the skills that we've learned now to create a range of different and interesting educational games for children. Thank you.