【Swift】SpriteKitの使い方。SKTileMapNodeをソースコードで操作する。(Swift 3.0、XCode 8.0)

2020年6月16日

この記事で説明すること

本記事では、SKTileMopNode(以下、タイルマップノード)をソースコードで扱う方法について説明する。シーンエディタを使った方法については次の記事を参照されたし。⇒「SKTileMapNodeとは

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

事前準備ではTile Setファイルを作成し、グリッド用のタイルセット(TestTileSet)に8方向隣接グループ(TestTileGroup)とシングルグループ(TestTitleGroup2)を登録しておいた。

事前準備

 

タイルマップノードをシーンに追加する。

まずはタイルマップノードにタイルを敷いて、シーンに配置してみよう。

タイルマップノードのサイズは1マス50×50ポイント、12行×12列にする。タイルを敷くマスは下図の緑色箇所とする。ちなみに、マスの行列番号はタイルマップノードの左下を基準として何列、何行目で指定する。

タイルマップノードのレイアウト

 

TestScene.swiftを以下のコードに変更する。タイルを配置する場所はタプルの配列で用意しておき、配列の要素数ぶんループしてマスにタイルを配置している。

 

下図は実行結果。なお、TileSetファイルを使わずにタイルマップノードをコードで実装する方法は次の記事を参照されたし。⇒「SKTileDefinitionの記事

Auto Mappingをfalseにした場合の実行結果

 

上記コードのオートマッピングをfalse(無効)にしている箇所をコメントアウトすれば、指定マスの上下左右斜めのマスにも画像が配置されるようになる。

Auto Mappingを有効にした場合の実行結果

タッチしたタイルを求める

画面をタッチした座標から、タッチしたマスやタイルの種類を求めてみよう。

TestScene.swiftに以下のメソッドを追加する。タッチしたタイルが木だった場合、タイルグループを桜の木に変更している。

 

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