ゲームAdventureをスマホに移植する3週目:タイルマップ実践

アドベンチャーゲームの元祖「Colossal Cave Adventure」をUnityを使用してスマホに移植している記録です。

[1週目 解析編: Adventureのマスターデータを解析する](https://qiita.com/keidroid/items/b6a16c17474e6e83c6f1)
[2週目 移植編: CのコードをC#に変換する](https://qiita.com/keidroid/items/7d5111b5bb09ceea064f)
3週目 開発編: タイルマップ実践 ←

先週は基盤部分とタイルマップ作成を行ったので、
特に時間のかかった水面のタイルマップ作成について書きます。

# タイルマップについて

UnityではUnity2017.2からタイルマップ機能に対応しています。
タイルマップとはマップチップと呼ばれるスプライトを等間隔に並べて街などのフィールドなどを作る手法です。

＃ ファミコン時代のドラクエやマリオなど

今回はこのタイルマップ機能を利用して画面作成を行っています。
2D機能はgitHubにて2D Extrasとして提供されているので以下マニュアルを参照ください。

公式マニュアル
https://docs.unity3d.com/ja/current/Manual/Tilemap.html

過去記事
[Unity2017.2向けTilemap周りを試したので概要と感想](https://qiita.com/keidroid/items/096491b7692ea7d1a4f1)

# Adventureの冒頭シーンをタイルマップで再現

ゲームAdventureは以下の文から始まります。
これをタイルマップで再現します。

>You are standing at the end of a road before a small brick building.
Around you is a forest.  A small stream flows out of the building and
down a gully.

ざっくり日本語では

> レンガの小屋の前にある道の終点に立っている。
周りには森がある。
小川が小屋から峡谷へと流れている。

です。この時点で地面、小屋、川、木のタイルマップが必要となりました。。
タイルマップのアセットは以下を購入し使用しています。

Fantasy RPG Tileset Pack
https://assetstore.unity.com/packages/2d/environments/fantasy-rpg-tileset-pack-48875

## 水面のタイルマップ作成方法

一番手間だった水面タイルの作成手順を記録します。
画像ファイルは以下のような32x32のRPG Maker形式です。

<img width="200" alt="スクリーンショット 2018-08-28 10.09.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/19692/968d99ea-e901-1db7-2410-f7f70bdca26b.png">


### Sprite調整

カクカクにしたいのでFilter ModeをPoint(no filter)にします。
Pixel Per Unit は Scale / Pixel のことでTransformの単位です。
今回は1に設定しました。
Sprite ModelをMultipleにして分断します

<img width="273" alt="スクリーンショット 2018-08-28 10.10.56.png" src="https://qiita-image-store.s3.amazonaws.com/0/19692/396800dc-6178-6657-0359-a2460ec901f8.png">


### Rule Tile設定

アニメーション・回転・オートタイルはすべてRule Tileで設定できます。
Coliderは衝突なしならNone, ありならGridにします。

今回の水面は以下10パターン、各4アニメーション(フレーム1,2,3,2のリピート)で形成しました。
(RPG Makerのようにするには48パターン必要となるので一部不要になるパターンを省きました)
ルールは上の方が優先されるようです。

<img width="276" alt="スクリーンショット 2018-08-28 10.29.08.png" src="https://qiita-image-store.s3.amazonaws.com/0/19692/9f2a8470-0832-387a-4726-fa33b9864963.png">
<img width="270" alt="スクリーンショット 2018-08-28 10.29.19.png" src="https://qiita-image-store.s3.amazonaws.com/0/19692/894f2de5-156b-7268-28ec-ec5606482017.png">
<img width="274" alt="スクリーンショット 2018-08-28 10.29.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/19692/282d9ca9-0a1c-ea55-d30f-53377626a74c.png">

上記設定で適当にぐりぐりやると以下のようにオートタイルとなっていることがわかります。

<img width="1201" alt="スクリーンショット 2018-08-29 2.33.19.png" src="https://qiita-image-store.s3.amazonaws.com/0/19692/7aca27c9-8afb-4bd4-024f-03306b144298.png">


### Inspectorでアニメーション設定

タイルマップアニメーションのfpsは別途設定となります。
ゆっくりめが良いので4 (0.25秒に1フレーム) に設定しました。

<img width="294" alt="スクリーンショット 2018-08-28 10.31.58.png" src="https://qiita-image-store.s3.amazonaws.com/0/19692/5abf226a-beea-8743-af74-e33515843c48.png">


## タイルマップのGameObject構成

フィールド、オブジェクト1、オブジェクト2のレイヤーとしました。
オブジェクト2は屋根など、モノにかぶせる場合に使用します。

こんな感じになりました。

|Field|+Object1|+Object2|
|:--|:--|:--|
|<img width="300" alt="スクリーンショット 2018-08-28 10.12.35.png" src="https://qiita-image-store.s3.amazonaws.com/0/19692/6bb06a46-1fa9-4953-e363-f630adc32aef.png" >|<img width="300" alt="スクリーンショット 2018-08-28 10.12.43.png" src="https://qiita-image-store.s3.amazonaws.com/0/19692/79316c17-415c-41b7-c905-87b4f21b1fc0.png">|<img width="300" alt="スクリーンショット 2018-08-28 10.12.52.png" src="https://qiita-image-store.s3.amazonaws.com/0/19692/76861569-8f92-bb11-3edb-a86b00b905f8.png">|

UIもかぶせると以下のようになりました。
なんとなくゲームっぽくなってきた..?

<img width="1204" alt="スクリーンショット 2018-08-28 10.49.15.png" src="https://qiita-image-store.s3.amazonaws.com/0/19692/936a424a-6aec-70fc-0b64-c110bc014f0d.png">


# 感想

タイルマップは一度できれば楽しいですが、タイル作成までの下準備が大変でした。。
雑感ですがUnityのタイルマップ機能はRPG向けではなくアクションゲームに特化している気がしました。(当たり判定の充実度や、キャラクタータイルの作りづらさなど)