2D TOOLKIT を使ってみようず(完結編)

20091205-1

今回はタイルマップ

2D TOOLKIT の機能紹介の続きです、まだ紹介してない機能としてフォント機能や GUI 機能がありますがそれは使い方を覚えたらまた書いてみたいと思います。

今回はタイルマップの表示方法について説明を書いていきます、今回使うのは前回使い損ねたこのタイルマップです。
2dtk20131020-001

2D TOOLKIT のタイルマップ機能とは、X68000 や X1 風に例えると BG や PCG みたいなものです。あらかじめ用意された正方形(でない事もある)の画像をジグソーパズルのように並べて1つの画像を作り出します。

図にするとこういう感じです。
2dtk20131020-002

ではさっそくやってみましょう、Unity のプロジェクトは前々回の「2D TOOLKIT を使ってみようず(後編)」で作成したプロジェクトを追加する前提で作業していきます。

新規シーン作成

新規シーンを作成します。メニューの File → New Scene を選択し、新しいシーンを作成してください。
2dtk20131020-003

前回番外編で sample002 というフォルダを作ったので今回は sample003 というフォルダを作ります。Project ビューの Assets フォルダを右クリックし Create → Folder をクリックし、新規フォルダ名を sample003 とします。
2dtk20131020-004

2dtk20131020-005

作業を始める前に一旦シーンを保存しておきます。以後 Ctrl + S キーですぐに保存できます。File → Save Scene をクリックします。
2dtk20131020-006

シーンファイル保存ダイアログが表示されますので sample003 フォルダ内に移動してから sample003 というファイル名で保存します。これで準備 OK ですね。
2dtk20131020-007

タイルマップ用スプライトコレクション作成

タイルマップの元画像もスプライトコレクションとして管理します。Project ビューの Create → tk2d → Sprite Collection をクリックし、スプライトコレクションプレハブ作成ダイアログを表示させます。
2dtk20131020-008

ダイアログでは sample003 フォルダ内に入ってから sample003TMSC という名前でスプライトコレクションを作成します。後ろの TMSC は Tile Map Sprite Collection の略です。命名規則は各々自由に覚えやすいもので決めてもらったら良いと思います。
2dtk20131020-009

時々、ダイアログが出なくて直接変なフォルダにプレハブが作られる事がありますが、そういう時は作り直すか直接プレハブ名を変えて適宜目的のフォルダへ移動してあげてください。(2D TOOLKIT のバグ?)
2dtk20131020-010

スプライトコレクション用の元画像フォルダを作成します。Project ビューの Assets / sample003 フォルダを右クリックし Create → Folder をクリックし、新規フォルダ名を SourcePicture とします。
2dtk20131020-011

2dtk20131020-012

タイルマップ用に作成した画像を Assets / sample003 / SourcePicture フォルダへドラッグし、画像ファイルを Unity プロジェクトへインポートします。
2dtk20131020-013

Assets / sample003 フォルダの sample003TMSC をクリックし、インスペクタの Open Editor… をクリックしてスプライトコレクションのエディタを開きます。
2dtk20131020-014

タイルチップ用の画像は1枚の画像に複数種類の画像がまとめて描かれてますのでスプライトコレクションへはスプライトシートを使用して登録します。スプライトコレクションエディタウインドウの Create → Sprite Sheet をクリックします。
2dtk20131020-015

新規に作成されたスプライトシートにはまだテクスチャ画像が指定されていませんので、None (Texture 2D) の右下にある Select をクリックして Select Texture2D ダイアログを表示します。ここにはプロジェクト中の全てのテクスチャが表示されますので目的のテクスチャを見つけ出して選択してください。
2dtk20131020-016

テクスチャ選択後にタイルマップの内容を指定しますので Set up をクリックします。
2dtk20131020-017

ここでは画像のサイズと画像が敷き詰められている間隔を入力します。tiledata.png の画像は 32 x 32 のタイルマップ画像が 9 つ登録されており、間隔は詰めていますので Tile Width と Tile Height にそれぞれ 32 を入力します。その他の項目は 0 のままで OK です。入力完了後 Apply をクリックします。
2dtk20131020-018

次にスプライトコレクションの情報を設定します。Settings をクリックし Filter Mode を Point に Mip Maps をチェック状態にして Commit をクリックします。
2dtk20131020-019

Filter Mode を Point にするとドットがクッキリ見えるようになります。デフォルトの Bilinear は隣接するドットの色を滑らかに補完してくれるので仕上がりが綺麗になりますが、タイルマップの場合色が補完される事を考慮してあらかじめ画像を作る必要があるため Point の方が都合が良いです。

Mip Maps はタイルマップの絵柄によっては縮小時にモアレ(規則正しい模様を縮小すると縞模様が出る現象)が出る事があるので縮小処理をかける場合は Mip Maps をチェックするのがおすすめです。

タイルマップオブジェクト

スプライトコレクションの次はタイルマップオブジェクトの準備です。 Hierarchy ビューで Create → tk2d → TileMap をクリックし、タイルマップオブジェクトを作成します。
2dtk20131020-020

次はちょっと面倒です。TileMap の設定を行います。

1.Sprite Collection を sample003TMSC に設定

2.Tile Map Data を Create で新規作成し、作成場所を sample003 の下に指定して sample003TMD.asset ファイルとして保存

3.Editor Data を Create で新規作成し、作成場所を sample003 の下に指定して sample003TMED.asset ファイルとして保存

2dtk20131020-021

以上でタイルマップの作成準備が完了です。ちなみに2と3の肯定はすでにデータ作成済の場合、Project ビューから直接 Tile Map Data や Editor Data のアセットをそれぞれのプロパティにドロップするだけで設定完了できます。

タイルマップを作成してみる

いよいよタイルマップが作成できます。Hierarchy ビューで TileMap を選択し、インスペクタの Paint をクリックします。スプライトコレクションで登録したタイルマップ画像がパレットとして表示されますので好きなものを選択してください。
2dtk20131020-022

Scene ビューに見慣れないアイコンが表示されているのに気がつきましたか? ここではパレットで選択したタイルマップをどのように描画するかを決定できます。まずは一番左の Draw を選択し、Scene ビュー内の白い矩形内の好きな位置をクリックしてください。クリックした部分にパレットで選択したタイルマップが表示されれば成功です。

その場で1回クリックすればその場にタイルマップを配置したりタイルマップを削除したりできますが、クリックしたままマウスを動かす事で描画範囲を指定する事もできます。広範囲にまとめて編集したい場合は範囲指定による描画も活用するといいと思います。

また、タイルマップのパレットは Ctrl キーを押しながらクリックすることで複数選択が可能です。Draw Random を使用して単調になりがちな背景を複雑にしてあげると効果的です。編集が完了したら最後は Commit しておきましょう。
2dtk20131020-023

最後に Ctrl + S を押してシーンを保存しておきます。

次回は当たり判定のつけ方とか

ここまでは描画オンリーでゲームに必要なあたり判定とかには全く手をつけていません。次回は当たり判定の設定方法に手をつけてみます。

「シェアする」

ツイートツイート