![\"update_loop_2x\"](\"\/xcode\/wp-content\/uploads\/2014\/10\/update_loop_2x.png\")
![\"TIM.Briques.01\"](\"\/xcode\/wp-content\/uploads\/2014\/10\/TIM.Briques.01.png\")
<\/a>![\"TIM.Briques.02\"](\"\/xcode\/wp-content\/uploads\/2014\/10\/TIM.Briques.02.png\")
<\/a>![\"TIM.Briques.03\"](\"\/xcode\/wp-content\/uploads\/2014\/10\/TIM.Briques.03.png\")
<\/a>![\"tim.briques.04\"](\"\/xcode\/wp-content\/uploads\/2014\/10\/tim.briques.04.png\")
- \n
- Scenes (
SKScene<\/a><\/code>\u00a0objects) are used to provide content to be rendered by an\u00a0SKView<\/a><\/code>\u00a0object.<\/li>\n- A scene\u2019s content is created as a tree of node objects. The scene is the root node.<\/li>\n
- When presented by a view, a scene runs actions and simulates physics, then renders the node tree.<\/li>\n
- You create custom scenes by subclassing the\u00a0
SKScene<\/a><\/code>\u00a0class.<\/li>\n<\/ul>\nWith those basic concepts in mind, it is time to learn more about the node tree and building your scenes.<\/p>\n
<\/a><\/p>\n A Node Provides a Coordinate System to Its Children<\/h2>\n
When a node is placed in the node tree, its\u00a0
position<\/a><\/code>\u00a0property places it within a coordinate system provided by its parent. Sprite Kit uses the same coordinate system on both iOS and OS X.\u00a0Figure 4-1<\/span>\u00a0shows the Sprite Kit coordinate system. Coordinate values are measured in points, as in UIKit or AppKit; where necessary, points are converted to pixels when the scene is rendered. A positive x coordinate goes to the right and a positive y coordinate goes up the screen.<\/p>\n<\/a> Figure 4-1<\/span>\u00a0\u00a0Sprite Kit coordinate system<\/figcaption> ![\"\"](\"https:\/\/developer.apple.com\/library\/ios\/documentation\/GraphicsAnimation\/Conceptual\/SpriteKit_PG\/Art\/cartesian_coords_2x.png\")
<\/figure>\nSprite Kit also has a standard rotation convention.\u00a0Figure 4-2<\/span>\u00a0shows the polar coordinate convention. An angle of\u00a0
0<\/code>\u00a0radians specifies the positive x axis. A positive angle is in the counterclockwise direction.
\n <\/p>\n<\/a> Figure 4-2<\/span>\u00a0\u00a0Polar coordinate conventions (rotation)<\/figcaption> ![\"\"](\"https:\/\/developer.apple.com\/library\/ios\/documentation\/GraphicsAnimation\/Conceptual\/SpriteKit_PG\/Art\/polar_coords_2x.png\")
<\/figure>\nWhen you are working only with Sprite Kit code, a consistent coordinate system means that you can easily share code between an iOS and OS X version of your game. However, it does mean that when you write OS-specific user interface code, you may need to convert between the operating system\u2019s view coordinate conventions and Sprite Kit\u2019s coordinate system. This is most often the case when working with iOS views, which use a different coordinate convention.
\n
\n<\/section>\n<\/a><\/p>\n Only Some Nodes Contain Content<\/h2>\n
Not all nodes draw content. For example, the\u00a0
SKSpriteNode<\/a><\/code>\u00a0class draws a sprite, but the\u00a0SKNode<\/a><\/code>\u00a0class doesn\u2019t draw anything. You can tell whether a particular node object draws content by reading its\u00a0frame<\/a><\/code>\u00a0property. The frame is the visible area of the parent\u2019s coordinate system that the node draws into. If the node draws content, this frame has a nonzero size. For a scene, the frame always reflects the visible portion of the scene\u2019s coordinate space.
\nIf a node has descendants that draw content, it is possible for a node\u2019s subtree to provide content even though it doesn\u2019t provide any content itself. You can call a node\u2019s\u00a0calculateAccumulatedFrame<\/a><\/code>\u00a0method to retrieve a rectangle that includes the entire area that a node and all of its descendants draw into.
\n<\/section>\n<\/a><\/p>\n Creating a Scene<\/h2>\n
A scene is presented by a view. The scene includes properties that define where the scene\u2019s origin is positioned and the size of the scene. If the scene does not match the view\u2019s size, you can also define how the scene is scaled to fit in the view.<\/p>\n
<\/a><\/p>\n A Scene\u2019s Size Defines Its Visible Area<\/h3>\n
When a scene is first initialized, its\u00a0
size<\/a><\/code>\u00a0property is configured by the designated initializer. The size of the scene specifies the size of the visible portion of the scene in points. This is only used to specify the visible portion of the scene. Nodes in the tree can be positioned outside of this area; those nodes are still processed by the scene, but are ignored by the renderer.
\n<\/section>\n<\/a><\/p>\n Using the Anchor Point to Position the Scene\u2019s Coordinate System in the View<\/h3>\n
By default, a scene\u2019s origin is placed in the lower-left corner of the view, as shown in\u00a0Figure 4-3<\/span>. So, a scene is initialized with a height of\u00a0
1024<\/code>\u00a0and a width of\u00a0768<\/code>, has the origin\u00a0(0,0)<\/code>\u00a0in the lower-left corner, and the\u00a0(1024,768)<\/code>\u00a0coordinate in the upper-right corner. The\u00a0frame<\/code>\u00a0property holds\u00a0(0,0)-(1024,768)<\/code>.
\nA scene\u2019s\u00a0position<\/a><\/code>\u00a0property is ignored by Scene Kit because the scene is always the root node for a node tree. Its default value is\u00a0CGPointZero<\/code>\u00a0and you can\u2019t change it. However, you can move the scene\u2019s origin by setting its\u00a0anchorPoint<\/a><\/code>\u00a0property. The anchor point is specified in the unit coordinate space and chooses a point in the enclosing view.<\/p>\n<\/a> Figure 4-3<\/span>\u00a0\u00a0Default anchor for a scene is in the lower-left corner of the view<\/figcaption> ![\"\"](\"https:\/\/developer.apple.com\/library\/ios\/documentation\/GraphicsAnimation\/Conceptual\/SpriteKit_PG\/Art\/unit_coords_2x.png\")
<\/figure>\nThe default value for the anchor point is\u00a0
CGPointZero<\/a><\/code>, which places it at the lower-left corner. The scene\u2019s visible coordinate space is\u00a0(0,0)<\/code>\u00a0to\u00a0(width,height)<\/code>. The default anchor point is most useful for games that do not scroll a scene\u2019s content.
\nThe second-most common anchor point value is\u00a0(0.5,0.5)<\/code>, which centers the scene\u2019s origin in the middle of the view as shown in\u00a0Figure 4-4<\/span>. The scene\u2019s visible coordinate space is\u00a0(-width\/2,-height\/2)<\/code>\u00a0to\u00a0(width\/2, height\/2)<\/code>. Centering the scene on its anchor point is most useful when you want to easily position nodes relative to the center of the screen, such as in a scrolling game.<\/p>\n<\/a> Figure 4-4<\/span>\u00a0\u00a0Moving the anchor point to the center of the view<\/figcaption> ![\"\"](\"https:\/\/developer.apple.com\/library\/ios\/documentation\/GraphicsAnimation\/Conceptual\/SpriteKit_PG\/Art\/unit_coords_new_anchor_2x.png\")
<\/figure>\nSo, to summarize, the\u00a0
anchorPoint<\/a><\/code>\u00a0and\u00a0size<\/a><\/code>\u00a0properties are used to compute the scene\u2019s frame, which holds the visible portion of the scene.
\n
\n<\/section>\n<\/a><\/section>\n<\/section>\n<\/article>\n
\nExpressions utiles sous SpriteKit<\/h1>\n
[table delimiter=\u00a0\u00bb|\u00a0\u00bb]
\nExpression|Description|Construire\/Utilisation
\nCGFloat|Valeur r\u00e9elle|let x:CGFloat = 3.141592
\nCGPoint|Repr\u00e9sente une coordonn\u00e9e (x,y)|CGPointMake(2, 3.14)
\nCGRect|Repr\u00e9sente un rectangle sous la forme x,y, largeur, hauteur|CGRectMake(0,0,640,1024)
\nCGPointZero|Un CGPoint \u00e9gal \u00e0 (0,0)|CGPointZero
\nCGRectGetMidX|Obtenir le centre horizontal d’un cadre|CGRectGetMidX(self.frame)
\nCGRectGetMidY|Obtenir le centre vertical d’un cadre|CGRectGetMidY(self.frame)
\nobjet.position|De type CGPoint – Obtenir ou modifier la position d’un objet|unObjet.position = CGPointMake(0, 0)
\nobjet.frame|De type CGRect – Obtenir ou modifier la cadre d’un objet|unObjet.frame = CGRectMake(0, 0, 50, 50)
\n[\/table]
\n <\/p>\n
\n
\nAction 1.10<\/strong>\u00a0<\/span>– Pla\u00e7ons le titre au centre de la sc\u00e8ne.<\/p>\nunTitre.position = CGPoint(x:CGRectGetMidX(self.frame), y:CGRectGetMidY(self.frame));\n<\/pre>\n
R\u00e9sultat obtenu:\u00a0<\/strong>
\n![\"tim.briques.05\"](\"\/xcode\/wp-content\/uploads\/2014\/10\/tim.briques.05.png\")
\nNote<\/strong><\/span>: Il est\u00a0possible de modifier le point d’encrage de la sc\u00e8ne:<\/p>\nself.anchorPoint = CGPointMake(0.5, 0.5) \/\/ placer au centre\n<\/pre>\n
\nAction 1.11<\/strong>\u00a0<\/span>–\u00a0Pla\u00e7ons le titre au haut\u00a0de la sc\u00e8ne.<\/p>\nunTitre.position = CGPoint(x:CGRectGetMidX(frame), y:frame.height - unTitre.frame.height \/ 2)<\/pre>\n
R\u00e9sultat obtenu:\u00a0<\/strong>
\n![\"tim.briques.06\"](\"\/xcode\/wp-content\/uploads\/2014\/10\/tim.briques.06.png\")
\nNote<\/strong><\/span>: Remarquez que le texte sort un peu de l’\u00e9cran. \u00a0Le rectangle du ‘label’ est plus haut que la zone visible – espace pour souligner (simple et double).
\n
\nAction 1.12<\/strong>\u00a0<\/span>– Ajustons le titre.<\/p>\nunTitre.position = CGPoint(x:CGRectGetMidX(frame), y:frame.height - unTitre.frame.height);\n<\/pre>\n
R\u00e9sultat obtenu:\u00a0<\/strong>
\n![\"tim.briques.07\"](\"\/xcode\/wp-content\/uploads\/2014\/10\/tim.briques.07.png\")
\n
\nNote \u00e0 l’auteur: gestion de la rotation.
\n <\/p>\n
\nAjouter une image – SKSPriteNode<\/h3>\n
Action 1.13<\/strong>\u00a0<\/span>– Ajoutons un\u00a0ballon (fourni dans le fichier des ressources du projet) au centre la sc\u00e8ne.
\n![\"balle@2x\"](\"\/xcode\/wp-content\/uploads\/2013\/10\/balle@2x.png\")
\n <\/p>\n\/\/ Dans la zone des propri\u00e9t\u00e9s\n var ballon:SKSpriteNode!\n\/\/ Dans didMoveToView()\n ballon = SKSpriteNode(imageNamed: \"balle\")\n ballon.position = CGPoint(x:CGRectGetMidX(frame), y:CGRectGetMidY(frame))\n self.addChild(ballon)<\/pre>\n
R\u00e9sultat obtenu:\u00a0<\/strong>
\n![\"tim.briques.08\"](\"\/xcode\/wp-content\/uploads\/2014\/10\/tim.briques.08.png\")
\n <\/p>\n
\n<\/h1>\n
La m\u00e9thode update() – onEnterFrame<\/h1>\n
La m\u00e9thode update<\/strong> est ex\u00e9cut\u00e9e – si possible – 60 fois par seconde. \u00a0C’est une des m\u00e9thodes de la classe SKScene<\/span>\u00a0et elle peut-\u00eatre\u00a0surcharg\u00e9e.
\nPour\u00a0changer le nombre d’images par seconde il faut\u00a0renseigner la propri\u00e9t\u00e9\u00a0frameInterval<\/a>.
\nPar exemple, pour diviser\u00a0\u00a0la cadence par 2 (30fps):<\/p>\noverride<\/span> func<\/span> didMoveToView(view: SKView<\/span>) {
\nview.frameInterval<\/span> = 2<\/span><\/p><\/blockquote>\n
\nAction 1.14<\/strong>\u00a0<\/span>– Ajoutons le code suivant \u00e0 la m\u00e9thode ‘update’ de la classe de la sc\u00e8ne .<\/p>\noverride func update(currentTime: CFTimeInterval) {\n \/* Called before each frame is rendered *\/\n let nouvellePosition = CGPointMake(ballon.position.x + 1, ballon.position.y)\n if nouvellePosition.x > frame.width \/* + ballon.frame.width \/ 2 *\/\n {\n ballon.position = CGPointMake( 0 \/* -ballon.frame.width *\/, ballon.position.y)\n } else {\n ballon.position = nouvellePosition\n } \/\/ if nouvellePosition.x > frame.width\n } \/\/ update()<\/pre>\n
\nAction 1.14b<\/strong>\u00a0<\/span>– Testons l’application.
\nNote<\/strong><\/span>: Remarquez que le ballon entre sur la sc\u00e8ne sur la moiti\u00e9 de sa largeur.
\n
\nAction 1.15<\/strong>\u00a0<\/span>– Supprimons les commentaires pour tenir compte de la taille du ballon dans le calcul de la position.
\n![\"d8r6j\"](\"\/xcode\/wp-content\/uploads\/2014\/10\/d8r6j.gif\")
\n
\nAction 1.16<\/strong>\u00a0<\/span>– Pla\u00e7ons en commentaire le code dans la m\u00e9thode update<\/strong>().
\n <\/p>\n
\n\u00c9tape 2 – Physique<\/h1>\n
Le framework SpriteKit<\/strong> propose des propri\u00e9t\u00e9s dans\u00a0les sprites: physicsBody,\u00a0categoryBitMask,…, \u00a0et des classes:\u00a0SKPhysicsBody, …, permettant de d\u00e9finir un univers physique.
\nNous allons utiliser ces propri\u00e9t\u00e9s et ces m\u00e9thodes pour soumettre les sprites aux forces gravitationnelles et pour d\u00e9tecter une collision entre eux.
\n
\nAction 2.1<\/strong>\u00a0<\/span>–\u00a0Organisons un peu notre du code – Ajouter\u00a0le ballon avec une m\u00e9thode:<\/p>\nfunc ajouterBallon(){\n ballon = SKSpriteNode(imageNamed: \"balle\")\n ballon.position = CGPoint(x:CGRectGetMidX(frame), y:frame.height - ballon.frame.height)\n \/\/ ballon.physicsBody = SKPhysicsBody(circleOfRadius: ballon.frame.size.width\/2)\n self.addChild(ballon)\n } \/\/ ajouterBallon<\/pre>\n
![\"d8ll3\"](\"\/xcode\/wp-content\/uploads\/2014\/10\/d8ll3.gif\")
\n <\/p>\n
![\"d8s0e\"](\"\/xcode\/wp-content\/uploads\/2014\/10\/d8s0e.gif\")
![\"dyvap\"](\"\/xcode\/wp-content\/uploads\/2014\/10\/dyvap.gif\")