前回はスライムちゃんを動かせるようにしましたが、背景が真っ青なままでした。何もない所を歩いていると、動いているのかどうかも分かりませんよね・・・。今回はヴァンサバ風サバイバーゲームのシリーズの2回目として、Tilemapでお菓子工房の床を作って、工房の外に出ていかないように壁で囲んでみたいと思います！
- シリーズの目次：ヴァンサバ風ゲームの作り方
- 前回：#1 プロジェクトの準備とスライムちゃんを動かそう
今回作るもの
- Tilemapで、作業台とクッキングシートの床を敷く
- 床は40×30マス、歩けるのは中央のクッキングシート（34×24マス）
- シートの外に出られないように、見えない壁で囲む
- カメラが床の外（何もない所）を映さないようにする
今回はスクリプトを1つも書きません。全部エディタの操作だけで出来ます。
前回の続きから
- Unityのバージョンは6.3 LTS
- 記事作成時点では6000.3.22f1で確認しています
- テンプレートはUniversal 2D
- #1の状態：スライムちゃんが8方向に歩き、カメラが追いかける
Tilemapの基本的な使い方はTilemapの使い方-基本編でも紹介しています。この記事では、シリーズで使うぶんだけを説明します。
床のタイルを用意しよう
#1でダウンロードした素材の中に、床の絵が2枚入っています。
| ファイル | 見た目 | 使うところ |
|---|---|---|
tile_counter | 木の作業台 | 工房のまわり |
tile_sheet | クッキングシート | まんなかの広い床 |
SurvivorsLike/Sprites/Tilesに入っています。.unitypackageで取り込んだ場合は設定済みですが、自分で入れた場合はPixels Per Unitを200にしておいてください。
1マス＝1ユニット＝200ピクセルでそろえてあります。タイルもスライムちゃんも同じ大きさの基準なので、並べたときにピッタリ合います。
Tilemapを置こう
- Hierarchyで右クリック>2D Object>Tilemap>Rectangular
- Gridと、その子のTilemapが出来る
- Gridを選んで、Cell SizeがX：1、Y：1になっていることを確認
次に、床がスライムちゃんより手前に描かれないようにします。
- HierarchyでTilemapを選ぶ
- InspectorのTilemap Rendererで、Order in Layerを-10にする
ここを忘れると、床がスライムちゃんの上にかぶさってキャラクターが見えなくなります
2Dでは「同じ並び順のものは、あとから描かれたほうが手前」になります。床はいちばん奥に置きたいので、Order in Layerを小さい数（ここでは-10）にしておきます。
タイルパレットを作ろう
Tilemapに絵を置くには、「タイル」という部品に変える必要があります。それをまとめておくのがタイルパレットです。
- Window>2D>Tile Paletteでパレットのウインドを開く
- 左上のCreate New Paletteをクリック
- Name：Workshop
- Grid：Rectangle（そのまま）
- Createを押して、保存先に
Assets/SurvivorsLike/Tilesフォルダを作って選ぶ
- Projectウインドから、
Sprites/Tilesの2枚をまとめてパレットにドラッグ＆ドロップ- タイルのアセットの保存先を聞かれるので、同じ
Tilesフォルダを選ぶ
- タイルのアセットの保存先を聞かれるので、同じ
スライムドラッグしたら急に保存先を聞かれて、あせりました・・・。パレットに置くと、絵ごとに「タイル」のファイルが1つずつ出来るんですね
これで、2枚の絵が「タイル」として使えるようになりました。
工房の床をしきつめよう
パレットの上にある道具（ブラシ）を使って塗っていきます。
| 道具 | 何をするか |
|---|---|
| ブラシ | 1マスずつ塗る |
| 四角（Rectangle） | ドラッグした範囲をまとめて塗る |
| 塗りつぶし（Fill） | つながっている同じ所をまとめて塗る |
今回は四角を使います。
- パレットで
tile_counter（作業台）を選び、四角の道具でX：-20〜19、Y：-15〜14の範囲を塗る- Sceneビューの左下に、今どのマスを指しているかの座標が出ます
- 次に
tile_sheet（クッキングシート）を選び、内側のX：-17〜16、Y：-12〜11を塗る- 上から重ねて塗るので、作業台の上にシートを敷いたような形になります
広さの決め方
歩ける広さ（34×24マス）は、画面（約18×10マス）の2倍ぐらいです。
- 狭すぎると、敵に囲まれたときに逃げ場がなくなる
- 広すぎると、敵を探して歩き回るだけの時間が増える
このジャンルは「逃げていたら敵が集まってくる」のが気持ちいいので、少し窮屈なぐらいがちょうど良いです。敵がどんどん増えてくる#10のウェーブまで作ったら、遊びながら確かめてみてください。
外に出られないようにしよう
このままだと、床の外までどこまでも歩いていけてしまいます。見えない壁で囲みましょう。
囲むのはクッキングシートの外側です。まわりの作業台は「工房のふち」として見えるだけで、スライムちゃんは乗りません。
- Hierarchyで右クリック>Create Empty、名前をWallsにする
- Wallsの子に、Create Emptyで4つ作る（Top・Bottom・Left・Right）
- それぞれにBox Collider 2Dを付けて、次のように設定する
| 名前 | Position | Box Collider 2DのSize |
|---|---|---|
| Top | (0, 12.5) | (34, 1) |
| Bottom | (0, -12.5) | (34, 1) |
| Left | (-17.5, 0) | (1, 24) |
| Right | (17.5, 0) | (1, 24) |
- なぜシートの外側なのか
- 床のいちばん外に壁を置くと、端まで行ったときにスライムちゃんが画面からはみ出してしまいます
- シートの外で止めておくと、まわりの作業台が「余白」になって、いつでも全身が見えます
- Sizeの数字
- シートが34×24マスなので、上下の壁は横34マス分、左右の壁は縦24マス分の長さにしています
- 厚さ（1マス）は、速く動いてもすり抜けないように少し太めにしてあります
カメラが工房の外を映さないようにしよう
壁で止まるようになりましたが、まだ問題があります。端のほうに行くと、カメラが床の外（何もない青い所）まで映してしまうんです。
CinemachineのConfiner 2Dを使うと、カメラが映す範囲を床の中に収められます。
- Hierarchyで右クリック>Create Empty、名前をCameraBoundsにする
- Box Collider 2Dを付けて、次のように設定する
- Is Trigger：チェックを入れる（当たり判定としては使わないため）
- チェックを忘れると、この枠がぶつかる当たり判定になって、スライムちゃんが押し出されるなど、おかしな動きになります
- Size：X：40、Y：30（床と同じ大きさ）
- Offset：(0, 0)
- Is Trigger：チェックを入れる（当たり判定としては使わないため）
- HierarchyでCinemachineCameraを選び、Add Component>Cinemachine Confiner 2D
- Bounding Shape 2Dに、さきほどのCameraBoundsをドラッグ
- カメラは「止まる」だけ
- 端に行くとカメラだけがその場で止まり、スライムちゃんは画面の端のほうへ動いていきます
- 床の外が映らないので、画面の中がいつも工房になります
- Damping
- Confinerにも Damping があります。0にするとピタッと止まり、大きくするほどやわらかく止まります
動かして確認！
再生して、工房の中を歩き回ってみましょう。
#2の動作確認
- クッキングシートの上をスライムちゃんが歩ける
- 床がスライムちゃんの後ろに描かれている（前に出ていない）
- シートの端まで行くと、見えない壁で止まる（作業台には乗れない）
- 端まで行っても、床の外（青い所）が画面に映らない
スライムちゃんと「場所」が出来ると、一気にゲームっぽくなりますね！
フェアリー自分がどれだけ動いたかも分かるようになったでしょ？次はここに敵を出していくよ
もっと広い世界にしたい人へ
今回は「決まった広さの工房」にしましたが、ヴァンサバのようにどこまでも続く地面にしたい場合もあると思います。その場合は、次のどちらかが定番です。
- 床のタイルを繰り返す：プレイヤーが進んだら、後ろのタイルを前に移す
- ルールタイルを使う：まわりのタイルに合わせて絵が自動で変わる仕組み。Tilemapを自動で並べたり、形によって切り替わるタイルの作り方で紹介しています
このシリーズでは10分で終わる1戦を作るので、広さを決めてしまったほうが、難易度の調整もしやすくなります。
あとがき
今回はTilemapでお菓子工房の床を作って、見えない壁で囲むところまで作りました。スクリプトを1行も書いていないのに、ぐっとゲームらしくなりましたね！次回はいよいよ敵の登場です。こげたクッキーを画面の外から出して、スライムちゃんを追いかけさせたいと思います。何百体出しても重くならない作り方も一緒に覚えましょう！
コメント
コメント一覧 （1件）
[…] 前回：#2 Tilemapでお菓子工房の床を作ろう […]