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

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

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

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

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

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

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

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

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

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

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

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

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

タイルマップをつくる

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

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

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

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

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

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

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

うごかしてみる

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

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