SwiftでSpriteKitを使ってアニメーションを作ってみる(超入門)

# はじめに
こんにちは、fummicc1です。ふみっちって読みます。今回は、`SpriteKit`を使って簡単なアニメーションを作ってみようと思います！

#  `SpriteKit`とは
Appleが公式に用意しているゲームを作るためのフレームワークです。`SceneKit`というものが似た部類のものでありますが、この`SpriteKit`は**2Dのゲーム**を作るものとなっています。

では、今回`SpriteKit`で使う部品の説明を次にしていきます。

## SKView

`SKView`とは`SKScene`を表示するためのものです。`UIView`に対してキャストして使用します。

```ViewController.swift
class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        if let skView = view as? SKView {
            // キャストが成功したらここが呼ばれるので、シーンを追加していく。
        }
        
    }
}
```

## SKScene
`SKScene`とは表示する画面の1ユニットのことを指します。`SKView`はそれを表示するためのものだと思って構いません。基本的に`SpriteKit`では`SKView`ではなく`SKScene`に次に説明する`Node`と言われる名のついた部品を追加していきます。

以下は基本的な`SKView`の使い方です。画面全体に`SKScene`を表示しています。

```GameViewController.swift
import SpriteKit

class GameViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        if let skView = view as? SKView {
            
            let scene = SKScene(size: skView.frame.size)
            
            scene.backgroundColor = .red
            
            skView.presentScene(scene)
            
        }
        
    }
    
}

```

すると、`SKView`に赤色のシーンが表示されるようになります。

![IMG_1041.PNG](https://qiita-image-store.s3.amazonaws.com/0/300444/70d65e9a-b582-c64c-01e4-a7f780ac5861.png)


## SK〇〇Node
ここで`SpriteKit`の関門`Node`を理解していきましょう。
`Node`とはGoogle先生に聞いてみると...
![スクリーンショット 2018-12-25 22.37.49（2）.png](https://qiita-image-store.s3.amazonaws.com/0/300444/55ce54e9-5cc3-7dc4-9600-4ec00607019c.png)


ふむふむ...

結び目や節など正直よく分かりません。なので、**子**と覚えてください。`SKScene(親)`に追加される子の部品なのでしっくりくると思います。

実際に、`scene.addChild(node)`などというメソッドがあります。

![Simulator Screen Shot - iPhone XS - 2018-12-25 at 22.44.43.png](https://qiita-image-store.s3.amazonaws.com/0/300444/9eccd18d-360d-49fb-8d73-421b00f0ab7e.png)

このように一つのシーンは複数のノード(子)の集まりで構成されています。

# サンプルアプリを作ってみる。


`Xcode`から`File`>`New`>`Project`>`Game`を選択します。名前はなんでもいいです。

作成したら`Actions.sks`というファイルは使わないので削除しましょう。

<img width="275" alt="スクリーンショット 2018-12-25 22.58.12.png" src="https://qiita-image-store.s3.amazonaws.com/0/300444/3829532b-71d8-e8fe-1879-99cc058d8aa7.png">


このようなファイル構成になってれば大丈夫です。

## `GameViewController `を編集。

まず、最初に`UIViewController`を編集します。

<img width="902" alt="スクリーンショット 2018-12-25 23.00.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/300444/4f25d32c-6497-aa19-2e82-4007d0841c56.png">

かなりたくさんすでに書かれていますね。今回は使わないので以下のように編集しましょう。

```swift
import UIKit
import SpriteKit

class GameViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        if let skView = view as? SKView {
            
            let scene = GameScene(fileNamed: "GameScene.sks")
            
            skView.presentScene(scene)
            
        }
        
    }
    
}
```

`let scene = GameScene(fileNamed: "GameScene.sks")`では`GameScene.sks`と呼ばれるファイルからシーンを取得しています。

では、次に`GameScene.swift`ファイルを編集してみましょう。

<img width="613" alt="スクリーンショット 2018-12-25 23.07.23.png" src="https://qiita-image-store.s3.amazonaws.com/0/300444/640dcaaf-4d53-6fef-6194-5273c64fbfec.png">

これも使わないものが多いので、以下のように編集しましょう。

```GameScene.swift
import SpriteKit

class GameScene: SKScene {
    
    override func didMove(to view: SKView) {
        
        let blueCircle = SKShapeNode(circleOfRadius: 30)
        
        blueCircle.fillColor = .blue
        blueCircle.strokeColor = .blue
        
        let biggerCircleAction = SKAction.scale(to: 5, duration: 1.0)
        
        let smallCircleAction = SKAction.scale(to: 1, duration: 1.0)
        
        let hideAction = SKAction.fadeAlpha(to: 0, duration: 1.0)
        
        let allAction = SKAction.sequence([ biggerCircleAction, smallCircleAction, hideAction ])
        
        blueCircle.run(allAction)
        
        addChild(blueCircle)
        
    }

}
```


`SKAction.〇〇`で基本的なアニメーションはほぼ作れます。

|種類|説明|
|---|---|
|SKAction.scale|Nodeの大きさを変更します|
|SKAction.fadeAlpha|Nodeの透明度を変更します|
|SKAction.sequence|引数の配列の要素を順番に実行していきます。同時にアニメーションはされず、1番目のものが終わったら2番目のものが行われます。|

他にも、`SKAction.move`や`SKAction.rotate`などがあります。

`〇〇.run` メソッドでアニメーションの実行を行えます。
`addChild(〇〇)`で`〇〇`というノードをシーンに追加できます。

これらを実行してみると、

![sample.gif](https://qiita-image-store.s3.amazonaws.com/0/300444/fe74c466-574a-6bf8-365f-9ae92aed5159.gif)

アニメーションができました！

# 最後に
今回は、SpriteKitを使って簡単なアニメーションを作ってみました。
でも、本来はSpriteKitはゲームを作るものなので次回は`PhysicsBody`を使った記事を書こうと思います。
SpriteKitの入門第一歩になればいいなと思います！
最後まで読んでいただきありがとうございました〜。