This course will be retired on January 24, 2020.
Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
Place two nodes towards the bottom left of the screen to form an L shape.
-
0:00
Alright, it's time for a bit of an exercise, and extra credit.
-
0:03
So now that you know how to add nodes, or rather sprite nodes to your scene.
-
0:09
How about you add two nodes, or the nodes that
-
0:12
we already had, the green node and the red node.
-
0:16
And make them appear the way it's displayed on the screen.
-
0:19
It's basically an l shape, 10 points from the left bottom edge of the screen.
-
0:26
How would you do that?
-
0:27
So the green node is tall and narrow, and the red node is wide and short.
-
0:34
And basically they both start at the same position, which is (10,10).
-
0:39
10x and 10y from the bottom left edge of the screen.
-
0:44
So I will be right here.
-
0:45
You can pause me and you can go ahead and make changes to your code so that you can
-
0:51
mimic what I have displayed on the screen and come
-
0:55
back in a few minutes if you got the answer.
-
0:58
If not, I will show you how I implemented this.
-
1:03
All right, welcome back.
-
1:05
I hope you got the answer on your own.
-
1:07
If you didn't, let's take a quick look on how we make this happen.
-
1:12
So the first thing we will do is set the anchor point to (0,0).
-
1:18
You know, for both the nodes, I'm gonna set the anchor points to (0,0).
-
1:22
Now, a (0,0) anchor point means your positioning is going
-
1:26
to be from the left bottom edge of your node.
-
1:30
If you remember clearly, this is what (0,0) looks like.
-
1:34
That's what the (0,0) anchor point is.
-
1:38
All right, so once I have set the anchor points on both my nodes,
-
1:43
I can now set the same position which is (10,10) on both the nodes.
-
1:48
Once I've set the position, the next thing I can do is set my size.
-
1:53
So, as I'd mentioned, the red node is
-
1:56
wider and shorter, so the width is 150 points.
-
2:00
And the height is 15 whereas the green node is exactly the
-
2:05
opposite, the width is 15 and the height is 150 points.
-
2:11
So it's basically just playing around with the sizes and the positions
-
2:14
and the anchor points and that's how you place nodes on your screen.
-
2:18
Of course, as we start animating these and adding
-
2:22
actions to them, it's gonna get a little more complicated.
-
2:25
But once you understand these very basics, a lot of the
-
2:29
complicated stuff is going to be a lot simpler for you.
You need to sign up for Treehouse in order to download course files.
Sign up