mercredi 23 octobre 2013

SpriteKit (1/5) : Introduction

This article will introduce to you the basics of SpriteKit, and will focus on the Scene part.

SpriteKit basic parts

SpriteKit is composed of 3 basic parts:

  • Scenes : All the visual elements of your game, like characters, swords, fireballs, ...
  • Actions : Perform animations on the game objects, like scale, rotate, fade, ...
  • Physics : Bring life to your game, with or instead of actions.

A scene is a tree of multiple elements, the nodes (SKNode). Some of the nodes are visual contents, the others are only organization nodes, allowing to group several nodes together in order to apply actions on each of them from one single place. In SpriteKit we can create a scene using the class SKScene (a SKNode subclass). If you want your application to display your scene, you'll have to create a SKView, which is a subclass of UIView or NSView (depending of your platform), and call its presentScene: method.

SpriteKit Game Loop


Each frame three methods are called on your scene object.
- From the update: method you might execute most of your game logic like updating the score, checking if a condition is passed, etc.
- From the didEvaluateActions method all the actions have been applied so you might check your nodes positions to, for instance, check if your character have been hit by a fireball.
- From the didSimulatePhysics method all the physic have been simulated and this is your last opportunity to do anything before the scene is rendered.

SpriteKit Nodes

You understood, you have to add nodes on your scene if you want any content to be displayed. For that, you could use the SKNode method addChild: (remember, your scene is a SKNode subclass). Now that you know how to add it, let's see what you can add. 

  • SKNode : This is the base class of all your visual content. It provides some properties like position, zRotation, xScale, yScale, alpha, ... and some methods for hierarchical manipulation like addChild:, removeFromParent, ... and some to run actions (we will focus on that in the next article). However the SKNode itself has no content but is useful to group nodes.

  • SKSpriteNode : This would be your most used node. It has an explicit size and can be used to display a color or a texture. A texture (SKTexture) represents SpriteKit bitmap data and can be created like an UIImage with the spriteNodeWithImageNamed: method. To top it off, the sprite node offers a way to blend a texture with a color !

  • SKLabelNode : As its name suggests, this is a node that draws a string.

  • SKShapeNode : This node can display a shape defined by a Core Graphics path. Like any good shape, it allows to fill and/or stroke the path, and even to add a glow to the stroked portion of the path.

  • SKVideoNode : This node bring video as a first class sprite. We can then place videos anywhere in the node tree, run actions on it (rotate, scale, fade, ...) and even apply physics properties on it ! You can create a video node using a video file in your bundle, or using a video URL, or for more precise controls using an AVPlayer object. 

  • SKEmitterNode : This is a full featured 2D particle system with standard properties such as position, speed, angle, lifetime, ... For each you can specify the start value and the variance over time. But it also support a keyFrame sequence control for some properties like color.

  • SKCropNode : This node will mask a portion of its children content, but the mask is not computed via an image but via a node. That way we can mask using a shape node, a sprite node, a label node, an emitter node, ... We can also mask using an entire node tree, and even apply actions to the mask node !

  • SKEffectNode : This is a very particular node, it will render all its children into an offscreen image, that image will then be presented to the buffer. This allow to apply opacity or blend mode to a group of nodes. This especially allows to apply Core Image filters to its rendered output !

In the next part of this tutorial we will see the actions, coming soon...

Aucun commentaire:

Enregistrer un commentaire