How to Make a FNaF Fangame in Clickteam | Part 1: The Menu

hey what's up I'm Brady Hege and today I figured I would make a click team tutorial and I think I'm going to turn it into a series but uh but yeah it's going to be a tutorial on making a fan a fan game and clickteam because I learned when I made a scratch tutorial apparently finale and game tutorials are really really popular like holy crap but yeah I'm gonna make sure that the microphone is plugged in ah okay great it's plugged in awesome so this is the screen that you're met with when you download an open clickteam fusion you can get it on Steam or think their website click team comm maybe I don't know just search up clicking it'll come up and download it now I think everything in this tutorial you should be able to basically do with the free version I have the full version it's a hundred dollars I very much recommend the investment if you've been using clique team for a while and you think that you're going to use it commonly it is so great it just it opens up so much more and the best thing is you can build your application as an exe file which is like otherwise if you don't have the full version you can just only play your game in click team and nowhere else and that kinda sucks so yeah this is the window that you're met with when you open click team all of these things are blank but you're going to want to keep them view hold on toolbars layers toolbar this closed for some reason and it's making me mad because I can't get it to stay open but anyway just drag this out here and click new application and then you can close this window you'll never need to get so yeah you've got this new application and this is what you should see this I think looks a lot more intimidating than the actual user interfaces don't worry this looks again like a lot but it's not so just click on frame 1 here no sorry double click on frame 1 and now you've got this this white space is your your game this is like this is what's going on in your game and the great thing about clickteam is you can run your game boom right there you don't have to do any preliminary coding to make sure that the game runs right-click team takes care of all of that so that's great so we're going to rename our application I'm going to name mine five nights at Freddy's tutorial great and we're going to name frame one the menu because that's what we're going to like it's what it's going to be and to clarify you right-click and then click rename to rename something and then just hit enter when you're done so if we click on the application here which is the one that should be next to this little icon the one with the lightning bolt and go down here into properties this is the property toolbar for your application as a whole so if you click on window it should be the one that my mouse is hovering over right now the second one to the right click on that and then the windows size down here and I'm not sure if you can edit this with the free version of clickteam but hopefully you can the default is a four by three aspect ratio which is like very bad so what you're instead going to want to change this to is 1280 and this hit tab 720 now if you hit enter click yes you do want to taste modify the size of the frames now you can tell that it's a lot bigger and this is actually our 16 by 9 aspect ratio which is the aspect ratio of most video games if you do not know yep so yeah let's go back in the menu you should only have two single click it but now we're back in the menu here and what we have now is just a blank white screen like if we run our game again which is this button this runs the single frame this runs the application from the top so if we were on the frame nothing's here because we haven't programmed anything so let's insert a background for the frame you know like a like infant affe you know you have Freddy staring at the player in the main menu so let's right-click just right-click anywhere and we're going to hit insert object you can also hit ctrl J now when you do this this window is going to be opened and I know it looks really really scary but the only things you're ever going to really be using it's active counter string that's that's really it so yeah click active this is the most common one it's basically just like a sprite and scratch if you are coming here from scratch which I think a lot of people are I think the scratch is a pretty common thing that most people start with so right click this object and let's rename it background you can rename it anything you want but I'm going to rename it background and now double click this object to edit it and you should get this window here now if you have something in File Explorer that like you can edit in this little interface you can draw and blood the blood dad back but I recommend pulling in things from File Explorer so I've made all of this crap in paint tool Sai which is a great program I really recommend it but yeah just pull in something click it hit open usually you don't want to import as an animation this is if like you have a gif and you want to import all the frames but if it's just a single image I recommend using PNG s by the way you don't want to import as an animation so just leave all of this unchecked and hit OK so yeah if we zoom out we see we have this really simple guy here he's he's great and hold on I need to send a text message but yeah so we're good we're just going to drag this guy over here that way he's in the center of the frame now another way that you can do this is right-click him a line in frame horizontal center right click him again a line in frame vertical Center now you'll notice that my screen has a bunch of like red dots across it you can make those disappear in fact you they might not even appear by default just up here the thing that says show grid on like the file and all that it looks like this just click that and the grid goes away this and I'm gonna make that actually show back up this allows you to snap to grid it makes the movement of the sprites when you position them more snappy so like see how when I'm moving it it only moves one block at a time sort of you can turn this off and that way you can move things more fluidly however I am weird and want things to be perfect so I have snapped a grid on almost all times great so now that we've got this guy we are going to put in a little static because you know the thing that always shows up and these menus is static so let's hit insert object that's again right click it should be the second thing under edit so insert object another active object and let's hit OK over here so we're going to rename this by right-clicking and call it static I've got plenty of energy cuz I just ate so I'm all hopped up on Laffy Taffy's so let's I I have four images each one is slightly different for the static and so I recommend having about 4 frames for your static and really you can just make like a gray background and then take a lighter gray and I'm black and scribble over and make it a bit different for each image but yeah so I again recommend having at least four frames of static and just open them like so and by the way I forgot to mention this you're going to want to right-click and hit new frame when you put in a new frame and then it's just the same process you hit open like up here so yeah and now if we go from frames down here to direction options see we have the speed of our animation which is 50 and I think that that's pretty good for static but right now if we hit play our animation it only moves really quickly through the four frames once and we don't want that so we're going to check this box that says the loop and now that we've looped our animation it will play over and over and over over again so let's hit okay and let's drag it so that it's centered in our frame so now if we click run the application our static is working great but we can't see anything so how do we fix that well let's click our static again we've got our static and go into properties we're going to click on this one the display options and under effect click none click Edit and then this should be the window that you're met with so click the plus sign under standard to open this drop down menu open semi-transparent and hit OK but you've noticed that nothing changed that's because we need to change our blend coefficient so let's change that to about 150 it's on a range of I think 0 to 250 maybe but now right away we can tell this looks a lot better we can see our character pretty well and he's just creepily staring at us great now let's make a new layer before we do anything else that can be accessed over here in the layers toolbar and if you don't have this you can hit View win toolbars and then layers toolbar make sure that that's checked or I think you can hit control K yeah so go over to the layers toolbar and click this little blue piece of paper doohickey click a new layer and now you have two layers now layers I don't think that I have to explain but anything in layer 2 is going to be on top of layer 1 got it ok so we're going to insert a new object by right-clicking hitting insert new object I'm going to have to drive that into your head because it's very important than you memorize that so this is where you kind of have an option you can use an active object or a string so I'm going to show you both let's open a string here and hit OK another thing you can just find these things by typing string or like whatever you want so I typed in string I hit enter and boom we've got a string and we just click anywhere on the screen now strings are a text object that's all they are they are text and so if we make this really big we can type in five nights at half I think I'm going to call it five nights at the antique shop but this is just a placeholder anyway so it doesn't matter and now if you go under here into properties again and click to the a button now you can edit the text so we're going to make that white no that's grey I'm gonna make it white click on the font here we can change the font size and the font so we'll change it to like 40 and terminal and boom we've got five nights at five but I don't like this I think that it looks a bit unoriginal so we're going to delete that our other option right click insert object is to bring in an active object with our text and a transparent background so if we double click on this click open and I've got this and again this is just my logo thing that I've designed and a transparent background that's why you should always use P and G's kids because they can have transparent backgrounds but yeah so if we hit OK pull this in so that it's perfectly centered boom now we have this and it sort of pops out it's not behind the static like the dude guy is and that's because we set it so that it's in a layer that's on top of the static so if we click run here boom so we have our game where the static glitches and stuff this is these tutorials are really fun to make for me cuz they remind me of when I was first programming and I got really excited that things work so we're going to insert a new object here and it's going to be called a string so let's type in string it's a lot easier you'll find he cuz you don't have to look for it if you don't know where it is so let's make it pretty big you know decently big and this is going to be our new game button so let's just edit this and hit new game so that's our basic text but again it looks boring and you can barely see it so let's just click on the text options button under properties and make it white and make it you know a decent font size and this is a preview of what your your script is going to look like so that's still pretty small I think so let's change that if it's not on the drop-down menu you can still make it as big as you want by just typing it in manually so let's try 30 and I think that that looks quite a bit better what do you think I like it you can't respond cuz this is video so we're going to rename this the text here menu text and we're going to rename our string here new game awesome but this would be pretty hard to click if you click this it's just going to like you have to really get it your mouse just over it and click it like that and no one wants to have to deal with that so let's insert a new object right click again I'm going stuck to telling you that now and put it in here and we're going to rename this new game button awesome I think that I accidentally put a yep I did I put an end wrap it there we go and for this we are going to turn off snap to grid if you have it on just because you can get it more accurate in the right place but we're just going to resize this guy using these little boxes we're going to drag it so that it covers the entire new game thing and then we need to click on this if I double click it actually and go into the editor and to save time we're just going to set this brush size to 999 select any color it does not matter because this will be invisible now you'll notice that this object is a solid box instead of just a rectangle or rhombus black I can't talk so yeah now we've got this new game button but if we run the game we still got this awkward green bar and we don't want that we want it to just be an invisible thing to feel if it's being clicked so click it and go under properties click this one it's to the far left and it's display options and just uncheck visible at start so now if we boot up the game boom it's still there you just can't see it it's always there watching you okay so I I should start doing this after ingesting a lot of sugar all the time this is amazing uh-huh okay so we're going to make a continue button but for now all we need is new game all right so let's click on our application it should be next to this little lightning bolt and right click it and hit new frame so now we've got frame two and we're going to name this night 1 loading awesome so we've got our night 1 loading thing and we're going to click new frame again and this one is just going to be night 1 awesome so we're going to go back to menu here and just by double clicking it and we're going to go up here it this little grid up here and this you can also hit control E is our event editor this is where you're actually going to be doing programming so we're going to right click this number 1 here it insert a group of events we're going to title the group new game button awesome so we're going to say we're going to sorry I'm going too fast click new condition it should be the number 2 block if you're following along right and it should be a bit indented so right click that go to the mouse right click the mouse and two things should open the keyboard and the mouse we're going to go under the mouse and hit user clicks on an object and we're going to choose single click with the left button the great thing about clickteam is you can really customize how they click and blah blah blah and we're going to find the object that we want and it's going to be the new game button here so click on this green bar and hit okay so now our event is user clicks on the green bar that's invisible I know that that sounds really complicated but you're going to get used to it fast it's just creating a simple event and in fact it's quite a lot more so yeah user clicks with left button on the green bar we're going to go under storyboard controls here which should be a little chess piece in a chess board and we're going to right click and make sure you're under storyboard controls right click and we're going to hit jump to frame frame to night 1 loading and hit okay so now our event should be user clicks on the little green bar it jumps to the night 1 loading frame so let's see what that actually looks like so we start our game up we hit a new game and we get a blank screen because we haven't done anything with a night 1 loading screen yet so let's double click on that frame right now and right click to insert a new object we're going to make it an active object and we're going to rename this black background awesome so let's click on this actually first we need to go under properties of this object and hit size and position and we're going to set the size to the size of our screen so the width is 1280 the height this is 720 so we're going to turn snap to grid back on and it's right in place but also it looks terrible like this is very bad so let's double click on this again and we've still got our brush size of 999 which is going to come in very useful so let's select the black up here what's selected up here might not always actually be what you've selected so check down here and make sure that you've selected the right thing it will be this box and this click on this and you are now editing with a transparent color which is basically an eraser again we want black so this is black and we're just going to click around to do we're painting this whole scene black and I know you can't really tell but this it's only a 999 sighs brushstroke so you do need to make sure that we are covering the whole canvas so if we hit okay see we missed a little spot down here so let's drag this thing down do to do to do that should have gotten it okay awesome yes that's what we wanted so we've got our black background here there might be an easier way to do that I'm not sure but yeah that's that's what you needed to do well you know all you need to care about is that you have a black background we're going to insert a new objects string so click anywhere to place the string it doesn't matter we're going to move it in a second and we're going to resize it don't worry if you lose it just click in the place that it was resize it to make it you know from decent size but yeah I think that's probably going to be big enough and let's type night 1 awesome so now that we've got our thing here let's go into text options let's make this white and let's hit terminal and 40 I don't know what the heck that's do small this is all preference so feel free to go and do whatever makes you happy I guess but yeah I think that's big enough and now that you're done with that resize your text box so that it's just the size of your text right click align and frame horizontal Center right click again align and frame vertical Center boom now we have our night 1 loading screen so we click on the run application button and hit new game it cuts to night 1 now we might add special effects or something later but right now we're just doing the bare bones of starting the game so let's go in here and the events editor again you can also have it ctrl e and hit a new condition by right-clicking and timer so we're going to say is timer equal to a certain value but first actually we need to click on the chess board and say start a frame set timer to zero make sure that all of these numbers are zero and then hit OK so now start a frame the timer equals zero and the timer is just something that exists that is always counting down it's always like it's just it's basically a stopwatch and unless you tell that stopwatch has set itself to a certain value at the start of the game it's going to be zero and it's just going to keep counting up but at the beginning of this frame we want the stopwatch to be at zero so that we can make this condition right click again on the new condition now go under timer and hit is the timer equal to a certain value so we're going to make this about three seconds this is just the length of time that you want your game to in quotes load for so once timer equals three seconds we're going to right-click on understorey bolt board controls can't help and hit junked frame and night one now if we click on run application we hit a new game yet night one and white screen now this will be night one in a second but we are going to cover that and the next tutorial so for now I'm going to teach you really quickly how to save so we're going to say file save as go wherever you want it to be I'm going to name mine click team tutorial that file up here is actually where I tried to record this video and then screw it up and it's going to save as an mfa file now every time you save after this you can just go up here and click the floppy disk and it'll save you'll see a little green bar here that'll mark your progress so watch this part of the screen while I save boom green bar and so that means that you're done so yeah that was part one you have learned how to make a main menu and in the next part we're going to learn basic off just scrolling and maybe turning on a light

Channel: Brady Hege

Views: 34,735

Keywords: five nights at freddy's, fnaf, fnaf fangames, how to fnaf fangames, how to make a fnaf fangame, clickteam tutorial, clickteam, clickteam fusion, clickteam fnaf tutorial, how to make a fnaf game in clickteam, how to make a fnaf fangame in clickteam, how to make a fnaf game, clickteam fusion 2.5, clickteam fusion 2.5 tutorial, make a fnaf game, how to

Id: AAqLeqVQigk

Length: 24min 15sec (1455 seconds)

Published: Sun Feb 09 2020