iPhone Game Tutorial 1 – A Beginners Guide to iPhone Game Menus with UIKit

Hi this is Paul Solt from iphone def TV I want to give you a the series videos on how to make you very first iPhone game and the first never gonna focus on is the user interface and how we can overlay different buttons and options on top of our game windows and so this is what we’re doing in Bomb Dodge I just fixed a bug with it. I wanted to show you how we do it in in our game so that you can get started in this is going to be a way for you to organize multiple screens on your iPhone game you can connect the button so we’re gonna build this up there’s gonna be a bunch of videos can be a buncha code and we’re just gonna jump right into it so let me show you what we’re building right here we have two buttons now you can imagine having your game start screen like Angry Birds here and you have some kinda image in art is would make now after that you hit the play button to start the game you might go directly into the game where you might have some options to do something else right now this is a really simple game I just have a game loop that is causing some animation to happen so I can actually interact with this and I get points for removing these views around now when things it does happen and I lose points when I’m not moving these things around.

It’s a super simple game it’s nothing complex would get points along the top and then I’m moving things around and then I can hit the the pause green here we’re playing with some UI dynamics are using physics to draw some of this stuff where kinda look into that a little bit arm and you can interact with these buttons to on pause the game and so these are just some different things that you can do with the the iPhone capabilities we also have a store screen here and so we can transition to here we’re we can make purchases and this could be hooked up to in app purchases that when you tap on these numbers you see that you are getting something here so that’s our store screening and are store screen is accesible from two different places so if I go to the main menu you’ll see that we also have a store button here in this will show us the same thing it loads the same data and were able to interact with the in the same way so is just different ways to get to the same content from different hierarchies in your application so this is actually a custom view controller that using the UIViewController containment API’s so that we can present everything into that we can actually overlay UI on top of our game window so we we’ve got to you up controllers here and I’ll show you how to do everything like we do in our game alright so let’s get started I am going to open up Xcode and start a brand new project and this will be a single view application will call this Game Menus 101 hands we’re going to make this just for iPhone ahead next up with this my project folder E we’re ready to get started to the first thing your gonna do is we’re gonna be using our layout in this for everything we’re gonna need two buttons on our main screen so it is trying out those buttons when have a play one and then we’re going to have a store bun now what I want to do with these buttons is I do you want to use a background image so if we or the project down I have these three assets that I can just drag into the project and I’ll just copy them in and then I want to put these in the assets catalog so I’m just going to click on assets and then down here on the plus I can import from the project now import of four files I we can enable this to just make sure that nothing bad happens and then the thing that I care about right now is this one once or in a double we’re going it’s like that and show slicing slicing on this image will just click this we got the default slicing now it so hard two seasons everything is way here so let me give you the preview right here you can see we’ve got this on a roll white button thing and I want to be stretch war in both the horizontal and vertical directions so slicing is a quick way to get that to work now I’m going to jump back to my main story board file, in here we are going to set the background image in its like both files holding the Shift key and then we set the background using the one button now it looks a little bit funky here but when we actually run the app it will look a lot better and what I wanna do is pride drag these out to be.

