Unityのメッシュ生成でへにょりレーザーを作ろう – 中編

ども、ゴコーです。

前回の続きからです。

前回は頂点の設定とその頂点を元にメッシュを描画するところまでやりました。今回はマウスでレーザーを描けるようにしてみます。

スポンサーリンク

マウスの移動量をメッシュに反映させる

頂点の追加をインスペクターからでなくマウスの移動によって行うようにします。

まずはインスペクターから編集できないように変数の属性を消します。また、インスペクターから値を変更することがなくなったので OnValidate は消します。

コラム:SerializeField

次は points を編集するための関数を追加します。

前回 OnValidate でやっていたことを Update() で行うのに加え、左マウスクリック時のみ処理を行い、マウスの位置をスクリーン座標からワールド座標に変換し、現在位置を points に追加します。

スクリーン座標からワールド座標への変換について詳しく知りたい方は、前回同様ナゾレバの方を参照するか、逆透視変換などで検索してください。

マウスが移動した場合のみ処理を行う

さて、この状態で再生してドラッグするとその軌跡に沿ってメッシュが生成されるのが分かりますね。しかし、マウスを押下している間は常にメッシュを生成するため以下のように無駄に密度が高く、突然メッシュの向きがおかしくなる等の気になるところもあります。次はマウスが一定距離移動した場合にメッシュを作成するようにしましょう。

2016-09-23_16h41_43

前回追加したポイントから自分が設定した距離分だけ移動した場合はポイントを追加するように変更しました。

henyori2-1

これで生成したメッシュがあばれるような現象はなくなりました。

距離計算の負荷軽減

次に、距離計算の負荷を減らします。Vector2(Vector3).magnitude は毎回平方根計算をしているため比較的重いです(参考:ひとつのオブジェクトから別のオブジェクトへの向きと距離)。そこで、平方根計算を行わない sqrMagnitude を使ったものへと書き換えます。

見た目は変わりませんが、これで負荷が軽減されます。

ポリゴン数を制限

現在はポリゴンの追加しか行っていないため、際限なく増えてしまいます。次はポリゴンの最大数を設定し、それを越えた場合古いものから削除するようにしてみましょう。

最大数を超えた場合に一番古いポイントを減らす処理を繰り返しますようにしました。

henyori2-2

これである程度長さを制限できるようになりました。

ところで、ある程度慣れている方なら要素を末尾に追加して先頭から削除するという処理に適したデータ構造があることに気付いたかもしれません。はい、 Queue です。Listの場合、先頭を削除するという操作は重くなりがちで、しかも今回はそれを連発するので本来なら Queue の使用を真っ先に検討するべきところです。しかしメッシュ生成時に各要素に対してランダムアクセスする必要があり、これを Queue でやろうとすると Linq で ElementAt を使うことになるのでこれはこれでよくない。という訳で本チュートリアルでは本編終了後にインデックスを取れるQueueを作ることにします。

メッシュの長さの均一化

2016-09-23_17h44_33

マウスを早く移動させた場合、このように明らかにメッシュの長さが変わってしまいます。そこで次はメッシュの長さを一定にするか選べるようにします。

まず、長さを一定にするかを選ぶフラグを追加し、ポイントの追加を addPoint 関数に分けました。一定にしない場合はこれまで同様の追加を行い、一定にする場合は進み過ぎた場合に設定した距離になるように距離を分割します。

2016-09-26_17h37_37

keepPointLengthをオンにして線を引くと一定になっていることが確認できます。

ただし今回のレーザーのように一定速度で動くものを扱う場合この機能はいらない可能性が高いです。理由は次回書きます。

コラム:別関数に分ける

テクスチャを使う

次はレーザーの見た目を設定してみましょう。

今回使用するテクスチャはこちらです。

circle

まずはテクスチャの設定を変更します。

2016-09-26_21h46_55

Alpha Is Transparent にチェックを入れ、 Apply をクリックしてください。これで透明な部分が透明として扱われるようになります。

続いてマテリアルの設定を変更します。

2016-09-26_21h39_55

CurveLaserMaterial をクリックし、Unlit > Transparent を選択してください。これでライトの影響を受けず透明度を反映する設定にできます。

2016-09-26_21h40_19

テクスチャを設定し、Tilingを 1, 1 にしてください。これで準備完了です。

次にスクリプトです。メッシュの見た目はマテリアルとUV座標を設定することで変更できます。

マテリアルとUV座標の割り当てを行いました。

まず以下の画像のようにインスペクターからマテリアルの割り当てを行ってください。

2016-09-26_23h26_04

UV座標は画像のどの部分を使用するか指定するためのものでしたね。忘れた方は前回紹介した記事で復習するといいかもしれません。UV座標のインデックスは頂点インデックスで参照する関係で、頂点座標のそれと一致させる必要があることに注意してください。

それでは実行してみましょう。

2016-09-26_21h54_34

1つ1つのメッシュにテクスチャ全体が描画されています。これは、UV座標でテクスチャ全体を使う設定にしたからです。次はこの点を改善します。

UV座標を考慮する

createMesh のUV座標変更部分を以下のように変更します。

ここでしていることはメッシュの数だけテクスチャも分割し、テクスチャをメッシュに割り当てる、というものです。イメージは以下のような感じ。

2016-09-26_22h44_20

2016-09-26_22h57_23

するとこのような見た目になります。

ここまでのコードでメッシュを書くとこのような見た目になります。

henyori2-3

へにょりレーザーがちょっと見えてきた気がしますね…!

次回でいよいよ完成です。マウスで描いているのをオブジェクトの移動で描画する方式に切り替え、コルーチンを用いてへにょりレーザーの軌道を描き、いくつかの最適化を行います。

では、また。

Comments

comments

スポンサーリンク
336*280px
336*280px

フォローする

スポンサーリンク
336*280px

コメント

  1. @kagematya より:

    RT @backlight1144: 新しい記事です: Unityのメッシュ生成でへにょりレーザーを作ろう – 中編 https://t.co/xRhu4F2tJo by Unity道しるべ

  2. @afjk01 より:

    RT @backlight1144: 新しい記事です: Unityのメッシュ生成でへにょりレーザーを作ろう – 中編 https://t.co/xRhu4F2tJo by Unity道しるべ

  3. @tm8r より:

    “Unityのメッシュ生成でへにょりレーザーを作ろう – 中編” https://t.co/1jseCc6l3i