Unityでスクリプトから剣の軌跡を作成し表示する

今回はUnityでスクリプトからメッシュを作成し、剣の軌跡を表示してみたいと思います。

TrailRendererを使えば簡単に剣の軌跡を表示出来そうなんですが、わたくしの場合うまく出来なかった為、スクリプトからメッシュを生成する事にしました。<`ヘ´>

剣の軌跡はあらかじめ3DCG等で軌跡のメッシュを手動で作成したりする事でも作成出来るみたいですが、わたくしはスクリプト向きっぽいですね(謎)

スクリプトからメッシュを生成するようにすれば、剣を振るアニメーションがどんなものであれ、剣の根元と剣先を設定すれば勝手に軌跡を作成してくれるので、個別のアニメーションに対応して軌跡を作成する必要はありません。

勝手に軌跡を作成してくれると簡単に言ってますが、機能を作るのは結構大変です・・・・(^_^;)

剣の軌跡は↓のような感じになりました。

剣の軌跡の完成サンプル

なかなか綺麗ですね!

今回の機能を作成する前にスクリプトからメッシュの生成をする方法について知っておく必要があるので、

Unityではスクリプトからメッシュを生成する事が出来ます。そこでメッシュを作成する時に必要な基本的な勉強をしてから実際にメッシュの生成を行ってみます。

を参照してください。

それでは剣の軌跡を表示する方法を考えていきましょう。

スポンサーリンク

剣の軌跡を表示する方法

剣の軌跡を表示する為にはメッシュを構成する頂点、UV、三角形を作る方法を考えなくてはいけません。

剣の過去と現在の位置情報を頂点にする

剣の軌跡を表示する為には剣の根元と剣の先の位置がいくつかわかればその点を繋いでメッシュの頂点情報に使えそうです。

剣元と剣先は剣の子要素に空のゲームオブジェクトで作成しておきデータを保存すれば良さそうです。

その為には1フレーム毎(UpdateやLateUpdateでデータを取得)に剣元と剣先の位置をデータとして残しておきます。

過去の位置データと現在の位置データを頂点にすればそこからUV、三角形を設定出来るのでメッシュの生成が出来ますね。

剣元と剣先の位置を記録する

↑のように1フレーム前の過去の剣元と剣先の位置と、現在の剣元と剣先の位置の4点がわかれば三角形2つを作って四角形の面が出来、剣の動いた間に軌跡を作る事が出来ますね。

UV座標の設定

剣の軌跡用のテクスチャを、作成したメッシュに割り当てる為にはテクスチャの横方向を軌跡のメッシュの数に応じて値を変更しなければいけません。

例えば↓のようなテクスチャの場合は

UVの値の分割方法

過去の1フレームの剣の位置と現在のフレームの剣の位置から三角形を2つ作成するので、縦のVの値は0か1の値で、横方向も0か1の値です。

ですが、剣の軌跡を前のデータを元にさらに作成した場合は縦のVの値は0か1で固定ですが、横のUの値は四角形の数によって変わってきます。

メッシュを2フレーム分作成

↑のように過去2フレーム前から現フレームまでのデータを使ってメッシュを作成した場合、中間の1フレーム前のUV座標は剣元が(0.5, 0)、剣先が(0.5, 1)にしなければいけません。

頭が混乱しますね・・・\(-o-)/

三角形の作成

三角形の作成は剣元と剣先の過去フレームのデータから作成する事が出来るので、後は配列に設定する順番だけですね。

剣の軌跡の三角形の作り方の順番

剣の軌跡は手前側を表で統一したい為、過去フレームから時計回りに頂点を指定し三角形のデータを作成していきます。

↑の例でいくと、

剣元の2フレーム前→剣先の2フレーム前→剣元の1フレーム前(ここで三角形1つが出来る)→剣元の1フレーム前→剣先の2フレーム前→剣先の1フレーム前(ここで三角形2つ目)→剣元の1フレーム前→剣先の1フレーム前→・・・・・

と続けていきます。

こうする事で同じ側にメッシュの表面が作成される事になります。

過去フレームデータからメッシュを生成してみる

剣の軌跡を表示する方法がわかったので、作成してみましょう。

キャラクターには武器を持たせ、攻撃ボタンが押されたら攻撃アニメーションが再生されているとします。

剣元と剣先のオブジェクトの作成

剣の子要素に空のゲームオブジェクトで剣元(StartPosition)と剣先(EndPosition)を作成し設定します。

剣元と剣先オブジェクトの作成

↑のように剣の子要素に剣元と剣先を作成します(名前はわかりやすく変えた方がいいですね・・・・)。

剣元の位置を調整し、

剣元の位置

↑のように刃の根元に移動させます。

剣先も同じように移動させ、

剣先の位置

↑のように剣の先にします。

メッシュ生成スクリプト

StartPositionとEndPositionが設定出来たので、これらの位置をスクリプトから取得し、メッシュを生成してみます。

いきなり難しいですね・・・(‘_’)

RequireComponentアトリビュートを使って、このスクリプトをゲームオブジェクトに取り付けた際にMeshFilterとMeshRendererコンポーネントを自動で取り付けます。

先ほど作成した剣元と剣先をインスペクタで設定出来るようにしています。

頂点、UV、三角形はリストを使って保存出来るようにしています。

過去フレームの剣元、剣先の位置を保存する時はStartPointsリストとEndPointsリストを使います。

これらのフィールドはインスペクタで確認出来るようにpublicにしています。

LateUpdateメソッドで剣元と剣先の位置の保存や削除、メッシュの生成を行っています。

1つの四角形を作るには最低でもStartPointsに2点、EndPointsに2点が保存されている必要がある為、条件を加えています。

また、StartPointsとEndPointsにどんどんデータを保存してもメッシュの数に応じて必要な数は決まって来るので、それ以上になったらデータを削除しています。

剣元と剣先でメッシュの数+1のデータが保存されていればメッシュを生成出来ます。

メッシュ数を3にすればStartPointsとEndPointsはそれぞれ4点づつが必要になりますね。

メッシュ数と頂点数

↑はメッシュが3つなので剣元と剣先に4つの頂点が必要です。

CreateMeshメソッドの解説

CreateMeshメソッドがわかり辛いので少しづつ解説します。

リストのクリア処理

まずは最初のリストのクリア処理です。

mesh.ClearメソッドでMeshクラスを一旦クリアにしています。

その他の頂点リスト、UVリスト、三角形リストをクリアにし、CreateMeshメソッドが呼ばれる度にデータを消して再度データを作成していきます。

頂点計算処理

次は頂点計算処理を見ていきます。

頂点の登録はメッシュ毎に登録していきます。

その為、saveMeshNumより下の間、for分で繰り返します。

1回の処理で四角形1つ分の頂点を作成していくので、頂点を6つ登録します。

メッシュの表面を手前側にする為に順番を考え、

前の剣元の位置→前の剣先の位置→次の剣元の位置→次の剣元の位置→前の剣先の位置→次の剣先の位置

という順番にします。

startPoints(剣元)とendPoints(剣先)は一番古いデータが0番目なので、一番古いデータから新しいデータへと頂点を登録していきます。

Debug.DrawLineを使って剣元と剣先に線を繋げわかりやすくしています。

この線を引いてシーンビューでどこのデータなのか表示し確認する事は非常に重要です!

UV座標の登録

次はUV座標の登録処理です。

UV座標は横向きのUの値をメッシュの数で分割して計算しなければいけません。

そこで分割値をaddParamとして計算し、その値を使用しています。

UV座標も四角形1つづつで設定しています。

三角形の登録

三角形の登録処理を見ていきます。

今回は頂点を共有しない形で作っているので、三角形はその頂点を順番に繋いでいくだけです。

剣の軌跡の場合は頂点を共有した方が光の当たり具合がいいような気がするので、後でそちらのスクリプトに切り替えますが、シェーダ―を切り替えるだけでそれほど問題がないような気もします。

わたくしの場合、最終的に頂点を共有するバージョンに変えてしまいましたが・・・・。

メッシュの登録

作成した頂点、UV、三角形のリストをメッシュクラスに入れる処理を見ていきます。

リストを配列化した後にMeshクラスのそれぞれの値に入れています。

RecalculateBoundsはメッシュを覆うBoundsの再計算、RecalculateNormalsはメッシュの法線方向の再計算です。

頂点、UV、三角形はそれぞれSetVertices、SetUVs、SetTrianglesを使うとリストを配列に変換しなくても引数に設定すればメッシュを生成出来ますが、

SetUVsとSetTrianglesは別の引数も指定する必要がある為、配列化してデータを入れるようにしています。

剣の軌跡専用のゲームオブジェクトを作成

スクリプトが出来たので、そのスクリプトを取り付ける空のゲームオブジェクトを作成します。

空のゲームオブジェクトを作成したら名前をSwordTrailとし、Transformの歯車からResetを選び位置をデフォルト値にします。

剣の軌跡用テクスチャを作成

剣の軌跡用マテリアルに設定するテクスチャを作成します。

お絵かきソフト等で256×256ピクセルか512×512ピクセルサイズの画像を作成し、灰色から白色のグラデーションの画像を作成します。

剣の軌跡用テクスチャ

↑のように右側が剣の色に近い色、左側が色落ちした白色にします(剣の色によって色を変えてください)。

↑の剣の軌跡用テクスチャは右クリックからダウンロードし使用してもかまいません。

画像を作成したらUnityのAssetsフォルダで右クリック→Import New Assetを選択し、画像を取り込みます。

取り込んだ画像を選択し、インスペクタでWrap ModeをClampにして、画像が繰り返されないようにします。

剣の軌跡のテクスチャの設定を変える

剣の軌跡用マテリアルの作成

次は剣の軌跡用のマテリアルを作成します。

Assetsフォルダで右クリック→Create→Materialを選択し、名前をCreateSwordTrailにします。

インスペクタでAlbedoに先ほど取り込んだ剣の軌跡用テクスチャを設定します。

マテリアルに剣の軌跡用テクスチャを設定

これでマテリアルの作成が終わりました。

先ほど作成したSwordTrailゲームオブジェクトのマテリアルにCreateSwordTrailを設定します。

SwordTrailゲームオブジェクトのインスペクタの設定

↑の赤い四角の部分で設定等を行ってください。

SwordTrailはEthan(キャラクター)の子要素ではなく同じレベルの階層に位置しています。

SwordTrailの階層位置

剣を振って軌跡を確認してみる

それでは機能が出来たので確認してみましょう。

シンプルな剣の軌跡

↑のように剣の軌跡のメッシュが作成されました。

しかし軌跡が透明ではないですね。

さらにメッシュの表面をカメラの方向にしている為、カメラ側から見ると軌跡が表示されていますが、カメラの反対側から見ると、

剣の軌跡を裏側から見た画像

↑のようにメッシュが見えません。

頂点を反時計回りに同じように登録し、三角形を反対側にも作れば裏側からも見えますが面倒くさいので、軌跡の透明化と裏側から見えるようにする処理をシェーダ―を変える事で実現しましょう。

CreateSwordTrailマテリアルを選択しインスペクタを開きます。

剣の軌跡のシェーダ―を変更する

↑のようにシェーダ―をParticle/Multiplyにします。

シェーダ―を変更すると

剣の軌跡のシェーダ―をパーティクルにした画像

↑のように剣の軌跡が透明になり、裏側から見てもメッシュが見えるようになりました。

剣の軌跡を滑らかにする

剣の軌跡を表示する事は出来ましたが、過去フレームの剣元と剣先の位置をそのまま繋いでいる為、軌跡がカクカクしています。

攻撃のアニメーションが速ければ速いほどカクつくことになりますね。

軌跡がカクついている

現状の状態でも十分だとは思うんですが、曲線を作る方法を調べてしまった為、ここからが大変でした・・・(/_;)しくしく

曲線を作るには?

ある点Aからある点Bの間の曲線を作るには、A点での速度、B点での速度が必要だったり、A点の前の点、B点の次の点が必要だったりします。

今回はCatmull-Romスプライン曲線というA点の前の点、A点、B点、B点の先の点を使ってA点B点間の曲線を求めていきます。

曲線の求め方の式は記事の最後の参考サイトを参照してください。

わたくしには説明できません。(^_^;)

Catmull-Romスプライン曲線

Catmull-Romスプライン曲線を使うとp1とp2間の曲線をp1、p2、p1の前の点p0、p2の次の点p3の4点を使って曲線を作る事が出来ます。

ただこの場合、p1の前の点p0とp2の次の点p3が得られない時は曲線を求める事が出来ません。

わたくしの場合はp2の先のp3が得られない場合はp0、p2を足して2で割って計算する事にしました。

実際に曲線を計算するメソッドは

↑のように定義しました。

最後のtは0~1の間の値を渡します。

その割合が0の時はp1の点、1の時はp2の点が得られます。

曲線の求め方

ここまでの情報を画像にすると↑のようになります。

曲線を2パターンで作成

曲線を作るにあたって、今回は2つのやり方を作成しました。

一つは一度作った頂点情報はそのままにして、現在の剣の位置と前のフレームの位置で曲線を作り頂点リストに追加していくパターン。

こちらはCreateMeshメソッドでは現在の剣の位置と前のフレームの位置だけで計算する為(要はp3の点が求められない)、軌跡の形は変わりませんが曲線があまり綺麗にはなりません。

もう一つはCreateMeshメソッドで毎回曲線を作り直すパターン。

こちらは現在の剣の位置と前のフレームの剣の位置から作る曲線部分は先ほどのパターンと同じですが、その前のフレームの曲線は4点が求まるので綺麗な曲線になります。

CreateMeshメソッドで毎回曲線を作り直すので、前回作成した剣の位置と前のフレームの位置の曲線を再計算し、綺麗な曲線になります。

こちらの方が綺麗な線を描けますが、現在の剣の位置付近の軌跡の形が変わります。

文章で見ても解り辛いので実行した後に結果の違いを見る事にします。

現フレームと前フレームで曲線を作るパターン

それでは現フレームの剣の位置と前フレームの剣の位置で曲線を作っていくスクリプトを作成します。

先ほどのスクリプトでは頂点を共有しない形で作成していましたが、ここからは共有する形でスクリプトを組んでいきます。

スクリプトが長いので一部フィールドとStartメソッドは省いています。

スクリプトが長いので少しづつ解説していきます。

宣言部

追加した宣言を見ていきます。

faceDivisionNumは曲線を作る時の分割する数で、isSwordTrailは剣の軌跡を表示するかどうかのフラグです。

LateUpdateメソッド

LateUpdateメソッドにはメッシュを削除する処理を追加しています。

作成したメッシュを再計算しない為にCreateMeshメソッドではverticesListsのクリアを行いません。

その為、表示するメッシュに不用になった頂点をverticesListsから削除します。

メッシュの数 × (面の分割数 × 2) + 2

で頂点の数が計算出来ますのでそれ以上になった時にDeleteMeshメソッドを呼び出し頂点を削除します。

CreateMeshメソッド

CreateMeshメソッドは長いのでさらに分割して説明していきます。

CreateMeshの初期処理

CreateMeshメソッドの最初の処理を見ていきます。

startHalfは剣元の間の分割点、endHalfは剣先の間の分割点を入れる配列です。

頂点の登録処理

次に頂点の登録処理を見ていきます。

現在の剣の位置と前のフレームの剣の位置から曲線を計算をします。

addFloatParamが分割値になり、これをCatmull_Romのtの部分に渡します。

今回は初期値として分割値を与えてstartHalfとendHalfには分割した点のみ入るようにしています。

現在の位置の先の点は取得出来ないので、前の前の点と現在の点を足して2で割った値をp3の値として渡します。

頂点が一つも登録されていない場合は前のフレームの位置を頂点に追加します。

その後、分割点を頂点リストに追加しています。

今回は頂点を共有する形でメッシュを作成するので、分割点を追加するだけです。

最後に剣元と剣先の頂点を追加します。

ここら辺の処理はわかりやすいスクリプトを組めませんでした。

UV座標の登録

UV座標の登録部分を見ていきます。

UV座標は頂点を共有する形にしたので、頂点番号が偶数かどうかでUV値を変えています。

偶数の時は剣元の座標を計算するのでVの値は0、奇数の時は剣先の座標を計算するのでVの値は1になります。

また剣先の値を設定したら次は剣元の値なのでaddParamの値を増やして分割値を増やします。

ここら辺はノート等に手書きで図を書いてやってみるとわかりやすいかもしれません。

分割値は

分割位置 × (メッシュの数 × 分割数)

で計算しています。

三角形の計算

次に三角形の計算を見ていきます。

これまた条件が複雑ですね・・・・(^_^;)

頂点を共有しているので、iが0だったら

0, 1, 2,
2, 1, 3

という頂点を繋いで三角形を作っています。

繰り返し条件は頂点を共有している為、一つの四角形では共有している2点を引いて、さらに一回の繰り返しで三角形を2つ作っている為、2で割っています。

自分でもよくわかりませんなぁ・・・・(‘_’)

メッシュに登録

次は作成した頂点、UV、三角形の情報を登録する処理です。

isSwordTrailは剣の軌跡を表示するかどうかのフラグなので、表示する場合だけデータを書き換えています。

メッシュの削除等

その他の処理について見ていきます。

DeleteMeshメソッドは分割数 × 2分の頂点とUVを削除します(UVはいらないかも?)。

これで一つ分の四角形を形成する頂点数分削除出来ます。

Catmull_Romは曲線を計算する式ですね。

SetSwordTrailメソッドはアニメーションイベントを別のスクリプトで受け取り、そこから実行するメソッドで、剣の軌跡を表示するかどうかを切り替えます。

アニメーションイベントについては

Unityのアニメーションイベントを使い、歩くアニメーションで地面に足を着いた時に足音を鳴らしたり剣を振っている途中で剣を振った時の音を鳴らしたりしたいと思います。

を参照して頂き、剣の振り始めと振り終わりのイベントを作ってください。

またキャラクターにReceiveActionEventスクリプトを作り取り付けます。

インスペクタでSwordTrailゲームオブジェクトをドラッグ&ドロップしてください。

軌跡を確認する

それでは出来た機能を確認してみましょう。

SaveMeshNumを5、FaceDivisionNumを10にして確認します。

↑のようになりました。

モーションが速くてわかり辛いですが、現在の位置と前のフレームの位置を繋いだ線が曲線にはなっていますが、多少歪んでいますね。

途中コマ送りしてます。

CreateMeshで曲線を再計算するパターン

ここまで来るともうお腹いっぱいですね・・・・( ・_;)( ;_;)( ;_;)

わたくしも解説がしんどいです・・・・(((((((((((((ーー;) さささっ・・・

というわけで、違う部分だけを載せ解説はなしということで・・・・。

非常に複雑すぎて、自分でも時間をかけないと読み解けませんわ・・・・(‘_’)

緩やかな曲線を確認する

それでは最後の確認をしてみましょう。

SaveMeshNumを5、FaceDivisionNumを10にして確認します。

↑のように非常に滑らかな曲線が出来ました!

途中コマ送りして確認している部分でわかりますが、一度描いた軌跡を再計算する為、次のフレームになると元の形を変えています。

ですが、攻撃のモーションが相当遅くなければ気にならないですし、軌跡の曲線が綺麗なのを考慮するとこちらのパターンの方がいいかもしれませんね。

記事の最初に示したサンプルもこちらのパターンで作成したサンプルです。

終わりに

この剣の軌跡をスクリプトから作成する処理は正直しんどかったです・・・。

頭で考えるだけじゃわからないので、紙に絵を書いて頂点の数や、UVの座標、三角形の作成方法を考えました。

絵に描いてもわからず1カ月ぐらい作成に時間がかかったような気がします・・・・。

それでも完全に出来た!という感じではなく、スクリプトも解り辛いままになっています。

処理速度を考慮するともう少し最適化しないといけないかなぁとは思いますが、さすがにもうこの機能はやりたくありません。(^_^;)

いずれまたやる気が起きた時にでも改良したいですが、その時にまた一からスクリプトを読み解いていかないといけないと思うと恐怖ですね・・・(T_T)/~~~

参考サイト

今回の機能を作成するにあたり、非常に参考にさせて頂いたサイトです。

Glint of Personality

コンピュータグラフィックスーCatmull-Romスプライン曲線ー

t-pot 3次曲線 ~これが一番使えるとおもうよ~

スポンサーリンク

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

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