a certain size I think will go let’s go 140 for both these buttons are just make them 140 pixels big and that should match now they’re a little hard to see with the background let’s change the background color so that they’re more obvious we have a background color were on this side bar tab if you don’t have it open and then we’re on this little tab here now we’re gonna look for the view options and then white colors here let’s go in a light gray colors that the stand out to those are two buttons but are making game that I want in landscape view so we’re gonna switch our view controller and the way to do that is to select a view controller from here or just a scroll down and select it by selecting this bar when we do that we’re gonna change the orientation to landscape into the 2nd US that landscape view which is going to be important for the stuff that we’re doing with this game and now we’re gonna want to rearrange our bond so what i’d this pin on the right for a moment and I want to space out the button said they’re certain distance apart and then we’ll Center them so with them center we can go ahead and Ryan Howard Stern run on my iPhone but I want to show you guys so around the simulator that’s at the start button in if we give it a sec in alright we’ve got our buttons we see it to her are resized new book a little bit weird so let’s go in there and make them a little bit taller so I’m gonna make arm every 40 pixels tall injured at the space in a very nice like both for them adjust them said their centered and we can stop in rerun ice that’s looking more like the the button that I was looking for and can move Xcode over rights and the next thing we want to do here as you notice that the the image that’s we’re here but when we actually run the app it works fine a promise we’re not getting the portrait app so we’ve designed the user interface for the landscape you but there’s actually a project setting under a game in you so open your left hand which is this button right here that a show or hide it and then select the project and then we’ll go to targets in under targets we want to make sure that we turn off portrait I’ll just go landscape laughed and landscaper right and doubt should make our app so that it plays in this orientation now if you’re good with proportions you’ll notice that our center line is right here in our buttons are offset that’s because we’re running on the iPhone for which has a three-and-a-half in screen and so we use our way out to fix this issue and so this is really easy to get started with it it’s confusing if you don’t have someone walk you through it so I’ll just walk you through how we’re going to do this I wants this play button to be center so I’m going to right click and drag up into the gray areas if you just right click and drag up we can use a two-finger click in drag and then that go we can send it horizontally in the container with auto layout we’re describing the placement of our bond so we always want these buttons to be centered along this horizontal axis so far smaller screen it should be senator for an iPad should be centered the actual pixel coordinates isn’t important here it’s it’s the fact that we’re giving it a rule using Orlando in so with this rule we can set this play but now we’ll see that there’s this really small being here in order to fix that we’re gonna do is I’m gonna right click and drag and then select with I want the with to be constant and then I want it to be also centered in the vertically so if I click on this this war now go blue one on me into that a good thing where’s this one doesn’t have any lines yet so if we go ahead stop in Ron in-house see that the play button is centered in the middle and its size chains and so we don’t want the size two chains are actually in a selected again and make sure that we set the height sombre clicking and dragging down to set the height so and now I have a budget constraints about this gun describe how big this is a need to do the same thing for this one and we’re gonna make this relative placement so the store brands can be right on that play but so if I just drank up we can said a vertical space and then you’ll see that we had the same issue with the way it source at the wit by dragging left in the war dragged down to set the height with that there’s one more thing we need to do we haven’t described where it is in relation to the center so what I can do here just Alliance the center of the play button and now all the line should be blue if that’s the case for you you can continue working otherwise go back and try and fix and so we’ll see now I had the button centered and they behave like an IO s 7 app where they sort of a dow in opacity that’s getting our buttons set up the next thing you know do is create some methods that we can connect to so if we open our view controller dot am I’m gonna delete it did receive memory warning since we don’t need that and this extra comment we don’t need I either so what we’re gonna do here is add two methods and initially had do this in code first and then when we do the other screen to show you how to do it with interface builders assistant editor so right here I’m gonna do dash and then I B action in parentheses and then this will be the play button pressed so I B action is allowing the Interface Builder to see their oh I have a it action that I can connect to code into what we’re doing here is we’re going to be connecting our user interface to coach if i jus right these two methods these will give me to access point I will see these dots appear now in the mean storyboard what I can do action before we do that was to spread a message saying that play was pressed and the spread a message saying that store was pressed now we’re not gonna implement although 100 yet is gonna take multiple the years to get to that point but we’re stepping out the basic functionality for how this happened works for this is our first screen and will build it up screen my screen now to connect to the cold when you’re doing a drag over to the view controller you can either drag here and you’ll see it we have two events that we can tie this to so I want to play button play and then inside rain here in a drug over till after the document view and all the store button is pressed now if we go ahead stop in run this you should see that everything is working and we see messages when we press those buns I can keep pressing store you see the timestamp changes and the same with play so that is our first screen and this is where all the home had sex gonna happen in the next video I’m going to work on setting up this view controller so they can manage all the different screens for or game aunts were at two methods that will show different view controllers and then hide the view controllers in this will give us the the capability are displaying our user interfaces from different view controllers on top of or actual game windows so we can have special you are I that we develop with Interface Builder on top the actual game!

As found on Youtube

Find More Guides @ Freetoplaymmorpgs.com