all right so the first thing we're going
to do is get our project all set up and
we'll probably go ahead and prototype
out a level in this video now uh if
you're going to be following along you
will need all the textures that I'm
using for the most part they come right
out of the paper 2D template so you
could export them yourself but I've
tried to make this easier and I might
have added a couple of extra textures so
if you go to wiki. unrealengine.com
file colon paper2d textures.zip you
should get access to this page which
will give you the files that I'm using
now again this is the exact same thing
as the uh ones from the paper 2D
template I've added uh one so that the
character can jump it's a really cheesy
texture I'll be making fun of it later
uh and I've added a little tiling
texture that we can use for um for
prototyping so that we can see the
material do its sort of tiling thing in
the background
okay so once you have that uh make sure
you extract those to a location where
you can get to them and we'll slide this
off the screen now I've already got
these uh in a location on my hard drive
you can see them all here and I'll be
bringing that back in shortly for now
let's build our project now I'm going to
build everything from scratch we're not
going to start from a template because
that's kind of cheating when you're
trying to learn something so uh let's
call this my paper 2D game and we'll
start with just a blank project uh with
nothing in it and let's click create
also I'm not using any starter content
that doesn't mean you uh had to do the
same thing if you want the starter
content for the materials and whatnot
that's
fine so we'll click create give that
just a second and it'll open up my new
fancy
game now once this opens up we're going
to need to import our Textures in also
this level is great it's fantastic but
it's a 3D level so it's not going to
help us very much let's go to file new
level and we will call this let's and
save it like open it up and save it
immediately so uh we'll do a
save and let's call
this my 2D
map of course you can call it anything
you want I just want you to save it okay
so here inside the game folder let's
make a new folder and we will call this
textures and I'll open that up now here
are the textures that are included in
that zip file at least at this time if I
change the zip file later and you get a
slightly different collection it should
still be good hopefully you'll just have
extras now I'm just going to drag and
drop these into the content browser and
let it do its thing some of them look a
little funny because of alpha channels
and whatnot but that's fine we don't
care they should still work just fine
let's go ahead and go to file save all
so that those get saved so that we will
always have access to them including if
something you know explodes because
sometimes that happens now back in the
game folder let's make another new
folder which we will call materials
I we'll open this up and I'm going to
make a new
material by right clicking and clicking
material uh that I will
call level
prototype and that's exactly what this
is going to be for this is going to help
us prototype out a level and give us
something that we can uh we can see and
look at and play with so let's double
click and open this
up and thank you welcome to the material
editor let's go ah and close that for
now now a couple of quick changes I am
not going to be using Lighting in this
project you can though paper 2D totally
supports lighting so if you want to
create a 2d game where you have lights
in your scene dynamic or otherwise you
can totally do that I'm not going to so
all of my materials are going to be
unlit so I'll select my uh main material
node and under shading model we will set
this to
unlit now what I want is a
material that tiles and aligns to the
world so as I move the Sprite around
that has this material on it the texture
will appear to kind of slide around the
texture will be stapled to the world no
matter where I put the Sprite so to do
that we're going to start with a world
position actually what we're looking for
is an absolute World position or that's
what it's called so we'll just click on
world position here and there it is says
absolute World position on the Node I
know it's a little confusing because
it's a little differently named but
you're looking for World position anyway
now we're going to m mask out uh the uh
y AIS here so let's do a component mask
so you just type mask and you'll see
that now this masks color so you'll see
everything is labeled as RGB but RG and
B are analogous to X Y and Z so what I
want is just R and B and I don't want G
which which correlates to the Y AIS
that's because this game is going to be
flat this game is not going to move in
the y- axis it's only going to move in x
and z so now we have that we're going to
make a parameter let in fact a quick way
to make a scale a parameter hold down
the one key and click and right click on
that and choose convert to parameter and
we will call this repeats per
meter now we're going to mult actually
divide that excuse me so hold down the D
key and click and we will divide that by
100 because one unit
in unreal is a
centimeter so that'll convert that over
to a meter now we're just going to
multiply these two values
together so this will cause whatever
texture we plug this into to repeat once
every meter in unit space within our
game now uh to make all of this work on
a texture we need to have a texture
handy so we're going to create a 2d
parameter so I'll just type in par
parameter and let's see we have texture
sample parameter
2D so that's what we want and it's got a
huge name on it so we're going to change
the name and this is actually kind of an
important step if we want paper 2D if we
want the Sprite that we apply this to to
automatically have access to this
texture we need to give this a specific
name we're going to call it Sprite
texture over here in the parameter name
so that's important make sure you call
it Sprite
texture and there's no space there
either so we can take our result here
and we can plug that into the UVS and we
could take the output and plug it
straight into a missive color
technically speaking that will work just
fine however we're going to do something
a little bit fancy now this is where I
am branching out getting a little bit
away from what happens in the uh in the
template because in the template you
just create this material this material
is created for you you don't have to
create it we're going to do something
kind of fancy there we're going to do
vertex
color and we are going
to
multiply vertex color by the result of
our Sprite
texture now you can also if you want
some opacity and you don't have to have
opacity but if you want it uh we can
take our blend mode and we can set this
over to
translucent and then we can take uh the
alpha
Channel and we can multiply that
actually we probably don't even really
need to do that because I I don't think
we're going to have an alpha channel on
our texture so let's just take the
vertex color and we'll just plug that
straight into opacity now what that
means is we can change the Sprite color
later on which you haven't seen yet
we'll assume you haven't seen that uh
but it just means that we'll be able to
change the Sprite color later for all of
our uh template prototyping Sprites so
with this done there's a quick look at
the network once again I'll go ahead and
kind of zoom in a little bit you can see
that so that should be good let's go
ahead and uh we could go ahead and apply
our texture here probably be a good idea
so let's slide this out of the way with
my slightly limited screen space and
under textures you have the 2D
background tile texture this is the one
that's actually included in the template
so if you just want to use that that's
fine but it's a really boring texture
it's just flat gray so you can't really
see anything repeating uh so I've added
one called prototype texture so we're
going to use that I'm going to select it
come over here to my uh Sprite texture
that we created a second ago and if we
scroll down we can just hit the arrow
and drop that
in okay so let's uh save
that and we can now close out our
prototyping uh material now I want to
show you a couple of things real quick
if you go under view options you can
show the plug-in content and that'll
suddenly make the paper 2D folder appear
now inside of this if you filter down by
material you can see the two materials
that come along with paper 2D by default
uh you have the default Sprite material
which is what we'll be using for our uh
character and basically for everything
else and I just want to point out the
network for it it's kind of important to
be aware of so notice it has a uh Sprite
texture parameter 2D just like we
created on our own it's got a texture
coordinate which is really just there to
supply basic UVS and then we're
multiplying the vertex color which will
be the Sprite color by the way uh by the
color output and we're multiplying the
vertex color Alpha by the alpha output
of that Sprite texture what that means
is if you want to if you're using this
default Sprite material you can use your
Sprite color which we'll be looking at
later uh to not only change the color of
your Sprite but you can also make it
opaque and transparent and you know play
with its visibility a little bit like
that now the reason I'm pointing all of
this out to you and no I don't want to
save changes is that there is also a
default lit Sprite material so if you
want your Sprites or some part of your
game to be lit you don't have to create
a special material for it you just have
to know that this exists and then you
can point this at your Sprites uh
instead of the default one which will be
there automatically so I'm going to
leave this paper 2D folder visible for
the time being we might hide it again
later if I get tired of looking at it uh
but really I think with that we've got
our material portion taken care of so
let's take a look at creating a basic
level so here in my tech textures folder
I've got this uh 2D background uh first
off let's uh go over to my game folder
let's make a folder specifically for
Sprites I think that's probably a good
idea just for overall organization so
new uh folder and we'll call this
Sprites now I'm going to jump back over
to my textures folder and this is just
the way I'm going to do this you can do
it in a few different ways we're going
to right click on the texture and choose
create
Sprite and it comes in as 2D background
Sprite Which is really nice a bad name
I'm just going to immediately drag that
into my Sprites folder and choose move
so that moves that over and there you go
we have a Sprite that we can set up in
the background now here in my viewport
which we haven't really done anything in
just yet I'm going to go uh to the drop
down for choosing the type of camera and
we're not going to use perspective you
could but we're not going to we're going
to set this to a front view a front view
allows us to see uh the Z in the x axis
Y is pointed right at us and it's
orthographic so it really doesn't matter
at that point
uh we're going to drag this 2D
background Sprite into the
level and there you go now we all we see
this is the wireframe which is not super
useful so let's take the View mode and
we'll set that over to lit and we can
see that
background now at this point we could go
ahead and prototype out a really really
simple level so let's do something
really basic we can alter later we'll
scale this up uh so that we can see now
be aware of this red line that red line
is going to be your kill Z so you don't
ever want the player to dip down beneath
that because he will die so we'll just
set our Sprite right on top of that now
let's create a new Sprite uh that will
be used uh just uh primarily for
prototyping out our
level so uh we can do that in a couple
of different ways what I'm going to do
is come back over here to
textures and we could just create a uh
one based off of our prototype texture
just like we did before so let's just go
let's just do that we'll just right
click and choose create Sprite and we'll
call this our prototyping
Sprite and I'll drag that into my
Sprites folder and move it now we're
going to make a couple of changes to
this so if I double click it uh this is
the uh paper 2D Sprite editor it' be a
good idea to flip through uh these
different uh tutorial Windows if you'd
like to know a little bit more about
this editor for now we're going to go
ahead and close it because I'll be
talking about a lot of that here in this
video now a couple things first off we
have the source texture that's already
set up which is all well and good but I
want to change the default material from
The Mask unit Sprite material instead
over to my
material which uh is called level
prototype so we'll just switch that out
actually didn't I call it level
prototype thought I called it something
else let's double check what I called it
because it wouldn't be the first time I
forgotten that sort of no it is called
level prototype that's fantastic okay so
we want to use that a couple of other
things though so uh we have that
parameter inside that material and if
you remember it's uh repeats per meter
and currently it's set to zero which is
not super useful so let's set that
default value to one and we'll save that
so suddenly we can see the texture and
that's going to be really
nice now with that uh that material
applied to our Sprite uh we still have
access to this Source texture but we can
put anything into this texture slot that
we want to so if you have any other
textures you'd like to test uh for
example I could go under my view options
and I could show uh the engine content
folder and here under engine we could
filter down by texture and let's just
say I like for whatever horrible reason
I like this uh bad texture we could
select that and we could drop that in
and then that is going to uh to be used
as our Sprite texture which that looks
pretty horrible and I don't really want
to use that oh here you go here's a
random one we could just plug in and
there you go
so you can see how that uh that specific
texture is being applied to our Sprite
now I'm going to put mine back over to
our prototype texture there you go now
let's uh take a quick look at this
Sprite in general so uh we can see it
has a view it has a source region I'll
talk more about this later and what it
means because it's a little hard to uh
to explain when we're actually sampling
the entire image we can edit our
collision and we can edit the render
geometry we're going to leave all of
this alone for the time being this will
be a lot more useful uh once we start
setting up uh more shapely Sprites a
Sprite that is not just taking up an
entire texture especially when we get to
characters for now let's go ahead and
save and we will close
this and for the prototyping I'm just
going to go over to
Sprites and let's uh turn off our filter
I'll grab my prototyping Sprite and drag
that in and you can see how that world
alignment is affecting that Sprite it's
just keeping that uh texture locked in
place now I'm going to scale this Sprite
down and turn it into a platform and
then uh let's do a couple of things
first off because I want the character I
want the player to be able to walk on
this surface I need to make sure that it
is set
to some coordinate in y that makes sense
I usually set everything to zero I don't
want to lock you into a rule that you've
always got to build your 2D games at
zero in the Y AIS but since it's 2D
every everything that needs to interact
needs to be at the same coordinate in y
and zero is really easy to remember so
if we want our character to walk on or
interact with something or touch it or
bump into it we want to make sure that
it's at zero in y now that does mean I'm
going to take the background and instead
of that being at zero we're going to set
that
to20 in y and that'll push that back
into the background but we can't really
see a difference because this is an of
course an orthographic view now some
other things let's go over to basic and
I'm going to bring in a player start and
that's going to give us an idea of sort
of how big our character is going to be
so obviously we have a tiny little level
right now which is good to know uh let's
take our background and I'm going to
scale that up much much
bigger and we'll move it up a little bit
too again we want to keep it up above
that red kill Z line we can take our
prototyping Sprite and just make that
much bigger and there you go this is
going to be super super basic just to
get things started and we can build it
into a much nicer ER level uh at a later
time once we have a character all set up
but for the time being this is enough to
kind of get things rolling we got our
first couple of Sprites we have a
background a prototyping Sprite and the
purpose of the prototyping Sprite is
really so that uh as we get into
creating our level it's very easy for us
to uh just bring in copies of this
Sprite if we need a wall real quick we
can just make a wall like so if we need
a platform we can scale it into a
platform it just gives us a lot of super
fast flexibility and that's what we'll
be using it for as a matter of fact real
quick now notice I drag this Sprite in
what I want to do is I want to lay out
this level really fast but I want to
mention oh thank you I want to mention
that when I drag this Sprite in you'll
notice that it jumped to 190 in y so for
the time being just visually verify that
everything ends up at
zero so make sure that goes to zero and
then I'm going to just alt drag a copy
to the other side of the view uh we'll
take this floor that we just created a
little uh a few minutes ago and I'll
scale that up so it it can overlap that
should be just fine okay so I've framed
out a really simple Box level and that's
good enough for us to get started so
that is going to wrap things up for this
video now in the next video we're going
to build some uh some more involved
Sprites and uh we'll take a look at a
few more of the details and uses for the
Sprite editor