EasyRoads3Dで手軽に道のある景色を作る

景色って、道が見えるだけで何か文明が存在する感じがして、どことなく安心感を覚えますね。
そんな「道」をUnityで手軽に景色へ敷くことができるassetがあります。
その名も「Easy Roads 3D」です。

この記事は「Unityアセット冬のアドベントカレンダー 2019 Winter!」の、24日目の記事です。

12月24日ですね。クリスマス・イブです!
マライア・キャリーよりも山下達郎の方がしっくり来るのは世代でしょうか。

<Easy Roads 3Dとは>

Easy Roads 3Dの主な用途を一言で書くと、「プロシージャルなメッシュの道路生成」です。
道路だけでなく、Side Objectと呼ばれる歩道とか街灯とかガードレールとか、もっと言うと、道が無くても金網だけとか木の柵だけのオブジェクトも作れちゃいます。さらに、道を川にして堤防を付けたり、線路にして砂利の台を付けるなんてこともできます。
あと、Connection Prefabという十字やT字路のオブジェクトを設置して、道路で街を作ることも可能です。
これらの機能は、Easy Roads 3Dをプラレールのように使って楽しいassetにしている部分でもあります。

Easy Roads 3Dはスプラインベースのパスで道路を作ります。
なので、自由曲線で自然なTerrainへ道路を敷設するのは比較的ラクですが、区画整備されたような街の道路を作るのは手間がかかります。
新しいバージョンでは、Snap gridも用意されているのでだいぶ作りやすくなっていますが、マーカー(ポイント)に接線ハンドルもないので、スプラインのクセを覚えないと思った通りの制御ができないことは知っておいた方が良いと思います。
高低差がない区画整備された道路は、タイル式の道路assetの方が早く作れるかもしれません。

Easy Roads 3Dは、Terrainを地面として使うことを推奨していますが、Planeなどのメッシュが地面でも問題なく道路を敷設できます。

Easy Roads 3Dには、無料版と有料版のProがあります。今回の記事では有料のProを使っていますが、無料版でも道を設置するのはできると思います。
assetはAssetStoreで購入できます。

Easy Roads 3Dの作者さんはメチャクチャやる気のある方で、Unityの公式forumで質問などをするとすぐに返事がもらえます。また、バージョンの上げ方やforumで質問のやりとりをした感じから、しっかり慎重にEasy Roads 3Dを開発していることが伺えます。

Youtubeのチュートリアルや新バージョン予告動画も充実しています。今後公開される予定の新バージョンは、凄い機能が目白押しです。

マニュアルはhtmlでしっかり作られていて、webで公開されています。このhtmlマニュアルは、もちろんassetにも同梱されています。

