GameMaker - Introduction to Shaders Video Lecture | Game Maker Tutorial: Build Games from Scratch - Game Development

hello everybody I've been learning about
something cool recently so I figured I
would share some of it with you guys
I've been learning about shaders what a
shaders shaders up the Blackmagic
Gartley right just crazy insane things
people who know how to actually program
can use and no one else can ever use one
no that's not true and I'm about to show
you today and you can use shaders to do
some cool or some stuff in your game and
teach you a little bit about how they
work so what's a shader one on earth is
a sheet well a shader is best thought of
as a mini program that runs directly on
your graphics card so it basically is a
way of saying a game maker hey I'm not
cool with the way you're drawing things
to the screen by default we're going to
draw things to the screen and this way
for a bit and you do that by setting a
shader before you do any drawing and
then any drawing you do we'll go through
that shader rather than just being drawn
in the default way that game make it
usually does and then you reset the
shader and then make it goes back to
drawing things its way so what can you
do with that what can you do with
shaders well you can do all kinds of
things you can draw out lines around
your sprites you can manipulate how your
sprites are drawn draw them or wavy
change their colors changed colors of
specific parts of them make them flash
there's all sorts of very basic cool
uses for shaders and because they run
directly on the graphics card they go
really really fast they're really
efficient because graphics cards are
literally designed to do pretty much
exactly this this means you can do
things in real time that might otherwise
be the harder or much less efficient if
they weren't done as a shader that
sounds great Sean how do we how do we do
that how do we start using shaders to do
all these calls and things well it can
be very tricky especially someone new to
game make a language because shaders
don't actually use game make a language
they use GLSL is they have to use a
language specifically for writing
instructions to the graphics card and
it's much stricter than GML is it's much
more strict it doesn't let you get away
with not including semicolons it doesn't
let you
get away with declaring floats or
integers wrongly you have to declare
your variables all properly and use them
in the right ways otherwise it gets very
mad at you very quickly and some users
might if they're coming straight from
GML not understand immediately why that
and the syntax is a little bit different
and there's just little changes here
there and it's just are you've you've
gone through all this effort to learn
GML and now you got to use this other
thing if you want to do shaders so
rather than do a specific tutorial in
this video I well might do someone to
lay a date I'm trying to make sure
they're all good but rather than do a
tutorial a straightaway in this video
I'm just gonna show you a shader that
I've made and explain how it works cuz I
think once you understand how shade is
fundamentally work and why you would use
them and where you should and should not
use them um I think it's much easier to
actually start well using them so here's
a little ghost there's a little ghost I
made eyes a little bit there's a little
pixel ghost I drew him and he's very
very kindly volunteered to step up and
be a part of this video and show us
exactly how shaders work I'm gonna apply
a shader to him that I made very
recently that draws a cute little
outline around and I look at that that's
cute that outline is not drawn in the
sprite that outline is drawn by my
shader again I shade a works out where
the edges are and draws a pixel line
around him and I'm gonna just go through
quickly how that works
so every shader is made up of two parts
okay the vertex shader and the fragment
shader so on earth is a vertex shader
well the vertex shader is easier to
understand in 3d terms rather than 2d
okay when you have like a polygon on a
3d model it's drawn with triangles okay
that everything in 3d is made out of
triangles and the triangles they're the
points of those triangles are called
vertexes and what the graphics card has
to do when it's drawing a 3d scene is
work out okay how to translate each one
of these vertexes into a 2d version on
the screen and that's kind of what the
vertex shader is about and then this is
where you have the mind-blowing
realization that actually in game maker
despite us having a mode you can turn on
Reidy there's actually no real
difference between 3d and 2d other than
like having a depth but for really
having a depth value that's really all
it is it's still working out vertexes
and triangles in the same way um and
that's what the vertex shader is about
but we don't need that for our tutorial
because we don't really care about doing
any 3d or fancy baked 3d looking stuff
it's not important to us right now so
don't worry too much about the vertex
shader if you didn't understand anything
I just said
don't worry it's not too important right
now really interested in is the fragment
shader okay in the fragment shader what
we do is we take all those pixels and we
give them a final color okay so we take
every every pixel that we're about to
draw which has basically been determined
by our vertex and we decide what color
were actually drawing to the screen okay
for each one of those pixels so how my
outline shader works well that actually
it's the text shader it doesn't do
anything it just passes through all the
information in the exact same way as
screen maker would usually do it and we
just take that area of our texture sheet
and we pass it through to the fragment
shader okay and in the fragment shader
this is where the magic actually happens
okay so what we do here is instead of
just drawing every pixel and saying okay
this pixel according to the texture
sheet it should be this color value draw
it to the screen as we mostly do that
but instead what we do is we check every
single pixel we compare the alpha of the
pixels above below left and to the right
of it and what we do is we make the
alpha of the current pixel we're on
equal to whichever is the biggest value
okay so either itself or one of the
values around it so if any of those
values around the current pixel are one
then this pixel is also going to be one
but yeah so as I said it takes this
pixel and says okay any of the pixels
around me have a higher alpha that this
one and if they do set my alpha to be
that so for most pixels on the outside
of the sprite this is just going to
leave the Alpha at zero and fully
transparent but when we get to a pixel
that's
x2 our sprite it's going to find that
one of the pixels next to it has an
alpha of 1 and therefore set the alpha
of that pixel to be 1 and because I've
set the RGB of the background the sprite
to be blank we're going to end up with a
black outline funnily enough if I go
into the image editor and replace the
background with alpha 0 red even though
it appears the exact same in the sprite
when we run it through the shader we'll
find we have a red outline because the
RGB values are all still there it's just
the Alpha is set to 0 and it's why that
area of the sprite is transparent after
we've done all that working on what the
air for this particular pixel should be
we then just pass through the color as I
said from the texture sheet and the only
change we're making is to the alpha of
that particular channel that leaves us
with fancy little outline shader so
that's how my shader works I know I
haven't covered any of the code in this
tutorial that's kind of the point it's
not really a tutorial it's just sort of
a primer I just hope this helps to show
you how she does fundamentally work and
what you can do with them and hopefully
sort of fill your head with ideas of oh
if you can manipulate pixels like that
maybe you can do this kind of thing and
maybe get you thinking about how you
might use shaders in your game I hope
you enjoyed that I'm actually very new
to using shaders myself but I've been
very excited and learning to do a lot of
cool little things with them and
hopefully at some point I'll be able to
do some videos teaching you some of the
actual code and how to actually put
together shaders yourself there's a lot
of cool resources out there already on
the matter and I'll link a few of them
the description but on the best ways
just to have a play around see what you
can do I don't like to really do videos
on subjects until I properly fully
understand them and I can be fairly sure
that what I'm teaching is one of the
better ways of doing something umm but
hopefully at some point that'll be the
case I'll bring you some more tutorials
on the subject thanks all for watching
and I'll see you guys next time
but bye