How to Make a FNaF Fangame in Clickteam | Part 13: Time and an 8-Bit Minigame

hi I'm Brady hege and this is part 13 of my tutorial series how to make thefn game in clickteam fusion version 2.5 so I guess this is gonna make it a really unlucky tutorial I don't know I guess I'll let you know if anyone dies during the filming of this but let's hope that no one does so in this episode we're going to cover two things we are going to cover time' and ending the night and throwing up a 6 a.m. screen which will require more than the default 3 frames if you're using the free version however clickteam fusion is the full version is free until august i have another video on that but I will put that the link to that video in the description and then the next thing that we are going to cover which is going to be kind of the larger portion of this tutorial is creating an 8-bit mini game with a directional movement very similar to that which you would see in the third Finn Afghan where you had movement in all directions and it was sort of a top-down view however first we do need to get time done it will only take a couple of minutes so let's just get started near events editor let's create a new group of events we're just going to call it time and we do need to create a variable will store this in our office object and we're going to call this soccer soccer I know time alright now we are just going to say every and then here you are going to put the amount of time that you want an hour to be in your game 45 seconds was what I have used most in the past however you can do whatever you can even generate a random number by clicking use a calculation and putting our random and if I wanted it to be between 45 seconds and 50 seconds I would say our random 45,000 50,000 however I don't really recommend this because time in real life is not randomly generated like an AIS random number generation in a game should be used for something that a constant number like an AI of a character which thinks for itself and does not move based on a pattern however time always moves at the same rate so well you can I don't recommend using a random number for this hit okay and we are just going to in our office object under alterable values add to time and we are going to add one now you're thinking how are we going to make this jump from 12 to 1 2 3 4 5 6 this is actually quite simple we're not there yet first we need to create a new string you can even store it in the same string that has your power in it but I'm going to put it on the opposite side of the screen and we are going to do a bit of editing here we are going to if you were putting it on the same side as the screen as I am I am going to horizontally Center it to the right and we're just going to size that up a bit feel free to just check the font size of the other objects in your game which the standard I have created for my game was terminal size 20 and white it's good to just have a universal uniform text style because that makes your game have more of its own look it's a custom type look so this is what I'm using and we are going to rename this string to clock because it's it's gonna be a clock all right now instead of just stating that we are always going to set our alterable string to insert number here like we're not just going to set our string to the time variable instead we are going to create two different conditions and this is how we are going to do it the first one is going to be under your office object compared to one of your alterable values if time is equal to 0 you're going to have to scroll a bit to get over here if you've created enough objects at this point and set change alterable string and here depending on what you want it to be I just want it to say you know 12 a.m. 1 a.m. but you might want it to say time 12 a.m. for that you would say time and then space and then a plus and then do what we are about to do however we are going to just have time and then a.m. so for this we are just going to put in quotes 12 a dot m dot 4 am without dots but that's what we are going with here and then we are going to create a second of it and this is going to be under alterable values for our office if time is greater than 0 you're going to change our alterable string to STR which allows you to grab a number without screwing up your string syntax and then retrieve the alterable value time and then a plus sign and then simply put a space if you want a space between the number and a.m. and then a.m. Jesus Christ why can I not type all right and this should work perfectly I will now show you a clip of the time changing but I'll edit most of it out for your sake so upon booting up our game we see that we are at 12 a.m. we have no issues there I'm just gonna close these doors all right I have cut out the 45 seconds of silence but unless you want to test it yourself which I really do recommend that you do just to make sure that you haven't messed anything up you can see that we are switching now to 1 a.m. and if we waited another 45 seconds this timer would switch to 2 a.m. but as you can see it is working perfectly fine now we need to create a new condition under all turbo values if time is equal to 6 we're just going to fire an event after given 2 remember you might need to scroll back using the bar on the bottom fire event after given delay this delay will be about one second and we will just call this end night an honor event end night [Music] we are going to jump to a frame that we have yet to create so let's create a new frame keep in mind that if you are using a free version of clickteam you have a limit of 3 frames we are now at 5 that's just a warning but again click team is free until august link in the description we're just going to call our new frame 6 a.m. night 1 because the easiest way to do this for me is just to create a different 6 a.m. for every single night you might want to change this once you watch my future tutorial on multiple nights but for now we are just going to use this one frame so we are going to on our event and night jump to frame 6 a.m. I want now let's do some editing of 6 a.m. night 1 insert a new object we're just going to make this a backdrop because it's just going to be a solid color anyway now you might want this to be something else but we are just going to make black screen with 6 a.m. however keep in mind that this is really quite simple so you should be able to do whatever you want here you can replace the black background that I'm creating simply by painting a small backdrop object black and then resizing it you can replace that with an image that you've rendered of your character or something like that you can create an animation of confetti and have that fall like infant afto you can do whatever but here we are just going to have a simple string that says 6:00 a.m. all right now I'm going to Center my text by going into a line and frame and horizontal Center and vertical Center and the text obviously we need to edit to say 6:00 a.m. all right now I think that I do need to make this string bit larger here but kind of do whatever you want all right and I am going to go into the events editor and say start a frame and for our string if you go under effect and in compatibility set the simin semi-transparency to 128 we are going to fade in our 6 a.m. now we are going to say at the start of the frame still we are going to fire it event after given delay the initial delayed we can set to about 1 second this is the delay before the string starts fading in and then the number of events needs to be 128 the delay between each event it's a good idea to set at about 1/100 of a second for the name of the event we're just going to call the 6:00 a.m. fade in alright great now on our event 6 a.m. a fade in we are just going to under effect set semi-transparency to and then click on the string again another compatibility get semi-transparency ratio -1 now if we run our faint frame we see we have a nice simple fade in now we do need to make sure that we are jumping to our next frame which is going to be our mini game that I'm going to teach you to create so create a new frame and we're just going to call this night 1 mini game I'm going to keep the mini game rather simple I'm going to teach you how to make the mechanics of the mini game and then I'm just going to let you do whatever you wish with it all right so we are going to say is the timer equal to a certain value and this value is the amount of seconds that you want between this start of this frame and when your player is shown the mini game so I think I want that to be about 6 seconds and when the timer equals 6 seconds we're going to jump to our frame mini game all right now let's edit our mini game ok so we are ready to start on our mini game this is kind of going to be an opportunity for me to teach you about number of different things that you can use in any game not just an Afghan in an RPG type game any game with top-down movement similar to a Pokemon game firstly we are going to make our frame a bit taller this is of course optional you'll see why in a moment we are going to make that I think 1400 pixels tall now this is very similar to our office scrolling except for it's occurring on the vertical axis now if we insert a player type object here just as an active we will put him right there and name him player all right now if we hit enter to edit our object I've created a guard using pixel art which I am it I'm not great at pixel art I just like just just look at that travesty but anyway this is going to be definitely an interesting thing to learn so take this frame and copy it in this little four directional panel here click on the left direction which the default should be the right direction but click on the left direction and paste that same guard facing to the right frame that you created alright now what you want to do because this is him facing to the left is go up into your tools here and flip horizontally you can also hit control live but it's easier to just flip horizontal if you go to the upward facing box here and hit the import button I am going to import another one and this is the guard facing away from the camera finally if you click on the down facing bar box you will be able to import the guard facing the camera now these are the four directions that he can face feel free to create these or not it just makes the movement look a bit better however this is pixel art so if we hit OK we can see that our guy is really small but we can fix this if we go into our size and position maybe we can size him up by a hundred percent this is the thing that you need to know when you're sizing up Pixlr you always need to size it up by a multiple one so if this is 12 pixels wide I cannot size this to just be 30 pixels wide I have to size it to either 12 24 36 48 anything that is a multiple of what I'm multiplying it by so I can multiply it by 1 2 3 all the way to infinity however I can't scale this up by a hundred and ten percent it just doesn't work that way the pixels will be warped and they will no longer be perfectly square so we are just going to set this to 128 by 70 and if we see oh no our guy is super blurry why is this I can explain first to undo those two resizes it will be fixed in a moment just be patient if we go under tools in the top here and hit preferences the window that we get opened will have a bunch of different tabs and editors now if you do not already have the frame editor tab selected click on that and down here uncheck resample images when resizing active and backdrop objects make sure that this is unchecked it should be the second from the bottom hit OK and now if we attempt to resize our player again we will see that his pixels are all still perfectly square just like a sized up pixel art should look we do not want it to be horrible and anti-alias Dalda hacking back now if we go under movement object options and click on static select eight directions and right off the bat if you have imported those animation frames correctly you should be able to use the arrow keys to move your player and as you move the arrow keys from side to side you will see that he faces in the direction that he is moving now off the bat he might be out of frame here's why let's create a new condition say always and we are just going to really simply see that they're scrolling Center the window position and frame and click on the player and now the selected should say relative to player now when we move we can't see but we do know that our player the frame is tracking him we can tell because he is temporarily in the center of the frame because the frame is centering him as long as it can without running off the frame now let's just add in a bit of environment keep in mind that this is going to be a very very simple environment because I stuck it pixel art but if we create a new layer and actually drag this layer to the bottom and select it we're just going to import some various different things for our frame now I'm going to actually scale down my frame to 50% this doesn't affect the game it just affects your view of the game while you're editing the frame now I'm going to insert a new object here this is going to be the wall so we're going to name it wall hit enter to edit and import whatever wall you have drawn this is going to be just the back wall I know I know wonderful pixel art please hold your applause now create a backdrop and this is going to just be the side walls now if we hit enter I'm just going to edit this that it is going to be a solid gray because again I'm kind of bad at small art may break here and just resize this so that it fills the rest of your frame this will be 1400 tall obviously and if you just copy and paste this object and put it on the other side of your frame we can simply resize this the other object will be resized too but you can just move it all right now if we run our game we can see that we actually approach our door however we can still just you know just move on over it we don't want that we want to be able to interact with the door in order to leave the antique shop but first let's add some floors this is going to be an interesting way for me to introduce tile maps to you now first click customise your grid this is because I you might not have to do this but first I recommend checking what size a single floor tile of yours is because for this I will be creating a 4x4 floor tile and we are scaling this up to be a 40 by 40 floor tile and for this reason I want my grid to be 40 pixels by 40 pixels for each of these blocks when we snap to our grid and so for this just click grid setup up here and change the width from 32 by 32 up to 40 by 40 again you don't have to do this if you are not planning on doing the floor the same way it's me I'm going to actually go one more layer down here and I'm going to insert an object inactive and we are just going to rename this to floor and enter boy oh boy isn't that beautiful pixel art now again this is 4x4 but because I'm scaling up by a thousand percent I'm resizing it to 40 by 40 alright so I'm just going to set this up here and now this is actually really interesting if you click on the paint mode button up here and then select the floor over here you can just paint the tiles all the way across the frame you don't have to worry about anything because snapped grid is on and the same size as your tiles and you can just do this for the entire frame which I will do but to cut out alright so I've got the entire floor painted so if I just run my frame here we actually have with our tile floor a nice indicator that our player is moving as seizure-inducing as it may be now you can change this up as much as you want but again this is just my excuse to show you a very simple level editor and RPG type movement we're going to add one more thing which is our players ability to leave the room so I'm going to actually zoom back in because I'm sick of having that zoomed out view I'm going to create a new string here now make sure to go to your top layer here and just insert a new object and choose a string this is going to be your players prompt to leave the room I'm going to resize this and for my text I'm going to set it to terminal size 20 and white I'm just going to double Center this and I'm going to put this towards the top of the door great next I'm going to hit enter to edit the string and we are just going to say press E to exit building great we are going to do two things to this we are first going to under display options uncheck invisible let's start and then under runtime options check follow the frame because unlike actives strings are set to unfollow the frame at start so you want to undo that now we do need to do one more thing because our player is not in the same layer as our wall so go to the layer of your wall and insert a new object just an active object and uncheck visible astir now rename this to follow player whatever you like now if we go into our events editor here good lord I have already a half an hour of footage just check under new condition hit always and for our follow player position set x-coordinate to click on the player retrieve the x-coordinate do the same thing with the y-coordinate this is simply setting the object to follow the player now we are going to say if our follow player object is overlapping another object which will be our wall we are going to for our string under visibility make object reappear now for our wall I'm going to create a new alterable value and we are just going to name this two can leave and at the start of the frame can leave will be equal to zero but when our player is overlapping them all we are going to under ultra volume leave two one and now upon pressing E or whatever you said for allowing the player to leave but see here I said I set in the string to press e to exit the building upon pressing e I'm just going to jump the frame back to the menu now in the future you might want to change this to jump the frame to night 2 but for now we're just going to have it returned to the menu now let's test this out all right so we're taken to our 6 a.m. screen and if we wait 6 seconds we will be put in the shoes of our night guard and we can use our arrow keys to move you might want to add a pop-up that states arrow keys to move but for now we are just going to keep this so our terrible terrible pixel art that I have drawn or just moving around and once we get to the door we see that we can press E to exit the building now we can leave all right that is it for this tutorial I expected it to be significantly shorter but then it just wasn't for some reason it was actually I have several more minutes of footage that I normally do so hopefully I can cut some out to make it more digestible but I am Brady Hecky for God's sake save your work and tune in next time

Channel: Brady Hege

Views: 4,748

Keywords:

Id: xV7DXxtK8_M

Length: 24min 0sec (1440 seconds)

Published: Tue Jun 30 2020