GameMaker: Studio - Sprite Origins Tutorial Video Lecture | Game Maker Tutorial: Build Games from Scratch - Game Development

alright guys welcome back what we're
gonna be looking at today is some a
fundamental concept in game maker that a
lot of people miss or struggle to
understand I don't think I've ever
explicitly covered it or definitely not
explicitly done a video about it and I
think it merits one because a lot of
people have a lot of problems that are
rooted in not understanding how origins
work if you listening to me now thinking
what's an origin I don't even know what
that is then this video is for you
this will help explain exactly what Spri
origin is and then how to set them up
correctly for your game so a really
common problem a lot of people will have
when they're setting up say a platformer
game character is when you start up your
character to face left and right when
you press left and right and you've done
it by so using image underscore X scale
equals minus 1 you know you're reversing
your horizontal scale so that when you
press left instead of having to have a
whole new sprite way and your
character's facing left you just flip
your run facing sprite to look like it's
facing left you just mirror it the
problem occurs when you turn left and
this happens so when I move right it's
being is fine but when I light when I
turn you like flips you seem stalling
teleport a whole character width across
instead of just like turning on the spot
which is what we want this is just
because your origin of your objects
sprite isn't really set up correctly
it's probably just got its default
settings so first of all where are these
saying so the origin of your sprite you
can find it in the sprite editor so here
this is a sPRM school players I'll play
a sprite just a little green dude and
you can find this box here called origin
the origin is an XY coordinate on your
sprite by default it's set to 0 0 so X 0
y 0 or in other words just the top-left
corner so it's set up here in the top
left corner now before we actually go
changing this in order to fix our
problem is important to understand what
it's actually doing what this coordinate
on our sprite is doing and why it's
causing problems so every object in your
room as you'll probably know by now
has an X and a y-coordinate I'm when you
know we press you know in the very basic
tutorials for example you set it up so
when you press the left arrow key you
subtract one from your x-coordinate in
order to move left but think about it
that's just one pixel of space like your
x and y coordinates say your object is
at 200 x and 100 y that's one pixel of
space that's 200 pixels right and 100
pixels down so that one pixel of space
is telling the game where your object
actually is at that point in time but
obviously your sprite itself is bigger
than one pixel so the game needs to know
where to draw your sprite just based on
this one pixel of space this one
coordinate and that's exactly what the
origin does it tells the gaming where to
draw your object sprite based on where
your object currently is in the room so
with the coordinate add its default at
the moment which is at the top left at 0
0 let's just take a look now where the
game is actually drawing out sprite so
this red dot here that I've drawn is
basically the X&Y position of our object
whenever we reference the X&Y
positioning code is pointing to right
here so for example like X plus 1 would
be here and like X minus 1 would be here
y plus 1 would be here Y minus 1 would
be here like if we did like an instance
create inside this object like X plus 10
it would be like 10 pixels like over
here is where it would spawn that object
now it's drawing it down from the top
left and that's because the origin of
the sprite is in the top left because
the origin is 0 0 it takes that position
so it takes our position where our
object is now like here whether this is
now X 200 Y 500 or something like that
and it's drawing the sprite from here
based on where the origin of that sprite
is which is in the top left so it's
taking here this is the position of our
object that's where it is in the code
and it's drawing from it basically
placing that origin from the sprite at
this point and drawing the sprite from
the top left like that
the problem is when we flip our sprite
around using image x scale or something
like that it flips the whole sprite
around horizontally so and that's
including the origin the origin is
slipping with it so what happens is if I
just raise the opacity on this bit by
bit you can see what happens on the
frame that you turn around is notice how
our object the red dot isn't moving
anywhere that the sprite is what's
changing the sprite is flipping around
and the origin is moving to the top
right from the top left and so our
object hasn't moved as far as the code
is concerned the object is exactly where
it was before the exact same corner but
because we flipped the sprite around the
origin is now in the top right and it's
drawing drawing it based on on there so
in order to fix this what we generally
want to do is just if we go into the
game and click this button here in the
origin boxes that Center is going to
place the origin in the center I mean
you can edit it otherwise you can like
move it around like this you can click
if you just click on the sprite here
it's going to move your origin around
but this button here is really useful
because it will just placed your origin
smack in the center of your object you
don't really have to do anything to work
that out and now like if we go back over
to here we can see what will happen when
our object is here and this is drawing
the sprite out from that position if now
when we flip the sprite around what will
happen is this if I fade this in slowly
you can see the object is pretty much
turning on the spot it's not exactly but
it is basically turning on the spot so
if we go and run the game now what we
should see happen is that when we turn
around we're basically just turning
around completely on the spot which is
much better than is project exactly what
we wanted so that's pretty much how you
you fix that problem with origins one
thing you should be aware of when you're
doing like platforming and stuff in a
problem a lot of people have run into
you this is a bit specific to platformer
games now they're just another thing to
help you understand a bit more about how
these origins work is that you'll notice
when
I'm turning this on and off here look
the object doesn't move and look it's
staying where it is and it's flipping
around you'll notice like from here to
here if you pay attention look here look
this there's an extra line coming in
here the custody of the pixel isn't
quite exactly in the center because
there's an even number of pixels it's at
1616 and it's a 32 by 32 sprite so it's
technically one pixel right of the
center like the center would be
something like I don't know like if I
place a red there here be at this
diagonal and just in between like these
two pixels here would be the exact
center the sprite obviously we can't
reference that it's not a pixel of
spaces in between pixels so you'll
notice that it's not perfect and when we
turn around like where we stick one
pixel we technically move one pixel away
in the direction opposite of where we're
turning to so when we face left we
technically like our sprite moves a
pixel left and when we turn to face the
left we stick out a pixel right I've
kind of explained that and the opposite
order I think but but that's what
happens so you can see as we turn to
face left we stick out of this little
pixel to the right now this can cause
you a problem in a platformer game if
you a jumping up a wall for example and
you're like you're just sliding down the
wall and you press jump and left on the
exact same frame so you press them
together you press jump and left
together while you're sliding down the
wall that's on your on your right so if
there is a wall like here in fact let's
just draw that in this will be useful to
explain I pop a wall in here drag it
down under how can I show this best okay
I'll just leave it that
but I'm going to reduce the opacity a
little bit there we go okay so now we're
add this wharton add remove move that
across one pixel so you can exactly see
what's happening here so you're at this
wall here and you press and imagine this
floor below you wasn't there so you were
sliding down this wall you press left
and jump at the exact same time now
what's going to happen is depending on
the order this works in your code you
can move the order around stop this from
happening but what's going to happen
here is that when we fade this in so
we're starting to turn around to face
left you'll notice we're sticking one
pixel here into the wall because of how
the origin is moving just warm pixel in
and so on that frame if you also then
after turning around to do your
collision check to check on the the
floor you're going to take this area
here and you're going to check one pixel
down so you're going to check from Y
plus one draw that sprite again so go
check this box here and it's going to
see here that it's touching a wall and
it's going to basically think you're on
the floor and it's going to allow you to
jump and it's going to give you a bit of
a wall jump effects that's kind of like
hard to do but it'll exist in your game
I noticed a few people have left
comments and stuff on my platform video
saying that others like oh there's a
wall jump in the game so and this is why
basically this is what's causing it and
the easiest fix to this I mean you can
fix it just by moving the order of like
where the collision code and stuff
happens and in your object but the
absolute easiest fix for it to be
instead of using 16 by 16 which puts it
like a pixel ahead and just move that
back a bit to say like 14 or something
like that because then when it flips
around um it's going to be moving a
couple of pixels in the direction you're
facing the sprite is anyway so you're
not going to end up inside the wall when
you turn around that's just a little
extra knee and just to kind of explain
where that specific problem is coming
from so yeah I hope after all that you
kind of have a better works better
understanding
how origins work and like what exactly
they're doing if any of that was still
confusing you still have any questions
about how origins work feel free to
leave a comment and if I know the answer
and I see your comment I'll get around
to it as quick as I can
I've not been as good recently with
answering comments and questions and
emails and stuff like that just because
of the sheer volume that I'm getting but
do feel free to ask your question
because you know I'm definitely not
going to answer if you never ask it in
first place and hopefully I can get
around to as many questions as possible
yep thanks for watching guys hope that
was useful for you and I'll catch you
guys next time
see you guys