 Yeah, so I will start with introducing myself. I'm an Avisu engineer working at Wanda. It's going to start up. So recently I built a game using SpriteKit and 3D Touch technology. So just going to share with you guys about that. And following up with my colleague Tim, he did some cool animations using CreeFrames. So yeah, we're going to talk about SKView, SpriteKitView, SpriteKitScene, then update methods, then SKAction, just the basics of SpriteKit. By the way, how many of you worked on SpriteKit actually? So only? Okay. So I guess I can ask Subha again. Okay. So basically SKView is the subclass of the UIView, which shows the content, whatever content inside the SpriteKit object for that particular view. And also update the frame with the current time. And it also manages the transition between the scenes. Then scene, you can think of scene as a movie scene, like where actor comes and go for that particular scene. And in terms of programming and in terms of gaming, it actually globally characterized for the physics simulation for the SK physics bodies. Then how SpriteKit actually update the frames. So you all know that Apple has this golden standard of updating frames at 60 frames per second, right? So the frame rate is actually 1 by 60, which is like 16.67 milliseconds. So SpriteKit update renders every frame with this update method. So whenever you update your scene, this method update with current time is called, and whatever you want to change in your view, you can do in this method. But let's say your game is paused for a moment or let's say you put the app in a background, then the SpriteKit current time is actually running, is still running, because it always takes the current time. So in that case, let's say you again open your app, you won't get the frame rate same as when you pause your game because now the time elapsed. So in that case, what is SpriteKit does it, like noise SpriteKit, what we should do is take the frame rate, take the time back to the moment where we pause, which we can calculate by like taking the time difference between two frames, which is like 1 by 60, and we can check if the time since last update is greater than 1, then we can change our time since last update to 1 by 60, which is like frame rate and pass it to our last update time interval instance and then update the SpriteKit, update the scene. So we will see that in the code. Later I'm going to show you the code for that as well. Yeah, so basically we do this for like avoiding the frame rate drops and all. Let's say there's a spaceship in your view, there's a spaceship and let's say you touch on some point, you are building a game where you move the spaceship whenever you touch on the screen. So when you touch on the screen, your spaceship move from that point to the touch point. So in that case, you won't see the jumping of the spaceship if you do correct calculation in this update methods. So ASCII action is actually used for the deterministic calculations or actions. Let's say you want to move with constant velocity from point A to point B then you can generally use with ASCII action. It's pretty easy to use. For physics bodies, so every object in a SpriteKit view is defined as a node. So let's say your button is defined as a node in a SpriteKit and it has a texture property. You can set an image of that. So for graphically design, all the complex images is difficult actually. So people just use the rectangular square object and then put an image to it. So let's say your image is circular, but your button is square like 30 by 30. So in this case, let's say you have two buttons and you want to define the collision between them. But you can't define because the image is circular and the edges are like square or rectangular, whatever is your physics body is. So in this case, how you define the physics body around that object is by the frame of that button itself. Let's say the button is 30 by 30. So you go by 30 by 30. Otherwise, you can do calculation for complex graphics. Let's say it's a circular ball of radius 30 or something. So you can define your physics body same as radius of 30, but that's going to be a complex. So we have two kinds of physics body here, volume-based bodies and edge-based bodies. So edge-based bodies are basically, let's say you define a flow in your game or let's say tiles view. All these are considered as edge-based bodies. So edge-based bodies are like they never interact with another edge-based body. Even if you make a contact with them, they never collide or they don't follow the physics rules. But for volume-based bodies, they actually, if you set the is dynamic property to true for them, they do follow all the physics rules like gravity, friction, collisions and impulses as well. Let's talk about the geometry of a sprite kit. So you know that in our UI kit, the X and Y coordinates start from the top left corner of the device which is like 0 by 0 and then you do your calculation wherever you want to place the frame. But in the sprite key geometry, it follows the convention mathematical graph which is like from the bottom left corner. So whatever calculation you do, you do from that point of view. So let's jump into the code. I can show you guys the game inside. So let's start from the game view controller. So here basically we add our SK scene, a sprite kit view. So from the basic start, when you create a project, you just select the project. I can show you guys. Let's say you want to create a new project. So you select game, the next, and you can name it. It will create a game for you with SK scenes as well. So here basically we define, we always put our game view inside a view controller. So our SK view always lies inside the view controller. So you can define is the top view actually a class of SK view. Then you can present the scene by using its file name and you can set its properties. A few things to note here, you can define the scale for the scene to aspect field to cover the full screen. Also, you can choose to show the frame per second and shows the node count, how fast your frames are displaying per second and how many nodes in that particular frame are displaying in a view. This is how you represent actually a game scene, which is very simple. Let's take more into this. So this is our game scene. So this is your first matter, which is going to be called when you move from your UI view to SK view. So what actually I am doing in this matter is I am setting up all the nodes, which I have defined in my game scene. This is like a UI. You can program quickly code it and also define it here and give a reference in the SK scene class. So I am defining my nodes here and also defining the physics words for them. So the gravity and the content, I am also confirming this class with the protocol of SK physics contact because I want to implement the matter when two physics bodies come in contact. I am also using the emitter particle, which you can use a sprite particle file. So Apple gives you few choices of particles like magic rain, smoke. So the one I have used is smoke, which is in my emitter folder. So this is the one I am using. You can define the properties here. With what rate your particle should emit and what angle it should emit, you can simply define the properties here. It's pretty easy to use. Let's go back to game scene. So this is how I add emitter particle for my two. I can show you here. So if you see this, this is how I added the smoke particles to the players. So actually this game is based on 3D touch. So I made this game for a particular target audience of 6s and 7s. But to just make it work, I just use a slider for iPhone 5 or 6 users. Now let's get to these touch methods, which is practically provides the same low level touch methods as your UI kit does. So you can start with touch begin method, which will be called whenever you start touching the screen, the view. So the 3D touch part. So what do you guys think? How many lines of code to be used for 3D touch? Just a guess. That's true. So it's just one line of code, which is like maximum possible force of touch, which you can see is only available for the 3D touch or Apple pencil. So 3D touch is the feature of Apple iPhone 7 and 6s, when you force touch. So the maximum force touch. So as you can see in the documentation, it's only available for 3D touch devices. Or you have an Apple and a pencil. So how does this logic works here? Whenever a user applies the maximum force, you normalize the force. I can show you on the screen. When I press harder, the box got split. And when I press very gently, then it comes closer. So it's all because of the force, which I am applying on the screen. And by normalizing it, I just take the value from 0 to 1. So I can define the position of my player 1 and player 2. So in the game, if you see, you will feel that the particles are going up. But in reality, they are just there. And it's just the illusion of the obstacles coming down, making you think they are going up. So this is just the basic logic for 3D touch I have used here. Then these are the general touch methods, like different events, what I want to do when the user ended the touch from the screen. So the thing I was talking about, to update the time. So this method is really important, because let's say you are updating your frame. Because this method is called whenever your frame is updated, and next frame is get rendered. So here what I do is, I check every time, like my current time, and the last updated time for the frame is, if it's greater than 1, then I put the value for time since last update to 1 by 60. And it again starts from the very point where I left. So it doesn't get a frame drop here. That's pretty much about the game scene. And the elements, the one you see, how I use on the screens, is like how I add the player. So the player 1 is simply a node I use with the image, and I defined his physics body. So the isDynamic property for player 1 and player 2 is false. They are not affected by the physics in your scene, like the gravity, the friction. That's why they are always at the same positions, just moving horizontally, that's it. And the category bit mass. So the category bit mass is actually, for every physics body in a game scene, you can define up to maximum 32 categories. And so for this one, I defined as a player category. So both belong to the player category. And when I add an obstacle, so I defined them as an obstacle category. And collision, I didn't use the collision bit mass, but you guys can use the collision bit mass to check whether these particles collide with the same category of collision bit mass. For this one, I use the contact test bit mass. Whenever your particles come in contact with the obstacles, it will call the method, which we actually confirm the protocol to physics, physics delegate protocol, sorry. It will call the method did contact, and you can implement whenever these two things are, these two things come in contact. So this is the contact test bit mass I defined for players. Like they can come to contact with obstacles or gems. Gems are like the coins I collect in the game. So this is the method where I add my obstacles, the rectangular blocks coming down. They are dynamic because they confirms to the gravity physics in the scene. The jack position here defines like they will always be behind the scene. Let's say, I mean, your jack coordinate is always like perpendicular to your device. So defining in minus one will keep always them in the behind every other nodes. So these are just the random nodes I defined like a small, medium and large. So whenever I get a random number, I check the type according to the random number and I just display them on the view. So SK action, we talked about SK action for the constant velocity objects. So here I am using the SK action to move obstacles from top to bottom. So as you see, like the coordinate for sprite key start from bottom left corner, 0 by 0. So here I defined as the negative of height and I give a duration of three seconds. Like it will travel a distance in three seconds and the new obstacle will come. And sprite key is quite good about managing the memory. But still you need to remove the nodes which are not displaying on your SK view. So we need to append a method, remove from parent and run this for every obstacle object. Node actually. This is how I add the gem randomly. The gems are randomly placed between the obstacles. So if you see, so these gems are randomly placed around your obstacles or between the obstacles to collect. Similarly, I add the movements for gem which will be same as the obstacle movement. This method is simply to add a row. How? I want to add a row. My one row defines how many numbers of obstacles and what type of obstacle I can have. So I just simply check the row type and according to my random number I just add number of gems and number of obstacles in a row. That's pretty much about it. Yeah, I guess so. So yeah, this is how like a simple game you can build using a sprite kit which is quite easy to use. Okay, any questions? Yeah. What is your highest score? My highest score is 175. So actually I have put on my app store that earlier I put like whoever can cross 300 can win some amount of prize. But one of my friend he crossed actually so I remove that bounty and place it to whoever crossed 300 I will remove ads for them. Yeah. So that's about it. You can download the game from app store is already available called split up and up. Well, yeah, because I just want to build it like fast. So I just did this app in like three days. So I just use a storyboard. So you want to game use them? No, storyboard is actually for game view controller because you can present your game scene with game view controller, right? So I do some pause scene. Let's say, okay, I can show you on the app. So when I hold, so I show this pause screen on my game view controller. So, yeah, but this is by code. So yeah, that's why, yeah. Do you write text? Well, there's no text for game right? No, I mean there are, but I didn't write any. Okay. So any questions guys? Okay. When you create this game, right? Yeah. Do you read up on some game theory or something? Because there are some game theories that you introduce in your slide. Like update function, the collision. Oh, yeah. I mean definitely I went through some tutorials and I saw a few examples on GitHub. So I got basic idea from there. And yeah, because this app is quite simple to build. And if you, if you want to start with Spark it, you will feel yourself like it is quite easy to catch up on. Using that collision bitmarks. Yeah. Yeah. So this is the method actually did begin contact. So which is defined for two physics bodies coming in contact. So you can see if my contact body be whatever name you define in your game scene from your UI editor. Let's say, okay. This one I define here obstacle. The name is for this kind of object. I define name as obstacle. So yeah, I check if the body is obstacle, then just show game over screen. Yeah. And if it's game, then add at the score. Yeah, that's simple logic. Yeah. In any shape or does it be, is it only standard square or a typical shape? So yeah, what I said earlier about collision is like, let's say you have a complex shape images. So generally it's quite hard to define collision between them because the shape can be like anything in a 2D space. So what for our convenience we do is like for that, let's say that image is of like in a frame of 20 by 30. Sorry. So you can define your physics body 20 by 30. So you can check that any other objects comes in that frame, not just touch that image, but comes in that frame. And you will consider it as a contact or collision. So this is how generally physics bodies are defined. Yeah. Okay. I guess that's it. Okay. So you mentioned that for your game, whenever the object goes out of view, you throw it away. Yeah. So here in the game element, I added a movement to the obstacles and gem as well. Like movements of actions array. First is like move from point x to the white, which is like negative height, like from the top to bottom. And then I append an action, which is like remove from parent to this obstacle. So when I run this obstacle, the run action is actually a sequence of actions like first because in an array it always takes from object one to two. So my first action was to move it from zero to the bottom part and the second action was to remove from parent when it's like going out of the screen. So yeah, that's why I run this sequence of actions. Yeah. So this is just x, y, z, x. For this factory, actually, basics is basically for 2D, Apple has seen kit or metal framework for 3D gaming. So you can use that. Yeah. Thank you.