【Swift】SpriteKitの使い方。Transformationを使って画像をねじ曲げる。【Swift】SpriteKitの使い方。Transformationを使って画像をねじ曲げる。Transformation(以下、歪曲変換)について説明する。歪曲変換とは、ノードの一部分をつまんで引き伸ばしたり、縮めたりしたかのように歪曲させる機能である。これを使えば、木が風に吹かれて曲がったり、衝撃を受けてひん曲がるような表現が可能になる。歪曲変換を試す実際に歪曲変換を使ってノードの画像を曲げてみよう。以降の手順を行う前のXcodeプロジェクトをGitHubに置いたので、試してみる方はご利用下さい。事前準備ではパンダを1匹シーンに追加しておいた。このパンダをこれから歪曲させる。画像を歪曲させるために「つまみ点」を指定する必要がある。つまみ点を指でつまんで画像を引っ張ったり、縮めたりするイメージだ。Position(以下、歪曲先ポジション)といい、この設定値をもとにノードが歪曲される。つまみ点は任意の数だけ追加できるので、本記事では基本の9個のつまみ点を指定する。1.0)としてつまみ点を指定する。歪曲前ポジションには下図の値を指定する。歪曲先ポジションには下図の値を指定する。パンダがくの字に歪曲するのがイメージできる。TestScene.swiftを以下のコードに変更する。つまみ点の配列は上記の0地点から順番に格納するので、実際のつまみ点の並び方とイメージが異なる。歪曲グリッドを作成するときの引数には、つまみ点によって作成されるグリッドの縦横のマス数を指定する。今回の例では2×2マスのグリッドになるので、colums「2」、rows「2」を指定している。//歪曲グリッッドを作成する。//パンダノードを取得する。//パンダノードに歪曲グリッドを設定する。//歪曲のアクションを作成する。//アクションを実行する。{//歪曲グリッッドを作成する。distination)//パンダノードを取得する。SKSpriteNode//パンダノードに歪曲グリッドを設定する。warp//歪曲のアクションを作成する。0)//アクションを実行する。pandaNode!.run(action!)}}下図は実行結果。パンダがくの字になった。歪曲をループさせる複数の歪曲をつなげてループさせたらどうのようになるか試してみよう。TestScene.swiftを以下のコードに変更する。左にくの字、右にくの字、顔を長くするの3つの歪曲アクションを無限ループさせている。歪曲をアニメーションさせるにはノードのwarpGeometryプロパティにつまみ点の無い歪曲グリッドを設定する必要があることを覚えておくこと。//パンダノードを取得する。//歪曲グリッッドを作成する。//つまみ点の無い歪曲グリッドをパンダノードに設定する。//アクションを作成する。//アクションを実行順に並べる。//無限ループのアクションを作成する。//アクションを実行する。{//パンダノードを取得する。SKSpriteNode//歪曲グリッッドを作成する。distination3)//つまみ点の無い歪曲グリッドをパンダノードに設定する。noWarp//アクションを作成する。1.0)//アクションを実行順に並べる。action3!])//無限ループのアクションを作成する。SKAction.repeatForever(allAction)//アクションを実行する。pandaNode!.run(actionLoop)}}以下は実際のプレイ動画。画面をタップするとパンダがダンスしているように歪曲がループする。https://hajihaji-lemon.com/apli/wp-content/uploads/2016/10/spritekit_warp_transformation_dance_movie.mp4以下のコードのようにしてアクションインスタンスを1つにしたほうがスマートに実装できそうだが、うまくアニメーションしてくれないので上記コードのような実装にしている。何か感づいた人は教えて頂けると幸いです。1])ドラッグで歪曲させるつまみ点を指でドラッグして自分好みの形に歪曲させてみよう。下図赤枠の「TestScene.sks」を選択してシーンエディタを開く。Sprite」をドラッグ&ドロップでパンダ左下のつまみ点まで運ぶ(紫矢印)。水色枠のアトリビュートインスペクタボタンを押して設定画面を表示する。Nameに「point0」、SizeにW「20」、H「20」を入力する。Dataにx(Float)、y(Float)を追加する(黄枠)。残り7個のつまみ点も同じように追加する。コピペで配置してNameだけ変更したほうが作業が楽だ。TestScene.swiftを以下のコードに変更する。画面に触れた指を移動するたびに、パンダノードを歪曲させるアクションとつまみノードを移動させるアクションを実行している。//パンダノードを取得する。//パンダノードのサイズを保存する。//つまみ点をノードに設定する。//歪曲前のつまみ点を作成する。//タッチ座標を取得する。//タッチしたのがつまみノードの場合はターゲットに設定する。//タッチ座標を取得する。//タッチ座標をタイルマップノードを基準にした座標に変換する。//ターゲットノードにつまみ点を設定する。//歪曲グリッドを作成する。//歪曲のアクションを作成する。//タッチした位置までつまみノードを移動するアクションを作成する。//アクションを実行する。{//パンダノードを取得する。SKSpriteNode//パンダノードのサイズを保存する。{//つまみ点をノードに設定する。"y")//歪曲前のつまみ点を作成する。{//タッチ座標を取得する。self)//タッチしたのがつまみノードの場合はターゲットに設定する。{//タッチ座標を取得する。self)//タッチ座標をタイルマップノードを基準にした座標に変換する。pandaNode)//ターゲットノードにつまみ点を設定する。Float))}//歪曲グリッドを作成する。dst)//歪曲のアクションを作成する。0)//タッチした位置までつまみノードを移動するアクションを作成する。duration:0)//アクションを実行する。pandaNode!.run(warpAction!)targetNode.run(moveAction)}}以下は実際のプレイ動画。【Swift】SpriteKitの使い方。SKTileDefinitionを使ってタイルの画像を反転、回転したり、パラパラアニメのように切り替える。Sceneファイルの設定。カメラノードを使って画面をスクロールする。...【Swift】SpriteKitの使い方。SKVideoNodeで動画の再生、リピート(繰り返し)、アニメーションを実行する。...【Swift】SpriteKitの使い方。...【Swift】SpriteKitの使い方。物理ボディを等速度運動させる。このサイトにたどり着き、耳にしたことのない機能を知ったので、同じことをやってみようとしています。pandaNodeをsceneに挿入していないところをみると、これは.sksファイル上でそれを足しているのでしょうか?はい。sksファイル上に足しています。>これはコードでそれらを足しているのではなく、画像上にそれらを足しているのでしょうか?はい。このテストでは画面上でドラッグ&ドロップしてノードを足しています。>更に、この機能って、GameplayKitをimportしなくても使えるでしょうか?はい。SpriteKitをインポートすれば使えます。ページの最初のほうにテスト用プロジェクトのリンクを貼ってあるので、ダウンロードして試してみて下さい。プロジェクトの中にはパンダの画像も入っています。PMどうも9つのpointというファイルも.sksファイル上で足しているみたいですね。ドラッグするためのつまみはsksファイル上で足しています。ソースコードで足そうと思えば足すことはできます。パンダが自動でクネクネするのに指定する9つのポイントはソースコード上で指定しています。PMどうもすばやい返信をありがとうございます。Float))ですが、自分がdebugすると問題があるようですね。以下のようにすると回避できるようです。自分のXcodeのバージョンは8.3.3です。PM指摘ありがとうございます。PMいつも記事読ませていただいています。PM動画をワーピングさせようとしたことはないですが、とても興味深い視点ですね。できたら、面白い表現になりそうです。試してみて、結果を教えて貰えると幸いです。コメントをキャンセルメールアドレスが公開されることはありません。