ステージを作ろう

はじめに

ひつじを動かそうの続きです。
前回の講座で作ったボックスは邪魔になるので削除しておいてください。
この項では

1.タイルマップの説明
2.マップ制作の準備
3.実際にマップを作っていこう

ということを行います。

画像のインポート

まずは今回使う画像のインポートをしてもらいます。下の画像を保存して、Unity の Assets にドラッグ＆ドロップしてください。

#download(tiles.png)

ref

ステージ制作

Unity には Tilemap というものが標準的に備わっています。
画面が格子状に区切られるので、そこに画像を一マス一マス配置することで簡単にマップを制作することが出来るものです。
ヒエラルキーを右クリックして、2D object > Tilemap > Rectangular を押してください。

ref

画面が格子線が出てきましたね。
一マスに先ほどの画像を配置していきたいところですが、このままでは一枚の画像としか認識されません。
Unity では、画像を
そこで、Unity 内で画像をスライスしていきたいと思います。

画像のスライス

画像の tiles を選択して、Inspector の spritemode を Multiple に変更してください。

ref

これで画像を切り分けられるようになりました。
Inspector の Sprite Editor を押してください。
この時、警告が出るので Apply を押してください。

ref

左上の Slice から自動的に画像を分けることができます。
今回はグリッドごとに分けたいので、Grid by cell size を選んでください。
この時、PixcelSize の x と y を 32 にしてから、Sulice を押してください。

ref

そして、Tilemap に合わせるため、Inspector から Pixels Per Unit の数値を 100 から 32 に変更してください。

ref

これで画像を切り分けることができました。
画像の右の三角をおすと、切り分けた画像を選択できるようになっています。

ref

タイルパレット

まだマップを作る準備は終わっていません。次はタイルパレットを作っていきます。
画面上部から Windows > 2d > Tilepalette を選択してください。

ref

また、タイルパレットの画像を保存するフォルダを作ります。
Assets で右クリックして、 Create > folder を押してください。今回は名前を「Tilepalette」にします。

ref

その後、タイルパレットの画面から、Create New Palette を押して、新しいパレットを作成してください。
この時、フォルダは先ほど作ったフォルダを選択してください。

マップチップ

それでは、パレットにマップチップを追加しましょう。
スライスした画像をパレットにドラッグ＆ドロップしてください。

ref

これでマップを作る準備ができました。
ここで、タレットの操作を説明しておきます。

ref

左から

・マップチップを選択します。
・選択中のマップチップを移動します。
・選択したマップチップでグリッドを塗ります。Shift押しながらで削除できます。
・マップチップを範囲選択できます。
・スポイトです。このツールを選択した状態でシーンビューのマップチップをクリックすると、そのマップチップで塗れるようになります。
・消しゴムです。
・選択したマップチップでグリッドを塗りつぶします。

となっています。マップチップを選択して、3番目を選択して Seane 上をなぞると画像を配置することができます。
地面の画像はいろいろ用意されているので、自由に配置してみましょう。

ref

とりあえず適当にマップを作ってみました。
見た目はできてきますが、今の状態だと当たり判定がありません。この画像に当たり判定を付けてみましょう。
tilemap のインスペクターの AddComponent で Tilemap Collider 2d を検索して出てきたものをクリックしてください。

ref

これで、それぞれのグリッドの画像それぞれに当たり判定がつきました。
この当たり判定を一つにまとめることができます。
タイルマップに、さらに Composize Collider 2D を追加してください。
この時、勝手に Rigidbody2D がついてきますが、ステージには重力の影響を付けたくないので、rigidbody2D の type を static にしてください。
その後、Tilemap Collider 2D の sed by composize にチェックを入れると当たり判定がまとまります。

ref