Horror/Survival Genre - GameMaker Studio 2 - Top-Down Slenderman

hello everyone I am Bradley sward associate professor of computer information systems at the College of DuPage in Glen Ellyn Illinois and this video today is going to use game maker studio version 2 and we're going to go ahead and make a top-down horror / survival game I I usually use the term Slenderman for this because you know Slenderman is a very 3d game but we're gonna turn it into a top-down game we're gonna have like a little fog of war effect well I'm going to show you what we're gonna be doing here we've ice this and run this and then drag everything over so you can see it so this is kind of what I'm going for here I've got a guy the mouse can dictate him rotating around in space and don't mind this is just the framerate just making sure the game is blocked salad at the beginning about 30 frames per second and so I can move around and notice the trees here when I touch the trees their opacity changes so I can kind of see underneath them and one thing you might notice is I have the Slenderman or whatever you want to call him you can tell my artwork is just divine where did he go I did see him that's the go but the whole point of this game is to go ahead and try to find then you know the eight notes that Slenderman has hidden and again Slenderman this game's been around forever there he is trying to find me oh my goodness he's coming after me he's got a little bit of AI you cuz you know otherwise how would he know where I am and so my goal is right now is to go ahead and there there's my note and so I can I'm supposed to get the eight notes before the Slenderman gets me so the winning condition is get eight notes the losing condition is get touched by Slenderman there we go and so I set up a little extra room here a secondary room so that you can go hey you know whatever graphic you want to put up with blood flying all over the place or whatever it is you want this game to do and so on the other way when it comes to the note itself I don't have anything just yet this is just a demo version this is just something I've done in the past so I'm gonna completely make a fresh one and so I hope my arts lives up to my lives up to my own standards here so there's the note and as you might expect there we go this kicks out on you so another you might notices the game is actually this is new to a lot of my students at this point is that the game is larger than just one screen a lot of the games we make is just flappy bird on one screen but this is the player can walk around and there's an extra camera view that is a camera larger than the actual world itself right just like in real life the things we see are just one tiny little portion of everything that we can see out in the universe so a lot going down here I mean it's a lot but it's not truly a ton so we'll start getting to it and I don't have any sprites ready we're gonna I'm gonna do everything fresh today just to just again to show off like my artwork I'm gonna keep the game to 720p resolution but that doesn't mean I can go that doesn't mean I have to keep to like weird sizes for my sprite so I can keep the defaults here for a lot of these things things we do need I need some kind of wall sprite and I'm gonna use 32 by 32 as the default I'll just make it 45 40 I'll make it for everything I'm gonna do here is 40 by 40 cuz that's just what I'm used to do and then just rename this over this s alright go ahead and just fill this in just a dark gray box or something like that with you whatever it is and of course if you want to go find a graphic that looks better that's your prerogative that's I'm just doing the bare-bones minimum I am again my as a programmer my experience what this would be here just give me some art you know just like they would be like a programmer give us some programming so there is my wall sprite I need some kind of and I need some kind of human hero so this one could be a little bigger if you want it to be since it's 40 by 40 I'll use 60 by 60 oh no I'll just keep - 40 by 40 and so everything is kind of small but you kind of get the picture here and so I'm gonna have this maybe we'll make this bigger let's just see what it looks like in the game world before we get going so I will put a balding head right in the middle of this thing how would I know about any of that I don't know but I'm gonna put something like this here in the middle I'm gonna fill it in with some just a little what color there we go something like that and I'm gonna give them like a shoulders and we'll see about adding maybe some feed or something like that and I Oh every time I do this I forget I should do the other I should do the other this part first this just makes me fill it in my hand which is fine it wasn't so bad and then just to keep it kind of halfway symmetrical and I am pointing this guy to the right on purpose because if he's facing forward which happens to be this way you know that way that's the zero degree you know when it when it comes to the 360 degrees scale that we use mathematically determine you know zero is right 90 is up 180 is left and 270 is down so later on when I do actually go to rotate this thing I won't have any issues if you if you do have this you know set up differently then you will have some issues because you it will set up such that you'll have to do an extra rotation you have to do some extra math to rotate the thing in space okay so just to keep it going here just since I'm doing this in a video not in class I can have a little more you can add a little more oomph to this thing so this will be the idle state and maybe if you want it you know do you want to add shoes that's the question I want to add shoes but like as a step let me find like a dark brown or something like that so I would just go ahead and just draw it in and again here's my artwork no that's not right the feet are a little further over right so let's use a foot yeah perfect items but over here fill this in that's one copy this over so I have this and then copy it one more time and then fill in all the color that I use for the he's that Matt okay so that I fill in draw my other foot somewhere in here and then fill in the darker color and so what have I got out of this I can run this and there we go it's it looks horrendous but it gets the job done and it's a little fast you know you can slow it down if you want to we will slow it down to something that looks a little better in the in the future here so that looks good for a hero let me him so he doesn't do any more I've got my wall I've got my hero and that's all we need for just the time being just to kind of get something going and then we'll just kind of iterate through and advance and add some more stuff okay so let's get some objects going for these two guys I need wall sprites are wall objects and so I use wall while sprite oh yes and before I get to the hero I want to Center this character middle Center so that again when I do the rotation the rotation doesn't look at all crazy like a spirograph or something so he's centered right in the middle of his big bald head and then everything will rotate according okay so I'll create my hero object using the hero sprite and so we have the two things we need so now I'll just call this I'll rename this game playroom the horror game playroom and inside of here let's say everything is 32 by 32 I need to change this to 40 by 40 because again I've changed all my graphics to 40 by 40 and this is just this grid as a tool to help me put objects in the room much easier then you know then alternative ways okay so coming now like say I want a 720p resolution but that's just for my camera that's just for my viewport so the world itself is going to be larger and just for the sake of this I'm you know 720p resolution I can just make it whatever I'm just gonna make it let's see 40 2400 I'll make a 2400 by let's see since that's 1400 does that fit 16 pretty big right so this now I'm like you can see I've scaled out control scores control scroll wheel so I can I can kind of scroll in and out my game world and now if you really want to go ahead and hold down alt and drag in create wall objects and I'm I'm not gonna worry too much about their placement I'm just kind of putting them in of course I would be much more careful okay so I want some kind of boundary and then just to sit just so we can see things moving around if we are in the middle area I'm just right now I'm just gonna add I'm just gonna add stuff so no matter where I am on the screen I will be able to are in the world I'll be able to see this kind of stuff and as I move around I will see this as well I'm gonna put the hero you can put it wherever you want I usually put them up here I'm just gonna oh my god I'm gonna go crazy today put them over here near the middle top of the screen it doesn't much matter where you put it and so now if I run this just just like this what happens and there there you go so what happened is game maker does its best to take the entire room and put it on my screen and so I would be willing to bet it's getting on it's giving me 1080p realness here when it comes to its graphical quality our character but since we haven't touched the animation is walking in place or jogging in place or whatever the heck he's doing there and so this is a great first step of course but we want to continue on and add the viewport so let's see I mean I'm not gonna need a lot of layers here so I can bring this up and I'm not gonna really need to play with that stuff this is where all the all the viewports and camera settings are stored and so this is a fianc this is your first time this takes sometimes a little getting used to and sometimes everything you can do in here fights the code you might want to write at least in it when I do this more advanced it sometimes they kind of battle each other for supremacy and so sometimes you just got to do what you got to do so I thought it's kind of like these the viewports are kind of like the cruise control on your car and that you have to enable it but then once even though you Nabal it you really haven't started the cruise control yet so in this case if I all I do is enable the viewports if I just clicked that one thing now everything is completely blank because even though I said enable viewports I didn't enable any of the individual viewports that game maker has set aside for me so there's nothing to draw even though my whole game is there you're basically saying there's no cameras to show me this game world anymore so we've completely taken over from the automatic nests of what game maker done so generally speaking we just take over viewport zero and there's a lot going on in a viewport see if I can get it all on get it all on here okay so there's camera properties viewport properties object following and then a bull we're all in a speed and all these other things and I'm gonna keep it relatively simple for this there's many ways we could go ahead and do this but coming back to this like this is the camera how you know basically how would i zoom out like what am I actually trying to picture with my camera and just for the sickness I guess a zero zero I could say my width is 1280 a nice high to 720 and let's see well let's show me I wish you would why isn't it showing me the camera viewing here Matt whatever not necessarily matter but this is basically saying okay I want to say I want my camera whenever it takes a picture of my game world I wanted to take a picture in 720p resolution so I mean that's what we want to end up in our window and that's the viewport properties so to keep the proportion one to one you just take it and say okay 1280 720 take basically the cameras take a picture and then the viewport part of it is how do I stretch that picture to fit the screen right it just like you could take a picture you just take a photograph and then you can adjust the viewport properties using your fingers on your phone and all that to zoom in or zoom out or do whatever you want with that specific picture so it's a very strong parallel here so so what does that do for me nothing because after all that hard work even changing all these things I did not make it visible and that's why I couldn't find it a minute ago all these little foot part it's really easy to forget one you have to make sure you enable viewports and you have to make sure you click visible for all the viewports that you actually want to use so viewports 1 through 7 there's 8 view parts in here the other 7 viewports are sitting there unused and so now there we go there's something and it's a lot better right this is my 720p resolution and here is my screen and so just for the sake of this real quick here just so that black the lighting in here is right in my eyes because the sun's coming in this way on me and so I can take my background and say okay let's add a background color that's like a darker green like a grass that's about whatever it is it's better than the black that I had before I can actually see this now as like if you were gonna do this for real go find a graphic somewhere some kind of grass texture or whatever kind of texture you need for your ground right so but at least at least it's a start okay so I have this and notice the character is nowhere on here because this is just saying okay started in a 0-0 start in the upper left-hand corner and if you look at this camera viewport here you see the characters no is not part of this and that's what the rest of this will do and this is what we want to have happen like there are other ways to scroll around with the mouse and handle you know like like an RTS game or something like that where you can scroll the mouse around but in this we're just gonna follow the player so I can say follow hero and now that I'm you know this doesn't change this here but when we run the game you see that here's my hero now at least he's on the screen right and maybe that's not maybe he's not you know it's like he's that centered or anything like that but at least we're getting closer and that's what these other settings are here for so h4 is it's called H bar V bar and the codes that's why I call it horizontal border vertical border and this is asking how many pixels do you want the character to be from the edge of the screen before the camera pans with the character and so you know so that is perfectly legitimate the way things turned out because this character is more than 32 pixels away from the edge of the screen as it moved the camera to accommodate this hero object so what can I do usually what I do is if you want it exactly centered almost I think is all the time you just take your your your viewport you just cut the two values in half so if I wanted this exactly in half I would do 640 by 360 because 640 is 1280 1/2 and 360 is 720 half and so now there we go and it's not going to work if you are on the edges of the screen it's not going to work out because the camera was it will never pan or never move to somewhere that's outside of the room at least automatically I can write code to make that happen but I'm not going to write that because so right now when you're playing the game you can you know when you're on the edge wrong and I don't believe in there I think the camera should keep on going because my because if I knew I was in the edge of the room I would know not to experiment and try to you know try to blow things up or something to see if there's anything behind those walls but if I could keep on going and I could see stuff behind that wall I might think oh maybe there's still more to the room so you know it's one of those that's a design issue more than a development issue so it's like it depends on what you want your player to experience okay so with the hero hasn't moved yet but this horizontal speed and vertical speed is basically how fast do you want the camera to catch up to the player and so negative one negative one means just go as fast as you can to hook up but if I made this like a one and only horizontal speed one you see if I can do this fast enough here we go you can see that the camera is trying to catch up but it's the cameras panning one pixel per frame to catch up to that where the character you know where I actually want the character to be if everything was perfect and there you go it's it took time and now the character is there so it's up to you if you want the camera to pan or not I'm just gonna say no just have the camera set up and just kind of go okay last thing I do here for this type that just to get the hero moving I'm gonna add some touches or keyboard events I'm just gonna use wsad events for this here so key down key pressed is one thing but I want key down and if I press the up arrow key any frame I'm holding down geez I just talked about this let me just changes instead of key press I want key down letters W and I want that character to go up and so they say like we're gonna rotate the character but in this case we're not rotating the world so up is always going to be up left and right and down so the character can always walk around and the character will look like it's strafing as it's trying to look at a certain angle so just like you know in the real world you can walk backwards you can walk sideways you can do all sorts of stuff so just to say here oh shoot I forgot there's no such thing as a move context solid in game maker drag and drop so I this is just my default way of moving characters around so I want my walls to salad and I got a right code to make this work but it's not hard one line oops I know what I want to type though and so hey okay so let's see how do we get this over and so this I want to do a move contest Island and in this case yeah what am i doing oops pellet right so what am I trying to do direction I'm trying to go up so up is the 90 degrees and how fast do I want this character to go I don't know I'm just gonna give it a five and that's part of the gameplay is just making sure what do I want this thing to do so like how fast in what direction so right now the only way the character can move is up Oh W there we go and with the move contacts talent in place the character never gets jammed inside of the wall and so if I'm if I don't make this salad if my walls are not solid obviously you can imagine a move context salad will not work because that function only applies to the solid objects in my scene okay so then just to finish up the deal here duplicating events four key down letters s just changing and all it is is just changing the value of the direction 270 is down duplicate four key down letters a and goes the left so that will be a 180 and then duplicating that four key down D letter D and then I'm just changing this saudis to the right that's a zero so at least right now Oh should I click back on the I click back on the walls forgot to do that B do that real quick alright so then I got my character up down left right and notice the camera moves with you and so I don't personally like to have the guy Center like every time I move the camera comes with me so I like to reduce this just a little bit I like to have a 300 by 310 or something like that so then now there's a little center zone the character can move around little bit before the camera comes with it and you can play with this it depends on your how you want things to be but you know to me I would I would probably want to add maybe just a little bit just a little bit more on both ends of this thing so there's a little more of the center area so the camera doesn't move now and stop as soon as I want to do anything so yeah sound like that I can move a little bit horizontally vertically and again completely your call alright so then the final thing here before I pause my video or move on to the next thing I want to I want to have this hero rotate himself to face the mouse pointer every single frame so that's a step event and so one of the things here I know I don't want to do it I mecha I don't want to show it but what will happen is if I just used image angle and just said okay fine where the mouse is find the direction and just rotate myself there's move contact solid functions that will make sure that as I'm moving around I do not get stuck in a wall but there is no such thing at least I'm aware of as like a movement rotate sound so I can't just be like rotate 10 degrees and then it'll rotate as much as it can because the bounding box comes with it and the bounding box stays or it doesn't stay when I rotate the whole bounding box goes but there's no check so if I rotate 45 degrees that bounding box can get stuck in the wall and then my character can't move anymore until I rotate out and that is definitely not something I want to have happen so rather than show this and just trust me on it it happens all the time when you rotate things and the more you rotate it the more trouble you can have so the setup for this is to I can set up to say okay move towards point think there's a move towards point set point Direction yeah that's that's it right so point let me let me ask for help here set point Direction this action is used to set of direction from a vector form by the current position of the instance to the given position so yes this will take my position in this end the mouse's position and it'll tell me in the 360 degree realm of everything you know what number value should is that direction value so I definitely want to say okay point me toward the mouth point me toward the mouse mouse X male swine and this says point direction so this sets direction so even if I run this right now it will not change anything as I move the mouse around because the direction is not the image angle but I discussed image angle you don't want to you don't want to play with imaging though here because you don't want to get stuck in the wall so what I can do here is in the step event I'm setting the drama so step event is one thing the direction doesn't apply since I don't have any speed applied to this amusing move contact solid functions the direction is perfectly a perfectly legitimate place to put that data but in the drama bed here make sure I'm in the relevant what I can do here is basically it's a three step process I say okay I get only here inside the draw for a brief moment can I take my image rotate it draw it and then put it back that's the whole thought process so the bounding box in essence is only modified in the brief moment I need to draw the thing on the screen so I can say image angle that's what rotates the image equal to Direction okay and then I can say draw self I don't have to do any extra work there and then I can say put the direction or put the image angle back to zero the zero is the default and so now here is my character he's rotating around you can see it my character is not very big but you can see it and then even when I'm walking around I didn't even know he owns like it doesn't look like he's getting stuck in the wall but he can get the would get stuck in the wall if I was pressing up and left and right all sorts of stuff out there you know I can see that I am in the wall as I rotate but I can still move because technically that bounding box has shifted and I'm putting it back to square and that Square is outside of the square is outside of this thing so that's it looks pretty good never stuck in a wall because that's very frustrating you're trying to run away and you're like you know you're stuck like jelly or Jam or glue to a wall you wouldn't play a game for very long that was the case okay so and then finally here for the player I am gonna set up so that the feet the feet move the feet you know and the feet only move while the character is walking around okay so what I can do here is in so this is interesting stuff right if I press keep he down he down key down key down like I can set the image speed so I could say okay oops I can do a move contact salad and then where's my drag and drop here to code here and I'm gonna set a variable like it I could type it in but I'm gonna keep it to drag and drop as much as I can so I'm gonna say oh my image speed should be I used I always think a number between point 1 5 and point 2 kind of matches generally speaking matches what a character looks like when they walk but I think I'm but I think that was back in the old days when it was 30 games 30 frames per second so if I set this thing to point 1 and this is the fun event if I copy it let me just you know let's just see what let's see what W does for if I press Delta you were down image speed is point 1 I think that's is it didn't even change it's interesting why is it hmm but you can see you can up you can't see you can't see anything okay so you can see the thing has slowed down substantially so maybe point won't help so maybe you put it back to point 1 5 and try it again so you can see yeah that looks about right right when it comes to walking speed okay I mean it's it's up to you whatever you think maybe a little faster for 175 so I'm gonna copy this just because right now that is not the most important thing here so here Oh a paste that in here Odie paste that in here Oh s paste that in whoops didn't do it there it goes and then just to make sure I have still happened in the W is that you so that occurs in every case here there we go so it's and then keep going so there we go and then the only thing I need to do here is make sure when I start the guy off in a create event which I don't have yet I have to set that image speed to zero so he's not running in place and then I need to also do this when every frame that the character is not moving and this is where things get tricky because if I was doing this in real code I would put I would have put all these key events in the step event and that way I know if I'm not moving or something this is really difficult so actually what I can do is duplicate this image speed zero and put this into the begin step event because we have to start understanding the order of events inside of a game for anymore just inside of our game and so the begin step event gets called at the beginning of a new iteration a new game frame and that will always get called but before the step event and any of the key presses so if I set the thing to zero basically this is saying for this game frame so far no movement has been found and then we will very quickly figure out that we have we are needing to move when we get to that point when we get to the key press events so now that the character should only so there's yes there's no foot movement and now the character only walks there we go as I am working it out and so it stops and if I'm not gonna go any further but yeah maybe you want to put them back to the idle state I that's a little more complicated than it needs to be here is to like to put it back to idle state and just have it draw the zero frame so it's not drawing a footprint you know early because nobody nobody stops like that in the real world right nobody just stops like while creeps do right it's a creeper like or if you're playing freeze tag or something like that but people in the real world do not stop with one foot hanging out especially if they're gonna rotate around in space so just just something for your thought process there but when it comes to the typical movement of my hero I think we're pretty good here I think we're going to move on to other things okay now adding the trees that I want to add a little ambience to this you're on the forest somewhere Slenderman is coming for you so first thing I want to do is add the tree sprite and this should be a little bigger than everything I'll make it like what doesn't really matter what size 135 by 135 there it goes nice and again my art skills are wonderfully awesome and so I will just draw something here to make it look like it's a tree or you know like the tops of the tree we're not gonna worry about the what's McCall we're not gonna worry about the trunks or anything like that we're just gonna go with it make sure to fill that in here and so here's my beautiful wonderful tree there we go and so now add something there we go and I'm gonna walk this thing this doesn't matter if it's set I don't know but I'm gonna Center it anyway and oh yeah I gotta change the name of it trees right so there you go and we're actually gonna like you could have multiple trees I've seen a lot of people when I give this homework assignment I'll do a lot of cool things with trees find cool effects and kind do all sorts of crazy stuff but for now we're not gonna worry so much so I have my tree and give it the tree sprite and so I'm gonna put it you know put it in the room wherever you think they should go I'm in the background instance I can't write do much so whatever however you want to do it I recommend not overlapping or trying to overlap as little as possible because when the opacity comes around it's gonna look a little weird because it's like think of sunglasses if you put a pair of sunglasses in front on this pair of sunglasses it's like you know what do you see in those little cases you see double darkness and so the opacity can get a little a little funky and just to test it out like I'll put a few here I'll put a few down here just so you could see what it's like when we walk around and you can kind of see and so we don't need only the trees totally up to you what you want to do and so I want to make sure the trees are drawn above the person so I want to guarantee that so one of the first things I want to do here in the create event is set the depth settings you could set up a whole different instance layer if you want to but again I think that's overkill maybe that's just me maybe that's just me using the old game maker and just using depth for many many years before the layering system came out in version 2 I think amid simple cases you just tinker with depth and you do not have to worry about these lay or these couple more complicated layers and so that's one way I want to do this and since I see since I centered the tree since every tree will look identical you know it'll look exactly the same at least I can kind of give you a little something different here and I can say okay my image angle is going to be equal to R and I random and is random or whatever 360 and what that does is picks a random value for that specific tree and it rotates the thing around so each tree will look a little different at least it'll be rotated slightly and theoretically be rotated slightly differently and there you can see that and now I can move around and say I'm always underneath because the trees are being in negative depth the trees will always be drawn on top of the player which is good because that's reality right but just like this is a video game and I'm here like where is my player I don't remember anymore and so in this case what I can do here is set up when I'm touching the thing to set the Alpha the image I'll find this thing and kind of like we did before with the begin step I need on a frame-by-frame basis to kind of reset the thing so I can use a step begin step event and just say okay my image alpha is gonna start out at zero I'm sorry start out at one so it's going to be completely completely opaque completely visible and if on a frame-by-frame basis this collision happens after the begin step event if I collide with the hero then I will set the image alpha to some some value maybe 0.4 and this is completely up to you and your gameplay experience so like here there you go so you can kind of see you know see you can see even that right between the player here that the player looks normal when he's not under the tree and he looks like he's under the tree when he hits so that's pretty cool alright so so you don't get lost anymore at least you can see where you are and this is what I was talking about earlier here that could you have regions where you have double opacity effects going on and they're both they're all fighting each other for this for this alpha value and so maybe it looks a little weird to you if it doesn't then keep going with it but if it does then you definitely understand that that you got to do something about these kind of things and keep the trees from colliding with one another or something like that but otherwise trees are done and now we're ready to move on - I guess the I guess the bad guy let's do slender okay so slender man himself is gonna start chasing you very very very very slowly and then I think as I pick up these notes that'll be the last part of this and just as you pick up notes what I'm gonna have to do something about that so the most easy way for me to do this is just to duplicate this call him slender strange I just changed for now just changed ecologies just change the graphic up this is why you know I'd like to usually just use a tenth down the thing I'll just make I'm just gonna let's see can I can't do and I'm frame-by-frame basis can I are like overall so I'll just call it slender spry I guess we could I'm just gonna use that and then I'm gonna tint it so let me just get him in the room let me just show you what I'm talking about here let me just use a slender my slender man there's my slender use this slender man sprite so when I have more time I could go back and fix it up and be much more you know much better rendition of what I'm trying to do and so in here I could say I'm create I don't know it does is it part of hearing let's sequence the Alpha set instance elf I'm not elf yeah alpha know tint tint in tips are tint about tinting or the color set draw color setting up not okay so I'll guess we'll have to we'll have to do something about this and just say okay I want to set the blend color image blend come on I don't think a black set instance color go yeah there's a very dark for that okay the tinting of this that instance color and so what what this means is I can take the Slenderman image so that's like the fleshy fleshy brownish peach head in the blue and I can apply basically just shiny specific color light on it and as you can imagine we usually shine white light on this thing on every object in our scene because that's the you know that is the color white light gives us the color that we're expecting to see and say from I'm not an artist so like for all this like primary colors and secondary colors and all these things like if I shine a blue light on a green object or if I shine up Molly goldenrod like I can't in my head figure out what colors should come out of this but I can say for this just apply you know making like poisonous or something so like a dark green or something like that it's the effect not the Alpha but it's a can I bring down make it like a dark green hint hue and what happens if I put the Slenderman right next to me in the room just to see what it looks like and you can kind of get a feel for what I'm trying to talk about here and go that's horrendous can you even see it I have to like this one was bright so yeah Green is not the best choice the contrast if you want a very difficult game you basically have an almost invisible object so no maybe not green so maybe let's go with just I don't know blue try it one more time let's see what happens just make it so it blue is terrible to make it red and then if it's not whatever just whatever it is upsetting I didn't actually set it there we go again there we go that's at least something so there's my Slenderman he's red it's he's just angry or who knows what it's just a maybe he's got a skin we didn't say I don't know but there he is there's my character and he's ready to come after me or if you want to you could just leave now that you know about it you can just leave the key just leave the tent white and just have the character look like you he's your twin brother I don't know but that looks the best right so again I'm just that was just to show you that you can do these kind of things old video games you know way back in the day when you know when we didn't have a lot of memory I'm thinking of like the original Dragon Warrior series there's looking for the original a kendo like you had a blue sign with a red slime and a gold slime you know silver slime and whatever all the other slimes I'd spend forever I haven't played Dragon Quest in a long time forget all the different colors but it was the same graphic but they tinted the sprite differently so they didn't have to create different images for different sport now for the same image just in different colors so it was one image and then they were tinted to the different colors and that was a pretty smart way of doing things so maybe this doesn't fit in this instance but again it has its uses especially if you're trying to keep your file size small few games small okay so I have to write code to move this character after me and I'm learning from past examples that I can't do this on a frame-by-frame basis because it just takes a lot of work like there's a lot of processing that goes on so if I did this on a frame-by-frame basis my framerate will drop so what I need to do is do this every so often and just say set alarm and I'll just set it to one to start one game frame and then what happens in my alarm event is when the alarm goes off one frame in I have to write the code where's my help where's my help there's my help so I'm going to use this function since there's no I didn't see a driving drop element there used to be one but I did see one here MP two potential step object there are better ways than this to do AI and do pathfinding except for the fact that it right it requires a lot more code and pathing and like a lot more stuff that i'm willing to go through right here to get the job done so I need this function and so let's just go ahead and go back to my slender and so in the alarm event I can go ahead and write code and say okay code put you in and then fill in and fill in the details here so I need countries it doesn't make that bigger okay so come on all right MP potential step where do I want to go to I want to go to the exposition of the hero I want to go to the Y position of the hero what is this speed slow one and what object is he following oh wait look what is that like one what is that the ID that is to block the path oh okay what objects are gonna block the path the walls and if we needed something else we can make a larger hierarchy so let's see what happens okay he's not doing anything hmm okay does this need to be in a step event let's see maybe it does have to Betsy where does the example does it say anything about where this code should go because we're doing things pretty much exactly the same the only thing I can imagine is it is an a that maybe let me just try to change this because I know it's gonna slow down the framerate but let me just change this into a step event and see what happens area is okay so that's all there was to it and so there he is he's coming after me and it's not gonna be perfect see how he's like right now he went the wrong way to try to get to me and then he's just coming around it's not a perfect day I the day it's not using Dijkstra's a-star algorithm or anything like that but it's doing its best to try to get me get me get me and so it's pretty good so one is a pretty good starting speed to come up again sorry everyone sorry everybody oh you can see it never mind just two screens and all crazy stuff okay so the last thing I need to do then is to rotate this image so he looks like he's coming at me because right now he's just he's just there just standing in one direction just just using his brain or whatever to figure out where to go so in a stuck event use this MP potential step and then I can just say image angle I'll write code here equals direction let's see what that does and there he goes now he's looking like he's coming after me because because what happens is the direction the speed and the direct office he's gonna throw up he's gonna get sick coming after me oh boy he can't get me oh my wow so slender man let me just adjust the collision mask slightly here oh that's interesting that did all this automatically so let me manually fix this that's all it is it's just a manual fix here so let me just let me reduce the bounding box on this thing just a little bit from the zero five to thirty five five to thirty five there we go so the bounding box is a little smaller for that character now so now he can't do we can't do that again let's see what happens and what will slow him well slow his movement down as well since I can't get him to do the rotate thing there he goes come on rotate she's gonna come get me very good come on you got this oh there he goes okay so noted note to artist notice note to game design game level designer and a little more space than just one square I mean that's just at least in the current moment that's how things are okay so then I can just in here - I have my alarm countdown I don't need my alarm counter anymore since I'm not gonna worry about it since my computer everything seems to be working pretty well and then I just want to set the where's this set the image speed so that 0.175 I was using earlier so his footprints he looks like he's a little man looks a little more it looks a little more labor than that frantic leg kick that he was doing before so he's always coming after me with the legs just want to get rid of that thing in the room pump this only came about because the mouse couldn't keep up with me couldn't keep up with me anyway so I'll just leave some of this stuff open [Music] so let's animals everybody else looks happy at least two squares around so now it's the character can come after me a little better you can't see see like that's kind of cool like when you're under there you can see him but if he's under the trees you don't know he's there so it's gonna add a little fun effect to that but he will chase me down non-stop as best as he can they'll get stuck you know like it's fine I think that's kind of odd cities you don't cuz the scariness we're gonna add a fog of war effect the last thing we do so it's like you don't really know if he's a mile away from you or a couple of inches away from you especially if you don't have the you don't have your lantern fix and you know whatever is in the opposite direction and what do you think or you think the character is so I think it's pretty cool okay so Slender Man then when it comes down to it when the hero collides with Slenderman collisionless under me and I want to go to I guess we'll just call it to the GAMEOVER room and so this is an opportunity for you just put objects in a room and so in this case I can just I guess yeah whatever I wanted to do just to have the game over room so when I collide from that sorry between that between hero and slender go to room room go to go to this go to the game over room at any time when this character touches me there it goes and so whatever because you're dead right that's the whole point of the game is you are dead now that that Slenderman has gotten you and this will apply throughout the entire game all of the eight notes and all that kind of stuff that we're trying to accomplish so I think we're done with Slenderman for the most part we might speed them up a little bit as we go but at least when it comes to the basic Slenderman movement we are done all right so let's add the note to this so I'm just gonna make it a 40 by 40 right I'm just gonna go ahead and just go ahead I got white going on here already I'll just use white and I will draw make it look like it's just something that's not perfectly piece of paper or go something's been crinkled around in the woods for a while there we go fill it in with slightly slightly less white stuff and then just draw something on it to indicate it's a note something like that maybe make this animal maybe bring this up a little bit there we go so I know that's a note that's my notes break okay so as we were discussing here I'm gonna have eight different notes so in this case I'm gonna call this no one or no one or something like that it uses the note sprite and so I'm also going to call it rename this game playroom I'm gonna call this game playroom 0:01 so this is going after note one so you're gonna see here I'm gonna set a few things up so that we can see what's going on here so I have game playroom one I'm gonna put note one in here so I'm gonna put it wherever I think that the note should go so I'm gonna put this here I'm gonna move Slenderman over somewhere else he's still gonna follow you and all that but he doesn't need to be right on you when you start okay so then so then here we go with that and it's so pretty simple stuff from the note is in the room oh oh oh I'm in the wrong game playroom should go first I don't know I'd probably modified that a minute ago don't know why I would have done that it's just running dead thinking about it so there we go there's my room so game play room oh one I go and then I need a collision event so let's see what it looks like in the game there's my note it doesn't look too bad right for art that doesn't that's not parentis so when note oh oh one comes around and I collide with or yeah so I guess it depends on where you want to put all this stuff maybe we can put it in the hero but there's a lot going on already but we can drag this down and I could say when I collide with no no one instead of going to the game over um I can go to Ryoga color we'd note Oh one read note room Lola and so what you're doing in here is you're setting up and so let's make that let's make that collision event happen so I say okay I hit the note I go into that room read note oh oh one okay and so what I'll do then is I'll set up just quickly to have something around create a sprite and I'll say this is note or just message note whatever you want to say message oh oh one sprite and I'll make it pretty large I can you can make it full screen because it's 720 m in to 720p graphic and just go inside of here and just say I don't know like you know whatever it is that you would want to see what that first note would read right so let's see go ahead set the text a little bigger I don't know I'm just of course I'm just adding something as a placeholder so there's my message one sprite I could put this since it's a sprite I can mind getting my game in my read note no room in my background layer I can put pop that thing in fair enough right so then at least we can see something I could have you know like it could have done that for the dead room but I'm just saving it for listening so okay let me get to this thing see that it's working why are you here yeah that's kind of cool that is why did you do that hmmm I didn't it re why didn't it right over the previous room it's interesting how many objects are in this how many objects are in this thing just zero right in this room so why was it why is it actually showing this over the previous room let's check this out the hero collides with the note and I go to read note room zero zero one that's all that's in there that's weird to me yeah there's nothing in the instances layer here there's no single objects in here hmm perfectly fine perfectly fine perfectly fine why are you here I kind of like it except for the fact that that's not what I'm going for hmm is the black clear anyway so what I could also do here is just make this pretty make this note persistent or I got to figure out a way to get out of the note room so I can go to the broom too so I can duplicate I'm gonna duplicate room one instead okay I'm gonna put it in the room to here and so what I can do here is game play room two since this is where the note is this is where I'll put the player because I got I kind of trying to tell a story or I'm trying to tell a linear story so maybe Note 2 goes over here now this is where my player will be after he touches the note and then we can put Slenderman we don't have to start them we can kind of start them somewhere else just to kind of you know what if you want to give them a jump scares people look let me go up and then maybe he'll be right here and some of them be a little scarier because he'll come get me you know like right in front of me even though he admitted a second ago he was to my left or something like that and so so I just need a way to get from inside of this read note room and then I need to get into the next room so what I can do here is I can just create like a I'll just say controller read a 1 and so all this thing does is set a timer I just you know just something like that just set a timer or yeah yeah timer is fine let me find the timer event here set alarm timer I'll give you 5 seconds to read it so 300 game frames and 1 alarms zero goes off I will change rooms and I will say go to game play room 2 and I just got to make sure I put the I got to put that controller object in here so that it's it will follow that and follow the lead and actually go to level 2 so let's see why aren't you here one two three four five there we go and then there is and now I gotta go get them I still don't know why it's clearing out I'm not gonna worry about that and if you can figure it out please put a message I'm not gonna spend the time to worry about exactly why and then again this is gonna be Note 2 but a bit this is as far as I'm gonna go because now you kind of get a feel you touch Note 2 you go in to read note room - you do what you got to do and you just continue the story as far as you need to go and then basically when you hit the 8th one it's all good you're all done right so this right now this will just start over room 2 over and over and over again and when I touch him I die cuz that's my dead room and so just just real quick then I can see like ok dead message I can make this 720 Peters again there's always ways to make this because this uses a ton of memory for these graphics but at the end of the day do I care right now now I'm just gonna get the job done you put text in here or something you [Music] you have been deadened and so then in the dead it where's my dead room where's the GAMEOVER room that background can get this the deadening message dead I'll make this 720p did I make everything 720p before here 2400 720p no I didn't maybe that's all it was was let me make the 720 - let's see maybe that's all it was let's cross our fingers on that okay so let's see so let's try let's start winning one more time at least winning level one here okay why are you didn't do it but that's still kind of cool drawers over and then now of course it'll just continue on every time I touch this Lil's why are you here then it'll start over and then I'll die and then we'll see how this goes you have been dead and then there's no out right now but of course you could do the same kind of stuff where you put a timer in there and then after a certain amount of time you go back to me and then you exit the game or restart the game whatever it is you need to do but I've been getting and I'm done and so now the final thing I want to add is a fog of war fight because right now you can see the entire screen but as you're rotating around you shouldn't you know the mouth should be used as a camera basically so that you are not a camera a lantern so you can kind of see in front of you I think that'd be a cool final part to this game okay I say quick and dirty fog of war effect a lantern effect this is not how I would do things in reality but since this again is a simple enough game putting a giant graphic on the screen full screen alpha alpha blending isn't gonna really damage anything they're not what's going on so to make this work I'm just gonna create one absolutely huge image I mean huge game maker will actually split it down so like as much as you might like try to make it cool and try to make a really cool effects when it scales down or scales up or whatever it does it's gonna take some of that coolness away from you so I say don't don't fret too much on this and try to make it too perfect so this thing is apparently 5,000 by 5,000 there we go or or actually what do I do that's not how I do things let me just call this fog of war that's right and then it takes a while so let me start out by making this in the let me start by making this 1280 p or 720 p game makers chugging on me for sure okay so I have my 720p resolution and so I'm just gonna say presume the player is over here pointing to there or actually yep for now just he's over here the characters here pointing to the right and so what I would do is let's just generate a circle for what what I want the players visibility don't worry about color or anything just fill in what would I want that player to look like well what I want this now I could do a filled circle I guess to make it a little better here you're like okay like this maybe this isn't the best but I'm just gonna do this just to just to have it and you can tinker with the shape to your heart's content once you're happy with it so this will this should be the visit I'm gonna put the character like right here and I talked about what I'm going to put it and I'm just gonna rotate and then rotate this thing around the player so this is going to be the viewable angles that are the viewable part of the screen so now I just go ahead darken this out use the wizard tool clear that out and so from a stand point now this is going to be the clear part everything else is gonna be black I'm you know blackened out so I can't see outside of this little area as I rotate my mouse around the screen okay so now with that said I can go back in here and say now that I've done this right now I can Center this thing they're not centered this thing now I can bring this thing up to a huge large value and I never figure out for 720p what value does this thing need to be because no matter where the characters on the screen this thing needs to rotate so only this part is visible and everything else is black but as you rotate you need more and more and more wideness and height 'no sand on it so that there's more black around this so every portion gets blacked out so I'm gonna just to make this work I like these 5,000 by 5,000 for my size and then I can go into this image fill in that black region once game maker will let me and it will it just takes a little while there we go so that now that entire image is black except for that little part and now all I have to do is set the centering to where I think I should put the player and I'm gonna put them right there right that's where I'm gonna that's where the player is gonna be in this whole mess and this giant image okay so the image is set and you will notice when I go to compile is let me just go to kinesins let's see if it does it now I will build what can it build without running no let me just see run and it's where is it there it is it says that it's rescaled from 5,000 to 1250 because five thousand five by five thousand is is too big it really is too big we're gonna built where is it where is it there it is because your graphics card cannot handle such a large thing so it's scaled down to 1250 by 1250 so don't worry that you're using you know tons and tons of memory in the game itself game maker is smart enough to bring it down so I have the image and now it's just a matter of popping this thing on top so I have to create my image I call it fog or trick my own jet bottom or use that sprite and let's see if you want to you can how should we do this I'll put it in the hero actually I put it in the game playroom and that's because it's one of those things it needs to be in here so you got a dragon in here and it's gonna be hard to see because it's so big as that's one of those things like we're put this thing on just as long as it goes anywhere like it doesn't have to as long as it's in the room and the same goes for gameplay room too as long as it goes in there somewhere as you see how cool it's gonna be right there there it's gonna look like that it's gonna be pretty cool right so so as long as it's in the room we're all good with that and some of the two gameplay rooms have it I don't need it when I'm reading a note I don't eat it when it's game over so then all I'm really going to do is say on a step by step basis move my exposition or move jump to point or whatever jump to point say go to the heroes exposition and go to the heroes y position so without rotation this will block on so they are seen okay so you can see it now and now they see they see the jaggedness of this as its scaled down it's not as nice as it was when it was 5,000 by 5,000 but you can see now as I move around without the rotation there it is there's my entire there's my viewable window everything else is darkened out oh and so I guess we'll have to play with the depth settings and because we want the fog of war to be on top of everything right so I need to make sure I guess the step event is a good a place as any to set the depth settings and I'll set the depth to negative 2 just so it's on top of everything so then now after all that now yeah now you can see it a lot better now all you see is that visible area you do not see any other part of this and so the player is rotating and now all we have to do the final step on a step by step basis is to say for another variable just saying image angle in the fog of war is equal to hero's direction remember we its image angle only in the draw event we did this half an hour ago or so and so the direction actually holds the value where I should rotate the thing but so that the object doesn't get stuck to a wall we only use image Ingle for a brief moment in the draw so now this rotates and now you could try out if you could if it works in the corners it pretty much will work everywhere if it works here and it doesn't clear anything out you can rotate it around and you can see everything's looking good just kind of watch out for slender or that's creepy that was creepy I don't think that's meant to be that way but man but we could we could fix it another time and then but the fog of war is working out perfectly let's let's check slender one more time here when it comes to this manual rectangle frame by frame by frame yeah I don't know I don't know why it's I don't know why stuck that way oh yeah yeah yeah I just told you why right so that's the fun of game maker these kind of things screw you up so that in this that was the fog of war now image angle equals direction this is what it comes down to here it is the same thing I talked about it just the fog of war is different than the Slenderman so I have my create event my image speed I give all this stuff but now here in the step event mice where's my stuff on them where are you hello what where's the code bear are you what the world let's close you down here let's let's take a look at your stuff that one more time did I get rid of it what just happened trying to end this video because it would put up with me for long enough let's go nowhere and we're slender yeah I guess I accidentally got rid of it hmmm I don't know where the code went okay so let's go back and use that MP Pro let's just write it in real fast right just get it done with don't know where it went to what is the create event no what did I do alright so in this here I need that MP potential potential was a potential step object is that the one I use to get remember now yep that looks about right so alright so I want to say so I'm gonna say okay I want to go toward hero got X he rode out why I want to go at one speed and then I want to go at I want to go with walls look oh and I'm and I'm gonna that second step I'm gonna leave alone now because that's the thing that was causing our problems that's that's what got me spinning in place when he hit a wall okay so now it just comes down to the direction is still being you know that the direction is being changed every every moment the character is moving toward me but again what happened is if I change the image angle I'm rotating this thing and it got stuck in a wall and he's just rotating rotating and he cannot get out it's being stuck in the wall and is terrifying that is that would be if he ever got unstuck it just came at me in a thousand miles an hour that would be a horror story in itself that's not what I'm trying to do so what we've done before here is for the draw event for mr. slender final step saying okay mirror image angle is now set to direction for a brief moment in the drama and then draw yourself clips then set your image angle back to zero so just like the player doesn't get stuck in the wall now neither does the Slenderman where is he let's find them there he is now he's no longer so you can see that now he's coming after me and now it's a fair a fair fight he can come get me at any time and he just keeps on coming until whatever happens happens all right yeah so here he is coming after me does not get stuck in walls any more no matter what because now his bounding box never puts them in that range never took the potential path stuff and all that makes sure he never gets stuck what's in there why are you here that looks cool now right I think that looks cool I still don't know why it's doing it but it still looks cool and then yeah so there you go so there you have it you have a fully working first good version of Slenderman at your disposal here so the sky is the limit for what you want to add what kind of details what kind of backgrounds what kind of storyline I mean there you could you know I have given you the I've given you everything that you need for infinite creativity from here on him so thanks for putting up with me so if you have any questions if I did something wrong or if you could do something better especially in the drag-and-drop environment because again I can write code like nobody's business but we gotta keep the drag-and-drop for the drag and drop videos so sometimes it's hard to kind of translate what you were doing code to the drag-and-drop elements so let me know if there if you know a better way to do a lot of these things or if I did something incorrect sward be a co d dot edu through my email through this school or you can leave a message here on the YouTube channel and so for me right now this ends my video series for the 12:11 course I have plenty of other ideas to make videos I got a I got a front load my videos make flappy bird and I want to make a platformer game and make all sorts of stuff for my other classes have a lot of fun with this but if you have any ideas also send me an email send me a comment and I'll see if I can work in because I always love making these kind of games and trying something new I've been doing this one for a few years now and if there's a better one I could do I'd love to do it so anyway enough blamming I am NOT a blabber as much as you might think so thanks for putting up with me see you guys around have a good one

Channel: Bradley Sward

Views: 831

Keywords: GameMaker, Studio, Game, Design, Development, DnD, Drag and Drop, Slenderman, Horror, Survival, Viewports, Cameras, Mouse, Rotation, move_contact_solid

Id: WXeot2nyQXE

Length: 68min 34sec (4114 seconds)

Published: Fri May 01 2020