【Swift】SpriteKitの使い方。SKCropNodeで画像やシーンの一部分を切り出して表示する。(Swift 2.2、XCode 7.3)

2020年6月16日

SKCropNodeとは

本記事ではSKCropNode(クロップノード)について説明する。クロップノードとは、画像の一部を切り出して表示するノードである。

例えば、下図のような模様が描かれた画像(以下、色紙)と鳥の画像があったとする。色紙を鳥の形に切り出して表示したいときがある。そんな時に利用されるのがクロップノードである。

画像をクロップするイメージ

 

クロップノードを使ってみる

実際に、クロップノードを使って色紙を鳥の形に切り出してみみよう。以降の手順を行う前のXcodeプロジェクトをGitHubに置いたので、試してみる方はご利用下さい。⇒「テスト用プロジェクト

事前準備では、背景と猿と鳥のノードをシーンに配置しておいた。この段階では何も起きない。

テスト開始前

 

TestScene.swiftを以下のコードに変更する。クロップノードはシーンエディタの部品一覧に無いのでソースコードで実装する必要がある。なので、検証ではシーンに配置するノードはすべてソースコードから追加している。

画像を切り出すための型紙として使う鳥ノードをクロップノードのmaskNodeに設定している。そして、切り出す色紙をクロップノードの子に追加し、色紙が鳥の形に切り出されるようにした。

 

下図は実行結果。色紙が鳥の形になった。
実行結果

画面全体を切り出す

1つのノードだけを切り出すのではなく、スポットライトのようにシーンの一部分を切り出したいことがある。そんなときは、切り出すノードをすべてクロップノードの子にする。

実際にスポットライトの光を当てたかのようにシーンを切り出してみよう。

TestScene.swiftを以下のコードに変更する。背景、猿、鳥のすべてのノードをクロップノードの子に追加し、クロップノードのmaskNodeプロパティにはシェイプノードで作った円を設定している。これでシーン全体が円形に切り出されることになる。

なお、シーンの基準座標と合わせるために、クロップノードの座標も画面左下にしている。

 

下図は実行結果
シーンの切り出し

 

クロップノードを動かす

他のノードと同様にマスクノードを移動、拡大したりして、切り出し結果を動的に変化させられる。

実際にやってみよう。TestScene.swiftに以下のメソッドを追加する。ドラッグした位置に円を移動し、ドロップすると円を縮小して消すようにした。

 

以下は実際のプレイ動画