UnityのスタンダードアセットのCarの速度表示をする

今回はスタンダードアセットのCarの速度をUIに表示する機能を作成していきます。

以前の記事でスタンダードアセットのCarを使って台地を走らせました。

UnityのスタンダードアセットのVehiclesにあるCarの設定を見ていき、実際に車で地面の上を走ってみます。

今回はスタンダードアセットのCarの速度をゲーム画面右下にメーターと数値で表示する機能を作成したいと思います。

今回の機能を作成すると以下のようなものが出来上がります。

スポンサーリンク

スタンダードアセットのCarを配置する

機能を作成する前に予め車が走る地面とスタンダードアセットのCarプレハブをヒエラルキー上に配置しておきます。

ヒエラルキー上で右クリックからCrate→3D Object→Planeを選択し、TransformのScaleのXYZを5000に設定します。

車の速度表示機能の記事の車が走る地面

このPlaneが車が走る地面になります。

次にAssets/StandardAssets/Vehicles/Car/Prefabs/Carをヒエラルキー上にドラッグ&ドロップします。

Carはそのままキーボードの十字キー等で操作出来るようになっています。

速度表示用のUIの作成

速度表示用のUIを作成していきます。

ヒエラルキー上で右クリックからUI→Panelを選択し、Panelの左上の矢印をShiftキーを押しながらドラッグし右下に小さく表示するようにサイズを調整します。

車の速度表示用のUIのパネルのサイズ

Panelは車の速度表示に関するUIの大枠として使用するだけなのでコンポーネントのImageの横のチェックを外し透明にしておきます。

車の速度表示用UIの大枠のパネル設定

Panelを選択した状態で右クリックからUI→Panelを選択し、名前をSpeedMeterPanelとします。

SpeedMeterPanelのAnchor Presetsではstretch stretchを選択し、親要素のPanelに合わせてサイズが変わるようにします。

SpeedMeterPanelのインスペクタのAdd ComponentからUI→Maskを選択しSpeedMeterPanelの子要素のUI要素をマスクするようにします。

SpeedMeterPanelのImageのSource Imageには速度メーターの画像を設定するようにします。

今回は以下のような画像を設定しました。

車の速度メーターに使用した画像

スタンダードアセットの画像だったかもしれないですが、どこで入手した画像かはわかりません・・・・・。

SpeedMeterPanelにもAdd ComponentからUI→Maskを選択し子要素のUIをマスクするようにします。

車の速度メーターのSpeedMeterPanelの設定

次に速度メーターは0キロ~最高速度までのメーターを表示させるようにしますが、そのメーターは下からくるっと回って360度回転するのではなく0キロの時は左下、最高速度の時は右下ぐらいまでにメーター表示を制限します。

車メーターの最低速度と最高速度の範囲を制限する

なので速度メーターの範囲として使用する画像を作成します。

車の速度表示機能に使用する速度メーター

上のように下がハの字になるような画像を作成します。

赤い部分以外は透明になるようにしています。

上の画像はご自由にお使いください。

作成したらUnityに取り込みインスペクタのTexture TypeをSpriteに変更します(ファイル名はspeedmeterとしました)。

車の速度メーター用のMask画像

次にSpeedMeterPanelを選択した状態で右クリックからUI→Panelを選択し、名前をBackgroundColorPanelとします。

BackgroundColorPanelのインスペクタのImageのSource Imageに先ほど取り込んだspeedmeterを設定します。

ImageのColorでRGBを0、Aを100とします。

BackgroundColorPanelは速度メーターの背景となります。

車の速度メーターの背景

次にBackgroundColorPanelを選択した状態で右クリックからUI→Imageを選択し、名前をSpeedMeterImageとします。

ColorはRAを255、GBを0とします。

SpeedMeterImageのAnchor Prestsはstretch stretchにし、親要素のBackgroundColorPanelのサイズに合わせます。

ImageのSource Imageに先ほど取り込んだspeedmeterを設定します。

