[iOS 10] SpriteKit の Tile Map をさわってみた #1

2016.09.14

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

iOS 10 から、SpriteKit でタイルを敷きつめて画面をつくることができる SKTileMapNode というものが使えるようになったので、ちょっとさわってみようと思います。

ゲームプロジェクトを作る

まず、サンプル動作確認用の Game プロジェクトを作成します。

sk_tile_map_01_01

「Game Technology」のところは SpriteKit を選択します。

sk_tile_map_01_02

あとは画面の指示にしたがって、プロジェクトを作成してください。

タイルセットファイルを作る

次にタイルマップで使用するタイル素材をプロジェクトに追加します。

Assets.xcassetsフォルダに使用する素材を追加してください。
今回は、 白と薄いグレーと濃いグレーの3種類の画像を追加しました。

sk_tile_map_01_03

次に、タイルセットファイルを作成します。
New File... から SpriteKit Tile Set を選び、タイルセット用のsksファイルを作成します。

sk_tile_map_01_04

ここで、デフォルトタイルサイズを指定しておきます。今回は、サンプルなので、あまり何も考えずは48ぐらいにしました。

sk_tile_map_01_05

次に、メディアライブラリーから画像をドラッグして、タイル画像をセットします。

sk_tile_map_01_06

今回は、白と薄いグレーと濃いグレーの3枚タイルをセットしました。こんな感じです。

sk_tile_map_01_07

タイルマップをつくる

では、前準備が終わったのでタイルマップを作っていきます。

GameScene.sks ファイルをクリックして表示し、そこにタイルマップをドラッグして配置します。

sk_tile_map_01_08

タイルマップを配置したら、タイル何枚分の画面にするかの Map Size など、各設定を調整します。
今回は、一枚一枚敷き詰めていくシンプルな方法で配置するので、 Enable Automapping のチェックは外しておきます。

sk_tile_map_01_09

次にタイルマップをダブルクリックして編集モードにします。編集モードに切り替わるとグリッドが表示されます。

sk_tile_map_01_10

画面上部のツールバーの Select Tile から配置するタイルを選択します。

sk_tile_map_01_11

タイルを配置していきます。クリックでタイルを置けますが、ドラッグで一気に配置することもできます。

sk_tile_map_01_12

ひととおり、配置し終わりました。こんな感じです。
このタイルレイアウトで何をしようとしているかはのちのちのブログで解説します。

sk_tile_map_01_13

うごかしてみる

ひとまず、ここまでで動かしてみます。

sk_tile_map_01_14

はい、表示されました。今回はここまで。
ではでは。