アドベンチャーゲームの元祖「Colossal Cave Adventure」をUnityを使用してスマホに移植している記録です。
1週目 解析編: Adventureのマスターデータを解析する
2週目 移植編: CのコードをC#に変換する
3週目 開発編: タイルマップ実践 ←
先週は基盤部分とタイルマップ作成を行ったので、
特に時間のかかった水面のタイルマップ作成について書きます。
タイルマップについて
UnityではUnity2017.2からタイルマップ機能に対応しています。
タイルマップとはマップチップと呼ばれるスプライトを等間隔に並べて街などのフィールドなどを作る手法です。
# ファミコン時代のドラクエやマリオなど
今回はこのタイルマップ機能を利用して画面作成を行っています。
2D機能はgitHubにて2D Extrasとして提供されているので以下マニュアルを参照ください。
公式マニュアル
https://docs.unity3d.com/ja/current/Manual/Tilemap.html
過去記事
Unity2017.2向けTilemap周りを試したので概要と感想
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形式です。
![スクリーンショット 2018-08-28 10.09.42.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F19692%2F968d99ea-e901-1db7-2410-f7f70bdca26b.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=5cf1db1ad8ca7db961ed6b80f08700cb)
Sprite調整
カクカクにしたいのでFilter ModeをPoint(no filter)にします。
Pixel Per Unit は Scale / Pixel のことでTransformの単位です。
今回は1に設定しました。
Sprite ModelをMultipleにして分断します
![スクリーンショット 2018-08-28 10.10.56.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F19692%2F396800dc-6178-6657-0359-a2460ec901f8.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=3c2a5ac4d18b1ed889c5f6bc1986dd8f)
Rule Tile設定
アニメーション・回転・オートタイルはすべてRule Tileで設定できます。
Coliderは衝突なしならNone, ありならGridにします。
今回の水面は以下10パターン、各4アニメーション(フレーム1,2,3,2のリピート)で形成しました。
(RPG Makerのようにするには48パターン必要となるので一部不要になるパターンを省きました)
ルールは上の方が優先されるようです。
![スクリーンショット 2018-08-28 10.29.08.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F19692%2F9f2a8470-0832-387a-4726-fa33b9864963.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=99443d610422ca9f53569eb884d23903)
![スクリーンショット 2018-08-28 10.29.19.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F19692%2F894f2de5-156b-7268-28ec-ec5606482017.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=1f7a87d697fb15a29507c6b2a0d5f8d5)
![スクリーンショット 2018-08-28 10.29.25.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F19692%2F282d9ca9-0a1c-ea55-d30f-53377626a74c.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=7d110a91d8113d97fbd14f91e2345950)
上記設定で適当にぐりぐりやると以下のようにオートタイルとなっていることがわかります。
![スクリーンショット 2018-08-29 2.33.19.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F19692%2F7aca27c9-8afb-4bd4-024f-03306b144298.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=a3882dcbf662f09f14344ef01d852cf4)
Inspectorでアニメーション設定
タイルマップアニメーションのfpsは別途設定となります。
ゆっくりめが良いので4 (0.25秒に1フレーム) に設定しました。
![スクリーンショット 2018-08-28 10.31.58.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F19692%2F5abf226a-beea-8743-af74-e33515843c48.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=eb5da9f9d829ae99d562a60c358f689e)
タイルマップのGameObject構成
フィールド、オブジェクト1、オブジェクト2のレイヤーとしました。
オブジェクト2は屋根など、モノにかぶせる場合に使用します。
こんな感じになりました。
Field | +Object1 | +Object2 |
---|---|---|
![]() |
![]() |
![]() |
UIもかぶせると以下のようになりました。
なんとなくゲームっぽくなってきた..?
![スクリーンショット 2018-08-28 10.49.15.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F19692%2F936a424a-6aec-70fc-0b64-c110bc014f0d.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=b317a554abf36cf1a45ed080c52b0995)
感想
タイルマップは一度できれば楽しいですが、タイル作成までの下準備が大変でした。。
雑感ですがUnityのタイルマップ機能はRPG向けではなくアクションゲームに特化している気がしました。(当たり判定の充実度や、キャラクタータイルの作りづらさなど)