Bummer! This is just a preview. You need to be signed in with a Treehouse account to view the entire video.

Preview

Start a free Basic trial
to watch this video

Sign up for Treehouse

Extra Credit

2:33 with Amit Bijlani

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