はじめに
こんにちは、fummicc1です。ふみっちって読みます。今回は、SpriteKitを使って簡単なアニメーションを作ってみようと思います！
SpriteKitとは
Appleが公式に用意しているゲームを作るためのフレームワークです。SceneKitというものが似た部類のものでありますが、このSpriteKitは2Dのゲームを作るものとなっています。
では、今回SpriteKitで使う部品の説明を次にしていきます。
SKView
SKViewとはSKSceneを表示するためのものです。UIViewに対してキャストして使用します。
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
if let skView = view as? SKView {
// キャストが成功したらここが呼ばれるので、シーンを追加していく。
}
}
}
SKScene
SKSceneとは表示する画面の1ユニットのことを指します。SKViewはそれを表示するためのものだと思って構いません。基本的にSpriteKitではSKViewではなくSKSceneに次に説明するNodeと言われる名のついた部品を追加していきます。
以下は基本的なSKViewの使い方です。画面全体にSKSceneを表示しています。
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に赤色のシーンが表示されるようになります。
SK〇〇Node
ここでSpriteKitの関門Nodeを理解していきましょう。
NodeとはGoogle先生に聞いてみると...
ふむふむ...
結び目や節など正直よく分かりません。なので、子と覚えてください。SKScene(親)に追加される子の部品なのでしっくりくると思います。
実際に、scene.addChild(node)などというメソッドがあります。
このように一つのシーンは複数のノード(子)の集まりで構成されています。
サンプルアプリを作ってみる。
XcodeからFile>New>Project>Gameを選択します。名前はなんでもいいです。
作成したらActions.sksというファイルは使わないので削除しましょう。
このようなファイル構成になってれば大丈夫です。
GameViewControllerを編集。
まず、最初にUIViewControllerを編集します。
かなりたくさんすでに書かれていますね。今回は使わないので以下のように編集しましょう。
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ファイルを編集してみましょう。
これも使わないものが多いので、以下のように編集しましょう。
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(〇〇)で〇〇というノードをシーンに追加できます。
これらを実行してみると、
アニメーションができました！
最後に
今回は、SpriteKitを使って簡単なアニメーションを作ってみました。
でも、本来はSpriteKitはゲームを作るものなので次回はPhysicsBodyを使った記事を書こうと思います。
SpriteKitの入門第一歩になればいいなと思います！
最後まで読んでいただきありがとうございました〜。