SpriteKit
Swift

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


はじめに

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


SpriteKitとは

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

では、今回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


SK〇〇Node

ここでSpriteKitの関門Nodeを理解していきましょう。

NodeとはGoogle先生に聞いてみると...

スクリーンショット 2018-12-25 22.37.49(2).png

ふむふむ...

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

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

Simulator Screen Shot - iPhone XS - 2018-12-25 at 22.44.43.png

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


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

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

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

スクリーンショット 2018-12-25 22.58.12.png

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


GameViewControllerを編集。

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

スクリーンショット 2018-12-25 23.00.37.png

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

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ファイルを編集してみましょう。

スクリーンショット 2018-12-25 23.07.23.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.moveSKAction.rotateなどがあります。

〇〇.run メソッドでアニメーションの実行を行えます。

addChild(〇〇)〇〇というノードをシーンに追加できます。

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

sample.gif

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


最後に

今回は、SpriteKitを使って簡単なアニメーションを作ってみました。

でも、本来はSpriteKitはゲームを作るものなので次回はPhysicsBodyを使った記事を書こうと思います。

SpriteKitの入門第一歩になればいいなと思います!

最後まで読んでいただきありがとうございました〜。