C# Monogame RPG Made Easy Tutorial 5 - Images Video Lecture | Monogame Tutorial: Design your own Game - Game Development

come on babe so what's up everybody and
welcome to your next mano game RPG
tutorial and in this tutorial we are
going to be developing what is called an
image class so in the last tutorial we
were learning recapping on XML
serialization uh what I did if we go to
our splash bin I made a class called
image I made that for a reason because
we're going to be modeling our classes
somewhat like that
so everything that is being displayed on
our screen is going to be consisted of
an image it's going to be considered an
image and an image can it's kind of like
I'm kind of like designing it like uh
let's look at paint.net for example an
image can contain text an image can
contain uh a pictures can contain
anything so that is what I'm modeling
this class off of it's an image class
that can basically contain text images
or whatever and with those with with a
certain images you can add to an effects
two images right you can add glowing
effects you can add certain things right
and with this game we're going to be
able to add zoom effects to our images
add a bunch of like fading effects a
bunch of different effects so what we're
going to focus on and this tutorial is
designing the image class Oh what did I
do okay so what we're going to do is
this class is going to be called the
image class image okay so the image
class is going to consist the framework
it's going to consist of content and
last but not least we have our graphics
so we are going to have the standard
classes like we always do as I mentioned
you might get tired of seeing these
classes but they are very beneficial we
have our unload content we have our
update and guess what we goes in the
parameters game time like it always has
been and last but not least we have to
draw and we have our sprite batch ok so
we got our four standard methods
set up so what we're going to do is we
were going to use the XML serialization
in here system XML serialization ok so
just in case you have to do use XML
ignore whatever so we want there's a
bunch of things that we have to have we
have alpha we have text we have font
names a path for images we have oh we
have a texture 2d and we'll call it
texture uh
one of the things we have we have vector
- origin and as you can see I'm naming
my public stuff with I'm starting with
uppercase and I'm private set for
lowercase just to distinguish between
them better it's really up to you what
you want to do but I'm just letting you
know so you guys don't get confused so
we have our position in there uh what
else do we have we have our scale hmm
and if we're missing anything else then
we can add in those things later so
we're going to say that what we're going
to do is in our constructor remember I
said that
dr. Getz called first so we're going to
say path we're going to set all the
stuff that needs to be empty we're going
to set it to empty so we're going to say
Patti goes to string.empty uh we're
going to give a font name we're going to
have a default font name that's going to
be set to orbit Ron for me whatever font
you choose whatever you can choose that
text will be string.empty as well
that'll be the default the default
position will be equal to vector to zero
default scale will be equal to vector to
1 and alpha will be set to one point
zero which means the image is fully
showing and that's what we're going to
have for now
so we're going to say that if our path
is not equal to string dot empty
therefore we have a path to load and
we're going to say our texture is equal
to content that's embarrassing
content oh that's what I forgot
so we have to create a Content Manager
sorry and that's what we're going to be
using to load everything and because
we're using a Content Manager we have to
actually set a value to it so we're
going to do what we did before a Content
service provider and out of content in
hope in parentheses is that right no
that's it no in brackets yeah yeah
that's right word I'm sorry it's like
5:46 a.m. so we're going to make a call
to content dot load and and here we're
going to load the path and is there
anything we need to do oh yeah there's
something else that we forgot we forgot
these source Rex
should be over type rectangle okay so if
the source wrecked when I set it to
rectangle empty man can type right now
okay so if source rect is equal to
rectangle empty then we're just going to
set it to the width and height of
everything but we don't have that yet so
what we're going to do is we're going to
do something really really what I think
it's pretty pretty clever and what we
have to do is create a rendered target
and this render target is oh it's going
to server a pretty good purpose before
we even continue what we want to do is
you want to create a graphics device
that is going to be a public graphics
device and we'll call it graphics device
and we also want a sprite batch
okay so we have a graphics device and we
have a sprite batch and we have to
initialize those so let's go to our code
right here and we're going to make we're
going to say graphics device is equal to
graphics device and screen manager dot
sprite batch is you go to sprite batch
now it's important that we do this
before the load content method because
the low sorry
the low content methods some of them
depend on this so make sure you do
before that so now what we got to do
let's go back to the image class and we
are going to do something pretty cool so
first what we got to do is set the set
the render target to a new render target
and this is what we need the graphics
device so we need a graphics device our
width and our height is going to be set
to well we didn't even set a width and
height yet so what we're gonna do is cut
this right here
so we're going to do is create a
variable called dimensions quickly and
it's going to be equal to vector to zero
and we're going to say our dimensions
we're going to call ah for the X we're
going to say if texture are not equal to
null then we're going to say dimensions
dot X plus equals texture dot width and
then we're going to say dimensions dot X
plus equals and we don't have a font or
anything yet so we're kind of getting a
bit ahead of ourselves so that's kind of
my fault
so sprite font and we'll have a font so
we got to say that if font name uh not
equals to or actually we don't have to
do that stuff will just say font is
equal to content load sprite font and
we'll load the font name so if we don't
change the font name or just load the
default font name so what we will do is
we'll say spawn dot measure string or
text so even if our text has nothing in
it it doesn't matter you'll just add 0
to it so that will get the total uh the
total width of any everything and we're
going to say that if texture ah not
equals no then the dimensions dot Y is
going to be equal to math max between
the textures height and the fonts height
so whichever one has the whichever one
is taller that will be the total height
of the
image and else the dimensions Y will be
equal to the fonts height okay so oh why
do we need this okay so now that we've
got not set we can finish this off for
the source rect so it'll be set to zero
zero and dimensions X and dimensions dot
Y so we're set to empty then we'll set
the new width and the new height so now
we have a render target and we have to
set a width and a height for that so we
have not we have our dimensions dot X
and we have our dimensions dot and DEF
to be int so let's cast it to an integer
type dimensions on X dimensions dot Y so
we have that set so now we have to set
our our render target as the main target
so let's say set render target and we're
going to set a render target to that so
now and I don't know why I put a dot
there so now with it so now that we've
set that to the default target think of
the screen as its own render target so
the screen is in itself it's own lender
target so we switch the render target to
this now so everything we draw is going
to go to this it's going to convert to
that so what we're going to do is we're
going to make a call the screen manager
incidence graphics device are clear and
we're going to clear it to a transparent
color so we can draw everything on it so
now we can make a call to sprite batch
begin
and we'll make a sprite back end and if
you want you don't have to make it this
lot like the names this lot the naming
this long but it's up to you to whatever
so we have our draw so we're going to do
is draw our texture to the render target
and we're going to draw our vector to
zero and the color white and then we're
going to I have to draw only two texture
exist
so if texture not able to know then dry
and we're going to draw D ah we're going
to draw the text so we set the font the
text and this is not correct we should
be drawing it a vector to zero we should
either be drawing it to the right or to
the left of the image but a remote for
the most part we're not going to have
images and texts on the same thing but
it's up to you how you want to do it so
now that we've gotten that set
everything is drawn to the render target
now so now all I'm just going to do say
texture is equal to our render target
and then we're going to say screen
manager that instance that graphics
device that set render target know and
that's going to set send it to the
default render target so what this just
did is that it drew the text and the
image all together into one image and we
set our texture into that one image so
it makes it easier to manage and it
gives us a lot of a different range to
do stuff now in our unload content we
want to unload that stuff on our update
we got nothing and for our draw we're
going to say origin is equal to a new
vector2 and it's going to be equal to
our source wrecked with divided by two
and our source bragg height divided by
two so we just want to take the center
point of our image
whatever if it's cropped out or anything
and I'm going to draw that texture to
the screen I'm going to draw it at a
certain position have our source rect
color white times alpha so it will give
us a transparency where we need it the
rotation is always going to be zero in
this case we have the origin we have the
scale spread effects and last but not
least the depth now what we're going to
want to do is add the origin to the
position so that we get it an accurate
position on the screen so uh what this
is going to do is that the origin is
this I'm only doing this for when we
have a zoom effect so it will zoom in
very accurately so this is going to make
it so that we are gonna draw to the orig
original position that we actually set
it at but where our origin position when
we do everything from is from the center
ok so now that we've gotten that set
we've pretty much got the image class
done so we're going to do is we're going
to go to our splash screen class and
what we're going to do is we're just
going to say image image so we can get
rid of this right here and we're going
to make a call to image download content
image dot unload content
and I'm pretty sure you're taught to be
saying this right now but too bad suck
it up princess
anyways so we've got that and last but
not certainly certainly certainly not
least sorry we've got the draw so with
that being said let us go and add some
stuff to these flash green class now we
have the image we passed in the path uh
I'm gonna cut this and I'm going to
place this in here and everything else
should remain the same so let's run this
hopefully there's no errors that but
there is an error so it says the type of
namespace could not be found is it not a
okay uh is it doing this stupid thing
again uh hold on one second okay so I
solved that error if you guys get
anything like that I just set my start
up object to YouTube program before was
put to set to not set I don't know why
my code is doing that like why my XNA
project is doing that never really
happening before but anyways uh before
we run this we have to actually get a
font now I'm going to put this in a
folder called fonts so let's add a new
folder called fonts Adam whatever font
name you have in there so a new sprite
font called
orbit Ron and in here change the orbit
Ron so let's run this so voila we get
the exact same things we've had before
nothing special but we finally got it
under a class and it's more efficient
this way so now let's try some cool
things while we're at it so let's just
change the Alpha to 0.5 so let's see it
should show it kind of with kind of fade
it out so as you can see it's kind of
faded so now let's just get rid of this
and let's set the scale ah say in the X
by 2.0 and same with the Y so let's run
this and voila doomed in so uh they're
like there you go so what the image
class is does everything handles all the
images for us and it's gonna make our
lives so much easier in the near future
so I've end this tutorial here I hope
you enjoyed this thanks for watching
don't forget to comment rate and
subscribe and bye for now