【Swift】SpriteKitの使い方。シーンエディタでノードの拡大縮小アクションを設定する。(Swift 2.2、XCode 7.3)

2016年8月9日2020年6月16日

シーンエディタで拡大縮小

本記事ではSpriteKit Sceneファイルの編集画面（シーンエディタ）で設定できるScale ActionとScaleTo Actionについて説明する。

Scale ActionとScaleTo Actionは、シーンに配置したノードを拡大縮小するアクションである。SpriteKit Sceneファイル（以下、SKSファイル）の作り方については次の記事を参照されたし。⇒「SpriteKit Sceneファイルの使い方」

以降の手順を行う前のXcodeプロジェクトをGitHubに置いたので、試してみる方はご利用下さい。⇒「テスト用プロジェクト」

事前準備では、背景と鳥のノードをSKSファイルのシーンに追加しておいた。

Scale Action

下図赤枠のSKSファイルを選択してシーンエディタを開く。Animate横のボタン（黄緑枠）を押してタイムラインを表示する。黄枠のオブジェクトライブラリボタンを押して部品一覧を表示し、ドラッグ＆ドロップで「Scale Action」を鳥ノードのタイムラインまで運ぶ（紫矢印）。

水色枠のアトリビュートインスペクタボタンを押して設定画面を表示し、Start Timeに「3」、Durationに「2」、Timing Functionに「Linear」、Scale Amountに「3」を入力する。

以下は実際のプレイ動画。3秒後に鳥ノードが縦横3倍の大きさになった。

設定項目の内容を説明する。

Start Time

シーンが切り替わったタイミングから何秒後にアクションを実行するかを指定する。

Duration

アクションの所要時間を指定する。

Timing Function

拡大縮小の速さを以下のの4つから選択する。項目名は「Timing Mode」の間違いと思われる。

設定名	説明
Linear	一定速度で拡大縮小する。
Ease In	加速しながら拡大縮小する。
Ease Out	減速しながら拡大縮小する。
Ease In, Ease Out	前半は加速し、後半は減速しながら拡大縮小する。

以下の動画は、Timing Functionが異なる4つのノードを並べて同時に2倍に拡大した動画。ほとんど違いが分からない。。

Scale Amount

ノードを拡大縮小する倍率を指定する。例えば、「2」に設定したら縦横2倍の大きさ、「0.5」に設定したら縦横半分の大きさになる。拡大縮小はアンカーポイントを中心に行われる。⇒「アンカーポイントとは」

マイナスを指定した場合はノードが反転する。以下の動画はScale Amountに「-1」を設定した場合

ちなみに、上記と同じ動きをソースコードで実装するにはTestScene.swiftを以下のコードに変更する。試す場合は、SKSファイルに追加したScalse Actionは削除してから行うこと。

//
//  TestScene.swift
//

import Foundation
import SpriteKit

class TestScene:SKScene {
    
    //現在シーン設定時の呼び出しメソッド
    override func didMoveToView(view: SKView) {
        
        //SKSファイルに配置した鳥ノードを取得する。
        let bird = self.childNodeWithName("bird") as? SKSpriteNode
        
        //3秒待機のアクションを作成する。
        let action1 = SKAction.waitForDuration(3.0)
        
        //拡大のアクションを作成する。
        let action2 = SKAction.scaleBy(2.0, duration: 2.0)
        
        //一定速度で拡大する。
        action2.timingMode = SKActionTimingMode.Linear
        
        //アクションをまとめる。
        let actionAll = SKAction.sequence([action1,action2])
        
        //アクションを実行する。
        bird?.runAction(actionAll)
        
    }
}

// TestScene.swift

import Foundation

import SpriteKit

class TestScene:SKScene {

//現在シーン設定時の呼び出しメソッド

override func didMoveToView(view: SKView) {

//SKSファイルに配置した鳥ノードを取得する。

let bird = self.childNodeWithName("bird") as? SKSpriteNode

//3秒待機のアクションを作成する。

let action1 = SKAction.waitForDuration(3.0)

//拡大のアクションを作成する。

let action2 = SKAction.scaleBy(2.0, duration: 2.0)

//一定速度で拡大する。

action2.timingMode = SKActionTimingMode.Linear

//アクションをまとめる。

let actionAll = SKAction.sequence([action1,action2])

//アクションを実行する。

bird?.runAction(actionAll)

}

ScaleTo Action

Scale Actionとの違いは、Scale Actionは現在サイズからの拡大縮小の倍率を指定するの対し、ScaleTo Actionは画像のサイズに対しての拡大縮小の倍率を指定することである。

なので例えば、Scale Amountが「2.0」のアクションをノードに対して連続で行った場合、Scale Actionの場合はどんどん大きくなっていくが、ScaleTo Actionの場合は2倍以上は大きくならない。

アトリビュートインスペクタの設定項目はScale ActionとScaleTo Actionは同じである。

ソースコードで実装するときのScale Actionとの違いは「By」が「To」になるだけである。

//拡大のアクションを作成する。
let action2 = SKAction.scaleTo(2.0, duration: 2.0)

//拡大のアクションを作成する。

let action2 = SKAction.scaleTo(2.0, duration: 2.0)

すべてのアクションに言えることだが、アクションをタイムラインに横にならべて順番に実行したり、上下に並べて同時に実行したりできる。