ちなみに、Easy Roads 3D Pro本体には最低限のSide Objectしか付属していないので、高架やフェンスなどのオブジェクトは「EasyRoads3D Demo Project」というassetが必要です。(私は、Pro本体を買った時に無料でゲットできたのですが、今はどうなってるか分からないです。
<追記>
★作者さんから教えてもらいました。Pro版を購入した後であれば、Demo Project($45)は無料になります!逆を言えば、無料版のEasy Roads 3DでもDemo Projectの部品が使えるということです。Pro版の購入を予定しているなら、Pro版を買ってからDemo Projectを買う方が圧倒的にお得ですね。
安くはないassetなので、一度Easy Roads 3D 無料版が使い物になるか試してから購入検討した方が良いと思います。

あと、今回使用するTerrainは、Gaiaという地形生成assetで作りました。
UnityのTerrainツールを使う方が自分の思い通りの地形が作れるのですが、見栄えがする状態になるには時間がかかるので。w
Gaiaだと、今回の記事で使っているようなTerrainが速攻で作れます。
Gaiaは超有名なassetなので説明は要らないかもしれませんが、スタンプで簡単にリアルなTerrainが作れるassetです。

<Easy Roads 3Dの導入>

Easy Roads 3DをUnityプロジェクトにImportしてTerrainが出来たら、最初にRoad Networkというオブジェクトを作ります。
Create メニューにEasy Roads 3D欄が現れるので、そこから「New Road Network」を選びます。

シーンにRoad Networkを設置しようとすると、最初にTerrainのバックアップを取るか?と訪ねてきます。
前述した通り、Easy Roads 3Dは敷設した道路に応じてTerrainを整形させることもできるので、Terrainを戻したい時はこれを使うこともできるので、(★作者さんからの指摘で、Terrainバックアップは予期せぬ問題が発生した時に使うことができるTerrainを保存しておく機能とのことです。)必要に応じてYes/Noを決めます。(今回はテストシーンなのでNoにしておきました)

次にSide objectのプリセットをプロジェクトにimportするか訪ねてきます。これも必要に応じて予め全部importするか、あとで欲しいSide objectを個別に追加するかで決めます。
注意点としては、importしてAddしたSide objectは、使ってなくてもアプリのビルドの容量に加えられてしまうことがありました。
練習の時は全部がオススメですが、慣れてきたら(どんなSide objectがあるか分かったら)後から追加する方が容量最適化の作業をしなくて済むかもしれません。
今回は、後述のガードレール設置の説明を省略するために、Yesして全部importしておきます。

最後に道路のプリセットもimportするか聞いてきます。片側2車線の道路や、ダート、線路などのプリセットをimportするかどうかです。
これもSide object同様の判断でYes/Noを決めて良いと思います。
(今回はYesにしました)

一通りダイアログでの設問に答えると、Hierarchy上に「Road Network」というGame Objectが設置されます。

このRoad Networkを選ぶと、InspectorにEasy Roads 3DのUIが表示されます。
Easy Roads 3Dの基本的な操作は、すべてここで行います。
ボタンがいくつかあってイロイロできそうな感じですが、一旦「手軽に道のある風景を作る」というテーマに従って最初の一歩的な作業に絞って説明していきます。

<とりあえず道路を作ってみる>

左から2番目の道路に+のアイコンボタンで「Add New Road/Object」を開きます。
先ほど道のテンプレートを読み込んだので、「Select Road Type」をプルダウンするとたくさんの道が選べるようになっています。
今回は、「14.Primary Road」を選び、「Add New Object」をクリックします。

Road NetworkのInspectorで、一番左の「<」ボタンを押して「Scene Control」を開き、SceneビューのTerrain上にマウスのShift+左クリックでマーカーをポチポチと設置して道路を伸ばしていきます。
ちょっと道路が大きすぎに見える場合は、Terrainに寄りすぎかもしれません。また、道路が小さすぎて見えないくらいの場合は、Terrainから離れすぎてるかもしれません。
自分がコントロールしやすい大きさになるよう、Sceneビューのズームで調整します。

どうですか?
まだ適当にマーカー(マウスでクリックした青い球をMarkerと言います)を置いただけですが、信じられないくらい簡単に道路が敷設できますね。
敷設してる最中に、Cmd+z(Ctrl+z)で操作を1つ戻せます。例えば、設置したマーカーが気に入らなければ、これで設置した直後のマーカーを消せます。
また、仮に敷設の途中で途絶えても、末端のマーカーを選んでShift+左クリックすれば、続けて道路を伸ばしていけます。
(マーカーが見えない場合は、見えるまで道路に寄ります。また、この見える範囲などは、後述の設定で変えられます)

<Road Networkの構造>

ここで、この先にマーカーを調整して道路の見栄えを良くしていきますが、その前にRoad Networkの構造について軽く説明します。
これを知らないと、Easy Roads 3Dのクセが理解できず取っ付きにくいassetになってしまいますので。(実は自分がそうで、これが分からずに「使えないassetだ!」と買って半年くらい放置してましたw)

UnityのHierarchyでRoad Networkオブジェクトを開くと、Connection ObjectsとRoad Objectsの2つのGame Objectが並んでいます。
前者は前述のT字路など交差点のオブジェクトが入る場所、後者は道路のオブジェクトが入る場所です。
交差点は、1つずつConnection Objectsの下に子オブジェクトして入ります。
道路は、1本(接続が切れていない状態)ずつRoad Objects下に子オブジェクトとして並びます。
つまり、選択する際はScene ビューからマウスでクリックして選ばなくても、Hierarchyからも選べると言うわけです。
と言うのも、道路が複雑になっていくほどSceneビューでマウスをクリックしてお目当の道路を選ぶのが難しくなっていきます。なので、Hierarchyでオブジェクトを選ぶ方法を知っておくと便利ですし、今自分がどこで何をしているかが把握できるようになります。

Hierarchyで道路を選ぶと、マーカーを選択して道路を編集できる状態にはなりません。その場合は、HierarchyでRoad Networkを選択して、Inspectorで「<」ボタンを押してScene Controlを開くと、マーカーを選べる状態になります。
これがEasy Roads 3Dのクセというか面倒臭さですが、この関係性を知っていればSceneビューから選ぶ方法とHierarchyから選ぶ方法を使い分け、効率よく道路を編集できると思います。

つまり、何してるのか分からなくなったら、HierarchyでRoad Networkを押せばUIに戻れるというのを覚えておけばOKです。

<自分の思い描く道路にする>

さて、道路の見栄えを良くする作業の話に戻ります。

Sceneビューから俯瞰でマーカーをポチポチ置くだけだと、Gameビューで見たら道の感じがイマイチだったりします。
そんな時は、Sceneビューでマーカーを選択して、Unityの移動ツールを使って道路を調整します。Sceneビューだけでは何が起きてるか分かりにくいので、Gameビューで見ながら移動ツールで動かして調整すると良いです。
道路がGameビューに現れず、Sceneビューでは透明になっている場合は、Terrainなどの陰に隠れている状態を表します。マーカーを移動させて、道路を見えるところへ引きずり出しましょう。
前述の通り、マーカーが表示されるにはSceneビューの視点が道路に近い必要があるので、UnityのSceneビューをFPS的に移動する「右クリック+W,A,S,D/Q,E (+Shift)」を使えるようにしておく方が良いです。あと、マウスのズームホイールもよく使うと思います。
また、マーカーが表示されていなくても、道路上をマウスオーバーしてなぞっていると、表示されていなかったマーカーが表示されることもあるので、それで選択するという方法もありです。

Easy Roads 3Dでは、道路を地面の起伏に沿わせるか、地面を整形して道路の水平を維持しようとするのかを、Roadオブジェクト単位(繋がった1本ずつ)で選ぶことができます。
Roadオブジェクトかマーカーを選んで、InspectorのScene Control画面(<ボタン)のRoad Settings▶︎内に「Follow Terrain Contours」というチェックボックスがあります。Terrainの起伏に沿わせるにはこれをチェックします。

ただ、Gaiaで作ったような起伏の激しいTerrainでは、道がガクガクになってしまいます。実際は、なだらかなTerrainで使う機能だと思います。
また、道路の周囲に白い立体が見えてると思います。これが、道路の周囲のTerrainを自動で整形してくれる範囲です。

RoadNetworkオブジェクトのInspectorで、山に矢印のタブボタンを押して「Build Settings」を開きます。
ここで「Build Terrain(s)」をすると、、、

その立体に沿ってTerrainが整形されます!
Easy Roads 3Dでは拍子抜けするくらい簡単な操作ですが、この機能が無いパス系の道路は、Terrainと道路の調整に結構な手間がかかります。
ここがEasy Roads 3Dの凄いところです。
多少、使い勝手にクセがあったり、トラブルが起きやすくて慣れが必要でも、Easy Roads 3Dを使いたくなる凄いところです。w

もちろん、整形してしまったTerrainは戻せます。先ほどのBuild Settings画面が整形後のFinalize(仕上げ作業)待ち状態になっているので、一番上の「Back to Edit Mode」ボタンを押すと、整形前の状態に戻せます。
どんな感じに整形されるかBuild Terrainsして確認して、Back to Edit Modeで戻ってマーカーを調整する、の行き来ができます。
(※Back to Edit Modeをする前にマーカーを調整してしまうと、そこを基点にしてBuild Terrainsするようになってしまって、最初の状態に戻れなくなるので注意してください)

あと、たまに道路にTerrainのテクスチャがちょっと顔を出して、道路表面がギザギザすることがあります。
そんな時は、「Back to Edit Mode」ボタンの上にある「Raise Road Network」に0.1とか数値を入れれば、数値の分だけRoad Network全体をTerrainから浮かせることができます。(単位はUnityのunit単位です)
あまり数値を上げ過ぎると、真横から見たときに浮き過ぎるので注意です。

あと、敢えてTerrainを整形したくない場合は、Road Settings画面にあるTerrain Deformationというチェックを外せば、白い整形範囲が消えてBuild Terrainしても、その道路だけはTerrainが整形されません。
例えば、道路に高架のSide Objectを付けて、地形に沿う道路ではなく高速道路にしたり橋を付けたりする時に使います。

道路に木や草が生えてしまっていても、Build Settings画面にある「Remove Trees」や「Remove Detail Objects」をチェックしてBuild Terrainすれば、道路のパス上からTerrain上の草木を簡単に消せます。

それから、Terrainの整形は「足す」だけではありません。Build Terrainの前に、わざと道路をTerrainの崖に入れると、Terrainを削って「引く」整形もしてくれます。

ただ、残念ながら現状のUnityのTerrainの仕様でトンネルは掘れません。
現在、Easy Roads 3D Proはv3.1.9.xですが、間も無くUnity2019.3に対応したv3.2がリリースされる予定となっています。
そのバージョンではトンネルが掘れたり、高架などのSide Objectが自動で付くようになるなど、魅力的な新機能が盛りだくさんなので超期待です。

Terrainを「足す」か「引く」かは、どんな景色にしたいかで決めるのが良いと思います。

道のある景色がサクッと出来てしまいました!

<Side Objectで道路らしくする>

道路は敷設できたものの、ガードレールが無いので非常に危険な山道です。w
また、街灯などを設置することで、グッと文明レベルが向上した道路になります。
それを実現するのがSide Object機能です。ガードレールと街灯を設置してみます。

予め、Side Objectをimportしていた前提で話を進めます。
「<」ボタンでScene Controlを開き、道路のマーカーをShiftキーを押しながら順に2つ以上選択します。(ちなみに、Roadオブジェクト全部のマーカーを選択するには、1つマーカーを選択した状態でShift+Zです)
Side Objectは、マーカーが選択された範囲に適用されます。
Scene Controlが表示されたInspectorを下にスクロールしていき、Side Objectsという項目を見つけます。
▶︎が閉じていたら開きます。
すると、Barriersから始まるSide Objectsのタブボタンが現れます。
ガードレールはBarriersに属するので、タブボタンを変える必要はありません。
Guard Rail LeftとRightのチェックボックスが並んでいるので、両方をチェックします。
さらにInspectorをスクロールさせ、Marker Side Object Settingという欄があるので、▶︎が閉じていたら開きます。
Selected Side Objectというプルダウンがあるので、Guard Rail Leftでプルダウンメニューの下にあるActiveをチェック、Rightも同様に選んでチェックします。
このチェックを入れた瞬間、Easy Roads 3Dの道路にガードレールが設置されます。

カメラを道路に立った位置へ持っていくと、道路にガードレールが続いています!
ちょっと感動じゃ無いですか?
同じ方法で、Side Objects欄の「Props」タブボタンにある「Lampposts」を使うと街灯も設置できるので試してみてください。

以上で、道路がある景色の作成は終了です。

<最低限、覚えておいた方が良い機能>

機能の設定項目数が半端ないので、最低限だけ覚えておいた方がスムーズにEasy Roads 3Dを使える機能を紹介します。

■絶対に覚えた方が良いショートカット

●Shift+ZでRoad Objectの全マーカーを選択
●Shift+Rで選択したmarkerを消せる。
●スプライン上でShift+Iでmarkerを追加できる。
●Shift+Uで選択した分離可能なマーカーを切り離せる(ドラッグと同じ)
●Shift+Jで選択した2つのマーカーを道路でつなぐ。繋がった道路上の1つのマーカーの場合は切り離す。

これを知ってるか否かで全然作業効率が違います。
何しろ、マーカーを消したりする機能は、ショートカット以外に見当たらないので。w

■道路の接続と分離

道路のオブジェクト同士を結合するには、端のマーカー同士が重なるようにマウスでドラッグして、マーカーが反応したらマウスを離します。(結合できるマーカーが重なると、マーカーが水色で少し大きくなります)
(片方の道路に歩道などの特別なオブジェクトがある場合、結合できないことがあります)
もし、片方の道路の末端マーカーが緑じゃなければ、末端マーカーを選んでInspectorの下の方にあるInsert I Connectorというボタンを押します。
これで末端マーカーに接続できるコネクターが追加されます。

分離する際は、分離可能なマーカーで移動ツールを使ってマーカーをグイっと引っ張ると分離できます(予めマーカーが分離できる必要があります)。
分離させる作業自体は、分離させたいマーカーを選択し、Scene Control画面の下の方に「Split Road at Selected Maker」というボタンを押せば、1本の道路を2本の道路に切り離せます。

■完成とバックアップ

Build Settings画面でFinalizeをすると、Road Networkオブジェクト下の道路オブジェクトたちから編集用のコンポーネントが削除されます。
Easy Roads 3Dは、1つのシーンに1つのRoad Networkオブジェクトしか設置できないので、編集可能なオリジナルを残すには別のシーンを作って保存しておくしかありません。

■Unityエディタで負荷を軽くする、使いやすくする

General Settings(歯車の設定タブボタン)のScene Settings欄にあるHighlight IndentsやHide White Surfacesを必要に応じてオンオフすると、整形範囲などが表示されなくなり、エディタの表示負荷が軽くなります。

同じ場所のMarker Display Distanceで、エディタの視点からどれくらいの距離ないはマーカーを表示するか決められます。また、Marker Handle Sizeはマーカーの球の大きさを大きくすることで、遠くに離れすぎてもマーカーの球が拾いやすくなります(近いと逆に大きすぎて、Unityの矢印ハンドルが操作できないなど邪魔になります)。

最後に、Easy Roads 3Dの負荷についてです。
前述の通り、General SettingsでFinalizeして負荷を減らせますが、Materialの設定(SpecularやReflectionを外したり、Normalマッピングなども外す)を軽めにすれば、Road Networkが編集可能な状態でもiPhoneで再生して特に負荷がかかるようなことはありません。
(Side Objectはモノによって負荷が高くなるので注意が必要です)

どうですか?道が景色に追加されると、なんかワクワクしてきますよね。
ぜひ、Easy Roads 3Dで楽しい道路作成にチャレンジしてみてください!

<Easy Roads 3DとiPhoneアプリ>

以下は、Easy Roads 3Dを使ったアプリ「とけいであそぶ3D」です。
iPhone8で十分な速度で動くので参考にしてもらえればと思います。
Android版もありますが、SoCが高い端末でないと重くなっていまうかもしれません)

以下は、Easy Roads 3Dを使った間もなく公開予定のアプリ「ドライビング スクール シミュレーター」です。
今まで覚えてきたEasy Roads 3Dの技をいろいろ使う予定です。

★★★予約トップ10にて、予約受付中です!★★★

以下はドライビングスクールシミュレーターを始める前の技術検証で作った島です。

EasyRoads3D ProのTerrain Deformationの足すと引くが見た目に分かりやすいです。
足されているところは道路の下に地形が隆起し、引いているところは丘が道路でえぐられています。

歩道とガードレールを付けた状態です。
ガードレールはSide Objectですが、歩道はSide Objectではなく道路に付随する特別な機能です。歩道の方は、道路を連結する際にクセがあるので覚える必要があります。

<Easy Roads 3DとWebGL>

過去にEasy Roads 3Dで街作りにチャレンジしたことがあるので、そのWebGLゲーム「Unityちゃんの子ネコを探せ(Unity Room)」を紹介します。
Easy Roads 3Dで、区画整備された街を作る参考になればと思います。
コツは、「直線/曲線の切り替えのマーカー付近に、溜めのマーカーを打つ」です。