[Swift] SpriteKit. FadeIn, FedeOut, FadeAlphaTo Actionの違い | はじはじアプリ体験記

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

  • 2016年8月15日
    Swift 2.2で検証
  • Twitterでシェア
  • Facebook
  • LINEで送る

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

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

Fade Action

 

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

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

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

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

spritekit_center_node

 

FadeOut Action

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

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

FadeOut Actionを追加する

 

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

 

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

Start Time

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

 

Duration

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

 

Timing Function

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

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

 

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

スポンサーリンク

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」を入力する。

FadeIn Actionを追加する

 

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

 

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

 

FadeAlphaTo Action

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

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

FadeAlphaTo アトリビュートインスペクタ

 

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

 

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

Swift記事一覧へ
  • Twitterでシェア
  • Facebook
  • LINEで送る
はじはじビットコイン目指せ!最強の暗号通貨トレーダー

コメントを残す

お名前