GameMaker Studio 2: Outline Shader Tutorial

so some of you might remember this effect from my intro to shaders video that I put out last year if you haven't watched that video I recommend watching it goes over a lot of what shaders are and how they work which I won't really be covering in much detail again and here is our excitable little ghost friend again here's once again volunteered very bravely to be the guinea pig for this tutorial we're going to be drawing a single pixel outline around him just using a very simple shader it's just an object with what the sprite just plunked in the middle of the room zoomed in a bit and that's all I've got going on here one thing you will need to do um if you're doing an outline around a sprite using this method is you need to make sure there's room in your sprite to be able to do so and so you'll notice in here like I've got loads of like excess space around I've got more than I need really you only need one pixel um free just at the top otherwise you'll find your outline gets cut off because you need that space now game maker by default actually automatically trims sprites like this down on your texture page to save space alright a treat does that for you and cropped it away but we want to not do that for this specific sprite so make sure your first we go to tools texture groups find on find the texture group that has your particular sprite in it so this is a ghost sprite and make sure you've got automatically crop unticked okay I've already done that but on it will be ticked by default so make sure you or you uncheck that so that it does not automatically crop so the first thing we're going to do is actually write the shader that we're going to use okay so now right-clicking shaders and hit create and it will set you over a default shader it's already got a bunch of code in the vertex and in the fragment side okay you'll get a real split into two times like this one is and it's common lata pretty clearly the vertex shader and the other is the fragment shader okay you don't need to worry about the vertex shader at all okay just ignore this on we just want it to behave how it normally would and just pass through all the other vertices and coordinates to our fragment shader fragment shader controls rendering every single pixel um in in our sprite okay so if this is where we actually want to make the change where we draw the outline around the sprite so we've already got a basic fragment shader setup here that literally just takes the coordinates and takes the appropriate colors and just drools into the screen right that's just draws things as standard and this is what we want to modify in order to make it so instead of just drawing things are standard we draw them in a slightly different way that draws an outline around a little ghost okay the first thing we want to do is we want to pass over a couple of variables from our side the shader so from GameMaker into the shader I'll explain what these variables are and why we need them a little bit later but for now this is easiest way justice or bring a variable across into a shader so no take uniform float okay this is how I declare a floating point variable and the shader floating-point just being like a real number two kind of oversimplify okay so a decimal point number and so is going to be called pixel each pixel height again all kind of excuse to see what I'm doing with that in a little bit I'm going to be the same thing underneath and float thanks so W one thing I should note when you're writing shaders as well very important to always include the semicolon um your game won't compile if you miss a semicolon on age in a shader script okay where if you get away with that in other scripts in game maker you can't and the shader scripts okay so you might think of this area up here is kind of a declaration area of your little shader program and this is the actual function itself this area inside void main okay so the actual natural script is being run once you've declared all the different variables and so on and we want to leave this bit at the bottom that determines like the final color of this particular pixel that we're drawing to the screen right so we found that there at the bottom for now and at the top here what I'm going to do is um declare another couple of variables actually um new type that to offset X okay and that's declaring a - a vector with two components so in this case an x and a y component I'm going to apply to offset X dot X to equal X or W what these barrel I should probably just say what these variables are is basically working out on the width of a pixel or in terms of our texture page you might think what's the difference right but when you're doing with texture pages and your shaders um you don't measure things in pixels image them in what's called texels right which is like um it's like one is a pixel like naught point naught one might be a pixel in textual form if you know what I mean maybe where you're talking like a percentage of the texture the texture page rather than just like one unit of pixel across because it doesn't necessarily know they're kind of exact width and height in pixels and all that and then thing underneath I'm gonna do is talk back to offset Y semicolon and then offset Y dot y equal pixel cake now you might think well why don't I just do offset X or just offset X and offset Y Y if I made two different two-part vectors with one of them being empty so like the Y component of this one is zero and the X component of this one is just going to be zero why when I just put them in the same one well that's just to make it easier for me to add and be final use to the other values I'm going to do in a mess it'll hopefully become clear so the next thing I want to do is make another float variable here um called alpha equals texture 2d TN base texture Oh some underscores wondering why I didn't change code of the underscore V text or a closed bracket dot a okay so what on earth is this right um this is basically finding given our current texture coordinate so basically the pixel were currently drawing right it's going to find the Alpha of that pixel okay so and that's what we're putting in here the transparency that we're currently drawing okay and what we're going to do is we're going to add to that pixel the Alpha every pixel around it okay so the pixel above it at the pixel to the left of it the pixel to the right of it and the pixel bit lower we're going to add that alpha value to the current pixel so if you think about it whenever a pixel is next to another pixel that is non-zero alpha that will get added to this one okay which will then result in is having an outline around the sprite so in order to do that I'm going to type alpha plus equal seal and if you remember seal takes any value and rounds it books to the nearest integer okay so any Alfred like nor point four or whatever is going to round that to one texture 2d oh yeah I wonder what now this is wrong is off in capital dealer texture 2d with capital v GM let's go faced texture be underscored via text cord plus offset X okay so taking a current coordinate which is a vector to write and adding off that X is your vector 2 which is a 1 and 0 right remember Y is 0 and 1 and you can see how this is going to be useful because a leg dot a as well so take the Alpha okay let me go on you see how this is going to be useful picking a copy and paste it three more times like that underneath and now I'm basically going to do once we've added offset X that's adding one zero so that's one pixel to the right if we subtract that that's one pixel to the left if we add offset Y that's one pixel below and if we subtract offset Y that's one pixel above okay so one pixel above left and right we still don't know exactly how big a pixel is but we're going to get that from the ghost object one with the next okay okay and at the bottom here we want to keep this the same so we still want to make our color the color it should be based on the texture based on the sprite right but we also want to set the Alpha this current pixel to be the Alpha we've just worked out from this little computation okay so we're going to do that by saying GL underscore brand color dot a okay so get the Alpha component of ocular equals alpha that's really all there is to it that is the entire fragment shader that's the shader that we'll draw our outline now unfortunately this isn't just a simple matter of calling the shader and then resetting the shader when we draw a ghost we need to actually send these values these two values here are pixel H and pixel W the width and height of the Texel if you will across to the shader so going to our ghost object now and go into the create event we're going to grab these wants really and type you pixel you pixel or H equals shader get in the form oh you actually need the shader as well that's quite sure outline outline our pixel H okay so that basically what this does is it has GML reach into the shader code and work out where this variable is and then puts it into this particular variable okay so then we can use this variable to set this variable inside the shader we do the same thing with the width you pixel W equals the shader get uniform stretch outline pixels W okay okay and then what do we actually want to put in those a lots of create a couple of new variables to actually put this infinite o TW um looks like X all the way you even might be better get taxol whip strikes get texture right index zero okay so that was kind of a lot of stuff and can't even see the whole line that's spring and out there there we go so as you can see here we can't just go from the sprite we have to get it from the texture page the despise didn't put on the spray on all four like the little animation right so I will be put like in a row on a little texture page I might put up with images you see what the text page actually looks like versus you know how we see as a sprite here and that gets through gets the actual idea about texture the idea of that texture even and works out how why did it how wider taxol is for that and when we need to do the same thing or the hyper texture get text or light sprite get thanks sprite index zero okay so that's actually drawer I goes to the screen now so adamant and the drawer I them first of all we want to turn the shader on so tide shader set sure outline and that's it so we've replaced our normal drawing routine with with this shader instead so we're going to use a lot to draw and then we just need to set those two variables to whatever they should be on this particular frame so shader set uniform s are you pixel W Texel deleting okay I have to do is after the shader is actually set on because this is going to set the variable of the currently active shader okay so I can't really do this before calling the shader so on once the shaders entry spec data set form F okay uniform at Seneca uniform floats though some variables that we defined in the texture itself I'm going to go you pixel H Tex or H okay that's there's two variables set then we draw the ghost itself just by using yourself and then we just restart the shader back to normal to shader reset okay now that's all there is to it so if I press f5 now and the moral goes before didn't have an outline around him and now he does as a single roll one pixel line around and that's how you create a really simple pixel shader if you're working with pics allotted two times scale so say like just 30 by 30 to get like if you're working with pixels that are actually like two by two blocks you can still get the shader to work in here what you want to do is like multiply this by two um and you'll find it actually working creates like a two pixel or it'll look a bit weird a little bit weird on this because it's only uh it's only a one X scale piece of fix while but that will then actually make this work pretty cleanly for two times scale picks a lot okay thank you all for watching I hope you found that one useful I've had a lot of new patrons supporters over the last few days which has been super super cool and really encouraging to see you might not be in the credits for this video if you've only recently become my patron now you do that stuff at the start of every month but you'll be there going forward um thank you very very much an extra special shoutouts to dan angel rodriguez Harold Guidry and Jason Macmillan thank you all very much for your continued support I'll catch you guys next week when we'll be carrying on with our platformer series I'll see you then thanks for watching bye guys

Channel: Shaun Spalding

Views: 41,249

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, GMS2, GameMaker Studio 2, GML, Shaders, 2d Shader, Outline Shader, 2d outline shader, pixel art shader, GLSL

Id: zWrpHbc6fmc

Length: 14min 51sec (891 seconds)

Published: Fri Jun 30 2017