How to make video Games on IOS

how to make ios games with unity and how to make ios games on windows for free and how to make ios game graphics and how to make ios games on ipad
Dr.KiranArora Profile Pic
Published Date:27-10-2017
Your Website URL(Optional)
Updates on iOS 7 In this chapter, we will find out what's new in iOS 7, starting from new designs, which new APIs and SDKs were presented by Apple with iOS 7, and why you should pick Sprite Kit for game development. Redesigning the iOS The new operating system from Apple features overhauled design in almost every element. All buttons, pickers, labels, navigation bars—everything looks and feels different. The concepts that Apple has chosen are simplicity and minimalism. Apple designers have chosen to get rid of the rich textures and gradients that we grew to love for six versions of their mobile operating system. The new interface is unobtrusive; everything seems to be in its place. Everything that used to draw your attention is now gone, and your content is now in the center of the new design. For example, the following is the screenshot of the iOS 6 calendar followed by its iOS 7 version. The change to "flat" design was met with enthusiasm by some and not so by others, but all we know is that it is here to stay. When you are working on your game, you should probably check out the best practices by Apple designers, as they are thought-out, thoroughly tested, and well implemented. Everything that you need to know about interface design on iOS devices can be found in Human interface guidelines by Apple at library/ios/documentation/userexperience/conceptual/mobilehig/. on iOS 7 On comparing the following two screenshots, you can see the old and new look of the Calendar application. Apple has focused on the user-generated content; you can see that the space for user data is much larger in the iOS 7 version; however, in the old Calendar application, we can see only two lines of our content. The Calendar application in iOS 6 Buttons have transformed into simple lines of text, without any background or frame, while gradients on the navigation and bottom bar are gone and are replaced by the simple gray background. 6 1 The Calendar application on iOS 7 New APIs The new operating system from Apple features numerous new APIs. Some of them are long overdue and expected, and some are quite surprising. Some of them that are worth mentioning are as follows: • Text Kit: This is an API for laying out text and for fine typography. Text Kit helps you lay out text in the way you like without any headache. • Dynamic behaviors for views: With this, you can now assign physics effects to your views so they can follow each other, or gravity effects can be applied to views with ease. • Multitasking enhancements: With this, applications have the ability to fetch data in the background, something that was available only to certain applications such as Newsstand apps. Now, your game can fetch some amount of data while the user is not playing it, such as daily missions or news. 7 on iOS 7 • Sprite Kit framework: This is a new framework for developing 2D games, and features hardware sprites acceleration, simple sound playback support, and physics simulation. • Game controller support: This is a new framework that provides common ground for hardware controllers. Developing games for iOS 7 In June 2013, Apple announced that the App Store has hit the next milestone—50 billion downloads with more than 14 billion dollars paid to developers all over the world. The ecosystem that only started to exist a few years ago already raked in more money for developers than any other platform. A major share of this revenue is taken by game developers, ranging from large companies such as EA, Disney, and Rovio to small indie developers that manage to create best-selling applications with small budgets—everyone can find their place under the sun. The most profitable and most downloaded titles on the App Store are 2D games— Angry Birds, Cut The Rope, and Doodle Jump. Rovio managed to create an empire out of a single title, and now it is selling merchandise, soft drinks, and toys, and all of this came out of a single mobile game (not their first one though, as Angry Birds was their 52nd title). Framework for game development Before iOS 7 (and Sprite Kit), there were various options for frameworks that could be used for game development. Each of them has its own advantages and disadvantages. If you wanted to make a game before iOS 7, you had only so many options. They are as follows: • OpenGL ES • UIKit controls and views • Third-party libraries (Unity, Unreal 3D, and Cocos2d) 8 1 Let us see each of them in detail: • OpenGL is very customizable and open-ended, but it is hard to learn, and you need to know a lot of things just to get an image on screen. It is good if you are an experienced programmer or a company, and you want to write cross-platform solutions. OpenGL offers good performance, but you have to pay with code complexity. • Next up is UIKit, which is the default iOS programming framework. Every element that you see in a regular iOS application, such as buttons, pickers, views, and navigation bars, comes from here. But there are only so many games that can look good with the default interface—some trivia games, maybe some manager games, but that's it. There are benefits to this—your user already knows everything he can do with the interface, gesture controls, and back buttons, and this makes it easier to actually present your idea, but at the same time, UIKit fails to immerse your user into the game; you get the same interface as almost every other application in the App Store. Another big problem with UIKit is performance, or the lack of it. After all, it was not designed for dynamic games, and if you decide to make something complicated in it, you will find the bottleneck pretty fast. • Another option to consider is third-party libraries. There are dozens of them, and few are very popular among the developers. Unity3D is good, as it offers a cross-platform solution as well as massive numbers of tutorials. The same can be said about Unreal 3D. But these libraries often require you to know completely different programming languages such as C, C++, or even Lua. It might not be a good choice if you know Objective-C and want to write native applications for the platform, not to mention that the level of complexity of these frameworks is high. You need to learn a lot just before you can have simple sprites moving on screen. • Another option that you have is the Cocos2d framework. It is somewhat easy, can get you going fast, is open source, and works with Objective-C. But as with any third-party library, it has its disadvantages. It does not support ARC out of the box. It has problems when Apple releases new versions of iOS—so far, every OS release had left Cocos2d code broken in one way or another. You could have the rotation feature stop working altogether, or suddenly some methods may fail to compile with errors. This doesn't really work if all you want is a simple framework for your games. 9 on iOS 7 Knowing about Sprite Kit Apple presented iOS 7 in September 2013, featuring numerous new features for users and developers. One of them is Sprite Kit—a new framework for game developers. Sprite Kit is a native SDK from Apple that allows simple entry into game development, without unnecessary overhead and a long learning process. If you are familiar with Cocos2d, you will have an easy time with Sprite Kit, as it is heavily inspired by the former. Sprite Kit provides native rendering and animation infrastructure to work with sprites as well as animations, particle systems, scenes, actions, physics simulation, and video effects. A sprite is a two-dimensional image or animation integrated into a larger scene. Any image can be a sprite—a character, a tree, or a bullet. It allows easy work with sprites, the core component of all 2D games. Almost everything you can see on the screen of a 2D game is a sprite. Benefits of Sprite Kit Sprite Kit has certain advantages that will help you determine if you want to base your game on it. They are as follows: • Sprite Kit is part of the iOS SDK: This means that it will be supported by Apple, and everything you write is likely to be future-proof. Your code will not magically stop working (or even compiling), and things you are getting on screen are guaranteed to stay the same. Everyone who works with third-party libraries is aware of the issues that come with using a non-native SDK. With Sprite Kit, you can forget about installation problems and compatibility problems. • Easy-to-use API: This is developed by some of the best engineers in the world. Everything is logical and works as expected. Clear methods and properties work just as you would expect them to. • Built-in tools: With this, you no longer have to use third-party software to make your texture atlases, assets, or fonts. You just drop in your images and Xcode does everything for you. • Built-in physics engine: This makes your life as a developer much easier. You do not have to pick out one of the third-party physics engines or work on integration of that code into your project—it just works out of the box. 10 L1 Chapter 1 • Your game will work both on iOS and Mac without much effort: Sprite Kit supports both Mac and iOS, and all you need to change is controls. You will have touch controls for your iPhone and iPad versions and the mouse and keyboard controls for Mac. Game controller support One of the most interesting features of iOS 7 is the native controller support. Some companies such as iCade and others tried working on their own controllers, but this effort has not seen much success. Surely, some games supported it, but the majority of games were left unsupported. Developers did not feel the need to support such devices, as their install base is small, and return on investment was just not available. But everything changed when Apple decided to roll out support for such controllers. Now we have a native API to work with controllers and all future controllers by different vendors that will work with this API. In the following diagram, you can see an Apple-proposed design for one of the game controllers. As you can see, it offers all the features of a modern controller—two thumb sticks, shoulder buttons, and LEDs. L2 shoulder button/trigger R2 shoulder button/trigger LED array L1 shoulder button R1 shoulder button Y X B A Joysticks Game controller for iOS 7 11 R2 R1Updates on iOS 7 There have been rumors that vendors such as Logitech are already working on such controllers, and you as a developer should probably work on implementing them in your game, as the effort required to make them work is really small, and the satisfaction that your player gets when the game works with his controller is enormous. The new Game Controller framework allows discovering and connecting compatible game controllers to your iOS device. Game center renovations Game center have several new features that will help you with your games. Some of them have been listed as follows: • Increased limit of leaderboards per application: Now you can have up to 100 leaderboards in your game. • New feature—exchanges: This allows your turn-based player to initialize actions even if it is not their turn. Previously, you had to wait for your turn to even chat, and now you can do that on other players' turns if the game supports that. • Improved features to prevent cheating: Cheating, obviously, is never good, especially if your game is competitive and has leaderboards. We all know how such games are infested with hackers, and these new features will certainly help with that. Summary In this chapter, we have learned what new exciting features and APIs iOS 7 has to offer us. We have found out what Sprite Kit is and why we should use it for game development and its advantages. We have found out that Apple unified game controllers, and new ones will be available shortly. If you are reading this book, chances are that you are planning to make games for iOS, and Sprite Kit is an excellent choice. In the next chapter, we will start working on our first Sprite Kit project, a fully featured endless runner game. 12 First Sprite Kit Project In this chapter, we will look into Sprite Kit basics. Sprite Kit consists of a lot of small elements and we need to have a clear understanding of what they do to have an overview of a typical Sprite Kit project to see how we might plan and implement a full-featured game. We will explore everything that we might need when creating our own project, as the main goal of the book is to provide an understanding of Sprite Kit as a tool for game development. We will start with the project that we will be creating in this book—an endless runner game. This style of game is really popular on mobile devices, as it allows for quick gameplay when you get a minute and has this "just one more" feeling to it. A player wants to beat/better his own score, maybe even beat his friend's scores. Our game will feature jumping and you will want to evade dangerous things that may appear on screen. You get a higher score the longer you run without failing. First Sprite Kit Project Sprite Kit basics First of all, we need to create a basic project from the template to see how everything works from the inside. Create a new project in Xcode by navigating to File New Project. Choose SpriteKit Game after navigating to iOS Application, as shown in the following screenshot: Creating a Sprite Kit project On the next screen, enter the following details: • Product Name: Endless Runner. • Organization name: Enter your name. • Company Identifier : This is a unique Identifier that identifies you as a developer. The value should be similar to what you entered while registering your Apple developer account or com.your_domain_name. 14 2 • Class Prefix : This is used to prefix your classes due to poor Objective-C namespace. People often ignore this (it makes sense when you make small projects, but if you use any third-party libraries or want to follow best practices, use three-lettered prefixes). We will use ERG (denoting Endless Runner Game) for this. Apple reserves using two-lettered prefixes for internal use. • Devices: We are making the game for iPhones, so ensure iPhone is selected. Now, save the project and click on Create. Once you have created the project, build and run it by clicking on the play button at the top-left corner of the window. You will see the Hello, World label at the center of the screen, and if you tap the screen, you will get a rotating spaceship at that point. At the bottom-right corner of the screen, you can see the current FPS (frames per second) and number of nodes in the scene. Anatomy of a Sprite Kit project A Sprite Kit project consists of things usual to any iOS project. It has the AppDelegate, Storyboard, and ViewController classes. It has the usual structure of any iOS application. However, there are differences in ViewController.view, which has the SKView class in Storyboard. You will handle everything that is related to Sprite Kit in SKView. This class will render your gameplay elements such as sprites, nodes, backgrounds, and everything else. You can't draw Sprite Kit elements on other views. It's important to understand that Sprite Kit introduces its own coordinate system. In UIkit, the origin (0,0) is located at the top-left corner, whereas Sprite Kit locates the origin at the bottom-left corner. The reason why this is important to understand is because of the fact that all elements will be positioned relative to the new coordinate system. This system originates from OpenGL, which Sprite Kit uses in implementation. 15 First Sprite Kit Project Scenes An object where you place all of your other objects is the SKScene object. It represents a single collection of objects such as a level in your game. It is like a canvas where you position your Sprite Kit elements. Only one scene at a time is present on SKView. A view knows how to transition between scenes and you can have nice animated transitions. You may have one scene for menus, one for the gameplay scene, and another for the scene that features after the game ends. If you open your ViewController.m file, you will see how the SKScene object is created in the viewDidLoad method. Each SKView should have a scene, as all other objects are added to it. The scene and its object form the node tree, which is a hierarchy of all nodes present in the scene. Open the ERGMyScene.m file. Here, you can find the method where scene initialization and setup take place: - (id)initWithSize:(CGSize)size The scene holds the view hierarchy of its nodes and draws all of them. Nodes are very much like UIViews; you can add nodes as children to other nodes, and the parent node will apply its effects to all of its children, effects such as rotation or scaling, which makes working with complex nodes so much easier. Each node has a position property that is represented by CGPoint in scene coordinates, which is used to set coordinates of the node. Changing this position property also changes the node's position on the screen. After you have created a node and set its position, you need to add it to your scene node hierarchy. You can add it either to the scene or to any existing node by calling the addChild: method. You can see this in your test project with the following line: self addChild:myLabel; After the node has been added to a visible node or scene, it will be drawn by the scene in the next iteration of the run loop. Nodes The methods that create SKLabelNode are self-explanatory and it is used to represent text in a scene. The main building block of every scene is SKNode. Most things you can see on the screen of any given Sprite Kit game is probably a result of SKNode. 16 2 Node types There are different node types that serve different purposes: • SKNode: This is a parent class for different types of nodes • SKSpriteNode: This is a node that draws textured sprites • SKLabelNode: This is a node that displays text • SKShapeNode: This is a node that renders a shape based on a Core Graphics path • SKEmitterNode: This is a node that creates and renders particles • SKEffectNode: This is a node that applies a Core Image filter to its children Each of them has their own initializer methods—you create one, add it to your scene, and it does the job it was assigned to do. Some node properties and methods that you might find useful are: • position: This is a CGPoint representing the position of a node in its parent coordinate system. • zPosition: This is a CGFloat that represents the position of a node on an imaginary Z axis. Nodes with higher zPosition will be over the nodes that have lower zPosition. If nodes have the same zPosition, the ones that were created later will appear on top of those that were created before. • xScale and yScale: This is a CGFloat that allows you to change the size of any node. The default is 1.0 and setting it to any other value will change the sprite size. It is not recommended, but if you have an image of a certain resolution, scaling it will upscale the image and it will look distorted. Making nodes smaller can lead to other visual artifacts. But if you need quick and easy ways to change the size of your nodes, this property is there. • name: This is the name of the node that is used to locate it in the node hierarchy. This allows you to be flexible in your scenes as you no longer need to store pointers to your nodes, and also saves you a lot of headache. • childNodeWithName:(NSString )name: This finds a child node with the specified name. If there are many nodes with the same name, the first one is returned. • enumerateChildNodesWithName:usingBlock:: This allows you to run custom code on your nodes. This method is heavily used throughout any Sprite Kit game and can be used for movement, state changing, and other tasks. 17 First Sprite Kit Project Actions Actions are one of the ways to add life to your game and make things interactive. Actions allow you to perform different things such as moving, rotating, or scaling nodes, playing sounds, and even running your custom code. When the scene processes its nodes, actions that are linked to these nodes are executed. To create a node, you run a class method on an action that you need, set its properties, and call the runAction: method on your node with action as a parameter. You may find some actions in the touchesBegan: method in ERGMyScene.m. In this method, you can see that a new node (of the type SKSpriteNode) is created, and then a new action is created and attached to it. This action is embedded into another action that makes it repeat forever, and then a sprite runs the action and you see a rotating sprite on the screen. To complete the preceding process, it took only five lines, and it is very intuitive. This is one of the Sprite Kit strengths—simplicity and self-documenting code. As you might have noticed, Apple names methods in a simpler way so that you can understand what it does just by reading the method. Try to adhere to the same practice and name your variables and methods so that their function can be understood immediately. Avoid naming objects a or b, use characterSprite or enemyEmitter instead. There are different action types; here we will list some that you may need in your first project: • Move actions (moveTo:duration:, moveBy, followPath) are actions that move the node by a specified distance in points • Rotate actions are actions that rotate your nodes by a certain angle (rotateByAngle:duration:) • Actions that change node scale over time (scaleBy:duration) • Actions that combine other actions (sequence: to play actions one after another, and repeatAction: to play an action a certain amount of times or forever) SKAction There are many other actions and you might look up the class reference if you want to learn more about actions. 18 2 Game loop Unlike UIKit, which is based on events and waits for user input before performing any drawing or interactions, Sprite Kit evaluates all nodes, their interactions, and physics as fast as it can (capped at 60 times per second) and produces results on screen. In the following figure, you can see the way a game loop operates: update: Evaluating actions Simulating physics Rendering scene The update loop First, the scene calls the update:(CFTimeInterval)currentTime method and sends it the time at which this method was invoked. The usual practice is to save the time of the last update and calculate the time that it took from the last update (delta) to the current update to move sprites by a given number of points, by multiplying the velocity of a sprite by delta, so you will get the same movement regardless of FPS. For example, if you want a sprite to move 100 pixels every second, regardless of your game performance, you multiply delta by 100. This way, if it took long to process the scene, your sprite will move slightly further for this frame; if it is processed fast, it will move just a short distance. Either way you get expected results without complex calculations. After the update is done, the scene evaluates actions, simulates physics, and renders itself on screen. This process repeats itself as soon as it's finished. This allows for smooth movement and interactions. You will write the most essential code in the update: method, since it is getting called many times per second and everything on screen happens with the code we write in this method. You will usually iterate over all objects in your scene and dispatch some job for each to do, such as character moving and bullets disappearing off screen. The update: method is not used in a template project, but it is there if you want to customize it. Let's see how we can use it to move the Hello, World label off the screen. First, find where the label is created in the scene init method, and find this line: myLabel.text = "Hello, World"; 19 First Sprite Kit Project Add this code right after it: = "theLabel"; Find the update: method; it looks like this: - (void)update:(CFTimeInterval)currentTime Insert the following code into it: self enumerateChildNodesWithName:"theLabel" usingBlock:(SKNode node, BOOL stop) node.position = CGPointMake(node.position.x - 2, node. position.y); if (node.position.x - node.frame.size.width) node.position = CGPointMake(self.frame.size.width, node. position.y); ; This method first finds the child node with the name "theLabel", and as we named our label the same, it finds it and gives control to the block inside. The child that it found is a node. If it finds other nodes with the name " theLabel", it will call the same block on all of them in the order they were found. Inside the block, we change the label position by 2 pixels to the left, keeping the vertical position the same. Then, we do a check, if the position of the label from the left border of the screen is further than the length of the label, we move the label to the right-hand side of the screen. This way, we create a seamless movement that should appear to be coming out of the right-hand side as soon as the label moves off screen. But if you run the project again, you will notice that the label does not disappear. The label takes a bit longer to disappear and blinks on screen instead of moving gracefully. 20 2 There are two problems with our code. The first issue is that the frame is not changing when you rotate the screen, it stays the same even if you rotate the screen. This happens because the scene size is incorrectly calculated at startup. But we will fix that using the following steps: 1. Locate the Endless Runner project root label in the left pane with our files. It says Endless Runner, 2 targets, iOS SDK 7.0. Select it and select the General pane on the main screen. There, find the device orientation and the checkboxes near it. Remove everything but Landscape Left and Landscape Right. We will be making our game in landscape and we don't need the Portrait mode. 2. Next, locate your ERGViewController.m file. Find the viewDidLoad method. Copy everything after the super viewDidLoad call. 3. Make a new method and add the following code: - (void) viewWillLayoutSubviews // Configure the view. super viewWillLayoutSubviews; SKView skView = (SKView )self.view; skView.showsFPS = YES; skView.showsNodeCount = YES; // Create and configure the scene. SKScene scene = ERGMyScene sceneWithSize:skView.bounds. size; scene.scaleMode = SKSceneScaleModeAspectFill; // Present the scene. skView presentScene:scene; 4. Let's see why calculations of frame size are incorrect by default. When the view has finished its load, the viewDidLoad method is getting called, but the view still doesn't have the correct frame. It is only set to the correct dimensions sometime later and it returns a portrait frame before that time. We fix this issue by setting up the scene after we get the correct frame. 21 First Sprite Kit Project The second problem is the anchoring of the nodes. Unlike UIViews, which are placed on screen using their top-left corner coordinates, SKNodes are getting placed on the screen based on their anchorPoint property. The following figure explains what anchor points are. By default, the anchor point is set at (0.5, 0.5), which means that the sprite position is its center point. This comes in handy when you need to rotate the sprite, as this way it rotates around its center axis. 0,1 1,1 0.5,0.5 0,0 1,0 Anchor point positions Imagine that the square in the preceding figure is your sprite. Different anchor points mean that you use these points as the position of the sprite. The anchor point at (0, 0) means that the left-bottom corner of our sprite will be on the position of the sprite itself. If it is at (0.5, 0.5), the center of the sprite will be on the position point. Anchor points go from 0 to 1 and represent the size of the sprite. So, if you make your anchor point (0.5, 0.5), it will be exactly on sprite center. We might want to use the (0,0) anchor point for our text label. The problem is that we can't set an anchor point for SKLabelNode. There are several ways to overcome this problem, such as adding an empty SKSpriteNode, attaching SKLabelNode to it, and setting the anchor point of the first node to (0,0). We will leave this as an exerc ise for you. Adding a background image to our game First we need to add the background file to our project. Xcode 5 offers new ways to handle your assets. Find background.png in resource files for this chapter. Find images.xcassets in the project navigator on the left-hand side of the screen. Click on it and you will see a list of resources currently in your application. Drag-and-drop background.png into the left-hand list near Appicon and LaunchImage. Background will be added to the list of available resources. Select it and drag it from the 1x box to the 2x box, as this is a high-resolution image to use on retina devices. 22 2 Next, we should utilize this image somehow. The first thing that comes to mind is to make SKSpriteNode out of the image and move it in the update: method. Sounds good, but if we add everything into the scene, it will be too bloated and unmanageable. Let's make a separate class file that will handle background images for us: 1. We will need some place to store all our constants and variables that we might need throughout our game. Common header file looks like a good place to store them. Navigate to File New File, click on C and C++ on the left-hand side under the iOS category and select Header File there. Name it Common.h. 2. Locate the file Endless Runner-Prefix.pch. The contents of this file are added to every source file in our project. Add the import "Common.h" line right after Foundation.h. This way, our header file will be automatically imported into everything. You can find this file inside the Supporting Files folder in the list of project files on the left-hand side of the Xcode window. 23 First Sprite Kit Project 3. Add the name of our background node, static NSString backgroundName = "background"; to the Common.h file so we can reference it from anywhere. 4. Again, create a new file, an Objective-C class, name it ERGBackground, and set SKSpriteNode as its parent class when asked. We will be handling everything background related in the ERGBackground class. Let's make the class method return the preset background so we can use it in our game. Add this method to the implementation file and its prototype to the header file: + (ERGBackground )generateNewBackground ERGBackground background = ERGBackground alloc initWithImageNamed:"background.png"; background.anchorPoint = CGPointMake(0, 0); = backgroundName; background.position = CGPointMake(0, 0); return background; This method starts by creating a new background node from the file that we have added before. We set the anchor point to (0,0) to help with scrolling. This way, the position of the node will be at the left-bottom corner of the image so that we don't have to calculate the starting position of the node. By default, the anchor point is (0.5,0.5), and if we want to set two sprites back-to-back, we have to calculate halves of those nodes. If we use (0,0) as the anchor point, we just add a new sprite on the position where the last sprite ended and that's it. Why did we assign static NSString as the name of the background and not just type some arbitrary string? Compilers offer no error handling for the names of files or names, so you can miss small mistakes in filenames, and this mistake won't be easy to find. By using static NSString, we let compilers handle errors for us. Next is the node position on screen—we want it to start from the left edge of screen, so we set it there. After we have created the background, we need to use it somewhere. In the ERGMyScene.m file, import ERGBackground.h, and inside the header file, add the class ERGBackground line before the interface declaration, and also add a new property: property (strong, nonatomic) ERGBackground currentBackground 24

Advise: Why You Wasting Money in Costly SEO Tools, Use World's Best Free SEO Tool Ubersuggest.