7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 22Length: 2.6 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.2 Creating a SpriteKit Game

Now it's about time for us to start digging into the world of sprite kit and see what it actually looks like from the perspective of Xcode, when we actually start to build a game. So the first thing we're going to do is we're actually going to open up Xcode, and once we've done that. We have the option here of creating a new ex code project, so that's what we're going to select and now once we have the opportunity to select a template, we are going to want to make sure that we are under the IOS family of templates, we are going to select application and then we are going to select. Game. Now I know this doesn't seem to jump off the page at you to say that this is going to be a Sprite Kit game, but I'm gonna show you why in just a moment. So next, we'll go ahead and select next, and we're going to give this a product name, so we can just call this demo. And enter in some organizational information, and then we're gonna select our language to be Swift. Now, honestly, you can definitely follow along in this little section, as well as the rest of the course, using Objective C if you like. It's not gonna be too different, if you are at least familiar with Swift and Objective C, so. You can kind of go either way. I'm gonna be sticking with Swift, but feel free to kind of play around either way, as it will work with either language. Then we're going to make sure our game technology is set to Sprite Kit. Now this is why I said just selecting game from the template is not going to jump out to say that this is a Sprite Kit game. Mostly because you have some options here. And the only option we're concerned with, in this particular course, is going to be Sprite Kit. And then finally, you can select which device you would like to target. In our case, we're gonna leave it as iPhone. But you can have it either be iPhone, iPad, or Universal app. So once you've selected all those options, go ahead and select Next. And then select where you would like to save it. So I will just quickly save this to my desktop. And then here you go. We have the basic project structure and really all the basic functionality that you would typically expect in created any sort of IOS targeted. Application, so let's go ahead and jump through this a little bit, just to see what things kind of look like. So if you select your project here on the left hand navigation side you can see you're going to be presented with the same basic properties that you would find in any other project so under the general tab you can select some more identifying information about your application your deployment info or your targeting info. As well as what the main interface is, what sort of orientations you support, and further on you can select different icons and app images, and you can do all the same basic things that you would do on your normal application. Which is very nice, considering that typically when you jump into creating new styles or new types of applications, it can be a little overwhelming. But. The transition from a basic IOS application to a Sprite Kit application really isn't all that big of a jump. So now if we were to look at the basic project structure here, depending on what you named your project, you'll have three folders here. You'll have. Demo, demo tests, and products, Now demo's where we're gonna spend most of our time, as that's gonna contain most of our code files, but there's also gonna be some helper files in there, namely the SKS files, and the storyboard. But we'll get to that in a minute. Then you're also going to have the demo test, which is obviously going to be your unit test project. Which is very important, but unfortunately we're not going to be covering a lot of that in this particular course. We're gonna save that for another day. And then finally, your products folder, which is gonna contain ultimately what we're building here, our demo.app, and the demo tests, should you be building your test project. So, like I said, we're gonna be spending most of our time in the demo folder, so let's go ahead and take a peek at what you will find in here. Now, the first file should not come as any surprise to you as this is the App Delegate that you're gonna find in pretty much every single IOS. And OSX applications for that matter, and all those different types of projects. So we're going to have the normal window, that you would normally see. And it's going to be populated with the typical view controllers, and kind of views that you would normally see in other applications. Now, the second file you see here, is actually one of those helper files, that I was talking about before. Now, this is the. File that's going to allow you to, visually lay out your scene. And that's kind of that first jump into the world of Sprite Kit. We start to talk about things called scenes. And you can think of a scene as really just a UI component, similarly to how you would see a view in a regular, sort of, IOS application. That's what you're gonna see here. That's the basic concept of a scene. Now a scene, at least from this perspective in your SKS file, is going to allow you to, kinda, statically create a scene layout and be able to drag and drop different pieces onto your scene, like sprites, or things of that nature. And we're gonna see that in just a moment here. But we'll come back to that. Then we also have our game scene.swift file, which you can kind of think of as a code behind file that's going to allow you to get access to things that are going on within your game scene SKS file. So as you can see in here, this is defined as an SKC, or that this class is defined as an SKC. Now that's one important thing to note. Now when you're working with Sprite Kit and you're starting to talk about the different types. And classes that you're going to find within Sprite Kit. They're all prefaced with SK, so it's very simple to see when I'm working with a game statement that this is part of Sprite Kit, because this is an SK scene. As well as when you're talking about a view, we're not just talking about a UI view that you might see. In an IOS application this is in SK view so things are very specialized for the purpose of using within Sprite Kit. So as you can see in here we have a couple of overridden functions that we're going to dig into much more detail later on, but as you can see we're just doing normal things here. Creating a label. We're actually creating an SK label node. With a particular font. And we're setting some properties on it. And then we're adding it as a child. So outside of some, maybe differences and some naming conventions and properties, things are still. Still seeming relatively similar to what we've done before. And then you can handle different touches using the touches begin function, and do different sorts of functionality based on some logic that you have created. Now the next file is going to be the game view controller which is going to be very similar to what we've seen in the past. And actually, if you take a look at the class for game view controller it is. A UI view controller. So there's really nothing specific to see, to, Sprite Kit here, in this particular game view controller. So you have your view did load function, and a number of other different overridden functions here that we can tie into. And we'll go into some of those in a little bit more detail later on as well. And then once again, we have our storyboard. And this is going to be very familiar to most other people that have used storyboards in the past for other IOS applications, and you can almost liken the SKS file to be a similar concept to an interface builder or a storyboard concept in the Sprite Kit world. But what's interesting is if you select this view controller and you open him up. This is going to be some classed with game view controller we just looked at. So once again, this is very similar to what you would normally do in creating IOS applications. Now we have this images.xcs assets and this is once again where you're going to store your assets. By default, we have the app icon that you would normally see, which is blank at the moment. And we also have the spaceship so be default, when you create this boilerplate application using the game and Sprite Kit template, you get all of this for free, just so you can kind of have some starting point to play around with. So we have this space ship that's included in here to kind of get started with. And then we have our launch screen that's created by default for us. Based on what we have entered in to the template wizard earlier, when we started to create this application. And then, in the Supporting Files folder, we once again have our info.plist, which is going to contain all of our basic information, and key value pairs, that are going to describe a lot of the properties of our application. And that, there is pretty much it. Now what's going to be interesting here is I'm gonna go ahead and run this application, just so you can see what it looks like. So I'm gonna go ahead and run this and right now it's set to the iPhone six which may be a little large for the screen. Well, it'll be okay for now. As you can see here now, we have this kind of gray background and we have this text in there that says "Hello, World." So this is your basic hello world style application. Or at least Boilerplate code for your Sprite Kit project. Now in the bottom right-hand side you see that we have one node and we're ru, running currently at 60 frames per second. Now you may say I have one node, what, what exactly is that one node. Well you can think of nodes. As children of this particular view or of this scene. And right now, we have one because this text is actually a label that has been added to the scene that we saw in some code previously, that is going to be counted as a node because it's truly a child that has been added to this scene. Now, by default, if you remember looking back into some of this code. If we take a look at our game scene dot swift, this is where we see our label being created, there is our hello world of chalk duster font. And then we set some properties on it and we add it as a child to this particular scene and that is why it is there. Now you are going to notice that touches begin has been. Implemented and for every single time that we touch this, we are going to get the current location of that touch, we're going to create a new sprite or a new sprite node, with an image named space ship. Now that is why that, within our assets. We have an image here named spaceship. So its going to go ahead and grab that and change it and create a sprite based on that which once again remember a sprite is really just a 2D image of something that we can throw on to a scene and interact with. And we set some properties on it for scale and positioning. And then we create this action, we. Create an SKAction. So, once again, Sprite Kit action. That says I want to rotate this by a particular angle over a certain duration of time. And, then I just want to run the action on that sprite of what we just created. So fairly simple, fairly easy to follow. And then we're going to add. As a child, that sprite to our scene. So let's go ahead and go back to our IOS simula, simulator and see what happens when I touch the screen. So once I touch the screen, as you can there we have now added a sprite that is animated to our scene. And as you can see now, we have two nodes. So we have our label as well as our. Sprite. Now, I can continue to do this as much as I want. And, an interesting thing, and important thing to note is the more and more of these that I add, my frames per second are going to slow down. So, yes, you can begin to add as many of these sprites to your scene as you would like and do all sorts of wonderful animations. But,. Remember you are ultimately limited by the hardware that you're running on. In this case we're running on a phone, so, you're always going to run into those types of issues when you begin to create games, so just kind of keep that in the back of your mind. So, I've only added so many. Sprites that are animated to the scene so far, and I've already dropped down to 20 frames per second. So, just kind of keep in mind those types of things when you're creating your application. So go ahead and stop that now, and. As we continue to go down this path in this section of our, of this course, I'm gonna start to dig into different pieces on how to play around with different aspects of this particular Sprite Kit game.

Back to the top