【Swift】SpriteKitの使い方。SKTileDefinitionを使ってタイルの画像を反転、回転したり、パラパラアニメのように切り替える。

2020年6月16日

SKTileDefinitionとは

本記事では、SKTileDefinition(以下、タイル定義)について説明する。タイル定義とは、SKTileMapNode(以下、タイルマップノード)のマスに配置するタイルの設定を行うためのクラスである。

タイルの画像を反転、回転させたり、パラパラアニメのように画像を変化させるときに利用する。

 

タイル定義を使ってみる

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

事前準備では、タイルマップノードをシーンに配置し、桜の木を咲かせておいた。

テスト開始前

 

下図赤枠の「TestTile.sks」を選択、青枠の「center」を選択、黄緑枠のアトリビュートインスペクタボタンを押して設定画面を表示する。これがタイル定義の設定画面である。

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

 

Name

タイル定義の名前。ソースコードからアクセスするための識別子に用いる。

 

Textures

タイルの画像。複数の画像を設定すればパラパラアニメのように変化させることができる。

実際にやってみよう。下図赤枠のメディアライブラリボタンを押して画像一覧を表示する。Ctrlキーを押しながら一覧の中の「sakura2」、「sakura3」、「sakura4」を選択し、ドラッグ&ドロップでTexturesまで運ぶ(青矢印)。

紫枠のTime Per Frameを「0.5」に変更する。

SKTileDefinitionのTexturesに画像を追加する。

 

シュミレーターを起動すると以下の動画のようになる。

Size

タイルのサイズ。W(Width)は幅、H(Height)は高さ。

 

Placement Weight

Variant Definitionに複数のタイルを設定した場合、この設定値の数字が大きいタイルのほうが配置される確率が高くなる。

 

Rotation

タイルの画像を回転する。回転角度の選択肢は90度、180度、270度の3択。

下図は270度を設定した結果。

SKTileDefinitionのRotationに「270 degree」を設定した結果

 

Flip Vertically

タイルの画像を垂直方向に反転する。

SKTileDefinitionのFlip Verticallyにチェックを入れた結果

 

Flip Horizontally

タイルの画像を水平方向に反転する。今回の桜では変化が分からない。

SKTileDefinitionのFlip Horizontallyにチェックを入れた結果

 

ソースコードでタイル定義を実装する

ちなみに、ソースコードでタイル定義を実装するには以下のコードのようにする。TileSetファイルは利用せずに実装した。

 

以下は実際のプレイ動画

 

ソースコードで8-Way Adjacency Groupを実装する。

さらにちなみに、8方向隣接グループをソースコードで実装するには以下のコードのようにする。13個のタイル定義を作成するのは結構時間がかかった。

(・□・;)フゥー

素直にTileSetファイルを利用したほうが良さそうだ。

 

下図は実行結果

8-Way Adjacency Groupをソースコードで実装