Gamemaker DND Platformer Tutorial - #15 Scoring

if you're interested in making a detailed platformer just like this one with in game maker using drag-and-drop then keep watching [Music] g'day gamers and welcome back to our drag-and-drop platformer series in the last tutorial I showed you how to add a collectible coin to the game in this tutorial we're going to add it a way for the player to gain points which will then be shown as a score at the top we also discuss the option of showing the coins and score gained as cool pop up values that float away over time so let's get started by looking at the draw GUI event of our game which is where we are drawing the coins now I'd like to duplicate this and modify it so we draw our score in the center up the top and also like to clean this up a bit which will make working with it easier so let's create a script and call it draw coins so now we can go down to our game object get our draw a GUI event and where we are drawing the coins so here we're drawing a rectangle here we're changing the font and drawing the coins I'm gonna take all of that and cut that out and then go into our draw coin script and we'll just paste that in so now back into our game and now that we've taken that out we need to execute a script so we need to execute the draw coin script and essentially we're doing the same thing except web moves all that code to just live in that one script so now what we can do is duplicate the draw coins our script and I'm going to call it through score so if we take a look at this it's actually doing a similar thing to what our draw coins is doing but we can change this section here from coins and we can call that score the same fellow of this section so the top part is the shadow and the just the bottom part is the text itself now we won't be drawing global coins instead I'm going to change this to score now the word score is a built-in variable that game maker knows it's a global variable so it's accessible by all objects and we can just use that to hold our score we don't need to declare it anywhere now by default it's declared as zero now by default all text when it's drawn is drawn a line to the left unless you change that with code now that works well for our coins because we're aligning it to the left of the screen but for the score I want to draw the score in the middle of the screen so up the top in the middle and in order to do that we need to change the alignment we need to change it so that it's little line to the center so we can go up here and we can say a line and we have a set text alignment box let's drag that over and let's align this one to the center but we're setting it at FA Center I believe the FA would stand for a font alignment now once the alignment is set that same alignment will be used for all other text drawing so that means our previous draw coins will also be Center aligned which we don't want so we need to copy this text block and I'm going to go back to the draw point script and we're just going to paste this here and change it to FA left so if back to our school we also need to change where the school will be drawn in its X position so we want to draw it in the same Y location as the coins but in the center for the exposition now since we are drawing in a GUI event the GUI has its own resolution independent to the game's resolution so similarly to when we do the rectangle last tutorial to find the center of the GUI we can use the function display get GUI width we need to divide it by two because we wanted to know what half of that with this I'm just going to take a copy of that and paste that down the bottom as well remember it's also a little offset so I'm going to just minus 2 from this and that will just align it correctly now also don't want to draw in yellow I'm going to change this to white I'm going to draw the score in white and the last thing you want to do is back in our game we're actually need to just run the script so take a copy of that paste it here and then change it to draw the score as well so let's press f5 or run and we can see what the school looks like great so we've got our score up there and our coins so in order for the player to receive the score we need certain things to happen for example when the enemy dies we want to allocate some points then so let's go to our enemy and in the variable definitions I'm going to create another variable I'm going to call it points now we'll just set this to 10 now we need to know when to move the points to the player the best time for that is when the enemy dies so if we look at the player and we look at the collision with the enemy a section where the player is dying is just he I started up here get all the way down and we're looking at a section here where we change to the dead State we need to assign a variable at this point and we need to set our score to be whatever the value of points is relative so then it will just add points to score so let's test that out and press play and now an enemy dies you can see our score at the top has increased each time now that works great but what players like to see in a game is visual feedback so they know how they are doing so let's add a visual representation of the score they gained from jumping on the enemy if you look at this section from a blizzards Warcraft 3 reforged as the peons collects wood and gold the amount gained is displayed and it's even color-coded showing what was collected let's add a similar system for our game using a single object to display the values so let's create the new object and we're going to call it a floating text so we go to objects right-click Hoo underscore floating text now we don't need a sprite as we will be just be drawing text in this so let's add a few variables in the variable section so the first thing you'll need is the actual text you want to show so let's add a variable to store the text to show and also a color for that text I'm just going to call the variable txt for the text and I'm gonna add a variable called Co l for color and this one I'm gonna set to see underscore white Oh C standing for color so game maker has a few colors built into the game and you can just reference them like this or you can use some methods to create your own color but for our purposes we're just going to use the built-in ones now let's create a drawer event and this is where we can draw the text we want the text to show in a specific font in size so let's go to our fonts and let's create one called FN t underscore floating text now for the font I'm just going to select Arial black it's a common font that you should have and I'm going to set the size to 18 now when you're over here you can press on game preview and it should show you what the font looks like if it doesn't show you the right font which is what's happening here you can just regenerate the font texture and that should show you the correct font then and then close that down so you can jump back to objects that you were working on by holding down the control button and pressing tab and that brings up the workspace overview and this shows the windows that are currently open now the one that I was previously working on was floating text so you can use the shift key to move up or use just the tab key to move down all while holding the control key and it's very easy to move very quickly between the windows that you have active so let's draw our points I'm going to drag across a font block we're gonna set our font to the one we created which is floating text and we need to set the color and we need to set the color for the text that we're drawing so let's drag that across and we're going to use the variable that we created over here which is co L I'm going to antique the Alpha I'm not going to use the Alpha for this one this time now let's also go to the draw and we want to take the draw a value code block let's drag that in I don't want to caption this time but I just want to draw the value of txt and that is the name of our variable for storing our text to draw and for the x and y I'm just going to tick relative because we don't want to move from our current position so in order to test it out we need a way for the object to be created so just where we added the points let's also create this object so back in our player collision with the enemy so at the point here we're creating our points let's also create an instance of our floating text up here we're going to say instance create and we're going to create our floating text our X is going to be relative to zero our Y is going to be our B box top similar to what we had down here now the instance layer is fine to add it to and I'm going to create a temporary variable called I NST inst and what that's doing is creating this instance and the ID of that instance is then getting assigned to this variable and by assigning the ID I can actually reference this created instance and make a change to it so basically we're creating an instance and then I'm storing the number of that instance so that I can then reference it very quickly so I'm going to use our apply to block and we're going to apply it to this name so if I just click here and type I NS t and it could be anything I'm just I'm just calling it I n s T because it stands for instance you can decided to assign it to a variable that it's just a letter or another name that has more meaning for you but because it's going to be just a temporary variable I just do that and we make it the change here to assign it to it now what do we want to do we want to change the text variable at the moment we're just creating a floating text object and the text variable is set to 0 if you remember if I jump back to it and have a look our text is set to 0 so it's not going to display the points that we want to so what we can do is use that Insp variable to then tell it that the txt variable needs to be the value points now the value of points is an instance variable that is assigned to the enemy now the enemy code is here at the moment and we are currently in the inst section so we can use the keyword other to refer to the other instance in the situation so if we say other dot points that refers to the point of the object before we rent here the things that are outside the apply to now if you remember back on the video show - the Warcraft it has a little plus symbol which really helps to see that something good is happening you're getting this item it's not a - it's actually going towards you so in order to add a plus to this I first need to change this into a string and I can use the function string and then brackets to convert the points just into a string so now that our variable is a string we can actually add to it if I open up some quotation marks and put a plus and then close it and then use a plus value I'm taking one string and I'm adding it to another string in game I call then add them together and just the variable gets stored as one so essentially we'll say plus and then the value of points so let's test that out so now when we jump on the enemy we should get the number appearing and our points get allocated but the numbers appear that look fine but they actually don't move or vanish and they also they look a little flat so let's add a shadow to them so back in the floating text at a shadow just like we've done before a copy of these two values copy and paste and I'm just going to draw the top one at offset of 1 & 1 to change the color of the top one and we'll just set it to sort of a black alfred there now in order to move the text up we can create a variable to control the speed and also some variables to control the fading so let's go over and we'll set some new variables here I'm gonna call the first one rise and that's how much the text is going to rise I'm going to set it to minus 1.2 and then I'm gonna have another very recorder alpha and we'll set that to 1 initially and then alpha increment and we'll set that to minus 0.05 so the Alpha will dictate how much of the image we can see so you have an alpha value that is set between 0 and 1 with 0 meaning you can't see the object anymore and 1 meaning it is fully opaque or solid so if we slowly decrease the Alpha by this increment amount once it gets to zero it means we can't see the object anymore and we can destroy it let's add a step event close this down now here's where we can add rise to the Y of the object making it rise up also we can decrease the Alpha by that alpha increment variable when it's below zero then we can just destroy it let's drag in a set instance variable code block I'm going to change the y-coordinate to be rise relative and that'll apply that to the Y I'm going to assign a variable for alpha I'm going to set alpha to alpha increment relative we're adding that to the Alpha each step and then we need a check here and we say if our alpha value is less than or equal to zero well then we no longer can see it we basically want to destroy the object now in the drawer event we need to make sure this alpha value is being applied to our object so go to draw and just before we set our font we can actually type in alpha here and we can use that to set our draw alpha we want to set it to the variable alpha and lastly if you're changing the alpha for any draw object that alpha will then be applied to every other objects drawing so we don't want to do that a little fade at the same time I want to take a copy of this and write down the bottom pasted here and set it back to the default of one so let's test that out press run but now when we jump on an enemy we should get how are you appearing and a little fast so we need to before fading it we need to make it last a little bit longer on the screen so in order to do that I'm going to create another variable and this time going to call it time to fade and let's just set it say 240 and this will be how long until it allows it to fade so in the step event but now in here we only want to do the fading and the destroying if our time to fade variable is less than zero so let's still check here and we want to say if time to fade is less than or equal to zero then we want to do all of this now at the moment this time to fade value is not decreasing each step because we set it to 40 but nothing is making it go down so you can do a little trick here and if you want to decrease a variable or increase a variable by one you can add a minus minus to the variable and that for therefore it'll check it and take one away from it so let's try that again but when we jump on the enemy now our variable stays active for a little bit longer and then it fades away at the top much better now what is really cool about this object is that we can use it for other displays as well like when we pick up a coin we could display the amount and show it in a different color so let's go to our coin and let's go to our collision with our player and we can create the same sort of instance right here so right after we change to our pick up let's create an instance and it's going to be our floating text and we're going to set a relative for our X and B box top for our Y position and once again we'll take a temp variable and we'll assign the number that's created to the variable inst let's get our apply to bring that over and we want to apply these things to our inst variable the first thing we want to do is apply what text we want it to show so the variable of floating text called txt we want to assign let's just say plus 1 so we're just drawing it directly here we're making the assumption that whenever we pick up coin we're only ever getting one point for it this could be a variable if you were going to make a change like that but for us in this game we're just going to set it to 1 and also we can change the color so we can change the variable Co L and set it to C underscore yellow now there's quite a lot of colors here if you did want to find them you can look in the manual you press f1 and lookup colors and you can see a whole list of them to choose from now let's press play and test that out so now when we jump on the enemies we get the ten appearing and when we collect a coin we get our coin values appearing as well now you can play around with the size if you're happy with that or whatever you want to do but you might notice something a little strange is that they overlap and they look a little odd even though it looks great having them there on the game it does look a little strange when you have when you're collecting a lot at once so if you're interested in how you can make them grab their own space and make it look even better and you're a patreon head over to the patreon page and you can watch a special patreon only video showing how something like that can be achieved my patreon helped make this channel happen I appreciate their support and you can see these super stars listed here if you find the content useful consider supporting as this enables me to create more cool tutorials for you to learn from patrons gain access to all the source code as well as any bonus tutorials and all legendary patreon to get free access to my existing and future courses on udemy udemy hosts my game maker courses which includes my latest a platformer course it's in GML which is the next step up from drag and drop and it can really help if you want to advance your game maker skills there's a special coupon code in the description where you can use it to get over 90% off the retail price lastly don't forget to Like and subscribe as it helps me build the channel and create more cool content that's all for now I'll talk to you in the next one [Music]

Channel: Slyddar

Views: 4,048

Keywords: gamemaker, platform, platformer, drag, drop, dnd, dragndrop, drag n drop, tutorial, peter morgan, one way, oneway, fall, make games, shaun spalding, heartbeast, spalding, yoyo, gms2, gms, advanced, learn, drag and drop, collision, make game, jump on head, enemy ai, horizontal, collisions, coins, collectible, items, objects, slyddar, peter, morgan, 1.4

Id: lAX44DO3UMo

Length: 21min 54sec (1314 seconds)

Published: Sun Feb 09 2020