UE4 レーダー マップ (純粋な設計図)

UE4 レーダー マップ (純粋な設計図)

序文: UE4 を使用してゲーム キャラクターの属性を表すレーダー マップを作成するように依頼を受け、Bilibili で検索したところ、純粋な設計図を使用し、埋め込みを使用していない Up によって作成されたビデオを見つけました。ということで、Upでプロジェクトを立ち上げて、レーダーチャートのコードを勉強して、Upの師匠の発想がすごく強いなと感じました!! だから説明するためにこの記事を書いてください。
アップビデオリンク: UE4 グラフ (純粋な設計図)

実際、レーダー チャートを実現する上で最も厄介な部分は、レーダー チャート上のポイントの位置を決定する方法です。レーダーマップとは何かについては、クリを与えてください:

ここに画像の説明を挿入
簡単に言えば、対応する線上の点の位置は値の大きさに応じて決定され、点とグラフの中心との間の距離は、点の値とによって表されるデータの最大値を決定します。レーダー チャート. たとえば、最大値は 100 で、ラインの中間点にあるポイントの値は 50 です。
線の数と位置は、レーダー チャートの変数に関連しています。たとえば、五角形は 5 本の線に対応します。Up がインクリメンタル アングル メソッドを使用して各ラインの位置を決定するのは、まさにこのためです。

コードの説明:

最初にブループリントに移動します。
ここに画像の説明を挿入
この関数の機能は、入力された数値パラメーター配列に従って、各値に対応するポイントの位置を決定することです。アップマスターのロジックがとてもエッセンスだと思うところでもあります。
具体的なデモンストレーション効果は次のとおりです。
ここに画像の説明を挿入
ここに画像の説明を挿入
ブループリントのサイズ変数はキャンバスとして理解でき、値は次のとおりです
ここに画像の説明を挿入
。500*500 キャンバス パネルとして理解でき
、内部の Get Table Upper Limit 関数を理解できます。データ配列の最大値、つまりレーダー グラフで表されるデータの範囲の最大値を見つけます。

注:
UE4 の UI 座標系は次のようになっているため、生成されたレーダー チャートのデータは常に上を向いていることがわかります。
ここに画像の説明を挿入

次に、この関数の主なロジックについて説明します。
ポイントの位置に関して、Up は主に内角に関連する角度を使用して、最初のポイントが配置されている直線の位置を決定します。六角形を例にとると、
ここに画像の説明を挿入
正六角形の中心点を原点とします。真下の点を 1 点目にすると、2 点目の直線は 1 点目の直線より L1 まで右に 60 度シフトし、L2 は 1 点目の直線よりも右にシフトします。 120 度から L2 まで、n 番目のポイントは、最初のポイントが配置されている線と比較して (n-1)*(360/6) 度オフセットされていることがわかります。したがって、これは (360 の演算です) /配列の長さ) を blueprint で指定します。
特定の点の位置を計算する方法については、L1 を例にとります。

ここに画像の説明を挿入
∠A=60、直線上の遠点からの距離△Xを取ると、x軸に対応する△Xの成分は△Xsin(60)、Yに対応する成分は△ Xcos ( 60) なので、直線上 ある点の座標は、原点の座標の x 成分と y 成分を、それぞれ △X の x 成分と y 成分に加算することで求めることができます。そして、この△Xは点のデータとそのデータが表す最大値で決まります。たとえば、最大データが 1000 で、現在のデータが 100 の場合、△X は 100/1000単位長になります。この単位長さは、アップマスターの設計図ではradiusという変数で表されますが、これは100/1000が比率として計算され、△Xに求めるのは長さなので、単位長さの概念を乗算する必要があるためです。 . これから、原点と比較したデータ ポイントの座標を取得できます。そして、この 60 度は、上記の段落で述べたオフセットの角度によって決まります。すべての点が sin と cos で直接計算できる理由を理解するために、L2 を例に取りましょう:
ここに画像の説明を挿入
∠B は 120 度であり、△X に対応する X の成分は △X
sin(60) ですが、 sin( 60)=sin(120) であり、対応する y コンポーネントは cos(120) ですが、cos120 は負の値です。これは UP のもう 1 つの非常に強力な部分であり、各角度に 180 度を加えます。したがって、cos(π +A)=-cos(A) であるため、負の値の逆数を再度取得して直立に戻すことと同等であり、時計の動きをトラバースするときに各ポイントの位置が前のポイントに対して逆になります。sin に 180 を足した効果は、次の点の元の位置が前の点に比べて右にあるが、180 を足すと左になることです。つまり、全体として、y 方向の成分は上に移動してから下に移動し、x 方向の成分は左に移動してから右に移動するため、Up メインのすべてのレーダー チャートはポイント 1 からポイント n まで乗算されます。反時計回りの動きで。

ここまで、この関数の主なロジックについて説明してきましたが、生成されるロジックと線画に関しては、実際には非常に基本的なものです。
ここに画像の説明を挿入

ここに画像の説明を挿入
それについて本当に複雑なことは何もありません。個人的には、アップマスターのアイデアは本当に学ぶ価値があると思います. 私もしばらくそれを見た後、それは本当に秒です! ! ということで、どうしても共有したいので、説明に不明な点があれば指摘していただきたいと思いますので、このアップマスターを応援していただければと思います

おすすめ

転載: blog.csdn.net/weixin_44840850/article/details/120717305