こんにちは、@Yuuです。

今回の#4「SKShapeNode」の解説で、Nodeの基本的な解説は終わりです。
ここまで読んで下さった人はありがとうございました！
次回からは、Nodeを動かしたり物理演算を取り入れるような事をやる予定なので、#4までよりは作ってて面白いものになるかなと思います。

では今回は「SKShapeNode」で出来ることを見ていきましょう！

コードを書く前に

解説を行う環境

今回僕が解説を行う環境です。

• OS：OS X Yosemite10.10.5
• Xcode：7.2

Xcodeのバージョンが7以降なのでSwift2での解説になります。
Swift（無印）でも書き方はほぼ一緒だと思いますが、違う場合はご了承下さい。

作成に使用するプロジェクト

今回も第1回の記事、【SpriteKitで始める #1】プロジェクト作成編で作成したベースとなるプロジェクトを使用します。

まだ作成していない人、もしくは作成がうまくいかなった人は以下のGitHubよりダウンロードをして下さい。

tkray/GameSample01 - GitHub

SKShapeNodeを使う

SKShapeNodeとは

SKShapeNodeは、様々な図形を表すのに適したNodeです。
円・四角形・楕円など様々な図形を描画を表示する事が出来ます。

例えば以下のような感じですね。

またパスを指定して図形を作成することも出来るので、
以下のように三角形を表示する事もできます。

三角形の作り方は「4. 三角形を表示する」に書いてあります。

1. 円を表示する

12行目で円を描画するSKShapeNodeを作成しています。

circleOfRadiusで円の半径を指定しています。
ただし、print(circle.frame.size)で円の大きさを確認してみると(102.699996948242, 102.699996948242)と表示されました。

円の大きさは正確に(width: 100, height: 100)にはならないんですね。

2. 四角形を表示する

3-1. 楕円を表示する.1

綺麗な楕円形を表示したい場合はこっち

3-2. 楕円を表示する.2

自分で円の大きさを指定する場合はこっち
こっちの方法は「四角形を作ってから、角を丸くする量を決める」ような指定方法です。

4. 三角形を表示する

三角形を表示するためには、三角形の頂点の座標を指定し、それを基にSKShapeNodeを作成します。

座標の指定は以下のコードの場合15~18行目です。

5. サイズを変更

node共通で使えるメソッドを使っちゃいます。

6. テクスチャを貼る

SKShapeNodeにテクスチャ（画像）を貼り付けます。
今回は前回（【SpriteKitで始める #3】SKSpriteNode）に使ったわんこの画像にテクスチャをかけた画像を使用します。

上の四角形のようにNodeと画像のサイズが合わない場合、Nodeに合わせて画像を引き伸ばしてくれます。

7. 枠線を付ける

lineWidthで枠線の太さ指定し、strokeColorで枠線の色を指定します。
またlineWidthのデフォルト値は「1.0」に設定されています。

枠線を付ける

Swift

import SpriteKit class GameScene: SKScene { /// Sceneが表示された時に呼ばれる override func didMoveToView(view: SKView) { // 背景色を白にする self.backgroundColor = UIColor.whiteColor() // 円を作成 let circle = SKShapeNode(circleOfRadius: 50) // 円の配置位置を指定 circle.position = CGPointMake(self.frame.midX, self.frame.midY) // 円の色を指定 circle.fillColor = UIColor.redColor() // 枠線の太さを指定する（デフォルトは1.0） circle.lineWidth = 5.0 // 枠線の色を指定する circle.strokeColor = UIColor.blueColor() // シーンに追加 self.addChild(circle) } }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

import SpriteKit   class GameScene: SKScene {          /// Sceneが表示された時に呼ばれる     override func didMoveToView(view: SKView) {                           // 背景色を白にする         self.backgroundColor = UIColor.whiteColor()                  // 円を作成         let circle = SKShapeNode(circleOfRadius: 50)                  // 円の配置位置を指定         circle.position = CGPointMake(self.frame.midX, self.frame.midY)                  // 円の色を指定         circle.fillColor = UIColor.redColor()                  // 枠線の太さを指定する（デフォルトは1.0）         circle.lineWidth = 5.0                  // 枠線の色を指定する         circle.strokeColor = UIColor.blueColor()                  // シーンに追加         self.addChild(circle)              } }

8. グローを効かせる

glowWidthに値を設定する事でNodeの周りにグロー効果を出す事が出来ます。
glowWidthの初期値は「0.0」です。

下のコードの場合、上の円と下の円はグローを効かせるか、効かせないかの違いだけになっています。

グローを効かせる

Swift

import SpriteKit class GameScene: SKScene { /// Sceneが表示された時に呼ばれる override func didMoveToView(view: SKView) { // 背景色を白にする self.backgroundColor = UIColor.blackColor() // 円を作成 let circle1 = SKShapeNode(circleOfRadius: 50) // 円の配置位置を指定 circle1.position = CGPointMake(self.frame.midX, self.frame.maxY - 200) // 円の色を指定 circle1.fillColor = UIColor.whiteColor() // シーンに追加 self.addChild(circle1) // 円を作成 let circle2 = SKShapeNode(circleOfRadius: 50) // 円の配置位置を指定 circle2.position = CGPointMake(self.frame.midX, self.frame.minY + 200) // 円の色を指定 circle2.fillColor = UIColor.whiteColor() // 円にグローを効かせる（デフォルト値は0.0） circle2.glowWidth = 30.0 // シーンに追加 self.addChild(circle2) } }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

import SpriteKit   class GameScene: SKScene {          /// Sceneが表示された時に呼ばれる     override func didMoveToView(view: SKView) {                           // 背景色を白にする         self.backgroundColor = UIColor.blackColor()                  // 円を作成         let circle1 = SKShapeNode(circleOfRadius: 50)                  // 円の配置位置を指定         circle1.position = CGPointMake(self.frame.midX, self.frame.maxY - 200)                  // 円の色を指定         circle1.fillColor = UIColor.whiteColor()                  // シーンに追加         self.addChild(circle1)                                    // 円を作成         let circle2 = SKShapeNode(circleOfRadius: 50)                  // 円の配置位置を指定         circle2.position = CGPointMake(self.frame.midX, self.frame.minY + 200)                  // 円の色を指定         circle2.fillColor = UIColor.whiteColor()                  // 円にグローを効かせる（デフォルト値は0.0）         circle2.glowWidth = 30.0                  // シーンに追加         self.addChild(circle2)     } }

あとがき

今回は「SKShapeNode」の解説を行いました。

丸や四角形のような簡単な図形はもちろん、グローを効かせたり様々な事が出来ますね。

次回は今のところ重力の設定方法を解説しようかなと思ってますが、まだ確定はしていません。
更新自体は、4月下旬に投稿するようにしたいと思っています。

ではでは
今回はこの辺で！ヽ(•̀ω•́ )ゝ✧