【Swift】 SpriteKit 入門 ①


SpriteKitの使い方を解説します。
まずは画像を表示させてみます。
（環境：Xcode12.1 　Swift5.3）

[SpriteKit入門①](https://qiita.com/tosssy/items/ef514ce1f12d497c9da8)
[SpriteKit入門②](https://qiita.com/tosssy/items/486492378fe1685c6524)
[SpriteKit入門③](https://qiita.com/tosssy/items/45572121a33eb73b991e)
[SpriteKit入門④](https://qiita.com/tosssy/items/86b854ec71f221ff08a7)
[SpriteKit入門⑤](https://qiita.com/tosssy/items/6511b151b29900d50645)

##SpriteKitの概要
SpriteKitは2Dのアニメーションやゲームを作成するためのフレームワークです。
RootNodeとなるSceneに各種Nodeを追加していくことで画面上に図形などを表示させることができます。Nodeの種類には次のようなものがあります。また、各NodeにAction(SKAction)を追加することによりアニメーションを追加することができます。

- SKScene（RootNode）
- SKSpriteNode（図形の描画）
- SKLabelNode（テキストの描画）
- SKEmitterNode（パーティクルの描画）


SpriteKitを用いてアプリを作成する手順はざっくり次の通りです。

1. SpriteKitSceneファイルを作成※
2. Sceneに対応するクラスを作成
3. SceneにNode等を追加していく

※Sceneを作成する方法は、コードで書く方法とSpriteKitSeenファイルを用いる方法があります。後者の方法の場合、Storyboard上でUIパーツを配置するのと同様に画面を作成していくことができます。


##画像を表示させる
SpriteKitを使って画像を表示させて見ましょう。
###1.プロジェクト作成
プロジェクトを作成します。ここではgameではなくappを選択しています。またInterfaceはStoryboardにしています。
![SK1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498332/4031ee0e-95d3-ce8e-2c79-3a4430d8f720.png)


続いてSpriteKitSceneファイルを作成します。
![SK2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498332/c841644e-5e72-a52e-b83a-f4300f474cdd.png)


これが作成したScene(MyScene.sks)になります。
![SK3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498332/792839d7-e94d-a541-9a85-0492893a4ae1.png)

###2.Sceneに対応するクラスを作成

MyScene.sksに対応するMySceneクラスをを作成します。ここでは新たにSwiftファイルを追加してクラスを作成しています。作成したクラスはMyScene.sksのカスタムクラスに設定します。
![SK4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498332/01dd5531-75a8-10b8-2d58-1c71aff0560d.png)

```swift:MyScene.swift
import SpriteKit

class MyScene: SKScene {
    
    override func sceneDidLoad() {
        //sceneが呼ばれたときの処理
    }
}
```

![SK5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498332/dcd1fa03-a6ab-cbb9-edeb-89bbed173951.png)



###3.MySceneにSpriteNodeを追加
まず、使用する画像を読み込みます。

<img width="100" alt="sampleImage.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498332/6db8951e-f1da-73a5-caf0-b9d88918a559.png">

![SK6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498332/81036b62-bb3a-ca8b-b3ee-5ff9b6dc8762.png)

次にMyScene.sksファイルに移動へし、ColorSpriteを追加します。
![SK7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498332/da37739a-f8de-e6a5-993d-aef3636386c9.png)

読み込んだTextureを設定します。これでMySceneにSpriteNodeを追加が完了しました。
![SK8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498332/b5998f3f-231f-80cf-8220-f2e671ae8c54.png)

続いてViewController.swiftファイルへ移動し、以下のコードを書きます。`import SpriteKit`を忘れないようにしてください。今回は画像にアニメーション等を加えないのでMyScene.swiftファイルの方は特に加筆しなくてOKです。

```swift:ViewController.swift
import UIKit
import SpriteKit

class ViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        //SKViewの作成
        if let skView = SKView(frame: self.view.frame) as SKView? {
            //SKViewにSKSceneを追加
            if let scene = MyScene(fileNamed: "MyScene") {
                //SKSceneのサイズを設定
                scene.scaleMode = .aspectFill
                //SKViewにSKSeenを追加
                skView.presentScene(scene)
                //UIViewにSKViewを追加
                self.view.addSubview(skView)
            }
        }
    }
}
```

それでは実行してみましょう。以下のように画像が表示されていれば成功です。

![SK9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498332/ac6d73a8-ccca-0d7d-1807-bda1955a2690.png)


[次回](https://qiita.com/tosssy/items/486492378fe1685c6524)は画像をドラッグして動かせるようにしてみようと思います。


###参考

この記事は以下の情報を参考にして執筆しました。

- [SpriteKitことはじめ。シーンを作成して、ノードを動かすまで](https://qiita.com/bohebohechan/items/1f587b514ec4a9827652#プロジェクト作成)