Image TypeをFilleddにし、Fill Methodを360とし、Fill Amountが1の時に360度回転するようにします。

Fill OriginはBottomにし下から回転するようにします。

Clockwiseにチェックを入れ時計回りに回転させます。

SpeedMeterImageを実際の速度のメーター表示に使います。

車の速度メーターのイメージ

次にSpeedMeterPanelを選択し右クリックからUI→Textを選択し、名前をSpeedTextとします。

SpeedTextのAnchor Presetsはstretch stretchを選択し、親のSpeedMeterPanelのサイズに合わせます。

TextのFont Sizeを調整し、速度メーターの中に速度のテキストが表示されるようにします。

ParagraphのAlignmentを真ん中に設定します。

車の速度表示用テキストの設定

ここまでの速度表示用UIのヒエラルキーは以下のようになります。

車の速度表示用UIの階層

速度表示メーターは以下のようになります。

車の速度表示用UIの実際の画像

これで速度表示用UIの作成が終わりました。

車の速度を取得しUIに表示する

車の速度表示用UIが出来たので、後は車の速度を取得してそれをUIに表示するだけです。

新しくOutputCarSpeedスクリプトを作成し、ヒエラルキー上に配置したCarオブジェクトに取り付けます。

車の速度を保持しているのはCarオブジェクトに取り付けられたCarControllerなので、フィールドでcarControllerを宣言し、Startメソッドで同じオブジェクトに取り付けられているCarControllerを取得し入れておきます。

CarController.CurrentSpeedで現在の速度、CarController.MaxSpeedで最大速度が得られます。

Updateメソッドで行っていることは速度メーターのImageのFill Amountの量の調整です。

Fill Amountは0~1の間の数値を渡す必要があるので、最大速度に対する現在の速度の割合を与えると最低速度で0、最大速度で1の値が返ってきて、それをそのままFill Amountに設定すると良さそうです。

ですが、ハの字型の表示にしたので、単純にcarController.CurrentSpeed / carController.MaxSpeedとすると0~1の値が返ってきてしまって最低速度や最高速度付近の画像表示がおかしくなります。

そこで0の時は左下、最高速度の時は右下となるように調整する必要があります。

なので、Mathf.InverseLerpを使ってまずは最低が0、最高が1の時の最高速度に対する現在の速度の割合を求めratioに入れておきます。

Mathf.InverseLerpは第1引数が最低値、第2引数に最大値、の時の第3引数の値の割合を求める事が出来ます。

次にMathf.Lerpで補正した最低値と補正した最大値の時のその割合ratioでの値を求めています。

percentageは作成したspeedmeterの画像の位置と合わせる為の調整値です。

percentageの値はUnityを実行した後にOutputCarSpeedのインスペクタのpercentageの値を調整しスピードが0の時に速度メーターの左下付近をメーターが動くように調整します。

速度の調整が分かり辛いですが・・・・要は

元の速度メーターImageの範囲を0~10としていた時の現在の速度が2であるとすれば

で帰ってくる値ratioは0.2になります。

それを速度メーターの範囲に収める為に2~8の間に調整したいので

とします。

返ってくる値は3.2となります。

Fill Amountには0~1の間の値を設定する必要があるので先ほどのようにcarController.MaxSpeedで割る必要があります。

このように最小値と最大値を指定した範囲の修正しています。

最後に現在のスピードの絶対値をMathf.Absで計算し、3桁で速度を表示しています。

これで機能が出来ました。

CarオブジェクトのOutputCarSpeedのインスペクタのSpeedImageにSpeedMeterImage、SpeedTextにSpeedTextを設定し確認してみてください。

終わりに

車の速度メーターってバックの時はどういう表示をするんですかね?

一応免許持ってますが、ペーパーなのでわからないです・・・・・。

バックの時は0km/hならばスクリプトはそのように改造してみてください。(._.)

スポンサーリンク

記事をシェアして頂ける方はこちら

フォローして頂くとやる気が出ます