[MUSIC] All right, let's get rolling on this Break Out case study version one. So Break Out is the name of the game, classically. We're going to call it something a little bit different. And what we want to do in this first segment, is we want to create three scenes. One which is going to be the game start scene. One which is going to be the basic playing board scene and we're going to use a 1536 by 2048 rendered pixel size for this, this is the size of a basic iPad. I'm going to use an iPad, because I'm going to show you it running on a physical device. You can use a simulator for this, it just can be a little bit slow on some of the intensive graphics effects. Now, our third screen will be a Game Over scene. We're going to add background images to these scenes, and we are going to actually, we'll put them into our sprite, our sprite builder scene because they are very static images and it's a good starting spot for our canvases in our scene builder. We're going to lock the orientation, we're going to use aspect fix, so, all right, let's give it a shot. We're going to go to Xcode and we're going to start a new project and this time we're going to start a game project. A game project is going to give us some basic templates automatically. We'll go ahead and call it breakoutdemo. Objective C, make sure that you've got Spritekit here. Universal and Objective C of course. Spritekit is the one that can catch you off-guard if you haven't been using that recently. All right. And we are booting. Okay, there we go. All right. You can see over here, we've got scenes and game controllers. If we click here on some assets, you can see we've got a spaceship asset already here, and you can see that one time, two time and three time thing showing up. So I think the first thing that I'm going to do is I'm going to lock down the orientation with a kind of high level concern. That's the easiest thing to do. I'm going to delete this spaceship because that's not going to be part of our game. I'm going to go into info.plist to do this and I'm going to come down here and say that I am not going to support portrait, but I will support either of the landscapes. So if you're playing a game and you flip the device upside down, it will rotate automatically, and that should be fine. I want to make sure I set it to iPad and for iPhone. They're two different settings there. And that is all set. Okay. Now in my assets it's time for me to think about putting in some graphics. So, I've done that, I've gotten some graphics and I've got them ready, what I did is I went and I got a star field of the Hubble space telescope in NASA. It's a public domain image. One thing you have to be concerned about if you're trying to build a game is you have to make sure you have the rights to the art that you're using. You can't just take any art and expect to make a game out of it and not get in trouble. So, my graphics are all, either I created them, and so they're bad, or I got them from public domain. And what I did is I have Photoshop, and so I made sure that I created the image at the resolution that I mentioned. And that is the two times resolution for the points in an iPad, a basic iPad. So let's see if I can drag and drop those into my environment here. I'm going to get a Finder window open and let's see, without showing you everything on my screen. Well, I guess you're going to see everything on my hard drive. There you go. And we are going to go down here to our Class Resources and I have some breakout assets here. So what I'm going to start with is I'm going to start by putting in, let's see if we can get a little bit more screen real estate here. I'm going to start by putting in our start screen. And that's our one-time start screen. I'm calling the game Deep Space Jailbreak. because I couldn't come up with anything better, sorry. [LAUGH] All right, we're going to drop it over here and that's going to create our first asset. You can see it gets dropped into the one time slot. That's fine because the resolution of it, if you look over here in Finder it's 1,024 by 768, so that's the number of points. And then my three times is you can see 3072 by 2304. And that's if this was going to end up running on iPhone 6. So I'll take that and drop that into the three time slot. It's the same graphic it's just higher resolution. And then the basics start screen which is two times resolution or 2048 by 1536. I could have done a better job with my file names, to make sure that they reflected the correct pixel size. They're all messy. All right, so that's my start screen graphic. The other screen I want, is I want a background for when the game is playing, and for that I'm going to use, here, let me show you what that was [INAUDIBLE] by the way. So this is what my start graphic is going to be. I just made that in Photoshop. And then here is what my regular game is going to be, I called it the Reduced Color version, because I had the same picture but I reduced the colors on it a little bit, so it wouldn't distract from the game play. So, it's going to be in the background of the game. Let's go head and drop the one-time version of that in here. Okay, and put the two-time version in the slot for two times. And the three-times 20, actually that three times isn't big enough, is it? Okay, we'll have it use that for the three-times for the time being. And then finally we'll have our game over screen. We'll start with game over at one time, and this is what it looks like at the end, game over. And we'll drop our game over two times in there, and hopefully our game over three times is the right resolution. Yeah, we got that one okay, all right. All right so for the time being those are the only graphics that I want to have in my game. When I first start my story board has the game view control built into it. My launch screen story board doesn't have anything in it. What we can do is we can put one of these images in here. I don't want to do that because I don't want to confuse anyone, but you could put one of the images in there like your start screen, or perhaps a version of the start screen that doesn't say touch to continue. But I'll just say Launching Just so that I know what's going on, a better game of course would have a more elaborate launch screen. Put some constraints on it. Okay, my main storyboard, I have my Game View controller, and here's my Game View controller right here. And this is the code that gets run. It's the standard of a UIV controller, just like our UIV controllers when we were working with UICad. My idea here is that I'm going to have a game start screen, a game scene and then a game over screen. I'm just going to cycle through them as they touch. And so I'm going to create those additional scenes. Let's go ahead and create a new file. And what I want is I want a SpriteKit scene. And we will call it our game start screen. And I'm going to want another one. We'll call it our game over screen. All right, and then if you come up here to the middle one is our GameScene, so we'll go ahead and drag this down here. And here's the code that gets run with our middle one, so we'll drag that down there. So, it kind of goes from start to scene to over. If you look in your GameScene.h, you can see that this is a descendant of the SKScene class. And we need to create a similar bit of code to manage our game start scene, so I remember that sk scene. And now, I'm going to come here and I'm going to do a new file and for this I'm going to create a coco touch class. We're going to call it game start, it is skseen that is already filled in when I was practicing for this filming, you might have to type it in. And then if I hit next, it will ask me where to put it and it will drop right in there. Just for obsessive-compulsive detail, I'm going to put this scene below it, so I have Start H, Start M, Start Scene. And then, I need to do the same thing to create a file for game over, Game over, the sub class of SKC, SK scene. Next, save that with the rest of my files and then obsessive compulsively move it down here, so they're all ordered. Okay, now when the game view controller starts, what I want to do is, I want to have it start at the game start screen. So let's go ahead and build these scenes in the scene builder, we'll just put the background image in them. Pretty straight forward, so if we go to our game start scene and if we go to our, if we select it and we go to the properties. You can see that the screen size, this yellow box that's here, starts at 1,024 by 768. That's in points and so, that's the abstract coordinate space that we're working with. What I'm going to do is, I'm going to drop a Color Sprite into the scene. And that is going to end up being the background for it. You may remember it from our Pong demo, that was our ball but in this case, what I want to do, is I want to apply a texture to it. Let's see, I'm in GameStart, so I want the GameStart screen texture and I just want to go through here. And I want to make sure that all the settings aligned it up the yellow block. So I put it at zero zero, I want to make sure that the size is 1024 by 1024. This anchor point says which part of your image is at zero zero. And I want, right now it's the middle at 0,0 and I want the bottom left to be at 0,0. By default, when you create an asset, the middle of the asset becomes the anchor point. The 0,0, just a little bit easier for me to understand when working in this screen space to change the anchor point. All right, so great, so that is our games Start scene. As long as our x code doesn't do anything crazy here, I think we're all set. I'm a little nervous that this doesn't say game start, so I'm going to go ahead and type game start here. And this is the problem I had in Pong as well, call that Scene game start. Okay, now let's go to game over and do the same thing with our game over scene. We'll drop a Color Sprite in there, we'll assign it the texture of game over. We'll put it at zero zero and of course right now, what we're doing is we're moving the middle of the image to zero zero. And then, now we're changing the anchor point to be the lower left of the image. All right, looks good, click on the background and set the name of the scene to game over. So, you hit enter and make sure it sticks and finally, we're going to come to the game scene. This is the middle one, nothing's here already, we'll do the same thing. Drop a sprite in, pick a texture, which is our reduced color version, and then go through and set our different settings. Move the middle of the image to zero zero and then set it so the anchor points to the lower left of the image, which is at zero zero. Click on the background and make sure it gets the name game. All right, so now we have our three scenes built. What we want to do next, is we want to cause it to correctly load at the right points. So, our game controller is what gets run first and if we come down here in our game view controller. We can see that our game view controller runs the super class, that's great. It's sets the SK view equal to the view that's it's current, it has, and that's fine. Here's some debugging information, that shows frames per second and the node count. That's fine but in a production game, you'd want to get rid of that but we can have that for the time being. Ignoring sibling order is an optimization that you can look into. All right, so then we create and configure the scene and what we want to do here is, rather than starting a game scene. We want to start at game start, so we're going to use the scene called game start and we're going to initialize a game start class. Game start, start, capitalization is off. I can't type. There we go and we're not going to be able to recognize that because we haven't imported it up here. All right, so now we set up some of debugging stuff up here and then we initialize with game start. And we present our seem and that should launch us okay. All right, so then when we get to our game start, what are we going to do? Well, right now we're not doing anything. And what we want to do is, we want tp say whenever someone touches the screen. We want to move from game start to the game scene, so I'm going to come down here to game scene. Right now this is the template code snd the template code, it launched until with all this stuff here. To put a spaceship on the screen, whenever you touch the spinning spaceship. So I'm going to cut that out, I'm going to come back to GameStart and I'm going to put a place for touches here. Talk more about, oops, we will talk more about touches in another lecture. But, let me go ahead and pull this whole thing out and start and this is a inherited method that we are overriding. All right, let's clean that up. All right, and we don't care about the touches, where it is or anything. We just want to know if touches is not equal to null, so it touches. All this stuff, we don't care about for the time being, at all. Cut it, but we do know that if we do get a touch then what we want to do is we want to shift scenes. So were are going to come and get some information here. This doesn't do any scene changing but our game view controller does the scene changing. So, we are going to go ahead and try to do this and our game starts here. S,o we are going to touch, we want to not go, we're at start now we want to go to game scene. We want to create a game scene object is in a game scene initializer and the game scene file. We'll present it and we need to grab that self reference, this SK view reference, we need to grab that. And we go back to game view controller and grab that reference there, go back to game start. All right and then we need to let this code know about GameScene. All right let it settle see if we get a good compile. All right so our game view controller going to launch GameStart. If we see a touch in GameStart then we're going to go to GameScene. So what we want to do is we want to take this. And we want to go to GameScene and so if we see a touch in GameScene we want to go to GameOver. Again, this code is template code so I'm going to remove it. All right, not Game Scene but rather GameOver. And again, we need to import GameOver.h. Give it a second to compile. Great. The last thing we want to do is if we're in GameOver, we want to cycle back to, I guess we don't want to cycle back to GameStart. We want to cycle back to our GameScene again, so that's going to look like the same code from GameStart, where the touches began and we go to GameScene. And so in GameOver, If we touch the screen, we want to go back to a new game. So we'll reload a new game. Give it a second to compile. All right, let's just check and make sure we did everything that we intended to do from our slide deck. We set up a game start board. That's our GameStart. We set up our game playing board. That's GameScene. We set up game over, GameOver. We added the background images. We locked the orientation. We used AspectFit, and we did that in our GameViewController. And then we added interactions to that. We would cycle through start, scene, game over, scene, game over, scene, game over, scene like that. Right, let's just double check GameViewController. Here's where we said AspectFill. Actually we don't want Fill, we want AspectFit because we don't want to lose stuff off the side of the screen. All right, and so up here, I'm going to pick my iPad to run it on. I'm going to turn on my iPad, and I'm going to bring up QuickTime so that you guys can see what's on my physical device. Great, and let's tilt it so you get a sideways view. Hopefully that's not going to mess everything up. All right, there's our sideways view. Let me see if I can prop that up. All right, it's propped up okay. And now we'll run it and see how that works out for us. Again, we're not looking at the simulator in this case, we're looking at a reflection of a physical device that's connected to my machine. And. We're still building. Building always takes a little while the first time because you have to put all those assets into the package. And of course I've got my screen recording software running so it may take a little bit longer than you might like. I'm not actually, yeah, that's right. I don't need to record it, QuickTime, because I'm recording the screen. We'll just wait patiently here. Use this to try out some of my comedy. No jokes. So a termite walks into a bar and he asks, is the bartender here? You'll get it later. All right, here's another one. Don't ever buy flowers from a monk because only you can prevent florist friars. Yes that's right. This are kind of humor skills you only get when you are a father. And we're waiting, we're waiting, we're waiting. Building our package, signing it, installing it burning CPU like there's no tomorrow. Hoping for the best. Okay, I've got another bar joke for you. So a bacteria walks into a bar. The bartender is cleaning the bar looks up and says hey you've got to get out of here. We don't serve your kind here. Bacteria replies to the bartender what do you mean I'm staph. Still installing. Here we go. Wait for it. Was giving my kids some advice the other day. They're outside and there's a big forest and they said, hey, stay away from those trees. They're pretty shady. You know what? I think it's trying to run on the wrong device. It's trying to run on my phone. Let's try. It wiped. No. No. Hold on. No. No. [INAUDIBLE] Okay, well let's see, we appear to have lost some video so I'll just pick up while my phone tries to survive. All right, I'm going to go ahead and run it, I thought it was running on my iPad. I'm going to run it on my iPad and we'll reflect the screen here for you. Here we go. All right, waiting for it to launch. Waiting for it to launch. Here we go, launching. Wow, a little slow. Okay, there's the game and what I'm going to do is, I'm going to touch it on the physical device, I'm going to touch the device now, here I'm touching. And we go to our next screen. Nothing's happening but you can see we're cycling through the different game scenes. I'm going to touch it again. Game over. I'm going to touch it again. And go back to our game scene. Touch it again, and we loop through our different Game Over game scene. In summary, what we did there is we created 3 scenes. We added background images. We locked the orientation. And we used AspectFit to get our basic structure ready to go. The next thing when you do is we need to talk about our physics engine and how we're going to work with that. Thanks for your attention. Sorry for the bad jokes. [MUSIC]
