C# Xna Made Easy Tutorial 27 - Pixel Perfect Collision Video Lecture | C# Game Development: Game Making made Easy (English)

hello everybody and welcome to your 27th
c-sharp action a tutorial so this
tutorial gonna be learning about pixel
collision or pixel perfect collision
whichever one you like to call it and
we're going to be using its is gonna be
kind of I don't know if I should call
this harder intermediate or whatever but
to the average beginner it might seem
kind of confusing it might kind of play
with your mind a bit but I'm going to
make this as easy as possible for you to
understand and if you have to rewatch
this video two or three times fully
grasp it then so be it it's like in
school when you're studying you might
not get something right away but the
more you look at it the easier it gets
in the end so yeah so I'm telling you
from now that if you don't understand
that don't worry just keep working at it
and you will understand it eventually
okay so what we're gonna be doing is
that we're going to be using the skills
that we learn from the bounding box
tutorial and we're going to be using
that utilizing that well pixel collision
pixel collision as I said before it can
be really hard on the hardware because
if you're checking every single pixel of
an image or every single pixel of so you
have like five enemies or whatever or or
like so you have a hundred enemies and
you're checking for pixel enemies of
every single enemy on the screen and
therefore you're gonna have to check 800
pixel a hunt and say your screens 800 by
600 you're gonna have to check like 800
by 600 pixels every single update and
that requires a lot from the hardware
could slow down your game could give you
a lot of lag so using this method what
we're gonna do is first we're gonna
check first we're gonna check for a
bounding box collision and then after we
have a bounding box collision then we're
gonna check for a pixel perfect
collision so if they are within the
vicinity of the enemy or whatever
they're trying to collide with that's
when you check for a pixel collision and
therefore it's easier on the computer or
on the hardware that you're running it
on also with the met them when it
showing you that with the were only
going to be checking the area which were
overlapping when we're colliding with
and uh well you'll understand what I
mean by the end of this tutorial
so remember uh sorry our sprite okay our
sprite before it was just a image that
was just uh oh there's a square image
that was filled in the color red so
there was no transparent areas okay so
say we did the bounding box collision
but for some reasons there I say our
image was like that big but say our like
we cropped it out or image was that big
but we only want to collide with what
was only in the middle so we only want
to do that then we would run into a
problem because if we did bounding box
collision then once once it hits this
area the transparent area it would count
as a collision but it really isn't a
collision you want to collide with this
color right here or with any other type
of color in there so what we need to do
is that we need to check for bounding
box collision so it's in the vicinity of
this braid and then we have to check to
see if this color is touching another
color okay so I'm going to show you
exactly how to do this so what we're
gonna do is that we still have our
rectangles or our player in our enemy
sorry
and what we're gonna do is we're gonna
make a private boolean type method
called pixel collision it's going to
take our two textures and it's going to
take our two rectangles around our
textures okay
so within this what we need to do is
that we need to get all the pixels
within our texture okay sorry
but we need to get two we need to get
all the pixels within our within both of
our textures right in order to store it
to see which color is in it so basically
we need to scroll through all these
pixels and we will notice that all these
are transparent and then I will get to
store the red pixels etc etc so that's
what we have to do firstly okay so once
we do that we do that by doing I'm
making
color array and we do new color and we
make the color the size of the sprite
with Tom's a sprite height right sorry
sorry so we so we store our color data
into our sprites with times of spray
height and we make another color data
based on our second sprite or our enemy
sprayed the width and the height as well
and to store that data or that all that
pixel data what we do is we take our
spray name but dot get data right here
in the left and right stream operators
we put what we're storing in this we're
stirring the color and then we put in
the data that we're storing in there so
we store our color data with it within
our spray so that's that data stored
okay so now this is the part where a
kind of can get confusing okay so I have
for integer type called top bottom left
and right okay
and what this is essentially what this
is all doing right here is gonna draw a
rectangle around the overlapping parts
so what am i saying right here okay so
let me okay go over here okay so this is
say this is a player and this is the
enemy over here okay in the black so let
me draw a rectangle around the player
and okay so save the player overlaps or
the enemy like so
and I never got the whole thing but
basically what we're basically doing is
that we're getting a rectangle around
the parts that is overlapping so will
will basically we're basically getting a
rectangle from this corner to right here
so that we only need to check for the
pixels over here because that's the only
part that's overlapping right we don't
need a check for the pixels and the rest
of the images because we know for a fact
that the player is not touching that
part of the image and therefore we don't
need to get pixels or check for pixels
in that area right and same for the
player this part of the player is not
touching the enemy and therefore we
don't need to check this of area the
player for pixels we all need to check
the overlapping parts
hence the bounding box we only have to
check the overlapping parts to see to
check within those parts to see if it's
actually a color or if it's transparent
right so how do we do this okay so we do
this by we say that the top or the top
of our new rectangle that we're gonna
draw is equal to math dot max player top
or enemy top okay so we don't Oh first
of all we don't we don't know where to
draw the rectangle so what we want to do
is you want to find the maximum value
between both of these now remember an X
in a that once you increase value
increase the Y value your going towards
the bottom of the screen and when you
decrease the Y value your going towards
the top of the screen so we want to find
the the the sprite or the image or the
rectangle that is lower down on the
screen right so for instance when we go
here this is this enemy spray the top
and the top of the enemy sprite is
greater or greater than the top of the
player sprayed therefore we know that
the top of the enemy sprites is going to
be the top of our new rectangle
basically that's what it's saying right
there so if we go back to our code again
now you want to check to see the bottom
of our new rectangle so we get the
minimum value the lowest number between
these two of the player bottom and the
enemy that bottom so let let us go again
so let's check again so so what's the
lowest value so remember that Y towards
the top of the screen is a lower value
so the player's bottom is lower than the
enemy's bottom right therefore we know
that the bottom of our new rectangle
should be over here
so we got our top and we got our bottom
of our new rectangle okay so if we go
back to our code again we need to check
for the left hand left hand side of our
new rectangle so the left hand side is
going to be the maximum value between
the the the players left or the enemies
left so if we go back to our image again
the enemy's left since it's further to
the right of the screen then it is a
higher value so we know to start drawing
our left side from over here
right and then for our right side what
we have to do as we find the minimum
between the players right and the
enemy's right okay so what we do or the
players right is less than the enemy's
right according to the coordinate system
so we know to draw the right side panel
right here and the voila we got our new
square and we know where the player and
the enemy have overlapped okay so since
so we got that information right there
so then what we want to do is only
scroll to the section that is overlap
that's overlapping we do this by doing a
for loop so what we're gonna do is we're
gonna do for int Y or whatever is equal
to top okay so we're starting from the
top and if Y is that some bond and then
we um we increase Y right so therefore
we're just scrolling from the top to the
bottom right that's basically what we're
doing so we don't want to go any farther
than that and this is just scrolling
from the left to the right because
that's what we're doing then basically
what this is all saying is that word
work one more scrolling to do each pixel
this is going to scroll to every single
pixel through the first sprite let's
just gonna scroll through the designated
pixels in the in the second sprite so
remember our color data that we restored
right so yeah we stood that color data
so we're gonna do is that we're gonna
say if color is equal to now you're
probably have to memorize it so but
basically what this is saying is that
it's going to start from the top
pixel and it's going to scroll through
every single pixel from then on so what
this is doing this formula is gonna
scroll to every pixel so it's gonna say
get the current pixel and we do this by
think of this is like the the row width
times the row height and then the column
number so if we're on a say we're on
Rosie
right and say we have it like if we're
looking at as an array okay this is the
first roll say the row number is equal
to zero so and say there's like 10 rolls
right so 0 times like say there's
overlapping about like say 10 pixels so
0 times 10 is equal to 0 plus and say
they're in the second column right so 0
plus 2 is equal to 2 so we need to get
the pixel of the sector's row 0 pick
column 2 so that is basically what we're
basically doing right there so we get
that information it's like scrolling
through a two-dimensional array but
we're doing this for one-dimensional
arrays so we're getting the
corresponding pixels for the first image
or for the first braid and the the
second sprite and we're doing right here
there is four color values when we're
working with colors in X Nate there's
RGB and a okay are for read/write
intently green G for green intensity B
for blue intensity and a stands for
alpha and what alpha means is is the
amount of transparency 0 stands for
maximum transparency and 255 stands for
no transparency at all right so what we
do is that we get the a we to find the
alpha we do we get the color and we do
the color name dot a right and then we
do the same for that and we save color
and the Alpha if the alpha value is not
equal to zero so that means if the if
the section is not transparent or the
the pixel is not transparent in our
players braid and if they're overly if
the overriding being part of the enemy
is not the Alpha value is not equal to
the alpha value is not equal to zero
yeah therefore they're colliding so it's
basically checking the the same it's
checking the same pixel so saying of
both of the pixels in both the enemy and
the player image are have a color and
they're not transparent therefore
the two pixels are colliding and
therefore there's a collision and we
return a collision by doing return true
and then we if there is no question then
we return false so how do we execute
this in our update during our update
loop we do player if players intersects
enemy and then we run our collision code
right so if so collision returns true
then we were gonna change the player
color else aw then it's we're gonna set
the player cousin to Y and if the player
is not intersecting the enemy then we
set the players colors to white as well
so let us just run this program quickly
to see what we get so right now see if
we did bounding box collision there
would have been a collision already
because of this bounding box this area
so um so big right but right now the
pixel collision code is indeed running
right and if I was to like have a put a
breakpoint in here we would see that the
pixel collision code is indeed running
because the the player is intersecting
the enemy so the pixel collision code is
running but the two pixels aren't
touching and I know that these are
touching it as soon as we touch it and
then it will turn into a brownish color
and therefore you will have a perfect
collision every single time from every
single angle so that is it for this
tutorial I know was long but I hope you
enjoyed this and and bye for now