【Swift】SKSpriteNodeの設定。画像、サイズ、座標、アンカーポイントを指定する。光反射と影を表示する。(Swift 2.1、XCode 7.2)

2020年6月16日

SKSpriteNodeの設定

本記事では、SKSpriteNode(以下、ノード)のアトリビュートインスペクタの設定項目について説明する。

ノードのアトリビュートインスペクタを開くには、シーンに配置したノード(下図例では鳥)を選択して、紫枠のアトリビュートインスペクタボタンを押す。

アトリビュートインスペクタを開く

 

以下に各設定項目について説明する。ただし、仕様が明確になっていないものは詳細を記載しない。

SKSpriteNodeのアトリビュートインスペクタの設定項目

 

検証に利用したXCodeプロジェクトをGitHubに置いたので、試してみる方はご利用下さい。SKSファイルにノードを配置し、画面をタップした位置に鳥が移動するものを実装しておきました。⇒「テスト用プロジェクト

 

Name

ノードの名前を設定する。

ソースコードからノードにアクセスするための識別子や、別のノードで親ノードを指定するときに用いられる。

 

Parent

親ノードを指定する。デフォルトではシーン名が設定されている。子ノードは親ノードと同じ動きをする(移動、回転、消去など)。

以下の動画は、右側の鳥のParentに中央の鳥を指定して、中央の鳥を移動させたときのプレイ動画

 

Texture

ノードに表示する画像を設定する。

 

Position

ノードを表示する座標を設定する。デフォルトではシーンの左下が基準座標(0, 0)となり、そこから水平方向にXポイント、垂直方向にYポイント移動した位置を指定する。

シーンのアンカーポイントを変更すれば基準座標を移動できる。⇒「シーンの設定記事

シーンのデフォルトのアンカーポイントは左下

 

Anchor Point

ノードを操作するときの基準位置を設定する。ノードを拡大縮小、回転するときの中心になる。また、ノードの座標はアンカーポイントの位置を示している。

0.0〜1.0で表現され、X「0.0」、Y「0.0」を設定した場合はノードの左下、X「1.0」、Y「1.0」を設定した場合はノードの右上がアンカーポイントになる。

アンカーポイントの例

 

Color

ノードの色を設定する。Textureを設定しない場合は、ここで指定した色にベタ塗りされる。

 

Blend Factor

Textureに設定した画像に対してColorをブレンドする割合を設定する。0.0〜1.0の間で指定する。

下図はColorに赤、Blend Factorに「1.0」を指定した場合

Colorに赤、Blend Factorに「1.0」を設定した場合

 

Blend Mode

ノードを描画するときの描画色の計算モードを「Alpha」「Add」、「Substract」、「Multiply」、「MultiplyX2」、「Screen」、「Replace」から選択する。

下図は、鳥ノードのブレンドモードに「Alpha」を選択した場合。要するに、透過部分がきちんと透過されて表示される。ほとんどこの設定値しか使わないような気がする。

Blend Modeに「Alpha」を設定した場合

 

下図は「Add(加算)」を選択した場合。背面の重なっているノードの色の影響を受けながら明るい色になる。

Blend Modeに「Add」を設定した場合

 

下図は「Sbstract(減算)」を選択した場合。背面の重なっているノードの色の影響を受けながら暗い色になる。

ブレンドモードに「Substract」を設定する

 

下図は「Multiply(乗算)」を選択した場合。透過部分が黒色になり、元の画像が半透明になった。

Blend Modeに「Multiply」を設定

 

下図は「MultiplyX2(乗算2回)」を選択した場合。透過部分が黒色になり、Multiplyより元の画像の色が濃くなった。

Blend Modeに「MultiplyX2」を設定

 

下図は「Source」を選択した場合。背面の重なっているノードの色の影響を受けながら明るい色になる。

Blend Modeに「Source」を設定

 

下図は「Replace」を選択した場合。透過している部分が黒くなった。

Blend Modeに「Replace」を設定

 

IK Constraints

仕様が明確になれば追記する。

Inverse kinematics Constraintsの略。関連するノードとの最小と最大の回転角度を設定する項目。⇒外部参考サイト「raywenderlich.com

 

Z Position

2Dゲームなので座標はX軸、Y軸を用いることになるが、Z軸の位置指定もある。Z PositionはZ軸の位置を指定するプロパティで、ノードの重なり順を指定するのに用いられる。各ノードのZ Positionの値を比較して数字の大きいノードが前面に表示される。

Z Positionの説明

 

Rotation

アンカーポイントを中心にして、指定した角度で回転したノードが表示される。0〜360の間で指定する。

 

Scale

アンカーポイントを中心にして、指定した倍率で拡大縮小したノードが表示される。X方向、Y方向の倍率を指定し、1.0は等倍(拡大縮小無し)を表している。

 

Normal Map

仕様が明確になれば追記する。

公式ReferenceのNormal Mapの説明は「A Sprite Kit texture used to add lighting behavior to the sprite.」と記載されている。光を照射したときの振る舞いに使うマップのようだが、それをなぜNormalと呼ぶのかが謎だ。

例えば、以下の画像を鳥ノードのNormal Mapに設定して光を当てるとどうなるか。

Normal Map

 

下図のようになる。赤と青が黒色になり、黄色は色がつかなかった。ライトノードの使い方は次の設定項目で説明する。

ノーマルマップを指定したノードに光を当てる

 

Lighting Mask

ライトノードの影響を受けるビットマスクを設定する。ライトノードのLighting Maskと同じ値にした場合、ライトノードの光を受けるようになる。

実際にライトノードを追加して鳥に光を当ててみよう。

Light Nodeをシーンに配置する(下図赤矢印)。紫枠のアトリビュートインスペクタボタンを押して設定画面を表示し、Parentに「bird1」を入力する。また、Lighting Maskが「1」であることを確認する。

Light Nodeをシーンに配置する。

 

右側の鳥を選択、紫枠のアトリビュートインスペクタボタンを押して設定画面を表示し、Lighting Maskを「1」に変更する。これで、右側の鳥がライトノードの光を受けるようになった。

同じようにして、背景画像のノードのLighting Maskも「1」に設定しておく。左側の鳥は何もしないでおく。

鳥ノードのLighting Maskを「1」に設定する

 

以下は実際のプレイ動画。左側の鳥はいつも通り表示され、右側の鳥は光を受けて表示されるようになった。

 

Shadow Cast Mask

ライトノードのLighting Maskの値と同じ値にすると、光を受けたノードの後ろに影が表示される。

 

Shadowed Mask

公式リファレンスを読むと、ライトノードによって投じられた影の中にノードがいて、Z Positionがライトノードよりも小さい場合何かが起きるようなことが書かれているが、検証では設定値を変更しても外見上の変化は観測されなかった。

何か知っている方がいれば教えて頂けると幸いです。

shadowedBitMask
If the sprite is inside a shadow cast by a light and the sprite has a lower z position than the light, the shadow affects how the sprite is lit.