C# Monogame Made Easy Tutorial 14 - Displaying our map Video Lecture | Monogame Tutorial: Design your own Game - Game Development

what's up everybody and welcome to your
next c-sharp mano game RPG tutorial and
this tutorial we are going to continue
we left off in the last tutorial and for
us to continue we actually need some we
need to actually have at our sheet or a
time map or whatever you want to call it
and so we're gonna actually create a
quick one today now before I continue
I'm using a brand new screen recording
software I hope you like it I hope it's
clearer it should compress the font
format so it won't take that much space
on my computer also the editing process
for my videos was taking way too long so
I'm gone with a fixed region on my
computer screen
so hopefully the text is really easy for
you to read read I've done a lot of
testing and all that stuff so it should
be easy for you to read everything
should be easy peasy lemon squeezy
whatever but if you have any problems
then just let me know and I'll try and
address those issues okay so now to
continue with this tutorial what we want
to do is we want to go to open up Google
Chrome and we want to go to studio Evo
comm and in this drop down menu menu
sorry we're going to click the box of
evil now once you read the right here
it's just a box of evil is a collection
of graphic resources you can download
and use for free so we're gonna click
down here to down the box of evil and
we're gonna see a bunch of resources so
once you um just to show you what you're
gonna get with it so in the box evil
does a lot of different things you can
use so feel free to oh man that was
something earlier on but there's a bunch
of things that you can use you take game
check them out feel free to use them in
your game but all the way we're worried
about all we really want to use renounce
to train textures so we're gonna do is
open up
like paint.net or Photoshop or GIMP or
something like that and I made this
canvas region 320 by 320 pixels so we
can store ten images across ten image to
ten inches down sorry for a total of
hundred images in each spreadsheet now
by default these images are 256 by 256
I've just scaled them down to 32 by 32
pixels so we can put them on our sprite
sheet you can however if you want you
can store them in your Tasha's 256 by
256 um but I decided to shrink them down
and paste in my atashi like so so now
that now that I've gotten that done I've
hope I hope I've actually aligned this
properly I don't think I have but um
well I hope I have well whatever we'll
see actually run this we run this
program but once you're done allowing
them in a spreadsheet we want to save
them and I'm going to save it in in our
project folder and in our content now we
don't have a maps folder inside of our
gameplay so what we're gonna do quickly
is reopen Visual Studio we are going to
we are going to scroll down and let me
just move this down so you can see it a
bit
so as you can see on the left hand side
what we're going to do is we're going to
add a brand new folder and we're going
to call this folder let's call this tile
sheets or whatever you want to call it
whatever so we'll go create that tile
sheets folder and what we're gonna do
now is we are going to open back this
folder right here no sorry but it opens
paint sorry and um oh I hope I didn't do
something wrong okay so we're going to
save as we are going to go into our
project folder and in the town sheets
we'll just set it as ground so these are
ground tiles or whatever and so we've
gotten downloaded we got that loaded in
so now we can exit out we don't really
need to well we will minimize it X these
things out and we're back to visual
studio so let me just straighten this up
for you guys so okay so now that we've
gotten that done we we can actually get
to our code so one thing that we have to
do that we never what we forgot to do in
the last tutorial as we actually have to
get an image to our spreadsheet and
we're gonna make this public so pull it
in and in our in our constructor we're
going to have our we're going to
initialize it just in case it does he
doesn't instructor and our constructor
I don't know if I said instructor or not
sorry I'm really tired and so we're
going to make a new list for the tiles
so it's gonna get rid of this squiggly
Oh what well it should later on so now
we've gotten our image in such like that
what we're going to do is we're going to
open back up our mouths are XML files so
where is that
so since I'm map or not XML and let me
move this over here and what we're going
to do is in our lair we're going to say
our image and we're going to put our
path and the path to our image is game
play count our sheets and ground so for
this specific layer our are the towie
that we're gonna have is the ground tile
sheet and with these numbers what's
gonna happen is we're gonna end up
drawing the first tile so it's the first
time the x-coordinate and the first time
the y-coordinate which is this grass
tile which we're going to be able to
crop out and we're gonna be able to draw
so anyways what's gonna happen now is we
got we got the first value we got the
second value and that's cool but we have
to be able to do stuff with it so what
are we gonna do with it so what we
before we can even continue with this
class we're going to go over to our tile
class and we are going to we have to
we're going to include two using
statements and we're going to have our
load content
a little content how the screen recorder
is making the texture kind of like show
kind of laggy oh wow so we've gotten low
content and little content update and
we've gotten draw so we have we have all
of all those four main methods and what
we're going to have right now is we're
going to we're gonna have a vector to
composition and we're also going to have
a rectangle and we'll just call this
source right okay so and not in our load
content parameters we're going to take a
vector two for our position and we are
going to take a rectangle for our source
rep and what we're going to do we're
going to say this position you go to
position this rect source right to Z
will distort it and what's gonna happen
is that we're going to actually or what
we should do
sorry before even before we even
continue is we're going to get some
we're gonna have some get and set
methods or which can ask to get
properties or whatever so I'm gonna take
a rectangle the source right and which
have get and we'll say return source
correct and we'll do one for vector two
for position
return the position and we and voila so
we're just gonna just get the position
and we're gonna get the source right so
what we're gonna do now is we're going
to go back to our earlier class where
you later class okay there you are and
what we're gonna do is in here we're
gonna say that it's not if the string is
not empty then we're gonna say oh tiles
dot add and we're going to add a brand
new tile
yeah there Benito so now we're going to
say if tiles tiles are count minus one
we're gonna load the content now we have
to send it we have to give it a position
and we have to give it a source
rectangle so there is there are two ways
that we can go about it so we can either
change these two for loops and then use
the iteration variable to help us out
with that or what I'm going to do right
now is I'm just going to create a vector
two called position or whatever and I'm
gonna set the I'm going to set it equal
to towels I mentioned subtract 32 and I
don't know if I could do it like that
say new vector sorry new vector 32 32 so
we're gonna subtract my 32 in each and
what we're gonna do is every single time
every single time we loop right here
we're gonna say position dot y plus
equals 2 towel dimensions dot X dot Y
sorry
and every single time this tray is not
or every single time we go to do this
for each iteration even if the string is
empty what we're going to do is
increase of position X by eat our
dimensions directs and what this is
gonna do is it's gonna specify the
position of our tiles and so on and so
forth so I don't know yeah sorry
actually just a thought we're probably
gonna want to put this in here just in
case it's an error or something and
there is an empty string yeah we're only
gonna do it FD string is not empty we're
going to increase the x-coordinate so
the position is gonna be set to position
and so we need to have the rectangle and
the rectangle is going to oh we probably
should do call this after it we're gonna
need the values for it
so the rectangle is going to be fairly
simple so the rectangle we're gonna make
a new rectangle and we're going to say
it's equal to value 1 times tava
mentions dot X and this has to be a
stochastic to int tight because tell
that a rectangle only takes integers so
we're gonna say value 2 x and tile
dimensions dot Y and we're going to say
the width is equal to tau as I mentioned
X and the height is going to be equal to
toggle tensions not Y and so we've
created a rectangle from our tiles now
when it comes to drawing this is how
we're going to draw we're going to loop
through each of the towels that we have
so we're gonna say tile tile and tiles
and what we're simply gonna do
is we're gonna say image dot position is
equal to tau dot position and we're
gonna say image dot source rect is equal
to tau dot source rect and then we're
going to call image drop so what exactly
is going on here so what we store the
position of the current Tau we stir the
position and the source rect and this
should have an extra parenthesis but
what we've done we said the position of
where the talus wants to be located on
the map and we've stored the rectangle
so the actual where the towel is cropped
out so you store the coordinates of the
individual towel so for for in this
instance we're cropping out this top
we're sending the coordinates to crop
out this tile then when it comes to
actually drawing it we'll take our towel
sheet we'll set the position for our top
sheet we'll set the source rec for our
top sheet and then we'll draw our image
to the screen and that's it that's in
turn how it's gonna how it's gonna work
and right now it's saying that tiles is
never used maybe kkeok we have to
rebuild it but with that being said
everything should work correctly so all
we have to do is I guess which had to
run it and hopefully it runs
successfully
so it doesn't contain this intake
knowledge the parameters so it's saying
the texture is null and it's a simple
error which I always do i thrilled over
your bad habit of mind but it's a pretty
simple fix off we go to our layer class
where are you later class um once we
load our image I never called image
download content and so I never loaded
anything and will convince a called
English dog on little content and we can
update the image if we want but yeah we
don't really need to and let's run this
one more time sorry for it running so
slow it shouldn't it's just a sneeze
screen recorder so I'm out to try a new
one um so this is the file path wasn't
found so gameplay tile sheets so I
probably spelled something wrong so
let's check this out so it's in gameplay
tile sheets and I never added it to I
never added to the project so out
existing item go to the folder add it in
and let's try this one more time
and as you can see we've gotten
something drawn but it's not drawn
correctly it's not drawn the way we
wanted to draw so let's see exactly
what's going on and I'm pretty sure I
know what's going on so let's check it
out let's go to a later class so what we
have to do when it comes back to this
iteration of the loop what we have to do
is reset the dimensions back to to
negative 32 or whatever and you know
what we only need to do that we this
should be negative tall that I mentioned
sorry that will make it easier and what
we're gonna do is up here which comes a
position X is equal to negative towel
dimensions dot X and just by doing that
we're just going to reset the position
every single time we need to increase
the Y position and therefore our map
should be drawn correctly and then and
there we go
so now we've gotten our map drawn so now
let's say you want to draw some of the
other tiles that we have so say for
instance you want to draw like this one
sometimes we want to draw this one or
that one or whatever so the first number
in our map represents the tile and the x
coordinate and the second number
represents in the y coordinate so if you
ever worked with like Cartesian planes
or something in school you'll go or you
work with the transformations or
something like that you'll go like three
steps one way four steps down with down
one way or four steps up one way or
whatever so this is how it works let's
say we want to crop out this towel we'll
go 0 1 2 3 and in the y coordinate is 0
so it will be 3 0 if we want to crop out
this one let's say there was a tile down
here we'd say 0 1 2 3 0 1 2 so it'd be 3
& 2 so what we want to draw some of
these are the top so let's just try and
draw them in so let's look at our map
I'm not one XML file and we've dried
since you can see it so I guess we'll
just put like we'll put one there and
we'll draw a few things and we'll just
draw those few things right there and
let's see what we get as you can see it
draw it has drawn the other tiles and we
can walk across it so um I'm going to
end this tutorial here I'll be enjoyed
it there's still our math class is still
not perfect you haven't added in any
collisions we haven't added in like any
blank tiles in case you don't want
towels here I haven't added in that
stuff so we can have not stuff in the
next tutorial and after that once you
have any collisions and stuff we can get
to making our map editor
cuz what we want to do is in our map
editor we want to be able to set
collidable towels in our map editors so
that it automatically sets the collision
for us and it does all that good stuff
so anyways I'm gonna exit over here hope
you enjoyed it thanks for watching don't
forget to comment subscribe and bye for
now