C# Monogame RPG Made Easy Tutorial 20 - Tile Map Editor [Selection Tool] Video Lecture | Monogame Tutorial: Design your own Game - Game Development

cut up baby so what's up everybody and
welcome to your next c-sharp model game
tutorial and this tutorial gonna be
coming we're gonna be covering a bit
more than then we covered in the last
tutorial but it'll be pretty cool in my
I think you'll find it pretty cool so I
wanted to do is open a program like
paint.net or paint or whatever and I
want you to create I want you to resize
the image and resize it to whatever your
tile size is so 32 by 32 and um what I
want you to do is create four different
images like that
and what you could do just make this
transparent and then for different
images so one over you want is one for
the one one image for the first inch or
for the for the first side we want one
image for the next side one image for
the bottom corner one image for the
bottom right corner and um you can do it
any way you want but I've said it this
way for a reason but it's up to you
whichever way you want the box to be but
your code might be slightly different
depending on the way you've done your
code so keep I mean the way you've drawn
your selector so keep that in mind now
I'm just gonna show you the way I've
done it
so this so what I'm gonna do is just
create a new folder and I'm gonna call
this folder editor and I'm gonna add in
some new items I'm gonna have my my my
selectors right here so I have four
different images and if I show you those
four different images show you them
right here so I have one on the bottom
hinge I have another image on the on the
bottom right hinge one on the top of
tinge and one on the top right hinge now
you don't have to do it like the way I
did it but if you do like the way
you have to take note that your code
will be a bit it might be slightly
different so what we want to do now is
we want to in our editor class once we
can image call selected and or I'm sorry
we should make a list of villages called
selector selectors or ever and we're
just going to initialize our list and
we're gonna do now is we'll just say
right here we have four images so we're
just gonna say 4 and less than 4 and
Luis it's like there's our ideal image
so in our initialize what we're gonna do
is we're going to loop through each one
and there's no point in looping through
the count or anything just a loop
to--for because we we know what's its
size right and the sin of it having to
look for count and find the value we
just specify it so it gives us some
bigger performance boost per se so we're
gonna say selector I and we're gonna say
sector I got path is equal to and we're
going to make us string one to make the
string array and we'll call it selective
top
and we're going to put we're going to
put it in the disorder so we're gonna
say selector t1 which is gonna be the
top left corner and oh it's in the
editor folder so we need the top right
image now so editor semester t1 and in
this case yes order does matter and we
need the bottom left and we're gonna
have the bottom right and you're gonna
see why the order does matter
this should be B 1 and the other one is
B 2 I know you can't see it but it is of
your sauce selector B - well now you can
see you okay so what we're gonna do is
we're just going to have a for loop and
we're gonna say our paths equal to
selector path I simple enough so and
then we'll just we'll put the brackets
here the braces here and we'll make a
call set there i dot initialize
dot initialize make sure after the
content manager so you can pass it in so
we've gotten our selectors set and I
made a public for a reason because our
Thomas play is going to need it so what
we can do is I guess we'll make a list
of selector list of images and we can
call it selector and what we will do and
our little content will say selector is
equal to energy and our selector
okay and so we've got not set so now
we're going to is we're going to make a
boolean and we're gonna say is mouse
down and by default is going to be false
so now we're going to use the controls
function so we're going to check we're
going to check for a mouse down event
what happens and a bunch of different
events so we're gonna say Mouse down so
what happened when we press the mouse
down we're gonna have a mouse up and
we're just gonna say plus equals we're
gonna put delegate Alice a is mouse down
equals false it's all we're gonna put
and we're gonna say mouse move and just
cut this paste right there okay so we
have mouse down and we have mouse moves
so we're going to say that we're going
to say that if is if not is mouse down
then we're going to do something with it
and what we're going to do is we're
going to have a vector G for a mouse
position and our click position
and what we're gonna say is we're going
to say click position is equal to Mouse
position and we're going to loop through
our selectors so imagine selector I
wanna say ma stop position equals 2
miles position and last but not least we
can say is mouse down is equal to true
because we're pressing down the mouse
button so what we're going to do is
we're going to say our mouse position is
equal to so we're gonna have a new
vector2 and it's going to be the e X
divided by and we need to we need to get
the the tile dimensions right so we're
gonna say e X divided by e dot eat sorry
ever dot map or oh yeah
so we'll say current layer dot and we
need to get all dimensions now I know I
went through this tutorial what I did is
I just made a vector a property that
returned the tile dimensions now
something I kind of froze there cuz I
would just I just have a thought like
what we did is we made our images 32 by
32 but let's for selector but let's say
let's say for example the person's tiles
are 64 by 64 or so on and so forth what
you would do is you just scale each of
the images to fit that but um the reason
why we never used one image that we use
for images that is that when we go to
drag in like drag the image I dry the
selector to see what regionally select
it becomes a bit distorted because we're
scaling it so we don't really want to do
that that's what we separated into four
different images then we'll move it
based on the position that we need
move it out so anyways um we will get
the total dimensions dot X and you want
you want to cast it to an int so let's
say e dot y divided by editor dot
currently downtown I mentioned it's not
Y and if you really care about
performance you're probably not gonna
want to keep doing this so you'll
probably create a vector up here that
will store the current layers position
she don't have to keep on calling this
and it will save on up performance a
little bit it will help you a little bit
but it won't be noticeable in this
project and then that is basically it
for the position and so we're gonna say
Mouse position x equals 32 so what is
this gonna do so let's say I'm at the
position 201 say it's 201 201 okay so 2
1 x coordinate 2 1 the y coordinate what
this is gonna do is gonna say to 1/32
and this gives us a death suit against
the decimal but we cast it to an int so
it's gonna return 2 6 so then we're
gonna say six times 32 so that's the
tower on so it's going to round it
toward tau which is a multiple of our
dimensions so that's going to give us
the amounts position and now we're gonna
say that if we're gonna say that if the
mouse position is not equal to the click
position and width and mouse and is
mouse down equal to true okay or
actually um yeah we'll just do something
like that
so what we're gonna do is we're going to
loop through each one now we'll just do
it so four because we won't have four
images
I'm gonna loop to each one of them and
we're gonna do some we're gonna do some
interesting things with this so let me
just see if you guys can catch on so
we're gonna say if I'm modulus 2 is
equal to 0 and malsu's not X is less
than click there's not X then we're
going to say that selector I dot
position equals Mouse position X and
we're going to say else if I modulus to
not equal 0 and mouse cursor not X is
greater than click solution our X let us
say select or I dot position if you go
to mouth there's my X and we're gonna
say else if I is less than 2 and mouse
positioned out y is less than click
position not Y then we're going to say
selector I da position if you go to
Mouse position not Y or V dot X dot X Y
and we'll say else if I is greater than
equal to 2 and Mouse position not wise
greater than click position dot y then
selector I position dot Y Z good enough
there's no y so what and what we're
gonna do is we'll just say else will say
selector alright opposition or will loop
through them
for each image and select their image
stop position see what the mouse
position so what is going on here so
remember what I said loading it in and
the order does matter so it really does
there's a reason why so I said right now
we're gonna loop through the images and
if the I modulus 2 is equal to 0 so for
this and even it was even indexed then
we're gonna end the mouse position now X
is less than click position on eggs then
we're gonna set the new position for X
so this is what it's saying so water
what is what is it what is the even
index we have our t1 the sister for this
will be loaded first so that's index 0
t2 is an X 1 b1 is index 2 and B 2 and X
3 so T 1 and B 1 are both the even
indexes so if the mouse position of X is
less than the click position so in the
position that we initially click down
then we're gonna move those two
positions towards the left we're gonna
move them more so what's this basically
saying is say okay so if we clicked
right here I clicked right here and then
I'm holding it and I drag it along the
left what's gonna move it's gonna move
the left the top left hinge in the
bottom left hand just gonna move those
to the right to the left sorry that's
what it's gonna do and so it says okay
if they're not if they're odd right and
the mouse position X is greater than
click position X the one the thing it's
gonna move the right hinges it's gonna
move it to the right and that's why I
said depending on how you've done your
selector this arithmetic might be
different this is how to do with the way
I've done it and so on and so forth the
rest of it is self-explanatory
now if Mouse isn't empty if the mouse
click position is equal to click
position or
all the mouse's and down or whatever all
we're gonna do is just reset it to reset
all of them to the same position now why
do I reset them all to the same position
well if we look at my image they're all
32 by 32 pixels just that they draw at a
different section so if we draw them all
the same position then it's gonna look
like one entire box and that is why we
do that so with that being said all we
got to do now or I think what we're
gonna do is we're just gonna make a call
to edit there or we're just gonna say
we're just gonna look through these and
selector image draw and oh there is
something else that I forgot to do but
as you can see it draws this right but
it doesn't update our position right it
draws it but it doesn't update and what
we do when we work with WinForms we have
to make a call to something called
invalidate and when we call we do mouse
move that's what we're gonna call
invalidate so we're gonna call that at
the bottom and when invalidate does is
that it says okay whenever you can um
refresh the screen or draw the section
of the screen which needs to be updated
so as you can see I do this and
everything's gone you're like what the
hell
but and this is not working properly so
I click and drag and that is not working
properly so it looks like we did
something or I did something retarded
she just needs i shouldn'ta check it out
figure it out okay
sorry oh man I just choked whoa that's
embarrassing anyways oh man I'm gonna
pause the video I need some water
well sorry about that that was kind of
embarrassing but whatever yeah so
the problem I made as I made all these
else's I just a lot of all these can
beat well I should have changed this
from Elsa to an F these are beings out
right here it can't be less than anger
than at the exact same time so that's
why we put it if and else if but at the
same time the act um this can be one of
these can be executed and these are the
one of these can be executed at the same
time as well
um so that's what we have to do like
that and if you notice when we do that
we got some little cool animation that
shows our selector but where was
everything in our Tom's plays on it's
completely gone and what we need to do
is we need to go to a later class and
remember we're taking the image from our
lair but remember we what every single
time we draw we modify the position of
it and what it's doing its drawing it at
the new modified position so we have to
do after we're done drawing as we have
to say immolated our position you go to
the vector to zero to reset it back to
the initial position and we have to
reset the source right so say source
right is equal to image textured also
stop balance and by doing that it should
fix a problem as you can see it fix the
problem and then we can select few that
we can select some things so that's it
for this tutorial
in the next tutorial we're gonna be
actually selected being we're gonna
actually be able to select things and
then draw what we selected on the screen
but that is for the next tutorial so I
hope you enjoy this thanks watching
don't forget to comment subscribe and
bye for now