Know what's up everyone.
Mark Price here at DEF soap's dot com and we've made great progress.
We've got our second controller in place which is going to show the ramps but there's no ramps on it
yet.
So we need to go ahead and take care of that.
Let's make things happen.
So let's go ahead and go over to our ramp picker visi.
OK.
And let's see what we got in here.
Feuded load were setting the size that looks great that looks great but we don't have any scenes in
there we don't have a scene to 3-D to show to the user so let's go ahead and do that.
We're going to go to our art the CNS assets folder and what I'm going to do is unfortunately when I
click this and go to new file with the X code beta it sometimes has issues and messes the app up.
So what we're going to do is appear we're going to right click and go to new file.
And what we're going to do is we're going to go down here to resource and we want to do a sprite.
Nope a scene kit seen file.
There it is scene kit scene file.
And what we're going to do is we're going to call this this is call this ramps ramps you have ramps
and the ideas.
See this scene right here and I'm actually going to drag it up here and then drag it in here again because
the Escobedo has some crushing issues.
Anyway so just put it there in your art the CNS assets folder.
And we have an empty ramps does seem now the reason why I'm having an empty ramp seen here is again
I want you to think about how Seen it works.
A scene can hold one or more objects and so I want this to be my holder my world my scene in which the
three ramps are going to live.
So rather than rather than having these separately somehow loaded together or attached to each other
we want to just go out and load them in in a virtual scene.
It kind of pulled them all together.
I think it's a better way to organize and this is what you would do in a game.
So ramps up scene and what we can do is we can click this camera here as you can see this camera down
here to kind of to that camera we can click the camera and go over to the very far right the little
mountains here.
The scene inspector and let's change the background of our camera.
Let's change it to black.
OK.
So the ramps kind of really pop out.
All right.
And then what I want to do is I want to go into the ramp picker AVC And let's just load that scene.
So what we'll do is we'll say let scene equals Sian's scene and we're going to say named right there
and we're going to say art a c and a assets assets and we're going to call this ramps that a C.
And I'm going to force unwrap it here because it has to exist in my app and so might as well just force
unwrap it to make sure that it's there.
And we've got her seen now how do we actually get it into our scene view.
We just say scene view that scene equals scene.
Now if this worked correctly when I run the out the background of the pop up should now be black.
Let's go ahead and give it a shot here on our simulator.
So our app is running.
Let's click the White icon and you can't really see here.
And the background is now black.
And that's because we've successfully loaded the scene and the scene we gave a black background on.
So this is perfect.
OK.
But black is not the color that we want to keep that background.
So actually I want to show you how to use a texture that can be applied as a background on your on your
scene.
So to do that all we have to do is grab that texture which is right here.
Background.
I'm going to drag it into the textures folder.
And then what we'll do is in the ramps that scene file here click your little camera and instead of
doing a black background let's select an image and there you go it's going to repeat itself.
And I think that a look much nicer much cooler graffiti style.
OK.
Awesome.
So back to rent picker visi.
We've got our scene now.
Well we want to do a show three ramps when we get the ramps in have them rotating.
So how do we do that.
How do we make ramps attached to 3-D models attached to the scene that we just load it and it's not
it's not all that hard.
Just start out with one.
So what we're going to do is we're going to say let LBJ just arbitrary name ok.
CN seen named.
And again you can use memory how you can use the DHC files interchangeably with the scenes so named
Morency art slash or dot SC and assets.
Slash Marine and call this pipe that daks.
We want to load the pipe.
All right.
And then what we're going to do is we're going to say let Noad equals RBJ up root node that child node
that child node come on with name.
And we're going to call this pipe and recursively.
It's going to be true.
So what's happening here.
So what we just done in this first line here is we've created a scene.
Okay.
And the scene is the pipe scene.
All right now what we want to do though because of what we want to do is we want to grab the node out
of the scene.
So remember a scene can hold one or more objects right.
So even though in this pipe there's only one object in here.
The scene is assuming that there could be one or more objects so you're not actually when you load a
scene you're not actually grabbing this object directly you're grabbing the entire scene.
So when we right grab the scene and then what we do is we say Oh B.J..
Root node.
Well what we're doing is we're getting the root note.
Every scene has a root node.
And then we're finding a child node named pipe which is why it was so important.
So back to our our editor here why is so important over here on this little cube icon here to give it
an identity a name called pipe because now we're referencing this value right here.
So what we're saying again is on the scene go to its base node.
Every scene has a bass note or a root node.
Go find the child node named pipe OK.
And so this is interesting.
So what I could have done is actually could have had like a scene that says all ramps OK with three
ramps in it and then I could have just left them there and I could each grab each one using the exact
same way.
But it's not a good way to organize things you don't want multiple things in one file.
They don't need to be.
So they we separate them but that's what we're doing.
We're grabbing the actual node itself.
OK.
C.A. All right let me show you what that is.
Here a child node type LCN node.
OK.
So just scroll up here
the top so see and no.
All right here.
OK.
It's the motto class for for no tree objects and encapsulates the position rotations other transforms
of a know which to find a coordinate system.
OK so does a scene have a coordinate system where you can move a scene around.
With scale and position no it does not.
But the nodes you put in there do so when you drag the 3D model in that half pipe that you saw in there
when you see the inside of a scene.
OK it's just a no it's an S you know it and that's what you move around really important it can be confusing
the difference between a scene and a node.
A scene has a root node and the root node can have one or more nodes attached to it.
OK.
And that's all we're doing here is we're finding the child know that name is pipe.
All right.
Pretty cool stuff.
And in the last thing to do is just throw it onto the scene right so we can just say scene up root node
add child node and then put in the node in there.
OK so we got on scene which is the empty ramp scene.
OK.
Oh and we're going to have to unwrap this here to listen to that right here.
We're going to assume that it can find it and if it couldn't find or we misspelled it would crash.
But that's OK because we're compiling we're building.
We're not.
This is not something we're downloading from the internet at runtime.
That could possibly fail.
OK.
As you note is not unwrapped.
Maybe it wants us to.
Now that should work just fine.
I guess it wants us really wants us to unwrap that OK.
That's fine.
OK.
So there's our node and so here are seen the ramp seen it's empty.
OK.
And then we set the scene to the scene view member the scene views the view that's shown to the user
inherits from UI view and we're setting the scene on it which is the ramps which is empty right now.
We give it that nice you know concrete style background.
And then what we're doing is we're grabbing a new scene.
The pipe we're grabbing its child node named pipe or describing the node out of it.
We're not even using the scene we're describing the node out of it and then we're taking that note and
adding it on to our scene.
OK onto our ramp scene.
And so if this all worked when we run the app we should see some type of dark gray background with concrete
style and we should see our half pipe on there if everything worked as it was supposed to.
So there's our app let's click the button and cool.
There's the dark gray background and there is the ramp but it's really big really really big.
Also the camera angle is really very very wrong for what we're trying to do right.
We're trying to have something we can select.
Now maybe normal you might have sprite kit we could have a sprite kit for this view and then basically
show 2D images and you select one to place it.
But I really wanted to show 3-D objects spinning but how do you create a grid system of objects when
you're in 3-D space.
It's really hard especially with a perspective camera.
And so what we really need to do is set an orthographic camera.
Orthographic cameras will allow you to still work with 3-D but it removes the depth the z index.
It removes that feeling of depth and makes things look a little more 2D so if you ever see a 3-D side
scroller game it's using an orthographic camera basically.
It still renders the 3D but it removes the depth.
So all you see is an x and y plane and that's why we need to we need to remove the depth and use an
orthographic camera so this looks right Also it's way too big.
This isn't what we want.
So let's go ahead and fix both of those problems now the first problem is pretty easy to solve.
The orthographic camera OK all we have to do what we could do this from inside the scene file here but
I think it makes more sense to do it here in the code.
And what we're going to do is in this scene.
OK we're going to just set a custom camera so let the camera equals a scene camera.
All right.
And what we're going to do is we're going to say camera uses uses orthographic projection and that will
be equal to true.
And then we'll say seen that root node that camera equals camera.
No big deal.
See no big deal.
And let's go ahead and rerun it make sure everything's working command are to run.
And hopefully we should see a a more flat angle where that doesn't have the depth it may look strange
with the ramp being so big.
But I just want to make sure that the code actually worked click the little hidden ramp icon.
OK good.
It did.
It's changed the perspective you may not see it perfectly here but you will.
You will and when there are a lot smaller.
So the next thing to do is actually just make the ramp smaller the scale is too big and it's in the
wrong position as well too.
So I want to move it around.
So let's go ahead and we'll do that now.
So
here we go.
So we'll put it down here.
Let's do it.
Here we go.
And so let's go ahead and say no the scale is going to be equal to LCN vector 3 make.
OK we're going to make it a vector 3.
And basically when you're doing a scale you want to do uniform scale so all of them need to be modified.
And we're going to make it really small.
So say 0 0 3 2.
This is after some trial and error.
This this was the right number.
Of course we may have to adjust it every app is different even if you have just built it.
I know that from experience and zero point zero zero three two.
And then let's change the position no position to be equal to SDN vector 3 make.
And we're going to say negative zero point nine.
Five you know what these are wrong numbers.
These are for a quarter pipe.
We're going to say 12 instead of 32 0 00 12.
That's correct.
And then for the position is going to be a negative zero point ninety five.
And we're going to say zero point five for the Y and Z is going to be negative 1.
All right let's see what happens when we run this.
Now and by the way when you're working with placing objects and you need to be in a fixed spot you know
sometimes it is trial and error.
It's actually it can be kind of difficult when you're working with scene kit and 3D 3D objects to actually
get the edges of the screen.
It's actually a very complex math to get your camera to line up perfectly along the edges of a screen
when working with scene kit.
Now we get things like Unity 3D they make all that stuff super easy but it still is a long way to go
if you're still debating on whether to build games in scene kit or with with unity.
I will say unity has implemented a market into their platform already and unity is super easy to use
and you could do a lot of this stuff much much easier with unity if you need a full on immersive experience
of you if you want to access the the tools that come with iOS UI kit like view controllers and all that
stuff.
Then you see it.
But if you're making a full on game with a market that you don't need or the standard Iowa stuff do
it and unity it is way easier.
My advice.
Do whatever you want in your life but please click the icon down here.
Ok cool.
So it did put it on here.
It's a little bit smaller than I want.
So the 00 12 is a little too small and it's a little bit lower here than where I want it to be.
But the orthographic projection is perfect it looks great.
OK so what I want to do is I want to make this a little bit bigger and so instead of scaling down.
Let's just put this at a 9 9 9.
I'm just playing around playing around some numbers here.
That's obviously way too big.
So before it was a 1 that's a 9.
We probably need to meet somewhere in the middle with like 4 and I'm just leaving the twos just because
why not.
Still it ought to be OK we're going to put this down to a 2 2 and a 2.
And if you're wondering why are we is so small.
It's just because that's how big the that's how big the objects are in the three-D program and the the
scene has a different coordinate in sizing space and so I just used what I was given.
I could have resized them in the modeling program which is probably the better choice.
You don't have to do these really small numbers.
Ok cool.
That looks good.
The position on the right hands a little off and the position from the top is a little bit off as well
too.
So of course is from left or right y is from down the top and so I want to move it up a little Morell's
try point 7 and point 9 5 is too much to see point 9 and let's rerun it again.
Just getting it nice and perfect ok.
It moved it to the right even more actually which is not what we wanted so.
Oh because we're in the negative.
That's right.
So let's actually instead of point 9 5 Say say negative 1.
That's probably right in the center actually.
Didn't even need to change it and let's see from the top from the top is pretty good.
So let's just run it again make sure it's in the center and it will be good.
Cool.
That is really cool.
And there it is.
It looks great.
It looks really good.
So what we need to do next is get our our quarter pipe and our pyramid in here and then we can rotate
them and move from there and the background looks cool as well too.
So let's call this video done.
We're making great progress.
And let's finish up these 3-D models and the picker and the next video.
Mark Price at depth slopes dot com.
In case you forgot.
See you soon.