SpriteKitことはじめ。シーンを作成して、ノードを動かすまで


SpriteKitことはじめとして。
シーンを作成して、ノードを動かすまでを書いています。

swift3 + Xcode8.3.1


## プロジェクト作成

Xcodeで新規プロジェクトを作成。


<img width="600" alt="Xcode-1.png" src="https://qiita-image-store.s3.amazonaws.com/0/32215/d4b8c1df-5437-8238-8ffc-bd3b7e7174c2.png">


## ゲームで使う画像ファイルの登録

- Assetsという名前でグループを作成

<img width="400" alt="TryGame.xcodeproj.png" src="https://qiita-image-store.s3.amazonaws.com/0/32215/5d5d6d0c-e15b-a515-4d5a-d78ed6e61917.png">

- 画像ファイルをAssetsフォルダーにドラッグ＆ドロップ

<img width="400" alt="TryGame.xcodeproj-1.png" src="https://qiita-image-store.s3.amazonaws.com/0/32215/7d229392-3957-6a05-91f9-82ec56ea2507.png">

ゲームで使う画像は全て入れておく

## ゲームシーンの作成と背景画像の設定

- SpriteKitシーンファイルの作成

<img width="499" alt="TryGame.xcodeproj-2.png" src="https://qiita-image-store.s3.amazonaws.com/0/32215/a472568a-3055-890e-3a28-59a4e66dcf8e.png">

- SpriteKitシーンに名前をつけて、サイズを決める

<img width="600" alt="GameplayScene.sks — Edited.png" src="https://qiita-image-store.s3.amazonaws.com/0/32215/b390e0c5-6b6d-bd29-c7d4-00ebbce2f249.png">


- 背景画像の設定

Color Spriteを配置して、「Name」「Parent」を決める
そして「Texture」に、最初に読み込んだ画像から背景画像をセットする

<img width="599" alt="GameplayScene.sks — Edited-1.png" src="https://qiita-image-store.s3.amazonaws.com/0/32215/5c815fb2-f67c-a6eb-c01d-355d0e1de617.png">


<img width="600" alt="GameplayScene.sks — Edited-2.png" src="https://qiita-image-store.s3.amazonaws.com/0/32215/411f1bee-119f-256d-d032-4fc863b3d639.png">

## ゲームシーンのクラスを作成する

- 上記で作成したゲームシーンに対応するクラスの作成、swiftファイルで作成



```swift

import SpriteKit

class GameplayScene: SKScene{
    override func didMove(to view: SKView) {
        print("The Scene was loaded");
    }
    
    override func update(_ currentTime: TimeInterval) {
        
    }
}

```


- シーンファイルとゲームシーンのクラスを紐付ける

<img width="599" alt="GameplayScene.sks.png" src="https://qiita-image-store.s3.amazonaws.com/0/32215/cb97c37e-a41d-bbbc-a6d8-4f6261955df6.png">



## GameViewControllerで上記で作成したゲームシーンを呼び出すようにする

- GameViewControllerのシーンの呼び出すファイル名を変更する


```swift

class GameViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        if let view = self.view as! SKView? {
            // Load the SKScene from 'GameScene.sks'
            if let scene = SKScene(fileNamed: "GameplayScene") {
                // Set the scale mode to scale to fit the window
                scene.scaleMode = .aspectFill
                
                // Present the scene
                view.presentScene(scene)
            }
            
            view.ignoresSiblingOrder = true
            
            view.showsFPS = true
            view.showsNodeCount = true
        }
    }

```

ビルドすると、背景画像が設定されたシーンが表示される

- ViewControllerからも呼び出すこともできる

```sw
import UIKit
import SpriteKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
                
        if let view = self.view as! SKView? {
            
            if let scene = SKScene(fileNamed: "VisionScene") {
                print("start");
                // Set the scale mode to scale to fit the window
                scene.scaleMode = .aspectFill
                
                // Present the scene
                view.presentScene(scene)
            }
            
            view.ignoresSiblingOrder = true
            
            view.showsFPS = true
            view.showsNodeCount = true
        }
```


## プレイヤーノードの配置

- 背景画像と同じように、Color Spriteを配置して、「Name」「Parent」を決め、「Texture」に、最初に読み込んだ画像からプレイヤー画像をセットする

<img width="600" alt="GameplayScene.sks — Edited-3.png" src="https://qiita-image-store.s3.amazonaws.com/0/32215/e5a49222-5c3b-ebce-f5bd-0c6ecacc99ac.png">


<img width="600" alt="GameplayScene.sks — Edited-4.png" src="https://qiita-image-store.s3.amazonaws.com/0/32215/1595eafd-e426-2594-23a9-e3eaf6020a08.png">

- カスタムクラスでは、プロダクトモジュール名.クラス名の設定が必要。あとで動かすために。

<img width="600" alt="GameplayScene.sks-1.png" src="https://qiita-image-store.s3.amazonaws.com/0/32215/d54e9f89-cb9a-f99d-df11-da1c1117e0dc.png">



## プレイヤークラスの作成

- Player.swift

左右に動かすメソッドを作ります

```swift

import SpriteKit

class Player: SKSpriteNode{
    
    func movePlayer(moveLeft: Bool){
        if moveLeft{
            print("moveLeft");
            self.position.x -= 10;
        }else{
            print("moveRight");
            self.position.x += 10;
        }
    }
    
}
```


## シーンクラスからプレイヤークラスを動かします

- GameplayScene.swift

「player = self.childNode(withName: "Player") as? Player!」で、
プレイヤーノードの追加を忘れないように。

```swift

import SpriteKit

class GameplayScene: SKScene{
    
    var player: Player?
    var blMove = false;
    var moveLeft = false;
    var center : CGFloat?;
    
    override func didMove(to view: SKView) {
        print("The Scene was loaded");
        
        center = (self.scene?.size.width)! / (self.scene?.size.height)!;
        player = self.childNode(withName: "Player") as? Player!
    }
    
    override func update(_ currentTime: TimeInterval) {
        managePlayer()
    }
    
    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        print("touch start")
        for touch in touches{
            let location = touch.location(in: self);
            
            if location.x > center! {
                moveLeft = false;
            }else{
                moveLeft = true;
            }
            blMove = true;
        }
        
    }
    override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
        print("touch end")
        blMove = false;
    }
    
    func managePlayer(){
        if blMove{
            player?.movePlayer(moveLeft: moveLeft)
        }
    }
}
```


## 全体のディレクトリ


<img width="558" alt="GameplayScene.swift — Edited.png" src="https://qiita-image-store.s3.amazonaws.com/0/32215/789098f3-9b56-b7ea-abdb-a641499ec1e8.png">


## 動き

しょぼいですけど、最初のいっぽということで

![ezgif.com-video-to-gif.gif](https://qiita-image-store.s3.amazonaws.com/0/32215/e21cce55-f8d2-9a81-cfab-4547fed91498.gif)