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

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

シーンエディタでフェードアクション

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

FadeOut Actionとは徐々にノードが消えていくアクション、FadeIn Actionは徐々にノードが現れるアクション、FadeAlphaTo Actionはノードをアルファ値を指定して透過するアクションである。

実際にノードにアクションを追加してフェードイン、アウトさせてみよう。以降の手順を行う前のXcodeプロジェクトをGitHubに置いたので、試してみる方はご利用下さい。⇒「テスト用プロジェクト」

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

SpriteKit Sceneファイル（以下、SKSファイル）の作り方については次の記事を参照されたし。⇒「SpriteKit Sceneファイルの使い方」

FadeOut Action

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

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

以下は実際のプレイ動画。鳥が徐々に透けていき、消えた。。

アトリビュートインスペクタの設定項目を説明する。

Start Time

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

Duration

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

Timing Function

フェードの速さを以下のの4つから選択する。項目名は「Timing Mode」の間違いと思われる。

設定名	説明
Linear	一定速度で消える。
Ease In	消える速度が徐々に早くなる。
Ease Out	消える速度が徐々に遅くなる。
Ease In, Ease Out	前半は消える速度が徐々に早くなり、後半は消える速度が徐々に遅くなる。

ちなみに、上記と同じ動きをソースコードで実装するにはTestScene.swiftを以下のコードに変更する。

//
//  TestScene.swift
//

import Foundation
import SpriteKit

class TestScene:SKScene {
    
    //現在シーン設定時の呼び出しメソッド
    override func didMoveToView(view: SKView) {
        
        //SKSファイルに配置した鳥ノードを取得する。
        let bird = self.childNodeWithName("bird") as? SKSpriteNode
        
        //2秒待機のアクションを作成する。
        let action1 = SKAction.waitForDuration(2.0)
        
        //フェードアウトのアクションを作成する。
        let action2 = SKAction.fadeOutWithDuration(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

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

let action1 = SKAction.waitForDuration(2.0)

//フェードアウトのアクションを作成する。

let action2 = SKAction.fadeOutWithDuration(2.0)

//一定速度でフェードアウトする。

action2.timingMode = SKActionTimingMode.Linear

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

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

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

bird?.runAction(actionAll)

}

FadeIn Action

FadeOutは徐々に消えていくアクションなのに対し、FadeInは徐々に現れるアクションである。ただし、現在のalphaプロパティを1.0まで増やすアクションなので、alphaプロパティがデフォルトの1.0のままだと何も変化が起きない。

そこで、FadeIn Actionを実行する前に、透過やフェードアウトによってノードを消しておく必要がある。

実際にやってみよう。先ほど追加したFadeOut Actionの設定値をStart Time「0」、Duration「0（0.033が最低値）」に変更する。そのあとにFadeIn Actionを追加し、Start Timeに「2」、Durationに「2」、Timing Functionに「Linear」を入力する。

以下は実際のプレイ動画。鳥が徐々に現れた。。

ちなみに、上記と同じ動きをソースコードで実装するにはTestScene.swiftを以下のコードに変更する。

//
//  TestScene.swift
//

import Foundation
import SpriteKit

class TestScene:SKScene {
    
    //現在シーン設定時の呼び出しメソッド
    override func didMoveToView(view: SKView) {
        
        //SKSファイルに配置した鳥ノードを取得する。
        let bird = self.childNodeWithName("bird") as? SKSpriteNode
        
        //鳥ノードを消す。
        bird?.alpha = 0
        
        //2秒待機のアクションを作成する。
        let action1 = SKAction.waitForDuration(2.0)
        
        //フェードインのアクションを作成する。
        let action2 = SKAction.fadeInWithDuration(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

//鳥ノードを消す。

bird?.alpha = 0

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

let action1 = SKAction.waitForDuration(2.0)

//フェードインのアクションを作成する。

let action2 = SKAction.fadeInWithDuration(2.0)

//一定速度でフェードインする。

action2.timingMode = SKActionTimingMode.Linear

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

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

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

bird?.runAction(actionAll)

}

FadeAlphaTo Action

FadeOutとFadeInはノードを完全に消すか、表示するかの設定なのに対し、FadeAlphaToは指定したアプファ値で画像を透過するアクションである。

アルファ値を0にすれば完全に消え、1にすれば完全に表示されるので、このメソッドだけでフェードインとアウトと同じ動きが実現できる。

以下は実際のプレイ動画。鳥が半透明になった。。

上記と同じ動きをソースコードで実装するには、先ほどのソースコードのアクション作成箇所を以下に変更する。

//ノードを半透明にするアクションを作成する。
let action2 = SKAction.fadeAlphaTo(0.5, duration: 2.0)

//ノードを半透明にするアクションを作成する。

let action2 = SKAction.fadeAlphaTo(0.5, duration: 2.0)