【Swift】SpriteKitの使い方。Warp Transformationを使って画像をねじ曲げる。

2020年6月16日

Warp Transformationとは

本記事では、iOS10で登場したWarp Transformation(以下、歪曲変換)について説明する。歪曲変換とは、ノードの一部分をつまんで引き伸ばしたり、縮めたりしたかのように歪曲させる機能である。

これを使えば、木が風に吹かれて曲がったり、衝撃を受けてひん曲がるような表現が可能になる。

パンダを曲げた

 

歪曲変換を試す

実際に歪曲変換を使ってノードの画像を曲げてみよう。以降の手順を行う前のXcodeプロジェクトをGitHubに置いたので、試してみる方はご利用下さい。⇒「テスト用プロジェクト

事前準備ではパンダを1匹シーンに追加しておいた。このパンダをこれから歪曲させる。

SKSceneにパンダを配置

 

画像を歪曲させるために「つまみ点」を指定する必要がある。つまみ点を指でつまんで画像を引っ張ったり、縮めたりするイメージだ。

歪曲前のつまみ点をSource Position(以下、歪曲前ポジション)、歪曲先のつまみ点をDestination Position(以下、歪曲先ポジション)といい、この設定値をもとにノードが歪曲される。

つまみ点は任意の数だけ追加できるので、本記事では基本の9個のつまみ点を指定する。画像の左下角を(0,0)、右上角を(1.0, 1.0)としてつまみ点を指定する。

歪曲前ポジションには下図の値を指定する。

9個のソースポジション

 

歪曲先ポジションには下図の値を指定する。パンダがくの字に歪曲するのがイメージできる。

Destination Position

 

TestScene.swiftを以下のコードに変更する。つまみ点の配列は上記の⓪地点から順番に格納するので、実際のつまみ点の並び方とイメージが異なる。注意しよう。

歪曲グリッドを作成するときの引数には、つまみ点によって作成されるグリッドの縦横のマス数を指定する。今回の例では2×2マスのグリッドになるので、colums「2」、rows「2」を指定している。

 

下図は実行結果。パンダがくの字になった。

パンダを曲げた

歪曲をループさせる

複数の歪曲をつなげてループさせたらどうのようになるか試してみよう。TestScene.swiftを以下のコードに変更する。

左にくの字、右にくの字、顔を長くするの3つの歪曲アクションを無限ループさせている。歪曲をアニメーションさせるにはノードのwarpGeometryプロパティにつまみ点の無い歪曲グリッドを設定する必要があることを覚えておくこと。

 

以下は実際のプレイ動画。画面をタップするとパンダがダンスしているように歪曲がループする。

 

以下のコードのようにしてアクションインスタンスを1つにしたほうがスマートに実装できそうだが、うまくアニメーションしてくれないので上記コードのような実装にしている。

何か感づいた人は教えて頂けると幸いです。

 

ドラッグで歪曲させる

つまみ点を指でドラッグして自分好みの形に歪曲させてみよう。

下図赤枠の「TestScene.sks」を選択してシーンエディタを開く。黄緑枠のオブジェクトライブラリボタンを押して部品一覧を表示し、一覧にある「Color Sprite」をドラッグ&ドロップでパンダ左下のつまみ点まで運ぶ(紫矢印)。

水色枠のアトリビュートインスペクタボタンを押して設定画面を表示する。Nameに「point0」、SizeにW「20」、H「20」を入力する。User Dataにx(Float)、y(Float)を追加する(黄枠)。

つまみノードを配置する

 

残り7個のつまみ点も同じように追加する。コピペで配置してNameだけ変更したほうが作業が楽だ。

9個のつまみノードを配置した結果

 

TestScene.swiftを以下のコードに変更する。

画面に触れた指を移動するたびに、パンダノードを歪曲させるアクションとつまみノードを移動させるアクションを実行している。

 

以下は実際のプレイ動画。