EASY iOS game tutorial Part 1/2 | Helicopter arcade game | SwiftUI 2020

hey everyone today we're going to be making a helicopter game and this is going to be part 1 of 2 this is what the end result is going to look like of part 1 this game is going to pull together a lot of the concepts of Swift UI if you're just starting a lot of the basics are going to come together and we're going to be able to build a game so if you start a new project call it anything like helicopter for example and we'll get started so we're going to start by creating a new folder or a new group and we're gonna call it components we're gonna have three components of this game and we'll start one by one create a new Swift file and call it a pixel we want to go for a pixel look in this game so it's it's good to have one struct that is a pixel it's going to be of type view and it's going to have only a couple of properties a pixel is a very simple unit that we'll use to build the rest of the game so it's a size and it's going to have a color we're going to then because it's a type view destruct we need to have a variable which is called body which is some view and we're going to output a rectangle which is our pixel quote-unquote and it's going to have a width which is the size very variable that we have and the height is also going to be the size we're going to make the foreground and don't forget to make the size a CG float instead of an integer and that should work for ground color we're going to use color and so that's going to create our pixel and we're going to use this to then build the rest of the game if you go back to content view you can delete everything and plug-in this pixel which we've now created give it a size of 50 and a color let's say red and if we build our app now it should make sure you use a newer version of iPhone like the 11pro max to make sure and flip it sideways because we'll be using a sideways view for the game but you can see the red pixel that we've created here based on this and we put together let's make our second component this one's going to be the helicopter and this one's going to be a little bit more complicated but it's going to use the pixel that we just created to make a helicopter this kind of like a pixel art helicopter and it's going to be a struct call it helicopter of type view again we need to have a variable called body and that's some view and here what we're going to do is we're going to create a a helicopter sort of that coordinates but blocks so this is going to be an array of arrays and each component each part of an or the array is going to contain a bunch of colors and you can think of this as a grid so we're going to make a grid that is five by five blocks and each of those blocks is going to be a pixel based on what we just created and each of them is going to have each of them is going to have a color so you'll see here we're creating this grid essentially and it's going to have it's going to be five by five grid so we have blue blue blue blue blue and then five rows as well this is going to be what we use to create our helicopter by changing the colors reach one of those squares we're going to end up with something that looks approximately like a helicopter okay so now that we have that we need to iterate through it using two loops and the way we're going to do that was we're going to use a for each loop first we're going to put that inside of V stack now we're going to create a for each and we need to give a range for each loop so the range we're going to use is from zero until how many rows we have and the easier the easiest way actually here to do it would be to just give a number which is let Rose equals 5 and LED columns equals 5 because that's how many we have there's a different way to do it this is a little bit more cumbersome but if we just say Rose minus 1 that'll give us 5 be careful because if you don't do the minus 1 it'll actually be 6 because we're starting to count from 0 don't forget to do ID equals back slash self and then open the closure and say row in here we're going to create a CH stack because what we're doing is we're creating each row now each row is an H stack which is going to contain five V stacks so we're creating an H stack and then within it we're going to do another loop for each and that goes from 0 to the number of columns that we have minus 1 again ID is back /tao itself and we're going to say call N and here we're going to create a V stack which is going to contain a rectangle actually you can either use the pixel that we created or a rectangle it's actually the same thing because all the pixel is is a rectangle and we're going to give it a size which is the size that we have up there for both the width and the height there we go and so we may need to make sure the size as a CG float instead of an integer and make sure you have self in front of each one and that should be this should give us now a grid oh let's do a foreground color of the actual heli blocks so the way we pick the corresponding color is by doing Helly blocks square bracket row square bracket column that way we're actually picking the color of the corresponding square so now let's get rid of pixel and do helicopter and if we go ahead and yep helicopter if we go ahead and build this now we should see a grid of 5x5 squares rectangles which is what we made so they're all blue because that's what we have and there's actual padding between them so we need to make sure the spacing is zero so for each edge stack and UV stack make sure you have the spacing at zero and that way we'll get rid of those spaces between the squares so if we build it now we should see a solid blue square but actually we're seeing stripes we missed one v stack so if we add V stack for that V stack a spacing of zero as well now we should see a solid blue block there you go perfect so now all that's left is to change the colors to make it look like a helicopter and you can play around with this you can this is extendable as well you don't have to stick to five by five you can go ten by ten any any grid that you want obviously the bigger it is the more complex the shape can be here we're just going to kind of go with with green and gray just because those were the colors in the classic arcade game of the helicopter which we're trying to which we're using as inspiration here so here we go we're kind of starting to see a helicopter if we change the rest to gray clear and gray maybe that looks like wheels maybe not you kind of have to use your imagination but it's fine hopefully the the point of the tutorial still stands there is our helicopter and we can use this now to move forward okay so now that we've built our helicopter all we have to do now is build the third component which is a obstacle so we're going to create a new file and a swift file call it obstacle import swift UI and is going to be another struct it's going to be called obstacle again it's a view and we need a variable called body which is some view and all we're going to do here is it's going to be a rectangle and it's going to have a width and it's going to have a height so we're gonna start by creating by making the height you know let's make it actually the height the width 20 and the height 200 and we and the body we create a rectangle with a frame with those dimensions which are the width and the height and that is our obstacle now in the future when we develop the game we can add different types of obstacles and we can make the sizes dynamic so we can change the height the width of these obstacles but for right now we're just going to use this one for a simple example okay so now we have all of our different components and it's time for us to start combining them inside the content view let's start by creating a z stack and putting the helicopter and the obstacle inside it and you'll see soon if we if we run this C stack if we if we run this they're actually going to be on top of each other but first we're going to actually make a geometry reader which is going to give us the the size of our screen so geometry reader if the way it's used is you say geometry a curly bracket gon or some other variable I call a Geo then we can use that in the frame and say hey make the frame the Geo dot size that width and the height geo that size that height and that's going to take up all the space for that view which geometry reader encompasses because we're placed geometry reader at the top there is nothing outside of it it's going to be the whole screen so now that we've used geometry reader to give us the coordinates it actually isn't showing the full because we still have safe safe areas and the obstacle actually is black color so let's go change the color to green for the obstacle and if we run it again we see the obstacle is green now it's on top of the helicopter but we'll move it around we also need to fix the the spacing of the file a little bit and okay so let's get started with giving the position of the helicopter and the obstacle so create a state private variable heli position it's a CG point because we need an X and a y-coordinate we're going to give the helicopter that position and just say self dot a heli position we need to move that out of the body it needs to be outside of the body that's why it's not working there we go if we put it there it should not work fine the helicopter now is using the heli position up there which is a hundred x equals 100 white one hundred which would be towards the top left corner we do the same thing now for the obstacle position and we give it some kind of coordinates towards the right end of the screen for example let's say x equals a thousand and y equals 300 if we run this now we'll see that there we go it's kind of looking like a game but we need to definitely fix the the black background and needs to be covering the whole screen and we need to move the edges ignore safe area down to the geometry reader level and that should now work perfect okay so now that we are now that we have our components on here we need to start thinking about doing some movement and we're going to create a couple functions to do this the first function we're gonna create us called gravity and all its going to do is take the heli position y-coordinate and increment it up or in the positive direction which ironically is towards the bottom of the screen by 50 let's say every time this function gets called the position of the helicopter is going to change so that it looks like it's falling then we're going to create another function called obstacle ups to move which will move our obstacle from right to left and the way we do this is say self dot ops position dot X minus some increment let's try what 50 and see how that looks okay so now we need a timer to move all of two two : these functions gravity and obstacle move so we're create a timer which runs every half a second and it's going to be on main and in common and it's going to need to connect at the end so we use something called so we use something called on receive and what we say here has used timer so every time you hear from the timer do something so the thing we're going to do is we're going to run the gravity function so if we do solve that gravity every time the timer runs now is going to increment a Holley helicopter position and it's going to be looks like it's falling one thing we need to do is on the timer is auto connect instead of connect at the end that's why it's not working and make sure you use self dot timer instead of just timer and this should now make her helicopter fall down there we go we need to work on making the movements smoother so the way we do this is say with animation and this is something that you can use to make the changing of values smoother so if you say with animation anything that happens inside it the numbers will change smoothly over time rather than just jump from value to value and if we change the time work to be one tenth of a second this should happen faster and look like a smooth motion now cool so now we need to also give now we need to make the helicopter go up instead of just fall down so the way we're going to do this is add a gesture to the to the z stack and the gesture is going to be a tap gesture so every time you tap on the screen the helicopter should go up and the way we do this is we say self heli heli positioned that Y minus 50 and we can again play with this but every time you tap the screen now the Y position will go up by 50 and then it will keep falling down as long as you keep tapping it should maintain going up and down so again use with animation to make this movement appear smoother and now the helicopter should look like yep it looks like we have to tap a lot for it to go up so we need to move this to let's say a hundred and now it should be yeah that's that's about fine we can fine-tune all of these settings later but for now this will do perfect so now we need to make the obstacle move as well and we'll follow the exact same strategy here we say hey for the obstacle grabbed a position of self dot up station and on receive for the time use the timer every time you hear from this timer then run the function which we created earlier which was the obstacle movement so self dot up stove run that every time you hear from the timer and now the obstacle should move from right to left there we go it was all very abrupt so let's play around with the animation to make it all look smooth and let's maybe change the value to 20 because it seemed to be moving very fast okay now we're getting somewhere this looks it's getting closer to an actual game but you see you only get the obstacle one so we need to make it so the obstacle returns to the starting point after it exits the screen and the way we do this is with a simple if statement so we say so if the position of the obstacle is greater than zero which means it's on the screen keep doing what we've been doing so far keep moving it to the left but if it's actually not positive if it's a negative position the x coordinate then we need to reset it it means it has exited the screen so we'll reset its position to something like a thousand so that'll move it back to the right and then it will keep coming to the left so the issue we see here is that it actually goes back to the starting point with an animation and we don't want that so get rid of the with animation at the top and let's add it down here in the actual function so we want at going from right to left with an animation and looking smooth but we don't want that on the reset movement we want the reset movement to happen automatically immediately without an animation so we're only going to put the animation here and it's going to look like it's going smoothly from right to left and then resets without a seen yet and so it's perfect there we go this is this is it I hope you enjoy that this is just part one on the next part we'll add things like collision detection and more sophisticated animations and more types of obstacles to make it look like a closer to a real game I hope you enjoy this if you did please click like and subscribe and come back for more videos

Channel: Krass Iankov

Views: 6,030

Keywords: tutorial, code, xcode, swiftui, swift, ui, ios, programming, project, simple, custom, create, view, UIKit, touch, software developer, swift code tutorial, swift app tutorial, random

Id: IJ75xpiozp8

Length: 19min 33sec (1173 seconds)

Published: Fri Jul 10 2020