Developer

【Unity実践】#3 ベジェ曲線でコース作成【ランゲーム】
2021.08.29
Lv2

【Unity実践】#3 ベジェ曲線でコース作成【ランゲーム】

今回の内容

今回はプレイヤーが走るコースのレイアウト作成を行います。

※初めての方はこちらから
【第1回記事】導入とサンプルの紹介

アセットのインポート

コースを作成するに当たって、以下のアセットをインポートしてください。

Projectビューで「PathCreator」フォルダが追加されていればインポート成功です。

Bézier Path Creatorの簡単な紹介

先ほどインポートしたアセットを使うと、経路を自由に作成することができます。

Stage1 シーンに空のオブジェクトを作成して、名前を PathCreator に設定します。
このオブジェクトに、先ほどインポートしたアセット内にある以下スクリプトをアタッチしましょう。
PathCreator > Core > Runtime > Objects > PathCreator

HierarchyビューでPathCreatorを選択し、シーンビューを見てみると以下の様になります。

これはベジェ曲線という曲線で、位置(赤い点)と方向(青い点)を使って曲線が表現されています。
点を増やしたり位置を変えることで様々な曲線を表現できます。

■基本操作

① 赤い点を末尾に追加する
シーンビューの空いている地点で Shiftキー + 左クリック

② 赤い点を先頭に追加する
シーンビューの空いている地点で Ctrlキー + Shiftキー + 左クリック

③ 赤い点を線の間に追加する
緑の線上で Shiftキー + 左クリック

④ 赤い点を削除する
点を選択して Deleteキー

⑤ 赤い点、青い点の位置を変更する
方法1:シーンビュー上で点を選択してドラッグ&ドロップします。
方法2:点を選択して、Inspectorビューで値を変更します。(下図)

上にまとめた方法を使って、自由に曲線を作成することが可能です。
なお、上記の操作方法やその他このアセットの詳細な使用方法は、以下のPDFに記載されています。
Assets > PathCreator > Documentation > Documentation

コースの作成

先ほど紹介した方法を使って、コースの経路を表す曲線を作成します。
ただこれをゼロからやると大変なので、今回は作成済みのモノを使用します。
ある程度連載が進んでステージを増やすときには、自由なコースを作成してみて頂ければと思います。

先ほどシーンに配置した PathCreator は不要なので削除します。

以下のファイルをダウンロードして、中身のパッケージをインポートしてください。
PathCreator.zip

インポート手順は下記の通りです。
1.ダウンロードしたzipファイルを解凍
2.Unityエディタのメニューで Assets > Import Package > Custom Package をクリック
3.1で解凍したフォルダ内にある、PathCreator.unitypackage を選択してインポート

ProjectビューにPrefabsフォルダが作成され、中にPathCreatorプレハブが入っていれば成功です。

インポートした Prefabs > PathCreator をシーンに配置しましょう。

PathCreatorを選択し、シーンを見てみると以下の様になっています。

これは、第1回の記事で紹介したサンプル内のコースと同様の経路を描いています。

次は線に対して幅を付けて実際の道っぽく見せていきます。
方法としてはBézier Path Creatorアセットに含まれている機能を使用します。

PathCreatorに以下のスクリプトをアタッチします。
PathCreator > Examples > Scripts > RoadMeshCreator

すると以下の様に、経路に沿って道路が表示されます。

デフォルトの設定では道路が横を向いていたり道幅が狭いので、設定を変更していきます。
PathCreator を選択して、Inspectorビューで RoadMeshCreator を以下の通り編集します。
・Road Width を 3 に変更(道路の幅を設定しています。数値は片車線の幅)
・Thickness を 0.5 に変更(道路の厚さを設定しています。)
・Flatten Surface(道路を水平に設定します。)

シーンビューを確認し、以下の様になっていれば成功です。
一気にコースっぽくなりました!

最後にマテリアルを使って、コースの見た目を変更します。
以下のzipファイルをダウンロードして解凍し、中身の RoadMaterials.unitypackage をインポートしてください。
(方法は、PathCreator の時と同様です。)
RoadMaterials.zip

以下の通り Images と Materials フォルダと合計6つのファイルが追加されます。

シーンビューのPathCreatorを選択して、RoadMeshCreator を下記の通り設定してください。
・RoadMaterial に RoadMaterial を設定
・Underside Material に RoadSideMaterial を設定
・Texture Tilling を 5 に設定

ほぼサンプル通りのコースとなります。

少々明るすぎるように感じるのでライティングの設定を調整しておきます。
Lightingビューで Environment Lighting > Source を Gradient に設定することとします。

※Lightingビューが無い場合は、メニューのWindow > Rendering > Lighting Settings で表示できます。
※この設定はお好みですので、マテリアル側で調整するなどもアリです。自由に変えてください。

以下の通り、先ほどよりも色がはっきりと表示されます。

これでひとまず、コースのメイン部分のレイアウトまでが完了です。
なお、当たり判定などの設定は次回行います。

PathCreatorのプレハブの設定を上書きしておきましょう。

(関連記事)
プレハブの使い方②(編集)

スタート、ゴールの作成

最後にスタート地点とゴール地点に当たる床をサクッと配置しておきます。
シーンに 3D Object > Cube を2つ配置し、それぞれ以下の設定として下さい。

① スタート地点(正確にはスタート地点の後ろに伸ばすための床)

② ゴール地点

※マテリアルは、先ほどインポートしたものを使用してください。

以下の表示となっていれば今回の内容は完了となります。

おわりに

今回は一気にステージの床に当たる部分の作成を進めました。
ベジェ曲線を使う箇所は完成形をインポートしましたが、かなり便利なアセットなので練習用のシーンなどで試してみて下さい。

次回はメインの経路の箇所にコライダーを設定したいと思います!

 

 
関連リンク ➡ 「初心者のための」Unityゲーム制作 目次

© Unity Technologies Japan/UCL