Java Game Development - 34 - Mouselooks draw Method Video Lecture | How to create Games in Java - Gaming Development - Software Development

what is going on guys welcome to your
34th java tutorial and in less toriel we
built our init method and in this
tutorial as promised we're going to be
building our draw method so let's go
ahead and just add a little comment says
draw and it's going to be public
actually it's going to be synchronized
and void and of course go ahead and get
me draw and pass it in a graphics 2d
parameter and go ahead and name that G
and now let's go ahead and get started
the first thing we need is the width of
our screen and when you store in
variable I'm going to store in W because
I don't cycle width or anything and it's
going to s dot gets width so now W is
equal to get width and of course we're
going to set one equal to H which if you
couldn't guess it's s dot get height
right there so now it saves us just from
typing these so now let's go ahead and
utilize these babies now we're going to
be doing a little math here so watch out
we need to take and change the location
of the image in both its x and y
coordinates um depending on you know
where it should be so the first thing we
need to do is we need to take image and
we'll work with our x coordinate first
and let me find my modulus modulus
equals W now let me explain you guys
what this means remember the image X is
the X location of the image and the W is
the width of your screen so what this
says is this if your image is look let
me take it one step back before I even
start explaining that what this means is
image x is equal to the remainder of
image X divided by the width of your
screen so what this means is this
whenever you're working with modulus if
you do something like seven hundred
divided by a thousand even though
there's not really any remainder it
gives you seven hundred or that original
value as your answer so in if you did
something like this a thousand divided
by seven hundred the modulus of that of
course in that case
there's 300 leftovers so that's your
modulus so what says is this if the
location of image X is less than your
screen for example if this was 700 and
this is a thousand it's going to give
you that remainder which is just 700
which is pretty much is basically what
it needs to be but if it's more than
your screen then it's going to give you
how much it overlaps by so for example
if this was like a thousand and this was
700 it's going to give you 300 so if you
overlap by five it's going to be five
overlapped by 15 it's going to be 15 so
that's going to be able to according to
how much it overlaps by that's how much
you want to place on your screen and
once you see this program run it's going
to make so much sense to you but it's
really hard to describe how images move
around on your screen but that's pretty
much what's going on right now so we
need to do the same thing with the Y
value of course and set this equal to H
and now we just need a couple checks and
balances now we always need the image
location to be positive and this is
because if you try to place the points
negative 5 negative 18 on your screen
those don't even exist on your screen so
what we need to do is kind of trick it
and being where it needs to be so image
X if image X is less than 0 then what do
we want to do we just want to take that
same image and we want to add an entire
width to it so pretty much if you go
negative on your screen it's just going
to change it in a positive real quick
and bring it over here so it's going to
actually be negative but it's going to
be the appearance or we're going to
trick our computer into thinking that
it's positive but the viewer is just
going to view it in all one motion going
off your screen again this is another
thing that you just need to look for I
mean it's really hard to describe in
words what's going on with this program
but once you see it run again it's just
going to be pretty much a bunch of tiles
moving around your screen indefinitely
and not constraint to the screen size so
image dot y is less than 0 and this
again is just 4
height instead of the width what we want
to do is take image dot Y and add an
entire height through it so if it's
negative ten and your screens thousand
it's it will now be armed
well 990 there we go so with all that
crazy math is if you understand this if
you can understand this then you can
understand this entire tutorial so now
let's go ahead and do a few more
confusing things um let's just go ahead
and take int X and set this equal to the
location of image 2x because we're going
to be doing a couple things here in
second and NY I think you're going to
know what I'm going to be doing with
this image dot Y and now we need to draw
four boxes on our screen now remember we
always see the positive thing on our
screen but wherever we're going to be
drawing also is 3 negative boxes so
here's what I'm saying we have a box
right here and this is pretty much going
to be x and y we also need to draw a box
to the left of it above that and above
that so there's going to be 4 pictures
drawn on our screen and though and
that's because Ari when we take this
image in the bottom right and we move it
off the screen then we don't just want
the border around it to be white we want
it to show the image tiling as well so
that's what I'm trying to say we're
drunk tiles with this one and we're
going to be drunk 4 tiles and that's
going to give us our entire ability so
no matter where we scroll even if we
scholar scroll our image off the screen
we still see the 3 other tiles that
looks like it's repeating so let's go
ahead and go G dot draw image and wow
that's a lot of parameters we do not
need all of those and what do we want to
draw well in every case we want to draw
the background of course in the first
case we want to draw x and y and this is
going to be our main box and let's go
ahead and copy this
and paste it and we should why are we
getting an error it oh we don't have an
image observer no and now we need to
copy this three more times so one two
three and of course it can't just draw x
and y the whole time because this is the
location of where address we can't just
have this or else it would just draw
four images on top of each other so what
we want to do is we have our main box
just chillin right here we want to draw
an image to the left of it so how do we
do this all we do is we take X which is
location and - entire width of our
screen and remember width is equal to
the width of the screen so what this is
going to do is draw a carbon copy of the
image to the exact left of it so now we
need to draw one on top of our original
so here's our original right here and if
we take Y - height it draws an exact
background right to our right above our
main image so now how do we draw an
image not only above it but to the left
of it as well
but what we need to do in this case is X
- a width which is going to shift it
over one screen to the left and also Y -
a height which is going to move it up
because remember negative is up and
negative is left under screen because
the top left corner is zero zero so with
that being said what this is going to
draw is for tiles side by side each
other so it's pretty much going to look
like a tile here a tile here a tile here
and our main reference tower right here
so then no matter where we scroll on the
screen
you can't escape seeing those other four
tiles so that is how we do that I know
it's confusing the rest of the tutorial
is a piece of cake I promise this is the
only really math we have to do with deal
with in this tutorial but trust me if
you understood this tutorial then you
will be good to go so thank you guys for
watching don't forget subscribe it in in
the next tutorial everything is going to
start coming together and making sense
so again don't forget subscribe enough
see you next door