GameMaker Studio 2: Cutscenes with Text + Transitions

hello everybody those of you who watched my little diary stream for lindoro 39 will probably recognize this cutscene as being the intro cutscene to the game I made I made that little game about flying drones around a desert picking up parts and in the last couple of hours I needed to write an intro of some kind to the game so I wrote this cutscene in about like 15 minutes of just like kind of a scrolling thing with some text and then when the text is out it tells you can hold the space key to skip it or you can hold it key it basically any time to skip it but if it reaches the end of the thing it will just bring itself through naturally like that um it's a pretty straightforward cutscene as I say I wrote it really really quickly and people were naturally a few people on my channel like oh how did it how did you do that you should do a tutorial on how you do cutscene and it's a very common question as well as very common like how do I make a cutscene I've never really done tutorials on this before because I think it's a weird weird thing because because you don't really make good things any differently to how you do anything else in fact it's easier it's easier to make a cutscene than it is to make basically any other part of your game um primarily because there's no player input going on right there's no well there's limited player input the only input you have to deal with is if you're allowing the player to skip the cutscene in some way which we will be doing but otherwise the main thing you should understand is that you really all you're doing is making things happen in sequence like and because they happen at the same time sequence because they're really consistent you don't have to deal with any player input actually makes them really easy and it means they don't break very often because there's no there's no elements to change there's no player in public and the construe everything up so this is what we're going to do create some black bars i kinda he'll give that kind of classic cutscene black bar back do a bit of scrolling just so you can kind of scroll over a scene and show you how to draw some text obviously that won't suit every kind of cutscene that you'll want but hopefully if I demonstrate just how you do this one kind of simple thing you'll be able to go all right I get it that's how you make like that's how I'll answer the question of how you may cutscene um or it'll probably make you realize that the question doesn't make a whole lot of sense because it just means just doing things doing things without player input so I'll show you how to put this one together and hopefully that'll be a help for you and then you can go from there to start building your own kind of cutscenes or your own different things all right cool let's get started so I have a pretty basic set up here already okay I basically just made em mimic my limbed Arthur you know again because that's the kind of curse theme we're going to create so I've got kind of a desert I've got kind of an overlay cloud background with low opacity that also kind of scrolls they look here horizontal speed - I hit the play button it's very sort of might be hard to see in the video but the wilds are kind of scrolling we've got some desert tiles and the spaceship in the middle there's no dude on it or any of the actual contacts from other game but it's the basic setup to get the idea okay so the end it's just a few sprites and a tile set in map at that in this room you'll notice a big white box over here that's viewport zero so just just from in the idea of not underneath camera code or anything fancy for this got enabled viewports ticked viewport zero is visible the whole room is one to eight by 720 and I'm going to make the screen size 1 280 by 720 so there's cameras basically at 2 times zoom in by being this small okay and it's going to be at a width 6 boy height 360 but the viewport is 1 280 by 720 okay so it'll be like zoomed in a bunch there my night position dips Explorium 180 dress of halfway down vertically and all the way the far right of the right of the screens because we're going to do is make that scroll over to the left with our intro object okay doesn't have anything else really self going on with it but make sure enable view ports etc is ticked you can do whatever do whatever you like over say this is just an example of where you can do a simple code scene so if I just run the game there's nothing going on I have a made an object that we're going to put all our stuff in called a intro and I have dropped that onto an instances layer make sure you do that but this is what we should see is enormous over far to the right we just see the peak about spaceship thing here and the clouds are scrolling and so on what we're going to do is we're going to bring in those blank bars I'm sure there's a proper name for those but our icon from where they are right now so they're just blank bars just to kind of give the scene about focus and flora you know and so on and then we're going to scroll to the left as well okay and then when we're going to feed the screen and as well so we'll start totally blank or fade in the middle so you can see what's going on and then when we want to end the cutscene will fade out blank so we've got kind of a really basic transition thing going on for the cutscene as well just so we can fit it fairly seamlessly into more or less any game you have to be working on okay so that's the basics out the only other things I should mention a little extra things I've brought in here is a sprite called s Texel it's literally a one-by-one white pixel and you'll see how we use that in a bit it's basically a way of drawing rectangles without using draw rectangle it's slightly more efficient but might be cool for you guys to learn them out and in script I actually have the wave script from my you might remember my five useful scripts video that's one of them is just one that generates and makes a number wave between two values it's optional you don't have to include this or if you can't both go into that video to grab it out or whatever don't worry about it because it'll be obvious when I use it you can just not you just decide not to use it all right how does it form pretty much that simple so as I said I've already made an object called Oh intro that's attention that's close this works basically Scott bunch of stuff for me setting up so I've got oh in TRO there's no sprite no events know anything and I plunked it just on my instances layer just in the middle of the room and put on anyway one really but that's where it is and there's nothing going on and this is where we're just going to write all the stuff all just a sequence of events that we want to happen so it's going to make a scroll alas it's going to fade in screen it's going to draw some text along the screen it's going to let hold spacebar of skip the cutscene and everything else okay so the first thing we're going to do to get started with that is the create event okay pretty classic event I generally start with with most objects really as a career event because we always want to establish a few variables and so on we're going to need to do all this stuff so we've got quite a few of these to establish for this one but they're all pretty straightforward and what they do so the first one is going to be X pause which I'm going to set to 640 that's going to represent the x position of our camera okay and just by changing this value and making it approach 0 over time that's going to move our camera to the left okay or this is it's the variable we're going to use to move us to the left okay so you'll see how that works and then I'm going to set a to equal 1 and this is the Alpha sort of a it's going to be the alpha or the transparency of the giant black rectangle that we're basically going to draw over the whole screen that's going to allow us to fade in from black and fade back to blank when I cut scene is done okay so that's going to represent the current transparency of my rectangle in a style fully black okay so nothing will be visible and we're going to draw that rectangle over everything and then we're going to slowly make that approach probably not even there probably like more point two five and greet like leave kind of like a dark overlay or anything as well just to kind of give a bit more ambience but then when we want to save the custom back out we'll feed it all the way back to one and it will just be a fully blanket again okay how we do that is we're going to use another variable called fade-out which I'm going to set to zero which is just going to be a billion always zero or always one value while at 0 it means we want to be feeding in so while that 0a is going to want to approach nor North or nor pointed by or whatever we use and when we set this to one a is going to want to approach one okay so our basically controls this is the value controls which direction they should move in any okay so while zero zero I want to get to zero it'll stay there and then I'm going to see the whole scene and then when this is one it all had its way back to one and then when it reaches one and this is set to one that's when we know to go to the next room okay but the conceit is over okay so when both these values equal one that's basically when we know we're done yeah so the next thing I want to add is I'll just leave a space it's a slightly different type of one I'm going to time STR oh it spans the string so you strain yourself or clicking up the out for natural function I'm going to set it to equal just an empty string just with two quotation marks there okay I could write some stuff in there to make it an actual string weapon just want to leave it as a blank string STR is going to be is going to represent the line of text at the bottom it's going to contain the current line of text that we're trying to draw okay it's not going to what I'm going to put all of them in here so that's why it's blank at the moment we're just going to fill it with each each line one at a time and that's going to store the one we're currently trying to draw an any other string we want and now have one called print okay there is an eye two blank strings for this is this string is going to contain because we're going to draw it one character at a time you might seem like you're just drawing it kind of like a typewriter so the fact where it's like a drawing like one letter at a time that's going to contain the whole line that we're going to try and draw and that's going to wha draw contain where we're up to on this line okay so it might only contain the first couple of letters or might contain the whole string and once this equals this and a bit more time as passed that's how we decide to move on to the next line okay okay so next up is l equals zero okay l is going to represent the letter that we're currently up to so how many letters of string to put into print okay which is going to be the final string that we actually print to the screen or very straightforward the next one is next equals zero next is basically going to contain good line that we want to basically the witch lot we're going to have an array of strings that we want to draw and this variable is going to help us decide which one of those strings is the next one in line to draw so that when you keep then getting the next string once we finish with one string we can get the next one just into the zero for now and then this one we want used for a little bit yet but it will hold space equals zero and basically this is going to be our variable that elders decide whether or not the user has held space for long enough to skip the cutscene okay it's going to be zero and when it's a bhoot zero we'll show a little prompt on the screen that says that tells the user that they can hold space escape the cutscene if they want which we will set so well at zero we aren't showing anything on the screen but these are start smashing keys on the keyboard we'll set it to one a leaf and then it will say I'll press space to press space to to hold space to skip the cutscene or when all the text is finished we can also bring this up and say like our hold space to skip a cutscene and then if the user actually does hold space we'll continue to add to this value okay so it'll automatically go over one and start showing I display if I press space at all in the first place right and when hold space reaches say like eighty or something like that because we'll add well add one for every frame of the spacebar is held and so when it reaches 80 we can say like okay this has held the spacebar for like a second and event now let's skip the cutscene yeah so that's very simple that's just how that's going to work and then finally we actually want to put in the lines of text that we're actually going to draw to at the screen so I'm going to put this in a ray called string this okay so we've got through a current string and then we've got strings that's going to contain the actual the actual lines of text we're going to draw so we're going to establish an array if you don't know already you do that just by writing the word and then opening fire rockets and putting the index of the array that you're establishing and then this is going to be a first line of text okay and then we're going to make the second line effect by clicks hanging next to one and say second line is pack and show we'll put a third one in strings to this is blue third and then we'll put a backpack and line of tags that backslash and then we'll create I think it's backslash anyway I'll find out about doing it on one before it's like I think it's backlash will is a special character you used to do it with hash in game maker before gaming studio to will insert a new line there okay yes so don't want to space it around right okay so it will automatically split the line attacks onto two lines then we draw up which is kind of handy I think that's everything we need for the create event so obviously that moment doesn't do anything with justice how much much of variables so let's uh let's make actually do some stuff before we go to crazy I'm going to add the key pressed letters our event we just put game restart this isn't really part the tutorial this is just the me so I can restart and show you things for working in the game it just makes it easy you put it in or if you want but basically just means if you press R the game will restart ok so that was quite a lot of parables and stuff sped up um cochlea you're still with me let's go to the step is then now so again this is a the event that happened every single frame of the game and basically we're going to decide based on all these variables what we should be doing and basically use the step event to move things along okay - we're going to use it to increase the amount of text which run on the screen easier to decide whether or not to move on to the next line whether or not to start the feydau or fade in procedure and so on and also just to move our camera at all that okay so all these things that is constantly happening we do all that time moving them out stuff just in okay very easy we'll start just by moving the camera so I'm going to camera underscore set view pause we can use the the camera set view functions here because we've just our camera was created in the IDE and just has the basic setup so means we can manipulate using these these easy functions they're very similar to D functions from gaming studio one point X very similar just to like changing the view underscore X view for example here all we have to do is go and list the view camera also view camera which turns green 0 because it's do pole 0 that we've set up comma and we just put an x and a y for where we want to put this camera so I'm going to post to X pause which you remember from our career then a 640 and it's also just where we set it up in the room I'm going to set it at x+ 640 and then when we decrease that over time obviously the camera will move to the left okay ry corner we're going to keep the same we're just going to write just the hard code in 180 fill out which again is just where it is in the room now I'm just going to keep that consistent and so just move it to the left and then it all is actually moving to left we just need to change export occasion let's like X bar equals max so equals the biggest of whatever values are put into here which is going to be itself - Northpoint 3 or 0 okay that means it's going to start us explore even subtracting 0.3 and that's usually going to be bigger than 0 until it would be less than 0 in which case we set it to 0 okay just kind of complex to read but all this really does is mean that exposes I'm reducing it by Northpoint 3 every frame but giving it a linear 0 so it never goes under 0 okay that's all I'm doing the next we don't want to go off the left of the screen and also it might be useful to know if we had hit the 0 whereas otherwise you might end up going past it like if we were on or point to going a negative nor point 1 would have skipped over 0 so we want to be able to actually make sure we hit 0 which is why we do things like that and then for subtracting and adding the fingers rather than just just subtracting it and then trying to check if we're equal to zero or less than or equal to zero okay so two bit cleaner that should actually work in and of itself so I can just run the game out so make sure you remembered as I say to put this object into the room come mistake I make as to forget raion object but the different and now actually put it in the room on test as you can see here the camera is now moving to the left slowly but surely and we can see I should coming into view let's just make sure I'm going to set the frame rate to 60 well doesn't really make too much of a difference here but all the numbers I'm going to be using this I kind of setup the timing with 60fps so makes sense to tease that so yeah we can see that now just scrolling on the clouds also still scrolling a bit faster than the catalogs obviously they're moving by themselves as well and so that's the basic kind of movement with a camera done this is very very simply okay as I say we just look there's no player input to worry about here so it's all just about setting things in motion and images watching them happen and then doing things when the values hit the values you want them to cutscene stuff very very easy in that way okay next thing I'm going to write on there something that you want to see the effect of it right away but it's what we're going to use later to cause the fade in and fade out so you're in black fade-out variable we're going to type this not fade out which basically is going to be like if they doubt is zero right um because it's saying basically if it's not true in a boolean sense right by playing that not in front of it so if a doubt is zero so if it's not anything equals I will go to that a city poor max again so it's going to pick the biggest out of these values itself - no point Norton or five and nor point two five yeah well we'll go up and when you buy one fade out all the way okay um so basically if fade out is zero which it is at the start okay we want to set a which equals one at the start to move slowly toward nor point two-five from one okay bye no point normal five from you whatever values you want here maybe I should be hard coding them in as outage probably should be values in the creative and whatever it makes it easier for you to follow if I just sort of use these hard values here and then if fade out is isn't zero meaning it's one or whatever right then right else on the same line and say a equals nin whichever is smallest at these two values or as many values as we put into it doesn't have to be two nouns but it is going to be two grounded a-plus naught point naught naught five one okay so then increase it by 0.1 or five because it'll be like naught point two five probably by the time this happens so it's going to be no point not to phone and post a bit plus a bit plus a bit plus a bit until it would be greater than one which case one would be the smaller of the two values from that point onwards so it'll always just set itself to one okay which means that background so we need so basically while this while this is zero we move this towards null point two five and while it is one we move this value towards one okay now it doesn't actually do anything contextually so we won't actually see that happen yeah let's go ahead and write that in just so we can see it happening so we can see ourselves building of those cutscene so let's add the draw GUI event okay so that all GUI event it's very useful because it allows us to draw on top of basically everything else going on as of the draw so independent of the view and the camera and just draw to the GUI just just draw to the window okay which is very very useful for usually lots of UI stuff okay and then here is you saw because it was true as blank bars and drawn for a clean fade out that we know will go over the top of everything and so on so I'm gonna leave some space down here because we're going to come back just to remind me that wasn't it to do our layer stuff above this points we want to do this fairly late in the drawer GUI event I'm going to try to draw sprite ext okay the stance the drawer sprite extended okay so there's a draw there's a drawer sprite command just allow you to draw sprite and a given play the rules FRA ext allows you to draw a sprite and also and you can see the values come up at the bottom manipulate its X scale is y scale its rotation color and alpha and that's very useful because what we're going to draw is draw our white pixel again our 1 by 1 pixel and we're going to draw it as a size and a shape that will cover the whole screen and we're going to draw it with a black color blend okay and believe it or not doing this is actually faster and more effective than doing you're right castle even though that more is more simple to understand right um just requires less computation on behalf of your graphics card because it's just taking a texture and just slapping it in a place rather than having to actually calculate the corners and so on of the rectangle it's drawing weird it be how I thought the draw rectangle will be faster but to know I was wrong so I mean this is steps I'm going to draw our pixel sprite frame 0 of it obviously x and a y minato is 0 0 when you use x and y in the draw a gooey event and does not refer to the x and y position in the room ok refers to the x and y position on yours on your GUI and application surface ok which is just easiest to think of right now is your window not strictly true but it is the easiest way to think of it so there will be top left of the screen okay and then we're going to scale our pixel okay cool and we know it's when it was 1 by 1 so we just need to multiply by the number of pixels we want it to be with like okay so I want a big one 280 so it's going to stretch out from the left as well so it's going to straight out from the left 128 1280 pixels wide and then 720 pixels tall so it's going to cover our entire application surface ok very very easily rotation 0 we don't want any rotation on such as leave it at default angle color we want to blend it with C black again this is white made it white oh we make the pixel white because then any color we blend it with makes it very easy to just set it to whatever color we want okay if we made it black and then try to blend it with CY would remain black okay for the lots of different reasons just so now just make sure we just set this to white you know saying your blends we'll set it to whatever color these clearly and then last of all and this is the important part we take the out for the transparency which we want to set to a okay and that's the value would be manipulating in the stat open okay so now you'll find that because in our career event or fade out starts at zero a starts at one it'll draw this meaning will cover the screen in black okay the screen will be totally blank but and I'll step of that because fade out is zero a is going to approach nor 0.25 okay so it's going to start off fully black and then it's going to fade in okay it won't fade back out again so we've never said it so that they doubt is one or anything yet but we should now see the screen fade in and there we go so you can see it slowly just kind of fade in because if I know point naught naught following of referring or something so it's nice and slow and I allowed to me just hitting are there as well of just a game restart just to show you a happening so you can see it very very clearly that so if you came into here from a blank screen or from something else it would kind of look very smooth so that's cool you'll see it's not figured out completely it's still kind of dark and faded then that's just reached a tentative and being to me to feel a bit sort of darker and the scene generally okay and the other thing I'll do in here since since we're in the draw GUI event is right at the top I'm going to draw this back black bars just on this thing okay so I'm going to be just while we're using this line so you can see we're just doing the same thing going a copy and paste it twice and I'm just going to change our instead of making this a rectangular drawers over the whole screen 7:29 just going to reduce the height under this onto 200 so okay so then just draw a 200 wide bar then going to change the Alpha dress always be one okay because we just want that to always go up fully a fully opaque non transparent at all and change this one one as well with this one we want again the same size point away by 200 but we don't want to draw at the top of the screen we want to draw us one near the bottom so let's change this to or is it going to be 720 minus 200 so we're going to change the Y to 520 okay again using all these are hard-coded numbers like this rather than variable is not super recommended but it works very easily in this case so now you'll find if I run the game again we'll still get that cool beta because this happens afterwards and but you see we've now got this big fancy black bars over the top of the screen and you might already be seeing other cool things you could do with this so like you could change this over time like you could change the height of this over time like it's very easily on this one a slightly more complex and so I'm just going to come up from the bottom balance it's easy enough to do as well but like for example this started at 0 and with a variable that approached 200 you get that bottle actually come in over time and like grow in and like squash the scene down into kind of like we're now in cutscene mode type of thing which might be a cool thing they don't do if you're not doing a room based cutscene but just to show you how flexible and using it is to kind of do this stuff really once once you start thinking about it and thinking about all the things you can do okay so that's that we're going to come back now to our staff event and we're going to do some more stuff with D text okay okay so we know now now we've got all that out of the way we need to look at how we're actually going to draw this text to the screen so we remember that l equals 0 here that's determining what letter we're on l4 letter okay slow on this leading you could confuse it the line I guess which is isn't what we want put on Wow we get all given I'm not the best at naming variables the hell I'm gonna do l plus some corn or 0.5 okay we can't get more after letter right so by changing this making a half a letter just means that we just slow the speed at which we add a letter so this will add one full hour every two frames rather than every one frame okay and if we want to add two letters a frame we could set to 2 over 1 and add a layer every 4 frames per second 0.25 and so on okay let's take an Allpoint by one layer three two frames the decent ways of bringing the letters onto the screen okay then what I'm going to do is I'm going to copy an amount of STR which I know doesn't contain anything yet but I told you what it you would do earlier into print okay so remember these two empty strings okay I'm going to basically copy a section of whatever's in here which as you might remember will be the full line so say at the beginning STR is going to contain this full line okay what print is going to contain a section of that line depending on where L is up to okay so I'm going to print an equal string for copy STR one now okay so what string copy do well it literally does what it says on the cell in return it copies the entire contents of one string - sorry not the entire contents of copies some of the contents of one string can be older and puts it into another string how much of a string the copies are turned by these two guys so here you decide where to start copying from unlike other things you don't use 0 for the beginning use one for the beginning of this for the first letter okay so from the first letter the actually first letter this time and then you determine how many letters to take from there okay so it's index and count the size of the bond here so from the first letter and L number of characters which will start at point five so it will be none right because you can't take half a letter but then on the next frame it will be one and two frames after that it will be two and so on so it'll slowly copy more and more this string um into print okay and that overwrite that every time so it's not just adding it on the end it just overwrite the print with a new copy of string that's slightly longer and longer than I had before and that's how you create the kind of typewriter effect where the string builds up over time okay now we just need to write the section for determining um well here's all you first actually before I do any of that I'm going to write s TR equals strings next okay and that's going to actually set s TR to contain whichever of those initial strings we want next to 0 at the beginning so it will be string 0 which will be our first line of text when we sat next to one that will then become screen 1 and so to do a big string 2 and so on ok so just by doing that that that's the moment we don't manipulate next or anything like that right but I'll just make it sort of STR is always going to contain um the first line of text so let's now pop back to our draw GUI event this is just so I can show you it build and I'm kind of popping back and forth there's just so I can show you a building up over time I'm going to first of all just do some basic draw set stuff to set up off font and everything so draw asset class we're going to make the text why so serious point draw set H a line as horizontal line and just like if you were NS word and so on right it's going to get center central line a vertical line always important to set Lee is when you do track when you do text and always set them for every bit of thanks to Drew and don't just assume it'll be set from the last thing okay li you'll run into weird bugs for your thanks always remember we set these things every time you do anything the text draws slap font and ticks all and it show that a beginning but that's just another thing I set up beforehand sprawl in a simple pixel font use whatever font you likes that Montcalm is good for finding cool fonts and stuff with lots of cool font websites just a little pixel form so that's all my settled stuff done for drawing text and I'm just going to do draw and score text again this is real GUI so it's screen relative not room illative government wise 644 in the middle of the screen and six-hundred so near the bottom of the screen and print is the text that we want to draw that's the amount of text that we built up so far okay so if I run that now we should see that that string does all build up over time yeah so you see first line of text assault coming in there like that a bit of it seems to be done already enough because like but there's a brief period of time where you can't see anything where and it's just blank right while I spilling up that's okay got to put a fire attack so now we've seen you to make it so that we move on to the next line thanks is why I did a so you can see where we're up to you can kind of keep track of what's going on but we're getting somewhere right was you're just slowly building up this process over time so let's split the offense apart because we want to set this after we've decided what which which line we should actually be using okay which line of this array we actually want to reference so if L that's the number of letters we're drawing of the string so far is greater than string length STR plus 100 so what does that mean that's where so when L that's the number of letters were drawn into the screen it's greater than the full contents of STR the full contents of the string that we're trying to currently draw so all of this so once it's greater than or bats or during all those layers plus a hundred more ups whatever value you feel is best for this just play with it to get it right this will determine how long after the full string has been drawn we move on to the next one a hundred means like it's going to take by adding your point five a frame it's going to take 200 frames 200 frames after the string has been fully drawn for it to reach that point which are 60 frames a second there's going to come to something like um just over three seconds right so just over three seconds worth of time after each string that's enough time to probably be the strength like it will be alright and some use to ampersand symbol system you cannot leave the were downloaded on next which is currently 0 is less than array blank 1d who would actually be more efficient to put this function into a variable of the starboard it's not a big deal Springs minus 1 okay well that means is we haven't reached the end okay so it will keep cycling through these until next is um once next is two so it's the length because this the array length here is three rises three entries in here and once next equals two we don't want next to equal three because there is no shrinks three so we want it to be less than the array length minus 1 so 3 minus 1 is 2 so it's going to be 2 or less ok so as long as those conditions are true we can move on to the next line so first thing we'll do is probably set LD equals 0 right so we put this back to the beginning so this doesn't just trigger again and so that we put ourselves back to you know drawing it layer by layer again and then next equals next plus 1 in Texas or only adding one really interesting next plus plus okay just a quick way of adding want of to a thing you can also do - - subtract 1 and then if next equals equals array length 1 D strings minus 1 and so if we're on the last string or already on that last string so next equals to basically hold space plus plus okay while that then we'll do is make it so that we move this to 1 and we move that to one and so the will use that value then to show the hold space to skip thing on the screen okay you'll you'll see how it comes into effect a bit more later but for now this should basically if I run that from there should mean we cycle through those three text lines okay so I've got a first line of text about three seconds after that second line of text and about three seconds after that this is the third line of text and split onto two lines you can see that Bank slash and thing working there it's pretty useful and then it won't go on any further and it won't crashes because it's not going to try and find a string that's the Dylan exists and now ring okay so it will just do those do those three and then that's when we know as well that we're doing with our text and we can start saying okay so get the rest of the scrolling saying or let the user just sit and watch it scroll by if they want me whatever would we want to do okay so that's actually doing all of our cooking stuff really that's so much that's that's a little bit of all we need to do now is make it to the casino actually ends okay because I want dozen dozen and so in the step event first thing I'm going to do is start if keyboard check guy rang clear winner of ek face so if we're pressing the face-kini while the step event is happening hold space plus plus okay so we can hold on it will just continue to increase every frame that we're holding spacebar by one then after on the type if hold space is greater than 80 or so I can like or underneath the to straight the galosh that's how I'm using can just right or if it's easier to read I won't blame you expose so remember this which is moving every single frame is less than a hundred so say our camera is kind of reached that point we don't want to do it right at zero and the camera will stop moving and it all look kind of weird but while it's still moving but it's basically reached the end stayed out equals one okay and then when we set fade out to one we've already got it set up that this this fade out will will happen and will fade to black okay um what I would then do and I'm actually going to comment this out after a ruiner bomb the right if any equal to one so it's our alpha I discuss this right I start the video our alpha is 1 and fade out so capsule fade out is one room go to Nick okay and then that would basically ensure the you know once the fade out is complete we moved on election but we don't have an extra we move on to so I'm just going to comment that out just so we go to black first of all so we should see now that basically happen right um I just whole thing should kind of work I want I'll do is I'll just let it play through for us so we see it faded in the second one at X happened third line effect should happen there's no more text from this point onwards and once we've done that as well we'll make it so we get see the space press base to skip will bring out to the bottom here just to show the pleather they can do something to skip it if I held space right now it would skip it but on just going to demonstrate the windows gets to about 100 over here yet that triggers the fade out and then from here when this is one one go over one we would normally go to on that room but um I commonly now because there is no next room I could set in fact I wall do alone common this and I'll just set it to game restart right so I'll just send us back to the beginning again okay and then let me demonstrate that again just using the spacebar this time so yeah yeah meaning this I'll get to the second line of text and then Sam borderless cutscene now I'm just going to hold space and then one not hit say T it triggers that and it will just restart it will fade everything back out so I'll just hold space again just quietly faded out like that okay so our last thing to do now is what I'm going to do is draw that text on the screen that tells us that we can hold space to skip okay we don't wanna draw it all the time because make up a bit and he immerses so like when we draw if we kind of need to so it's going to the drawer do I draw GUI GUI well however you want to pronounce it event and then you just tanks pocono type if hold space is greater than zero so say we press the space key already or in the staff event here where as it were as it were as it were yeah in here if we've reached if we've run out of text we can I want to say you don't have to watch the rest of the scrolling saying if you want we can just you can skip this whenever you're done reading time you know because that's when we add one with us so just if it's greater than zero if it is greater than zero what I'm going to do is I'm going to set draw sec alpha which sets our current transparency for drawing t-wave okay this is optional you can completely skip this line if you don't want to bring in the wave script what it does is just move to one value between two values over time and just once all bounces them back and forth constantly very very useful we take the value we want to take the min value null point two we want to take the maximum value one point eight we're going to wait between those values over one second with zero offset okay those are the four on you need to plan script so we're going to wave the alpha between nor point two and nor point 8 o'seas basically it just means that we saw flash or kind of pulse the text on the screen okay um just a solid draw their attention to and be like hey you can do this and so present in any kind of a smooth nice way so draw a text and that draws more less in the same place of 640 where we want to be clearly under any text were drawing through this so north 600 by 660 and then we'll do a whole page escape okay and then importantly afterwards if you have used the health of things set it back to normal again after is your sample one so if you don't want to use that wave line um just just get rid of this line and get rid of this line and it will destroy and pull alpha and that's absolutely fine as well or you can draw however you want to put view okay so now on the last thing I'll do before I show you this working and then I have the key press any isn't okay so if we just press any key this event will trigger and what I'm going to do is is hold space equals zero hold space looks plus okay this is just sofa design thing that I like to do um basically if we since we don't show we all want to show this to the player all the time but if the player is mashing keys on my keyboard it slightly began during a cutscene it slightly because they're frustrated or they're bored and they don't want to see it anymore they want to do some of those things right or they're fishing basically to see if there is a way to skip the cutscene that's basically the only reason the user would press a key during a cutscene sometimes accident although which is why we don't want to actually skip the cutscene if they just press anything but if they do press it we're going to if this is zero then increase it by one so that we start drawing this whole space to skip on the screen um just as we say oh hey we think you might want to skip this cutscene um here's how you do it if you do want to okay um just as a nice sort of design flourish kind of an onion so no we don't see anything here but if I just start to cut keys we see hold space to skip comes up there the bonds and you see if I hold space we know we already know that that works and we skip that okay again if I press space and see it's the same thing but also what will happen is since we were primarily concerned with users seeing with these lines of text okay this is a nice visual but it's not super important so once we've drawn the last line of text we bring the support America link without pressing and we'll show you that again so fertilized eggs wait three seconds second line of text and then three seconds after that third line takes whole space to skip okay that's what we did in the step event here when we said if we've run out a string this basically increase this to one and then and then the user can hold space if they might want to skip the rest of all they can not you know you can just learn challenger either coming with this scrolling thing for then but that's because we've got all the importance of all the cursing out of the way and then when it Scrolls all the way really far left we're like okay yeah we're really good at this now and then we bring up a little game artistic eight we start that's all there is to it okay my cell solar is to us there's a square one one um but I hope that helps like it's always a really difficult question as I say to answer like how do you do a cutscene because this is obviously only a very one specific type of cutscene and it really it depends what kind of game you're making but the general ideas that I tried to get across with us is that it's all usually just about moving variables from north one or from one value to another and then deciding what to do when those values hit their maximum or the minimums and so on so usually would just throughout this whole thing it's all just a matter of move this towards this and then when it hits this do this and then move this towards this when it hits this do this reset that to this and so on and then just a matter of drawing a bunch of stuff on the screen as a result if you understand that logic then you can do basically any kind of cutscene right any kind at all and it's easy enough to send interruptus like with in here we're like would would automatically drawing each next text instead of doing this we could say we do this and this and then and the user presses a key on the end okay so that when you have to press a button in order to move between each line of text and so on because that's kind of the only interaction to play can have it the cutscenes rather not to skip it or whether or not to progress it it makes it really straightforward to actually build this kind of stuff because it really is just a take a variable increase that variable when it hits this number do this okay and that's that's the whole logic I would I generally use to make cutscenes okay so hopefully that logic and that idea is what I've hopefully got across throughout this kind of long video and so there's a coming of cutscene along with the general concept of how you do cutscenes generally or how I do cutscenes generally hope that was useful to you guys next week we'll be carrying on with the platformer video and as standard then after that and I've already told my patreon suppose about this probably going to be taking a bit of a week off okay because well for a bunch of reasons but then the week after that I'll be back with I think a tile collusions tutorial I think that's what one patron on little bit before so yeah we've got a bunch of cool stuff coming up and I'll see you guys when I see thanks for watching catch guys next time as always a huge shout out to my patreon supporters where whom none of this work would be possible a special shout out in particular and in no particular order to Dan in a mule Steven Hagen Alex Ray Charles Montgomery Roxanne Herald Guidry Jason McMillan Angel Rodriguez and Owen Morgan thank you all very much for your continued support I'll see you all next week

Channel: Shaun Spalding

Views: 55,477

Keywords: Game Maker (Video Game Engine), Tutorial, GameMaker Tutorial, GameMaker, Game Development, Indie Games, Tutorial Series, Game Maker Studio, Making Games, How to make games, GameMaker Studio 2, GMS, GMS2, Cutscenes, Transitions, Text

Id: nt6rWk0XgbM

Length: 49min 16sec (2956 seconds)

Published: Tue Aug 15 2017