2.3 SpriteKit Basics: Scenes and Nodes
In this lesson we'll get started with our SpriteKit game by configuring a scene and adding sprites to it. The Xcode user interface makes this easy.
1.Introduction3 lessons, 07:37
2.Introducing SpriteKit7 lessons, 54:48
3.Building a Game11 lessons, 1:30:25
4.Conclusion1 lesson, 01:49
2.3 SpriteKit Basics: Scenes and Nodes
In this lesson, I wanna take you through some of the basic building blocks in creating a game using Sprite Kit. And, when I say building blocks, there's a lot of different ways that you could look at that. But, when you boil it down to the absolute basics, I'm talking about a same, and a node, or a sprite. So, the way that I've done this, or the way that I've structured this, is I've created a brand new project. It's a plain vanilla project out of the box, called Sprite Kit basics. And, right now, what we're looking at here is all the boiler plate settings and code. So, if I were to go ahead and run this, and actually I'm gonna set this to an iPhone 5, simply because of space limitations here. So, I'm going to go ahead and run this. And, you've seen this before. I ran this application before. Once my iOS simulator comes up, you can see that we're saying, Hello World. And, if we were to tap on the device, you would see that we have the placement of a space ship that is now spinning. And, we saw some of that code in the previous lesson. So now, we are going to tweak this a little bit to kind of start to move a little bit towards what our game is going to look like as we progress through the course, but just to give you some of the basics. So, we'll go ahead and stop this, and now, one of the things that I want to do for our game is I want to make sure that we're only supporting landscape orientation. So, I don't want the device to be portrait, or up and down. I want it only to be sideways, and you're gonna see why momentarily. So, I'm gonna uncheck this Portrait check box under Device Orientation, and I'll go ahead and save that. And now, I'm gonna go into my GameScene.sks, and I'm gonna zoom in just a little bit here, so we can see what's going on. So, as you can see here, as I mentioned before, this is the visual layout of a static scene that I can now start to design, and do whatever I would like to. So, if I were to select this main area here, you're going to see some properties on the right-hand side. By default, you see a, a grey color here, and you can set it to black. You can do whatever you want. I'm going to leave it at the default of grey. And then, we can start to play with the size a little bit. And, since we're targeting the iPhone 5 for this particular lesson, and actually throughout the rest of the course, we're gonna, we're going to adjust the size a little bit here. So, that we kinda match up with what the device is going to support. So, by default, we have 1136 by 640 when we're talking about the iPhone 5. So, you noticed nothing really changed there, but if I come over here, and select in here, now it's going to update the size. So now, we have the size of our scene set here, and now we want to add something to this. So, what I wanna do is I wanna be able to put a, a ball of sorts, and a panel of sorts, onto the scene, so that we can start to see what our game is going to look like at a very high level. So, the simplest way for you to add a sprite visually, or a two dimensional shape, or object visually, to our scene is simply by coming down here to grab the color sprite and drag it onto our scene, and let go. So now, by default, we get a square box here that we can place wherever we want. And, if I were to select this, you're gonna see on the right-hand side I have an awful lot of properties to set here. Now, we can set a name for this, and we can also set a name for the scene. But, I'm not going to do that just yet, we're going to get into that a little bit later on. But, that's going to allow us to access this particular sprite, or even the scene from the code behind file, so we can interact with them. Just as we would, say, with an IB outlet or something like that if we were creating a regular iPhone application. Now, I can also select the texture. So, this is going to allow me to set this particular sprite to have the texture of an image, if I want. So, if you recall, if I come back, and look at my assets, I have a spaceship by default, here, and that's why you're seeing this in an option for my texture. So, if I were to select spaceship.png it would change this to have that particular texture. But, I don't want this, I don't want that for this particular case, so I'm going to undo that. I just want my little red box. Now, one thing I would like to do, is I would like to change the size of this box. So, I could just grab one of these corners, and I could start to drag it around. But, what you're going to see here is I have free roaming ability to change the dimensions and the aspect of this particular shape. So, I can make it long and narrow, or I can make it wider and bigger. Which is all fine, but what if I want to maintain this ratio, maintain this size, while I'm trying to scale it, either larger or smaller? And, the way that you can do that, is by holding down the shift key, and then grabbing one of these corners, and then dragging it. So, then I'm going to maintain that aspect ratio, no matter how large or small I make it. So, I'm gonna make it a little bit smaller, because I want this to be kind of a, a ball per se, that we're going to be using throughout our game. So, once I've done that now, the next logical thing would be for me to be able to have some sort of paddle, or something that the user can control to maybe move around on the screen. So, I'm very simply going to grab another color sprite, drag it onto my scene. And now, I can play around with the size here. So this time, I don't wanna hold down the Shift key, cuz I wanna make this kind of longer and narrower. So, maybe something like, that I'm just kind of free handing this. And, then I'll go ahead and change the color, so I'll select a color here, and we'll make this blue. So, we'll go ahead and save that, so now if I were run my application, you're going to see a couple things have happened here. So, I can know see my ball, and I can see my paddle, but I still see Hello, World, and I don't want that. And, I can still click on here, and get these spaceships, and I don't want that either. So, I'm gonna go ahead and stop my application. I'm gonna go into my GameScene.swift file. And, in my did move to, did move to view function, I'm gonna get rid of all this code in here, cuz this is what's putting that Hello, World text onto the screen. And then, my touches are being handled in here, inside my touches began function. So, I'm gonna get rid of that as well. So, go ahead and save that, and once again we'll run our application. And now, we have a basic starting point for creating a scene, and adding some sprites to it that might start to resemble the basics of a game that we might wanna play. Namely, this kind of breakout concept, but I'm touching these things and nothing's happening, nothing's moving. So, this is going to be a very boring game if things continue to stay this way. So, in the next couple of lessons, I'm going to start to introduce movement, or physics, to my very simple demo game here, and also talk about things like collisions. So, in the next lesson, we're gonna start to talk about movement by introducing some physics.