【Swift】SpriteKitの使い方。SKTileMapNodeで碁盤の目にタイルを配置してマップを作成する。(Swift 3.0、XCode 8.0)

2020年6月16日

SKTileMapNodeとは

本記事では、iOS10で登場したSKTileMapNode(以下、タイルマップノード)を試してみる。タイルマップノードとは、画像を格子状に並べて地図のような大きな画像を作る機能である。

Tile Map Node

 

WWDCのTile Mapの説明を参考にしているので、詳しくはそちらを参照されたし。ちなみにWWDCとは、Appleが開発者向けに開催している最新技術の説明会イベントのことである。
⇒「(WWDC) What’s New in SpriteKit

 

タイルマップノードを使ってみる

実際にタイルマップノードをシーンに配置してマップを作ってみよう。

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

事前準備では、マップ作成に用いる画像群を登録しておいた。

マップ作成に利用する画像

 

まず、タイルを登録するためのファイル(タイルセットファイル)を作成する。メニューから「File」⇒「New」⇒「File…」を選択する。

新規ファイルを作成する。

 

テンプレートを選択する画面が表示されるので、iOSの「Resource」⇒「SpriteKit Tile Set」を選択し、「Next」ボタンを押す。

テンプレートを選択する

 

ファイル名を入力する画面が表示されるので、Save Asに「TestTile」を入力、保存先がプロジェクトフォルダになっていることを確認し、「Create」ボタンを押す。

ファイル名と保存先を設定する

タイルを登録する。

上記で作成したファイルに2枚のタイルを登録する作業をする。

下図赤枠の「TestTile.sks」を選択、青枠の「new tile group」を選択、黄緑枠のアトリビュートインスペクタボタンを押して設定画面を表示し、Nameに「Field」を入力する。

水色枠のメディアライブラリボタンを押して画像一覧を表示し、名前が「center」の画像をドラッグ&ドロップでタイルにセットする(紫矢印)。これで1枚目のタイルの準備ができた。

TileMapに画像をセットする

 

下図赤枠の「Tile Set」を選択、黄緑枠の「+」ボタンを押して吹き出しのメニューを表示し、「New Single Tile Group」を選択する。

すると、青枠の「new tile group」が追加されるので選択する。水色枠のアトリビュートインスペクタボタンを押して設定画面を表示し、Nameに「Tree」を入力する。

紫枠のメディアライブラリボタンを押して画像一覧を表示し、名前が「center_tree」の画像をタイルにセットする(オレンジ矢印)。これで2枚目のタイルの準備ができた。

タイルに木を追加する

 

タイルマップノードを配置する。

下図赤枠の「TestScene.sks」を選択してシーンエディタを開く。黄緑枠のオブジェクトライブラリボタンを押して部品一覧を表示し、「Tile Map Node」をドラッグ&ドロップでシーンに配置する(紫矢印)。

水色枠のアトリビュートインスペクタボタンを押して設定画面を表示し、Map SizeのColumnsに「6」、Rowsに「6」を設定する。これでシーンに6×6マスのタイルを配置する準備ができた。

SKTileMapNodeをシーンに配置する

 

シーンに配置したタイルマップノードをダブルクリックすると、下図のようなタイルマップエディタ画面に切り替わる。

赤枠の「Select Tile」ボタンを押すと、先ほど設定した2枚のタイルが吹き出しで表示される。どちらかを選択したあとに碁盤のマスをクリックするとタイルが敷かれる。

タイルマップエディタを開く

 

XCodeバージョン8.0では碁盤のマスをクリックしてもタイルが敷かれないことがある。その場合、XCodeを一度再起動すると敷けるようになる。

今回は下図のようにタイルを敷いた。

タイルを設定したあと

 

タイルを敷いてシミュレーターを起動すると以下のようになる。

タイルマップを敷いたあと

 

タイルマップノードは64bitの端末でしか利用できない。なので、iPhone5以下の端末で実行した場合は、実行時に以下のようなエラーが発生する。

*** Terminating app due to uncaught exception 'NSRangeException’, reason: '*** -[NSKeyedUnarchiver decodeInt32ForKey:]: value (9223372036854775807) for key (_defaultTileGroupIndex) too large to fit in 32-bit integer’
***

 

タイルマップエディタのメニュー

タイルマップエディタの上部にあるメニュー項目を1つずつ説明する。

タイルマップエディタのメニュー

 

① Hand

タイルマップノードの表示位置をドラッグ&ドロップで移動できるようになる。シーン上の実際の位置が変わるわけでは無い。大きいタイルマップノードを編集しているときの編集場所の移動に使う。

 

② Eye Dropper

マスに配置してあるタイルをクリックすると、そのタイルを次に配置するタイルとして選択した状態にする。ペイントツールのスポイトのようなイメージ。

 

③ Select Tile

登録したタイルの中からマスに配置するタイルを選択する。

 

④ Brush

碁盤のマスをクリックすると、選択されているタイルがマスに配置されるようになる。

 

⑤ Flood Fill

碁盤のマスをクリックすると、マスと同じ種類のタイルでつながっている場所を一気に塗りつぶすようになる。ペイントツールの塗りつぶしのイメージ。

 

⑥ Erase

碁盤のマスをクリックすると、マスに配置されているタイルが削除されるようになる。

 

⑦ Select Brush Size

ブラシの大きさを4段階で指定できる。デフォルトは1。

1‥タイル1枚
2‥タイル21枚
3‥タイル37枚
4‥タイル61枚

 

⑧ Create Stamp

現在配置しているタイルから一定の範囲をコピーして、別の場所に貼り付けられるようにする。

 

⑨ Select Stamp

⑧でコピーしたスタンプの中から貼り付けるスタンプを選択する。

 

⑩ Rndomize

タイルマップノード全体を対象に、選択されているタイルをランダムに配置する。

 

タイルマップノードの説明は次回記事に続く。。