[Music]
all right welcome to
gd50 this is lecture 10. today we'll be
talking about portal so uh portal's a
very iconic game i think most of us have
probably seen it before the gist is you
have a portal gun a gun that shoots
just these elliptical portals
if you look through one you can
effectively see what's sort of coming
out the other one which is pretty cool
and vice versa and then if you walk in
between the portals you'll actually be
teleported to the other side and so they
achieve a lot of really interesting
effects with some pretty cool um tricks
and stuff and actually valve themselves
will be coming to
give a talk on a lot of the technology
that they used um on the second so we
can get a glimpse into their version of
portal my version of portal is a bit
simpler
but we'll look at a lot of the same sort
of principles and see how i accomplished
a lot of the same things
so this is also the last lecture of the
semester and we've covered a lot of
ground i have a few screenshots here to
show some of the games that we've talked
about you know the very first game was
pong and we've come sort of a long way
we've gone through um very simple sort
of arcadey atari-like games like this
and you know have gone and created
worlds effectively and you know now
we're in 3d we're doing all kinds of
awesome stuff but these this is where we
started the course um and it's kind of
fun to look back and see where we've
come so you know here we talked about
scoring and just effectively drawing
shapes onto the screen then we
transitioned to flappy bird or 50 bird
and you know we had sprites and
characters and we talked about scrolling
and infinite level procedural generation
type algorithms and that was fun
um we took things a step higher than
that with breakout where we had the same
sort of procedural ideas in the context
of a very famous arcade game we talked
about particle systems and um some
arcade style physics and high scores
then we went into puzzle games we talked
about match three and how to actually
calculate what goes on uh uh to
determine whether we've gotten a match
and how to clear blocks and how to tween
things do operations over time so this
asynchronicity
um then we went into probably what is my
favorite lecture which was super mario
brothers and we talked about how to
create procedural worlds that all look
very different with some very simple
algorithms and then we had triggers and
um events sort of happening then legend
of zelda came and we had this infinite
dungeon algorithm and we had enemies
walking around that we could use a sword
on so it felt more like an actual action
game action rpg
then we took a look a brief look at
physics in the context of box 2d with
angry birds and i still remember the
like ball pit example was probably my
favorite part of that
and then um probably the most
complicated example of the semester was
pokemon where we actually had a full a
semi-full turn-based battle system and
random encounters and like a little
world where there's actually two main
stages to our world where there was the
field and the battle scene which is a
very common thing to have in rpgs
following pokemon which was the most
complicated code base we went into unity
which was our first foray into 3d and
even though we were just exploring 2.5 d
we still got a chance to look at you
know how does the unity engine work and
how do we get actual 3d models onto the
screen and we put together a very simple
flappy bird-esque game so that we can
sort of recycle prior ideas
last week we looked at dread50 which was
sort of a dread halls horror inspired
game where we got to look at lighting
and how to actually transition between
scenes and use some basic ui in unity
and today we'll be talking about how to
use how to create a game similar to this
although much simpler today is mostly
just a tech demo more than anything else
but this is a screenshot of the actual
game portal and as you can see they do a
lot of really cool fancy things they
have a portal on sort of a slope they
have another portal coming out of the
front wall or back there different
colors so you can differentiate between
left and right orange and blue
they have
sort of this object here on the side and
i believe that's to shoot
cubes out which this here is a cube
which you can then grab with your gun
and then shoot it through portals and
see it come in and out of portals which
is pretty cool
and we'll talk today about how to create
sort of a simple version of this
primarily just the aspect of how do i
create a portal that looks out of
another scene and see it updating in
real time um and how do i teleport and
get back back and forth between the
portals and carry a weapon and then
shoot a ray that'll actually place a
portal where i want to in the game world
so today some of the topics we'll talk
about so one holding a weapon so we've
had we've used a first person controller
and this is a very easy and simple thing
to do but it helps illustrate what
parenting is and so we'll talk about
that ray casting is the actual shooting
out of ray from your object's z
direction forward so you have an x and a
y which are sort of the angle at which
you're moving around but then you have z
which is always
if you're using vector of using the
forward vector from your character it's
going to be forward from the in the z
axis wherever you're looking effectively
and so that allows us to um we can cast
a ray in that in that sense which just
means you know shoot a straight line an
invisible straight line from that point
and wherever that point intersects with
an object we can get some information
about that and then do whatever work we
need to do in this case take a portal
prefab and just like affix it to the
wall basically rotate it from its
default position and then just like put
it flat up against a wall
texture mask masking is uh sort of how
we're going to achieve this portal
effect right because when we when we
create what's called a render texture in
unity which here's the third bullet a
render texture just means a texture that
we are rendering to with a camera so
rather than have a texture be an asset
in your game in your hierarchy with
something that you've made in photoshop
you can actually dynamically create it
at runtime with a camera
what the camera is seeing and unity
gives this to you for free very easily
with what's called a render texture
which is just another asset type
and then texture masking is effectively
sort of kind of the same thing as
stenciling where we can choose certain
pixels of an object to delete in this
case we create a texture that's white in
the center and then black around the
edges in a sort of elliptical shape and
what that allows us to do is tell it
with a simple shader
don't render these pixels when you
actually render the render texture just
render the ones in the middle and so
that's how we achieve an ellipse just by
effectively discarding the pixels on the
outer rim
decals uh are is an idea in 3d games
where a decal is just something that you
have fixed a texture or some object that
you fixed to a surface in this case
we'll be using decals um to act as our
portal so our portals are actually just
going to be decals they're just meshes
with a render texture affixed to them
and then all we need to do is just sort
of slap them onto a wall whenever we
shoot it and we get a ray that
intersects with the wall and that'll
have the effect of um actually making it
look like we're putting a portal on a
wall when in reality we're just taking a
mesh and we're just kind of like
slapping it onto a wall some other
examples of decals that you've probably
seen in other games are for example
bullet holes which use the same
principle
teleporting is very easy although the
fps controller sort of complicates
things a little bit so we'll talk about
how i went about sort of solving it sort
of solving the problem of teleporting in
a way that makes sense
it's usually just as simple as a change
on the you know setting something's
transform's position to another
transforms position setting the rotation
to the transform's rotation um but the
fps controller caches its rotation data
so in order to do that teleport cleanly
you sort of have to override some
default behavior and lastly we'll take a
look at some new tools that unity has
introduced with 2018.1 pro builder and
pro grids which allow you to actually
model geometry in the scene and this is
what the assignment is going to be
focused on um because going forward it's
probably i foresee it being a major part
of sort of modern unity development and
or prototyping
the ability to model your scene in unity
without needing a third party program
heavily optimizes the actual creation
process and allows you to do easy what's
called gray boxing meaning create a
level for like you know to create a
level in your game engine and then
prototype it test it make sure that it's
actually game playable right off the bat
that's called grey boxing
but first let's get a demo so does
anybody want to come up here and play my
implementation of portal
mr james is landlocked
all right james you're not landlocked
let's go
all right so i'm going to go ahead and
set that up
and so disclaimer there's actually a bug
in this as well so i'm curious to see if
you can spot what the bug is
go ahead and hit play as soon as you're
ready
and then the mouse on the right will be
your sort of angle of your portal
so we see here i have a
character with a portal gun created so
if james if you shoot a wall with the
left mouse that'll create a portal and
then they've used the right mouse so
that's one other bug
so let's go ahead and restart the
program actually um
so that's one bug
and so
um if we avoid stepping into a portal
that's there and this this could be
fixed in a couple of ways
so now you have a so okay so now you
have two portals basically created
do you see what's wrong with the the
portal as it is here
are both of these portals actually
oh actually no i'm sorry these portals
are actually completely right but walk
through them
and i will show you
okay so you can see it works it works
pretty well right you you can not only
see your character rendering completely
or moving in real time when the other
texture
but you can you can jump through them or
walk through them you can jump with
space bar if you want and that will
teleport you out the other end so you
see from the perspective of the other
portal but if we try shooting one of the
other walls for instance like the one of
these white walls
you can see something weird happens with
this particular wall anything strike you
as odd about that portal
anybody it's upside down
and so if you walk through it though
it works perfectly fine now the reason
that it's upside down um i spent
probably like 10 15 hours trying to
debug why this is it's in a state of
what's called gimbal lock so this prefab
right here there's three axes of
rotation in 3d space and if you perform
a rotation in some odd way
um
there are these things called euler
angles which are your angles of rotation
about the x y and z axis and you can
sort of think of it think of them as
sort of being able to rotate and
interdependently but
there is a situation in which you can
for some reason unity's internal
representation of a rotation can get
messed up by manipulating these angles
and so you can actually lock two axes
together such that um
rotating like for example in this case
it's z and y they both rotate each other
and so you're unable to get in this
particular case the um portal to rotate
about the axis that lets it like
look like it's right side up based on
the walls surface normal and so
um
had i maybe another week it probably
could have debugged it but i had to
leave it in unfortunately i ran out of
time but
if you don't
the interesting thing is if you do shoot
that same wall so try and shoot that
wall the other wall with the like put
both
put one portal on the on the buggy wall
so the right wall it's only that wall by
the way for some reason so um that wall
is a bit so notice that now it's right
side up so if you shoot both portals on
the same wall that buggy wall they do
get right side up and i for the life of
me couldn't ascertain exactly as to why
i know it's gimbal lock
unfortunately i was unable to debug it
quite in time but every other wall
including the ceiling and the floor will
work if you shoot a portal up on them so
you can create one up there and then you
can jump through it see how it's looking
down and it'll sort of put you at the
top
and
all together minus the weird single wall
that gimbal locks the portal we have a
pretty functional implementation of a
very basic portal game right we have a
this model here is parented to the
camera so it's always going to look in
the exact same direction as the camera
we shoot a ray from
the tip of the gun
and then whenever that ray intersects
with a plane in this case any of these
walls we get the information about the
intersection and we flip the
decal the
portal decal such that it's
the same angle as the wall rotation
and then what happens when we actually
collide with one of the portals just in
code if we were to think about how to
implement like the behavior that goes on
here
it's transporting the player and it's
doing effectively setting the player's
transform position to the same transform
position as
the portal
now if we do the same thing on the
rotation
the player ends up getting a bits the
fps controller's rotation gets a bit
skewed if you mess with its x and z
rotation the default controller
so all we do for now is we just
we keep those values the x and y
rotation but we just change the y
rotation y rotation is this position in
space like this effectively so that
allows us to get when we jump out of the
wall we notice that he's you know sort
of like flat from it but if we jump
through any of the wall portals so if
you like create a portal on the wall
here and then jump through it
you'll notice that you sort of get a you
know you're sort of angled at the right
um
and the reason that it's skewed is
because this one's upside down and so it
flips it's flipping the camera that's
rendering the texture and it's looking a
little bit weird but when you jump
through
um
it
basically keeps your x and z but rotates
your y position such that you come out
looking as if you went straight through
the portal rather than um by default it
has you look like a look back at the
portal that you came out of which is a
bit weird or whatever direction you were
walking through it when you went through
the portal
um
that's just default so it's rendering a
it's a render texture so there's a
camera actually behind each of these
portals so the prefab is a mesh with a
render texture and then behind it
there's a camera and so the camera is
rendering in real time what's in front
of the portal basically from behind it
and so it's seeing your model
from both of these
portals both cameras are seeing your
model and so it shows up in the render
texture on the other on the other um
on the other portal so it's effectively
like looking at two video cameras
instead of a portal
it's a sort of a trick and this is a
very crude implementation of portal the
actual game uses a much more
sophisticated algorithm for
um and it also uh tracks your position
with the camera so that like based on
your angle of rotation you'll actually
see something different on the on the
texture there
but it's a lot more complicated to put
something like that together i have some
resources that i've included um in the
lecture and the assignment that'll show
you actually how to do that
um but
it would take many many more hours than
i had to uh put this demo together
yeah it's fixed so if you actually look
at it from the side you'll notice that
it's like just a flat texture um there's
no perspective ultimately it's
perspective and um there's an awesome
video that i'm going to show later in
the slides by a youtuber named brackies
where he actually implements a
perspective correct shader that allows
you to
see and with with camera tracking of the
player like both cameras will track the
position of the player as well as
render a texture and the result of that
is because the cameras are changing
their position it's sort of like
changing the angle at which the scene is
being rendered onto the portal mesh
but also the way that's being drawn is a
little bit different and so he has a
really cool shader that does that and
then valve when they present they'll
actually show how they went about doing
it which is even more
complex but looks really good and is a
lot more you know technically
interesting
but yeah that's my um sort of
implementation bare bones implementation
of what makes portal work
so and it's somewhat it's somewhat fun
to like walk through these um you know
walk through these portals and just sort
of play around with it now um the reason
that if you just walk into a blue portal
it doesn't work is because the portals
are actually stored off-screen until you
use them
and so a way in which so i'll open up
the scene here oh by the way thanks
james for coming up to demo i appreciate
it so the portals are over here
right both of them are right here
and so what allow what that
does is when you only shoot one of them
the other one is still out here so when
you walk through it you end up just
teleporting outside the level and in
order to not have that happen what you
really need to do is have a flag on both
of them that just says
don't teleport unless they've been shot
once right and that'll prevent that'll
prevent that sort of behavior from
happening simple fix um but an
entertaining one to take a look at
and that is
my crude implementation of portal it's
uh far from being anywhere near as
polished as the actual game um and there
is the slight weird wall that gimbal
locks the portal um which i would like
to figure out why exactly that is but
everything else is sort of in here now
it doesn't include something like
shooting blocks through it but the same
sort of principles would apply because
all we're effectively doing on the
portal is saying
it's it's basically a trigger right it's
got a box collider on it and it says if
i collide with something in this case
the player um i want to teleport that
collider to the other portal which means
that the portals sort of have to link to
each other right one portal has to have
a reference to the other portal so that
it can say teleport to the linked portal
and vice versa the link portal should
have a
reference to the other portals i can say
teleport back if you collide with this
and so if we have another object let's
say we shoot a cube into the portal it
would also get teleported to the other
portal right and now the other
consideration for that is like if it's a
rigid body and it has physics applied to
it for example let's say it's it's going
like 10 on the x and it teleports to a
portal that's like perpendicular to it
and it's still going 10 to the x then as
soon as it shoots out of the portal it's
going to go straight left which isn't
the behavior we want we want it to go
forward so
it's like um
linear velocity needs to be calibrated
to go in a different direction didn't
have enough time to put a full demo of
that together but if you're curious in a
nutshell that's sort of like what you
would need to do in order to implement
like some basic physics with uh
portal
so holding a weapon based on the
screenshot can anybody tell me how they
think i got i went from just a plain fps
controller to an fps controller holding
a gun
did you stick a gun
i don't know what do they call
yeah there's not really a notion
necessarily of pixels um in 3d space
because that changes depending on your
resolution but yes unity units so um
it's effectively equivalent to a meter
and you can change what it represents in
unity settings
um but yeah i mean it's not it doesn't
necessarily have to be one unit it can
be an arbitrary amount and what it
really was was me going into here with
this model by the way got this model on
the asset store for free so the asset
store is an awesome place if you're
looking to just quickly prototype your
game they didn't have any like obvious
portal guns portable lookalikes that
looked really good so i was just like oh
this gun's got like the same kind of
color i'll just choose this like a
sci-fi kind of gun
but as you can see
there's a hierarchy here now
how
are we keeping the
gun
like affixed to where the camera is
looking do we know
you do the same thing as you do with the
first
the first person shooter
code is you have the camera follow
the uh
sorry you have the camera
yeah the camera followed the gun do we
know do you have any guesses as to how
we're doing that it's actually a really
really simple
thing so
all we're doing oh stephen
you said the cameras like transform like
as
like you really
transform
um
cut into their guns transform like with
an offset in like the same direction but
like just some position
yeah kind of so set the guns transformed
to the cameras transform but just with
an offset and that is effectively what
we're doing um and in order to
accomplish that it's really as simple as
just making it a child of that thing
so this is the first person character
controller it's got a camera attached to
it anything that you parent to something
or you make a child of something else
it's going to have the same transform
like changes applied to it including
rotation
so by making the gun just a child of the
first person character which is where
the camera is here first person
character by the way is just a
subcomponent of the fps controller
whichever you named the portalgun fps
controller here
the portal gun anytime this first person
character is rotated which is the camera
so anytime the camera is rotated it
applies that rotation to the portal gun
gun here this gun mesh and so that gives
you the effect so what you do is you
start it off by you know you figure out
okay where's the you start off in 3d
space like this you're looking at your
game scene and you have your character
and then you move your gun object around
in this case i could go let's go to
layouts 2x3
so we can see in real time see this is
the game view this is what's going to
look like on startup
i'm going to go over to my game
my editor view here
and i'm just going to
grab the actual gun component here the
gun object i should say go and position
it and i can just move it right
and so this is how you can like change
where your gun is relative to the camera
and this is going to affect sort of how
it feels right like i could put it here
and it's kind of a little lower i could
put it here it feels a little weird
obviously because it doesn't have a hand
on it so it's kind of almost looks like
a vr game and that's kind of like what
vr games do is they take your hand
positions and then they like
the gun transform is locked to the
basically where your hand controllers
are
um
in this case all i did was i just
positioned it i said i like how it looks
right here so i'm just going to do that
and as soon as i make it a child of the
first person character which is the
camera it's just going to get all the
rotations applied to it so anytime we
make any rotations
to the camera which i'm doing here it
stays exactly aligned with the with the
camera this applies to any operation
that you do in unity when you make any
sort of transform position scale changes
they
all get propagated down the chain all
the objects that are children of an
object that get transform operations
applied to them will have the same
transform operations applied to them
sort of like this recursive kind of
effect yeah so if you import the
first-person controller
right that automatically has to jump and
move left and right
and then you just move your asset your
gun
to be underneath
that controller it'll
correct so if you have if you just
import the vanilla fps controller and
then just make the gun specifically the
gun needs to be a child of this the
first person character bit because that
has the camera and recall the camera is
what's driving our rotation right
because we're moving the camera's
rotation with our mouse that is
ultimately going to determine how the
transform gets applied to the gun but
yes
and so just whenever you're doing
anything in unity and you'll do a lot of
things where like one thing's movement
or scale or rotation should apply to
another thing just remember that it's
usually just as easy as making it a
child of something else
so any other questions as to how we've
gone about
implementing the weapon
all right
so ray casting so raycasting is a nice
feature that unity gives you for free
it's part of the physics sort of
namespace in unity part of the scripting
api
and what it allows you to do is
effectively
look at from whatever transform you're
operating at or whatever opera transform
you give it as a the source so whatever
point you give it as the source
you can tell a direction give it a
vector as a direction
and in this case what we're doing is
we're saying
transform.forward and transform.forward
just means
basically wherever we're looking x and y
and then straight in the z direction so
if you're doing it on a camera it's
always going to be exactly what you're
looking at it's always going to be
exactly forward on the like
transform.forward on a camera is always
going to be like center of the screen
wherever you're looking at and so if we
cast a ray
from the point of our character or
actually we're doing it from the point
of our gun
to
the transform dot forward like a line
going from our player to transform its
uh the forward vector of its uh
character the
forward vector of our camera it's going
to have the effect of
um
we can shoot something
right we can we can
create a raycast and it's like a fix
something wherever that ray intersects
and it'll be the exact center of our
camera view does that make sense
so shoot a line from the z your z axis
which is your forward vector and then
based on how you've rotated the camera x
and y are the x and y part of that and z
is always forward that'll let you shoot
things or cast rays directly in front of
you and you can cast rays between any
object and from any source point with
any sort of direction you want
but it's particularly pertinent in the
context of
how we've shot it from our gun and so
here's a screenshot actually what that
looks like and so the nice thing about
unity actually is it has a function
called debug ray or debug.drawray
which i'll show you here
i implemented it in a function called
the
a component rather called debug ray so
that you can actually
see
where array is being cast in your scene
and eliminate any ambiguity there so you
can see draw array transform.position
and then we just say
transform.transformdirection
vector3.forward
and then times a thousand just means a
thousand units you know from that point
and then color.red
and so what that'll do is only in the
only in the editor view so this doesn't
apply in the in the actual game this is
just a debug
call
debug.drawray and so it'll render in the
this scene up here just not down here so
if we hit play i actually have all the
portals rendering a debug gray from
their forward transform and from my gun
so you can see it there i'm just doing a
debug.drawarray with just
transform.forward and
um using my transform.position as the
source point
and forward is always going to be notice
that the the z arrow it's always
always falling the same direction right
x and y are sort of changing you know
the back planes or like how that's
rotated but z is always forward right
and so that's the that's the ray coming
from our gun and if we shoot a portal
there and there i have those also set to
um let me pause it so i can rotate the
view a little bit i have those also set
to draw array from their forward
position so those are also drawing array
from what's there vector3 dot or their
transform dot forward their directional
vector um but yeah raycasting it's
pretty it's pretty easy just to get um
some pretty simple
collision tests this way with guns with
um a lot of different things but
primarily you'll see this used for like
calculating whether something is
blocking something else like if a car is
moving and it detects maybe if it
detects another car like in grand theft
auto for example and your car is driving
down the center of the road or something
and it wants to know whether there's a
car
two units in front of it or something it
just cast a ray and see if there's any
geometry there from its forward vector
right transform.position card opposition
and then get its forward vector which
will be its z direction and then um it
depends on whether maybe your game's top
down maybe it's not your forward vector
maybe it's your y vector in that case
but that'll effectively give you not
only that you've got a collision but
also tell you where the collision is too
which is nice
and we do that in the
portal
gun script
where we call
physics.raycast so this this is the
function by the way to actually do the
raycast
the interesting thing about raycasting
in unity is that it returns a struct
object and so
you need to declare this hit object
which will tell you all the information
about the hit so like where it was
whether there was a hit to begin with um
and what the like the normal was on the
surface that it it collided with so the
angle at which that
sort of plane was projecting out
and then you call physics.raycast with a
position and a
transform direction
and then
you pass in out hit
so out is interesting
because out is sort of c-sharp's way of
allowing you to return multiple values
to something so out is going to be an
object a in this case it's going to be
our raycast hit that we declared up here
right which is a struct which recall is
just a collection of
variables like in c or c plus um
and out hit just means that normally we
pass in these values to the function
they don't get manipulated right but we
pass in this
variable as out
which will allow this function to
actually change the data inside this
this hit variable
and so the result of that is hit from
this point forward contains all of the
information about the raycast
that we that we
that we just triggered and when we call
math f dot infinity that just means um
ray cast to infinity which is until you
know forever and ever and unity
obviously doesn't check infinitely
whether something's collided with
something
it optimizes the right way
but you can use that just if you don't
want to necessarily specify
i want to check two units or five units
or a thousand units in front of me i
want to just check forever and see if it
collides with something in your scene
right
um and then as you can see here once
that once we have detected a collision
we play a portal sound we get the right
portal and then we set the portal's
transform and rotation based upon the
hits point and rotation and that's
pretty much all that's involved in
shooting the gun and you can take a look
through here if you want to get a sense
of how it works and maybe explore also
the raycast the physics.raycast
section of the api just to understand
what exactly it returns and what you can
do with it but in this case this is how
we're using it to detect whether we've
intersected with the wall so it'll
intersect with any sort of mesh and then
when it does it'll tell you exactly how
it did so
that is what ray casting is raycasting
has another name for like old school
games like wolfenstein the method of
rendering was called ray casting where
you generate one sort of uh
you would generate a ray from every
pixel of the screen effectively although
it was mostly just every line of the
screen and you would just look up and
down for everywhere intersected in the
scene and then just create draw like a
texture there and so that would generate
a world that was that looked 3d but you
couldn't move up and down because it was
always generating all arrays completely
forward and so you were locked onto two
axes
but ray casting is different in unity
raycasting is just literally casting a
rate in 3d space versus the sort of
2d space that it was casting in games
like wolfenstein there's another
screenshot of uh
normals from our portals casting out
rays and i i want to look up and see if
i can just find a picture of what
wolfenstein look like
i'm pretty sure
most folks are probably familiar with
not the new one
yeah wolfenstein 3d so this was this is
wolfenstein so old school but this sort
of ray casting was different it would go
over it would basically shoot rays from
every single line of the screen up and
down and it would detect based on the
level geometry which was very simple
level geometry was just basically
whether there was a wall there or not
true or false kind of like a 2d image
and it would draw based on how far away
it was that particular point of the
geometry it would just draw like pixels
from a texture a specific texture
at a specific point and they had to
interpolate where on the texture it was
it was a little more complicated but
in case you see wolfenstein or in case
you see raycasting used in those two
different senses in the case of old
school
game engines in the case of
um
uh
modern unity sort of raycasting that is
what is um
involved in that
so any questions as to how
sort of in a nutshell the raycasting
works in the context of our game here
so
unfortunately no the
oculus does not work on mac they do not
have mac support and so uh we were
unable to get a sort of
version of it working we don't have the
means to necessarily transport um given
how much time we had now getting vr
working in unity is actually very easy
if i recall correctly i have to just
remember the exact
menu i had sort of anticipated
talking about this before
i think it's player xr settings yeah
that's how that's what it is so in order
to get so it's incredibly easy if you
want to do a game in vr in unity and you
have a pc out of the box it's very easy
just to get it working all you need to
go do is go to edit project settings
and then go to player and then in the xr
settings so unity has like deemed all of
its vr ar stuff as xr
and you click virtual reality supported
here and you have your oculus rift or
vive or whatever plugged in it'll just
work with the camera like right off the
bat right out the gate so it's pretty
easy you may have to install drivers on
your computer such that your computer
knows that you have an oculus plugged in
but assuming that's all set up your
project will is as easy as just clicking
this checkbox
hololens
um
oculus rift and i'm pretty sure the vibe
like 90 show the vive
i'm not a hundred percent we can we can
google it though let's see
unity
it looks like it does it looks like it
definitely does yeah and of course if
you already windows pc is very
i apologize i thought i totally thought
going into the course that unity
that oculus worked on a mac um but as of
even october they were like it's not
going to work on any macbook ever
released so only on a pc unfortunately
um
that said
if you do have a pc super easy to get
working and it looks like this is
actually pretty cool tutorial i haven't
looked at this but
i tend to like ray i don't know if his
name is van der lisch or wenderlich but
he makes really good game programming
tutorials in general so just you know
because we're coincidentally here if you
guys are curious i really like this uh
website for basic tutorial stuff
we have vive um and vive as far as i
well vive the thing about vive is you
need to install like wall like ceiling
mounted cameras in order for it to work
so that's kind of out of the equation we
have the gear vr but you would need it
we would need to export it to mobile and
test it and just didn't have i didn't
anticipate it not working for mac and so
it kind of came up a bit late and so
it's on me i apologize but if you are
doing a pc game
in oculus and you want some assistance
i'm happy to like help out it looks like
it's very easy just to get working with
the default fps controller camera so
definitely reach out if you're
developing oculus and need some
assistance
[Music]
maybe for the next iteration of our next
unity course we can have a
a big sort of vr
day where we bring in all the guns
um
but yeah back to sort of raycasting and
what we were just talking about um
shooting array on your z axis based on
your rotation
um get information from it
and then
sort of what we do is we flip the portal
based on the hit dot rotation of the
surface that we collided with and that's
effectively all the raycasting that we
need to worry about for
portal
um but the actual making a portal is
probably the most interesting part of
this whole project and so let's go ahead
and go back into present mode
so a render texture is the means is a
very is a basic
it's not a basic means it is the the
fundamental way at which we go about
doing it and there are
various ways to accomplish doing it some
that are more technically challenging
and look a lot nicer than others i did a
sort of simple version of it
just to get a sort of proof of concept
out of the gate but unity makes it
really easy just to get a simple render
texture up and running so a render
texture is recall
just a texture
in unity so it's an asset it's an unity
asset that you can create the difference
between a render texture and a
texture that you might have imported
from like photoshop or is that a
render texture can be rendered to and
typically this is used for things like
cameras being rendered to it although
from what i understand you can render
anything to it so you can create
procedural textures this way as well but
in this example here we're creating a
we're essentially creating a screen into
which we're looking at the viewpoint of
our other portal right from from its
forward direction so we can see what
what it will look like once we walk out
of the portal and go into the next area
and so a render texture so i have some
for in the slides if you want to
download the slides they're here
you can see exactly how to create a
render texture so literally just create
and then render texture that creates a
render texture these are the settings
that i used
for the actual render texture so
what will happen do we think if we use
like a low res render texture
just logically
hey let's see what if my render texture
was like 200 pixels by 200 pixels
and our resolution of our game is
like 1080p
it won't be blown up because what we're
doing is we're taking a mesh and we're
affixing the texture to it so it'll just
scale to fill the mesh
but what'll it look like when it's
rendered
because it's rendering a 200 pixel
texture
it'll pixelate it it'll look really like
nasty
and so in order to fix that problem
typically what you'll do a smart way to
do it would be to dynamically figure out
at run time what's what's the resolution
of your game right if it's going to be
rendered in various resolutions
up to 4k maybe down to 720p
and then create a render texture that is
the size of your game
and then by doing that it'll ensure that
no matter what your resolution is it'll
always be one to one pixel ratio even if
you're right up close to it right it'll
fill up your whole screen
in this case we went for a simpler
method so we didn't have to do any
dynamic instantiation of the render
texture which you can absolutely do and
it is the more robust way to do it but
in this case i just chose 1024 by 1024
figuring that that was going to be good
enough for demonstration purposes and
most of these other settings i believe
actually all these other settings are
completely default render texture
settings the only ones that changed
where this is 256 by 256 by default and
it just looks really pixelated and nasty
especially when you're right up close to
it
um
and then
all we need to do so
once we've created a render texture
right in our in our scene in our assets
so here i'm going to go to textures this
is where i'm storing all my textures
whether they render textures or not i
have these two render textures here
and so these are by default they're not
going to be mapped to anything because
they're just there's empty render
textures we've effectively allocated
them and said something will be
rendering to these later but for now
they're just empty there's placeholders
right they're like blank screens but
that tv hasn't been turned on yet
in order to actually render to them
we go into our first person character
sorry not our first person character we
go into whatever camera we want to
render it to render to the render
texture because we're we're effectively
taking these render textures and we're
rendering a camera view onto them right
each of the portals has a camera behind
it looking out from it and so we want to
take that camera's view
and we want to render that onto the
other portal's face
the other portal's render texture the
texture that we're going to put onto it
and so
all we need to do
is say here is my orange portal i have
my camera here
every camera has a target texture just
right out the gate
so you can just say okay i'm going to
take my orange portal texture my render
texture that i've instantiated so it
knows that it's going to be able to
receive an input source
and i'm going to just click and drag it
there and it's that simple now whenever
you run the game
you'll notice that your render texture
updates i'm not sure if it updates in
real time in the inspector but it
renders if you're if you're showing it
onto a
yeah it doesn't render in the inspector
but it will update if you've affixed it
to any other surface
and so what we're doing is we're fixing
it to the meshes that are associated
with each portal james did you have a
question
oh sure the render texture so i just
right click and then i go to create and
then a render texture right here
and that will give you most of the
settings that you need to get up and
running with it and you can assign it to
a camera but the important thing is do
consider your resolution for your render
texture make sure that it's high enough
such that your game won't look pixelated
when you're looking at it like pretty
close up
yep yep and so that'll do is create a
link between the two such that anything
the camera sees it's no longer going to
be rendering to the scene or anything
like that it's going to render to the
texture and actually i think you can
render to the scene and the texture but
these aren't rendering um to the scene
at all they're the only one rendering to
the scene is the first person character
because it's the default camera
main camera
um if it's a high too high of a
resolution it's just going to like
compress to fit the the mesh whatever
it's affixed to and you'll probably run
into performance problems but it's not
going to break
yeah because you're not affixing it to
any because your resolution it doesn't
really have an effect necessarily on
whatever's in your game world and like
that doesn't cause any issues um it gets
it gets interpolated like unity will
just like calculate how to render it to
the screen right
yeah
like game textures
generally are very high resolution like
four thousand by two 4k textures are
often used
even if you're running your game in
1080p and now game engine will probably
optimize it and like down sample the
texture so that it is like actually a
1080p texture and you don't like you're
not trying to calculate more draw more
than you need to
um
but
unity we'll figure that out for you you
don't have to worry about that
um
but yeah that's that's what a render
texture is and that's that's how we are
creating this illusion remember
everything in the game is an illusion um
in this case we're not actually and it's
it's obvious in this example because
we're not actually because the the
textures are flat and there's no
perspective correction you can see that
it's a texture even if it is slightly
convincing from far away like from far
away it actually kind of looks
i mean i don't know if it necessarily
looks real
um i mean it kind of does right like you
from here it's hard to tell and from
here it kind of looks like we're going
into another room right i go like that
that's the broken wall they go like that
right there's a portal there and it kind
of looks like it's a real room that
we're walking into it's just a
resolution but all we're doing is we're
just drawing a camera's view onto that
texture in real time and
if you notice you can see our gun that's
kind of hard to see actually
um
see if i can do it from
from there maybe
yeah there we i see a little bit better
there when we move we can see the gun so
we it's we can see that it's rendering
in real time and that's the power of a
render texture and this allows you to do
all kinds of things you can have like
you know tv screens in your game that
are rendering another part of your scene
obviously an example like this where you
have a portal looking into another area
now if you apply a perspective
correction to this whereby your camera
actually tracks where your player's
position is relative to the portal you
can accomplish a much more believable
look and you can actually make it seem
as if you're looking into another area
because the camera is literally moving
with your player so the cameras like the
the stuff that it's capturing is going
to be changing in real time not only
just your character's model right the
actual angle is going to change and
therefore be perspective correct
and there's a awesome tutorial that i'm
going to link to in the slides that will
show you how to go about doing that it's
really awesome and so this is what it
ends up looking like this is actually
before i changed one of the portals had
a slightly offset camera angle so you
can see here this is like a little bit
higher than this one is they even though
they should be exactly the same
but it's fixed now so
so texture masking oh any questions
about any of that process before we talk
about texture masking
okay
so texture masking is
basically the process so here's a
if we just take a plane and we put a
render texture onto it that's what it
looks like it just looks like it's just
a square and this could work fine if you
want a sort of a square portal look you
don't have to do any extra work but if
you want a circle
right you can't really create like a
circle shaped plane object that doesn't
really exist and if and even it did it
wouldn't be efficient especially if you
want a very smooth
plane because everything is triangles
and polygons right so if you're if you
have a circle it's going to be a bunch
of these sort of fanned out polygons
especially a very high res circle like
one of these that's a very high-res
circle making a polygon that looks like
that is not
it's not an optimal way to go about
solving that problem right
a much more optimal way to go about
solving that problem would be to say to
designate certain pixels of the t of
some texture as being pixels that we
want to read and then certain other
pixels being not pixels that we want to
read and um and therefore produce a the
final image that gets put onto a
geometry right
um and so what we end up doing is
creating an image first so it's this
image
um which is kind of hard to see
but
it's just a simple sort of can you see
you guys see from the akin so it's just
a simple oval right it's the exact shape
that we want our portal to look like
um and the pixels that are white are the
pixels that we're going to render and
the pixels that are black are the pixels
that we don't want to render we want to
consider those as black pure zero alpha
effectively
and using a awesome shader that you can
get for free just easily on the unity
webpage this is just a masking shader
and i'm not great at writing shaders
but what this does is turns lighting off
first of all
what happens if we have lighting applied
to our
portals
it's going to look a little weird right
you're going to get like shadows cast
onto your portals and that doesn't make
sense right because we're effectively
supposed to be looking into another
another place another area so we have
shadows that are being cast onto our
thing we're effectively like almost
seeing like a glass door on our portal
right
it sort of breaks the illusion
so
lighting should be off
a lot of these things i'm not 100 on
because i'm not great at writing shaders
but it's a very simple easy shader that
you can grab off of the
unity web page and the
i think i
clipped the url here at the very bottom
but i grabbed that off of the unity web
page and all it does is it adds onto
your material
this second image here and it gets blown
up a little bit because unity makes any
texture that you apply to
basically any texture you put into like
an image selector will get made into a
square shape and our image is not square
shaped but what this does is when you
pass in this image which is called a
culling mask
it will
basically combine the two images and
then cancel out any of the pixels that
are black
on the
on this it'll effectively add
the black and white to the alpha of the
of the
texture pixels right so you can actually
make some of these gray and then it'll
have the effect of sort of making it
half transparent but in this case i only
went with full transparent and full hard
255 alpha so we get sort of a crisp
outline for our portals
and that's what the that's how you end
up putting together a um
a
basic
sort of oval shape on something that is
just a flat mesh and you can do this
with anything
anytime you need to sort of take away
detail that would make making a mesh
extremely difficult or doing really cool
effects
it's often just a lot easier to create a
mask for it and then create use the
right shader that's meant to have that
mask and then just
manipulate that however you need to
um
and again the link here for the shader
is here and then you can use this for
pretty much anything you want
and result of that
is we go from having a square portal to
a elliptical portal so pretty nice
i didn't have to use a plane but it
doesn't really make sense
to use anything else
um
because using a i mean using a cube
it would it would create depth we don't
want the portal to have any depth really
right it should be a flat surface
and then when we go through it it's just
teleport us to the other surface to make
it look
sort of seamless
i don't think there's any other
i don't think there's another choice of
geometry that makes sense for this use
case
no i probably wouldn't um you'd
make a cylinder flat
and project it and have no depth on it
the
you would be able to still see the rings
on it
and also texturing that
is a little bit more complicated because
then it's going to it's going to you'd
have to uv map your
both your
sort of
mask and your regular texture onto that
because by default it's going to wrap it
weird just because
this is just a plain so whatever you
texture map onto it's going to be
completely flat but a cylinder is going
to wrap it around all sides and it's
going to look a little bit it's going to
look a little bit funky
i suppose in theory you could use a
cylinder for it but i think it'd be a
tremendous amount of work i don't think
it would be
anywhere near as easy as getting it to
work with just a flat plane or a mesh
interesting idea though
i guess you could theoretically create a
cylinder
that has if you wanted to like a bridge
between two worlds and have one end be
one
portal and one envy another portal and
then be able to walk between them that's
a cool idea maybe you can make that work
but i think for this the the plane is
the right way to go
any more questions as to sort of how
that works
all right
so we'll talk about teleporting now so
teleporting is pretty easy
all we really need to do right is just
create a
mesh collider on the portal mesh the
orange portal in the blue portal and
then when that mesh collider if that
mesh collider is a trigger right and it
collides it detects a collision with
something else it's going to we can just
define on trigger enter
and then with that
we can teleport the
collider other
to the other portal's location so every
portal this is the portal component
it has a links portal right because we
need to know where to teleport the
player to the other portal
so we need to get no have a reference to
its transform
whether it's active right because if we
allow ourselves to
teleport to another portal
and another portal like back and forth
just without any restraints what do you
think is going to happen
infinite loop we just get an infinite
sort of weird flickering effect um so
you need to effectively have like a
toggle switch on both portals and say
um as soon as i enter a portal i should
not be able to teleport back into it
right and as soon as i teleport to
another portal i should not be able to
teleport into it either but once you
exit a portal you should be able to
teleport back into it
and so what that effectively does is we
enter a portal
it gets flagged as not teleportable
right we get teleported to the other
portal as soon as that happens this
portal can now be teleported into
this portal that we're standing in
is now flagged as not teleportable and
then we walk out of it and we're allowed
to teleport back into that one and the
other one so it's effectively an on off
operation that you have to balance
appropriately
the actual portal game is a little more
complicated because they allow you to
walk in between portals
this does not go into that level of
detail and it's a more complicated
problem to solve
this example just assumes that you walk
into a portal you get teleported out the
other end and there's no sort of
in-between state
and actually if you're in between two
portals there's a replication of
geometry which valve will talk about in
their talk as well which i think will be
very interesting because if you look
into another portal while you're in the
middle of a portal right you want to be
able to see
yourself you know in that portal right
halfway in and out of that portal so
there's a
lot of interesting considerations for
getting very believable portal systems
but ours is a very simple illustration
and so this toggle function is all that
i have to toggle the function's on and
off capability and all it is is just
portal active is not portal active and
that just flips that flag super easy
on trigger enter we
effectively cache our position x on the
x and z axis so we don't rotate it
because when we rotate our x and z on
the first person controller by default
it causes some really weird buggy
behavior based on the way that the fps
controller works so all i do is i just
cache i cache those positions and then
make a rotation on the y-axis and
that'll save us that weird um
sort of
going topsy-turvy effect that you'll get
if you use the fps controller by default
and you do perform rotations on it
you'll notice this so
i haven't had the time to dig in depth
as to how to fix it um but this is the
way that i was able to fix it for this
example at least is only only allow
yourself to rotate on the y direction
which is where you're looking in sort of
like the ground relative to the ground
plane and that'll allow us to rotate
based on where we're exiting the portal
um at least on the sort of walls that
are going up and down and then have that
sort of believable effect it doesn't
allow us to like jump down into a portal
from up above and see us coming down
from the other portal
which is a cool effect um unfortunately
but it does allow us you know sort of to
get most of the way there
um
and so we set our position to the other
portals position and our rotation but
only the y we get the y and then we set
it here using euler angles on our
player's transform
and then um there's a function that i
called that i created called mouse reset
which effectively uh just calls init
again on the fps controller's um
rotation on the the camera and the
player and then um that's sort of like
the hack that you need in order to
so the reason that a lot of the
weirdness exists is because the player
controller caches its rotation
information and so if you perform a
rotation on a on your fps controller by
hand as opposed to allowing it to happen
with the mouse it will
immediately reset it back to its prior
position and rotation which has the
effect of when we teleport from one
portal to another
um even though we set our direction of
rotation to be like outside going in the
direction of where the portal is facing
we end up having the same position the
rotation that we did entering the portal
so we end up coming out of portals often
just backwards and so
that's some that's just a limitation of
the first person controller but you can
fix that by calling mouse reset which is
a function that essentially just calls
init again
which init is part of the fps
controller's
mouse look object i won't go too much
into detail about it just because it's a
little bit arcane and
the the source code's in there if you
want to take a look and dabble with it
but
effectively preventing it from caching
its uh rotation information and just
hard setting it and then
recalling the mouse look init function
which does the actual setting of the
rotation on the camera and the and the
player
a little bit a little bit weird but
that's
unity's fps controller and
that's how other people are saying to
fix it so you could roll your own you
could create your own fps controller and
probably
prevent this from happening but if you
want to use the regular fps controller
that's sort of the
limitation there but it's mostly working
and it looks
pretty good
some more time on end we could probably
make it look even better but
for now i think it's good
so that's teleporting
say your position and then set your y
rotation override the fps controller's
default rotation caching and um we can
walk in this portal and then instantly
walk out this portal that's what we see
so any questions as to how sort of this
works in a nutshell
or any of the maybe any of the code here
in our
portal
all right
so a much better version of the
portal at least from the rendering side
is this video here so it's bracky's so
uh he's a very good
he he explains things very well he's got
very
high quality to his videos uh he creates
a bunch of unity tutorials and in this
case he created a portal that used a
sort of shader and an interesting shader
that will only render everything but
geometry and also
um onto a plane in which case this plane
and um does the camera interpolation of
the player that i alluded to before
which allows us to
actually have two so these are two
separate worlds
in tandem right now so there's this red
world here and then this camera is
looking at a completely different green
world that's completely like set off
onto the in the distance that's the
exact same geometry but completely
colored green as opposed to red and if
you look through here it's just
completely seamless and the walkthrough
is completely seamless and he goes into
detail as to how he accomplished all of
this if you're curious and he provides
you the shader that you can use for free
so definitely check that out if that's
of interest there's a link there in the
video and here's a link to his youtube
series if you want to i put some of
these in the slack because somebody
requested some ai videos and so he has a
bunch of different ai videos and a bunch
of other really cool series so you can
take a look at that if curious
and
the
best version sort of of portal obviously
is the portal itself and dave kersher
and tajiev kohli are
employees at valve who worked on portal
and they'll be here on may 2nd to give a
talk as to all of the technical sort of
things that went behind the scenes and
related to rendering and physics and
just getting a believable and good and
good feeling experience with portal
for the actual polished final game that
we're talking about so definitely come
to that talk if you're curious we're
going to take a break and then as soon
as we come back we're going to talk a
little bit about some new tools that
unity has released called pro builder
and pro grids um
and we'll talk about the assignment and
that'll be it for gd50
all right welcome back this is lecture
10. so we talked about portal before the
break we talked about ray casting we
talked about render textures sort of
what those are how easy it is to make
those in unity we talked about how to
give our first person controller a gun
so that we could actually look around
and look as if we're holding a weapon
we talked about the portals themselves
how we're masking out the texture the
render texture as applied to a plane and
how each of those has a camera behind it
so that it can render what is going out
from the portal in the direction that
it's facing
we're going to deviate from portal now
and talk about pro builder and pro grids
which are two tools that are part of the
new unity 2018.1 which will allow us to
actually model geometry per the
screenshot this is actually a level that
i created and that is in the
distro it allow us to create geometry in
the actual scene view without needing to
go into a third party program like
blender or maya and have to sort of
alternate between the two and import and
export you know incessantly
not only that but as soon as you model
something like this in unity in the
scene view you can immediately test it
for gameplay and make sure that it
actually fits
what you want and you don't have to
worry about scale issues when you're
importing and sort of making it work and
figuring out ultimately that oh i don't
like the way this mesh this level is let
me go and tweak it and redo it
it just allows you a ton of ease and
flexibility and i made i previously
mentioned brackie's before but he's got
a couple of awesome tutorials here
on pro builder and pro grizz to
supplement sort of what we'll talk about
today in lecture but if you want sort of
more of a showcase of all the features
of both then you can look at these
videos here and get a sense of how they
work so we're going to go ahead and just
mess around with pro builder a little
bit here in the scene view so that we
can see what it looks like i'm going to
open up my other scene so i have the
portal scene if you're in the distro
this is where all the stuff that we've
been looking at exists just the portal
game
there's a pro builder scene as well
which i'm going to not save that
and so this
pro builder scene
is the level geometry that i created
earlier now it looks pretty horrendous
because i didn't spend a terrible amount
of time on it and i'm not a particularly
talented
visual designer by any stretch let me go
ahead and make it a little bit larger so
we can see it a little better
but it showcases some of the interesting
features so we see you know we have
obviously
sort of polygonal square shaped
rectangular geometry
we can see that some faces are textured
and some aren't so we can see this face
here for example is just white
the default material we can see that all
of these sort of have this uh brick
texture which i got off a procedural
generator sorry website that allows you
to choose a template for your texture
and then you know specify colors and
stuff like that i did the same thing for
this texture this is another uh
procedural texture which is kind of like
a blue marbley type texture
the cool thing about it is at least for
texturing you can just choose arbitrary
faces that you want to texture rather
than have to texture the whole thing
like you would do if you were to just
give a mesh a default material it'll
apply it to the whole mesh in this case
it's just applying it to whatever faces
we select in pro builder
another interesting thing which i really
like is pro builder gives you a lot of
tools for creating
special kinds of geometry very quickly
and efficiently in this case this is a
staircase which all i had to do was with
pro builder select build staircase and
then you can choose a lot of different
parameters we'll take a look at how to
do that in a second i did the same thing
here so notice this this staircase has
kind of a spiral to it and then this
staircase is really tall but has no
spiral and then we have another
staircase here which is kind of shorter
and doesn't have a spiral and then it
ends up coming up here to this point and
then if this were the assignment maybe
this spot here would be where you put
your collider that says oh this is the
finished you know this is the levels
conclusion you've beaten the level so
the assignment is with pro builder so to
make a level you know it doesn't have to
be anything terribly fancy like i'm not
a great designer but it should have at
least one section where you're required
to jump so some sort of jump puzzle just
so that you can you know think about the
design of your level a little bit
and it should be you know meaningfully
large not like it doesn't have to be
gargantuan and it shouldn't be small it
shouldn't be like 10 meters or you know
not maybe not 10 meters but it shouldn't
be like you know 10 5 meters large
obviously that's very small it should be
something that you would consider you
know a somewhat sizable level using
something of this size is is a fair
affair metric
so pro builder if you've installed pro
builder so by default pro builder is not
installed in your project you have to go
to the asset store i don't know it's
assessor's been a little bit slow last
couple of days we'll see if it works
quickly looks like it is
so if we go to the asset store open this
connecting again again being slow
okay so if you search for assets and you
look just type pro builder it will pop
up here and notice that it says unity
technologies anything basically that
says unity technologies will be a free
sort of supplement to unity that you can
easily just import from the asset store
now it's a little bit cramped the window
here
but
and because i'm in a 720p monitor but
you just have to click download and then
import in order to import it into your
project
the distro for portal for assignment 10
already has a pro builder and pro grids
installed pro grids would be the exact
same process just pro grids right here
and when you import both of those into
your project you'll immediately have the
ability to go up to tools and you'll see
pro builder and pro grids here and all
you need to do is click on the whoops
pro builder and then pro builder window
and you can see here this nice little
widget filled window pops up and you can
also dock it here if you want to i
actually did on accident but unity makes
it pretty nice so you can dock your
stuff wherever you want it to
and there's a few different things so
you can do new shape and a new poly
shape
the new shape actually gives you like
shape templates so here i've chosen just
cube by default and it allows you to do
stairs prisms cylinder so i just do a
stair for example and then we
immediately see this like stair mesh
here right i can generate the number of
steps that i want just by changing the
slider i can change the curvature if i
want so that it's a rotating staircase
and then i can also change how wide and
how tall the stairs are
and also this inner radius is like how
deep the steps are if that makes sense
and then
all of these together once you finished
you just hit build stair and it's done
now you have a stair mesh that you can
just put anywhere in your level and it's
that easy to make stairs
before i get into more of the sort of
what makes pro builder work i'm going to
go ahead and enable pro grids so pro
grids is a cool feature
it's a cool sorry add-on which will
actually lock everything in your scene
to a specific grid which you can
designate based on how fine or coarse
you want the grid to be and what that'll
allow us to do is when i move notice
that it's moving on the grid right it's
not moving in continuous con like sort
of a
continuous motion it's actually discrete
steps
and the advantage of doing things this
way is that when you're modeling your
level or whatnot you know let's say you
have a maybe a
can or a
sort of a diagram or a drawing that
you've created you slap it on a texture
then a flat mesh in your scene and then
you just sort of draw your level on top
of it everything will sort of just like
map up nice and cleanly when you're
creating all your your geometry and you
can snap things together and align all
in the same axis and it makes
creating levels like this just a lot
easier you don't have to worry about
things being slightly off and then like
missing vertices and everything sort of
be
looking a little bit unclean this
ensures that everything is very clean so
again just notice the discrete steps
that it's moving these are all locked to
the grid here
and so you can change
all the settings here as to like how
large it is
uh if i create a
cube so i'm going to go ahead and create
a new cube i'm gonna build it
notice up here
these four buttons are sort of like the
modes with which we can interact with
our cube
and this is very similar to what you get
in 3d software like blender maya or
whatnot you choose vertices with the
left mouse and you can hit shift to
select multiple and then you can just
move it and since i'm using pro grids
it's snapping it to the to the grid
right
so if i turn off pro
grids should just be continuous like
that and so you can get whatever sort of
angles you want
um
depending on what your your use case is
so i'm going to hit command z
if i click on the face mode and i click
this face and i shift click it'll
actually extrude it and make a new face
and i can keep doing this uh
sort of over and over again about to
zoom out a little bit so i can see a
little bit better and i extrude that
and then i extrude that
right starting to build up something
right it's not beautiful but
it's something i can extrude that again
right
i believe i can scale as well
so you can build it out like that
you can and i haven't spent a ton of
time mastering how to use the tool and
all the ins and outs of it but it is
very
i think useful
if you're looking to get into sort of
level design and you want to
avoid the overhead of you know dealing
with third-party software like blender
or maya and having model files that
you're sort of importing and exporting
it can be kind of a pain
however
if you want to export models
you can definitely do that so there is a
method here forget which one it is
offhand i think it's this one
no it's one of these allows you to save
the model i don't remember exactly which
one it is
is it this one
the menu is a little bit cramped here so
i'm gonna actually blow it up
yeah yeah offhand i can't recall which
of these allows you to actually export i
don't have the icons memorized yet
because it's a fairly new tool but one
of these will allow you to actually
export the object as fbx or obj whatever
your software is that you end up wanting
to
uh
so you can just go also go up here to
the export
menu which is a lot easier to see
everything by name and you can choose
how you want to export you can also
export assets too for your for your game
so you can have objects in your scene
that pro builder will generate for you
so you can create prefabs that way
but then here's like obj so that you can
export it to your
3d renderer 3d software of choice
this is relevant for situations where
for example you want to like rig and
model and animate a mesh
you can't do any sort of rigging in pro
builder but you can do that in through
other 3d software so it makes sense to
export it that way you can also create
the model here export it rig it and then
re-import it if you want to
and that's relevant
this is a usable scene as is right now
the lighting gets a little bit messed up
notice here when you mess with stuff but
that gets fixed
there's a little sort of meter here
where it does some calculating and by
default it'll actually bake lighting on
all of your objects but as is this will
perfectly collide with with um
with any characters that you have so i
have a fps character i'm gonna bring
this guy up let's go ahead and set the
transform
up here
just put him in the right position
and pro grids is like attaching that
like sort of making that grid visible
next to where i am and you can set the
access for that
currently i have it actually disabled so
if i enable it now
this will actually move in increments
see
and it will snap it to the grid
perfectly
but
now this as soon as i hit play i'm
actually going to close this
i should just be on this mesh up here
yep
and so this is just part of the scene
now like as if you had made it in
blender or maya or whatever i should
jump down to my actual level
and then explore it a little bit this is
all just
haphazardly
created you know oops stairs and
other meshes and stuff
and so you know make it all the way to
the top oh i fell down
i'm also horrible at playing games but
this is the you know the beauty of it is
you can just play it instantly right
um
right out the gate
now another cool thing uh that i'd like
to showcase is
we talked about gray boxing earlier um
for making interior levels gray boxing
is the purpose of making levels and
testing for playability um the cool
thing about pro builder is that it has a
an invert normals feature which i think
is just
general in like generally accessible in
3d software
i don't know off hand which menu it's in
actions geometry
do you have the right things selected
all right i'm going to open up the pro
tool pro builder
window
and then one of these is invert
uh
invert selection
uh sorry wait
flip normals there we go
and so what this does is now this is an
interior level
so all we did before was you we made a
sort of like
polygonal
creation
of arbitrary
you know size and shape if you invert
the normal so recall every like 3d
polygon 3d surface as a normal and
whatever direction that's facing
going the opposite way going towards
that normal is what gets rendered but
behind it if you're going in the
opposite direction of the surface normal
it's invisible
and so the effect of that is if we flip
all the normals of something that is
convex
we get an interior scene and if we're
looking at it from the outside it looks
a little bit weird right like we can see
into it
right and this is something that you
might see like in minecraft for example
when you're looking in part of the
geometry that you shouldn't be able to
see you can you can clip through the
world and see all the other like
interior parts of the world
um because you've basically gone beyond
the surface normal of that polygon and
uh you're only seeing the the from that
perspective all the the surface normals
of polygons that are facing in your
direction in that way but often you'll
allow you to look straight through all
of the other sort of uh cubes that are
along the way because you're looking at
all the rear of their the inverse of
their surface normal you're looking in
that direction
and so again only one direction can a
polygon be lit at once and even if we
look at it from the top you can see that
as well we're looking at it from the top
flip the normals
it becomes a sort of concave or a convex
3d object flip them now it's an interior
level right so i'm actually going to go
into this
and i'm going to flip the normals again
i'm going to click on this
uh oh i would have to click on a lot of
these actually because it
split up the mesh
but it's gonna be easy enough i'm
clicking all the top surfaces of this
and making sure i didn't get any on the
other side on accident i did not
i'm going to extrude this
and then i'm going to flip all the
normals
and then i'm going to take my fps
controller
which is here and actually i think it's
already inside which it is i'm going to
hit play
the lighting i'm not sure if it'll be
messed up
it is messed up because in the middle of
calculating a bunch of stuff but now
i've created an interior level right
with the weird mesh that i had before
and so if you make your if you sort of
make the building of your level sort of
you know this concave thing
and then you flip all the normals you
can create an interior scene very easily
with ceiling and everything else
normally otherwise it would be kind of a
pain in the butt but makes it super easy
to do with pro builder and there's a lot
of other features
a material editor for one so with the
material editor you can actually
designate specific materials so in this
case i've created a couple of materials
a brick texture here and a marble
texture which is just i took some
textures created material
made the albedo component of those
materials that texture
and what that allows me to do is i can
select an arbitrary face so in this case
i'm going to choose these faces
and i can just click on this brick
texture
and now these are textured as that brick
right it's not applying it to the entire
mesh it's just applying it to whatever
specific face that we want to and
there's a uv editor which will allow you
to actually take the mesh of your model
in this case this is this is our entire
mesh here just remember as we talked
about it last week everything gets cut
out and made flat so you can sort of see
if you remember the shape of what we're
dealing with all the polygons that we
were
that comprised our sort of weird large
object they're all now splayed out for
us so we can just very easily
take a texture and just like put it
wherever we want
on here now i don't have a
ton of
experience using this so i'm not 100
confident my ability to uv map something
right now in front of you but
uh
the documentation on the pro builder
website goes into detail as to how to
use this so if you wanted say
a specific texture to be like in part of
the mesh and then maybe another texture
to be on another part of it in a
specific like welded way that's not like
just splat onto it
the uv editor will help you with that
for example a face on a character model
or something else
but yeah or maybe like a sign on a door
somewhere or something like that you can
do that all here just click and drag all
the faces the faces are actually
interdependent like dependent from one
another so that you can lay them out in
a way that fits the texture that you are
trying to map everything to
that is um
pro builder in a nutshell there's a lot
of features um we don't have time to
cover
all of them and i mean frankly i don't
know all of them super well yet um just
because the technology is so new but
it's
i think this is going to be a huge part
of like unity's future and like making
it accessible for people that would
otherwise have maybe been turned off by
the idea of modeling their level
geometry or their object geometry um i
mean certainly for me now this this just
makes me want to make a game in unity
like right now just because i know i can
instantly just like start creating my
levels right like it's just nice and
easy and convenient and pro grids you
should use definitely use pro grids in
tandem with pro builders so that you can
optimally rearrange things in a way such
that they're all like evenly lined up
with each other
otherwise you're going to end up with
issues in like manipulating their
position in a very specific way and like
coming up here and setting their values
manually and that's just kind of a pain
so much easier just to snap everything
to the grid the pro pro grids
and
deal with it that way and so the
assignment is yeah largely just going to
be
take the
pro take pro builder and pro grades and
just like make a level with it and then
just like take the principles that we've
learned create a controller create a
collider and just make a very simple
scene
um
and otherwise probably spend your time
focused on your final project
so any questions as to pro builder how
it works how to get it set up
uh no it'll actually it'll it should
flip through it um
let me
go ahead and put this up here it
actually actually it might not i think
it does still trigger collision but
you'll still you'll just be able to walk
you'll just be able to see through the
um
through the
yeah just a visual it's just a visual
bug it's a lighting bug the physics
should still apply i'm going to go ahead
and set the
model up here
okay hit play
uh no actually look like it went through
it so i think it so it also inverts the
collision the collision box yeah
i've seen some games where you can
clip through something and still collide
with it
so i think it depends on ultimately the
engine or the implementation that you're
using but in this case
when you flip the surface normals here
of this mesh it also flips the box
collider the mesh colliders normals yeah
precisely yeah if you wanted you could
have a you could make a copy of the
um interior make it you'd have to make
it you make it the same size i suppose
um and then flip it's and not flip its
normals such that you have a shell and
an interior yeah absolutely
um yeah generally i don't think you
would i mean yeah it depends if a lot of
interior levels you'll never ever be
outside of their boundaries and so you
don't often see that happening but it's
very much the case that you could have
that happening and if you have like a
house model for example then yeah you'll
often you'll actually see house models
are modeled with walls that are two
planes so there's a bit of thickness
it's actually a rectangular
shape so it allows you to have a
collision on one side and another side
because both there's two planes of
the collider rather than just the single
plane which is the direction of the
surface normal
any further questions on pro builder
yeah
because the bottom surface normal is
pointed upwards so this this right here
is pointed upwards but notice that here
the surface normal is actually pointed
down
so you can only collide with the
direction of the surface normal that's
facing
you
if that makes sense you can walk you can
walk through
you can walk towards the direction of
the surface normal but not
like against the surface normal if that
makes sense that's the way that unity
calculates its mesh renderer component
you could go through from this direction
but you could not go through this
direction
because this direction the surface
normal is pointed this way right
so if we try to walk against it we'll be
walking against the normal and so we
won't be able to uh we won't we'll we
will trigger a collision but if you're
walking through it and such that you're
going the same direction as the surface
normal so if you're coming from this
direction
then it won't detect a collision
does that make sense yeah
yeah
what tawny suggested which was to make a
shell around it would solve that problem
so if we created this this exact mesh
duplicated it and then inverted it then
we would have two of the same object but
with normals going one direction and
normal's going the other direction such
that the mesh renderers
account for both potential movement
directions
cool
all right any further questions on
pro builder again not to meant to be a
comprehensive tutorial there's videos
um
and documentation that i've linked to in
the slides but more just to illustrate
how awesome this tool is really and that
this is probably going to save some
people doing unity projects sometime if
you're doing any unity
like if you're doing any asset modeling
i should say or level modeling
another thing that
we didn't i didn't make a slide for but
which i talked about in class
was shader graph and so what shader
graph is is another
2018.1 feature which allows
rather than having to write shaders in
shader lab which is unity's shader
language
which can be quite
quite an experience quite intimidating
you can actually create them now with
this node-based programming language not
really programming language but this
node-based programming environment i
should say
which will allow you to choose all these
preset nodes that influence the shader's
behavior
and there's a lot of different kinds
and have the result of that
be you can see your shader every step of
the way so the shader is just a series
of transformations going from left to
right
in one direction
all of these sort of transformations you
can see how they end up accumulating to
produce this final effect in which case
here
if it may be kind of hard
hard to discern is a sort of marine guy
with these blue holes that are actually
like masking his mesh and we talked
about masking earlier this shader itself
looks like it's applying a mask with
this
noise that it's generating and it comes
with noise generation functions
generation nodes which will allow you to
feed those into sort of like the mass
component of your shader and then
produce some very interesting cool
effects otherwise this would be
kind of uh
unless you're like a shader expert which
i am not it would be um
pretty complicated and non-trivial to
implement something like this with just
code but this generates code for you
such that you don't have to actually
write any code at all but you can still
see the produced shader that gets
created for you from shader lab or
shader graph
i
believe that it's just a
asset now i'm not 100 sure i didn't test
this going in um
hopefully i'm not just missing it
supposedly you should be able to just
import it
i'm not 100 let's see how you actually
is it this article maybe uses it
via the package manager
package manager i think this is a new
window package manager so we go to
window and then package manager
and then
all
and then shader graph yep so right here
so window and then package manager and
then shader graph and that will allow
you to
import
the
means to which by which to create these
sort of graph layouts
if you're using 2018.1 which the course
is using but if you're at home and
you're using 2017.4
then
update to 2018.1 and you should see this
in your package manager
and then once you do that you can create
a you can actually create a new shader
graph object and then you'll see it as a
new window that pops up in your scene
and then you can start adding nodes
i don't have any material prepared for
it and i didn't anticipate talking about
it necessarily but it's
something that seems to be very game
changing and something unreal has had
for a long time that sort of
differentiated it from unity in my
opinion
and it's i think a very valuable thing
that they've added
that shows a lot of awesome progress for
2018.
so again a link to brackie's if you want
details on how to use not only pro
builders and pro
pro builder and pro grids but a lot of
other awesome features of unity and to
do a lot of cool stuff he makes some
really cool videos
um assignment 10
so assignment 10 is going to be creating
a level with pro builder just to get
your hands wet with it um
the level should be
pretty complex so not like i said
earlier not like
a finished game level like i'm not
expecting you to do awesome amazing
incredible things but a level that has
maybe you know a few pieces of
interesting geometry maybe generate some
stairs generate some it has some pipes
you can generate and some other things
um have a jumping puzzle in there so
this this says there should be one
jumping puzzle for the player the
assignment doesn't officially say it yet
but i'm going to make the change to make
it say that there should be a jumping
puzzle you can interpret this however
you want
just a couple platforms is fine but
honestly whatever whatever you would
like
um and have two different textures or
materials so you can create just an easy
pers like just import whatever texture
you want or you can go to a website that
allows you to procedurally create a
texture and
you can assign it to a material put it
in the material editor of pro builder
and then use that to assign it to a face
or to the whole object if you want to
but it should be at least two not the
default so to make it a little
interesting use many more if you want to
but only two required
um
so there this should be kind of like a
complete scene so
uh make a new scene separate from the
pro builder scene separate from the
portal scene
include an fps controller so that we can
move around the scene immediately after
creating the mesh right
but that's it you can just use the
default controller you don't need to do
anything fancy and then at the very end
you should have a trigger on a collider
somewhere which should probably it can
be invisible it doesn't have to be
invisible you can make this whatever you
want you can make like an arch or
i don't know your imagination is uh
you're free to use your imagination as
much as you want but there needs to be
some collider
whether it's invisible or not at the
very end and a trigger it needs to be a
trigger and then when you collide with
it it should say level complete on the
screen so just take a text object from
unity2d part of the canvas and just drag
it if you just add a ui text in the
scene it'll automatically add a canvas
and an event system for you
create the label and then just set it to
on or off depending on whether or not
you've collided with the trigger there's
code for this in the helicopter game in
the game over text script you can see
exactly how this is done um all it
effectively is is setting the color of
the text to zero zero zero zero versus
zero zero zero one or whatever color you
want to effectively just to change on
the alpha component of the text color um
and then once that's done then you have
a complete assignment and then you can
spend more energy hopefully this should
only take maybe an hour maybe less
you can spend more energy on your final
project which will be due on the 11th
but all together it's been an awesome
pleasure teaching this course and i'm i
hope that a lot of you were able to
learn a lot of interesting things and
hopefully we're inspired to create some
of your own projects and we'll continue
to create some of your own projects in
the future um
i certainly enjoyed making a lot of the
stuff and i especially super mario
brothers i think that was my favorite um
but this was
gd 50. so thank you so much