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

2020年6月16日

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

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

Scale ActionとScaleTo Action

 

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

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

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

spritekit_center_node

 

Scale Action

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

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

Scale Actionを鳥ノードに追加する

 

以下は実際のプレイ動画。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は削除してから行うこと。

 

ScaleTo Action

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

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

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

ScaleTo Actionのアトリビュートインスペクタ

 

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

 

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

タイムラインに複数のアクションを並べる