目盛りのメッシュを作るコメントを残す今回は秒数目盛りのメッシュを表示するオブジェクトを作りたいと思います。こんな感じの1分で1周するアナログのストップウォッチ的な目盛りです。このように画面よりもかなり大きい目盛りの円(以後サークルと呼びます)を作りたいので、一枚の大きな画像を表示するのではなく、目盛りひとつの画像をたくさん並べて表示するという作り方をします。スクリプトの作成Projectウィンドウの「Script」フォルダの中に「BSWUtililty.cs」と「TimeCircle.cs」の2つのC#スクリプトを追加して、以下のコードをコピーしてください。}}オブジェクトの作成と設定スクリプトが作成できたら、シーンの中の「Root」オブジェクトの子に「Root/Circles/SecTimeCircle」という配置でゲームオブジェクトを2つ作成してください。Z=0」にしてください。「SecTimeCircle」オブジェクトのComponentに「TimeCircle.cs」を追加します。このままでは何も表示するメッシュやテクスチャがありませんので、前回のスクリプトを使って作成します。Mesh」を選択してメッシュを作成し、「SecTimeCircleMesh」と名前を変更してください。今後いくつかメッシュを作る事になるので「Mesh」というフォルダを作成してその中に移動しておいてください。Format」が「ARGB32」になっている事を確認したら「Create」ボタンをクリックしてテクスチャを作成してください。テクスチャは今後もこの一枚しか使わないので適当に「Texture/Texture」な感じに置いておいてください。Mode」は「Bilinear」にしておきます。このテクスチャを使うのにはMaterialが必要なので作っておきます。Projectウィンドウの「Create/Material」で作成し、これも今後一つしか使わないので適当な名前ですが「Material/Material」のように置いておいてください。「Texture」をこのマテリアルにアサインし、shaderは「Unlit/Transparent」を選択します。このシェーダはラインティングの影響を受けず、テクスチャの透明部分を透過するシェーダーです。実はこのシェーダーを使うとちょっと問題があるのですが、その修正はチュートリアルの最後の方でやりますので、今の所はこれで我慢します。先ほどシーン上に作った「SecTimeCircle」オブジェクトに「Material」と「SecTimeCircleMesh」をアサインしますこの時点で画面上に秒数目盛りのラインが表示されていると思います。あと、タイムのテキストがサークルと被ってしまっているので、TimeTextのYを100くらいに移動しておいてください。ここまで作業を終えると、プロジェクトの状態は以下のような感じになっていると思います。表示されていなかったら一旦Unityを再生してみると表示されるかもしれません。「TimeCircle」のインスペクタのパラメータは以下のような感じです。テクスチャに描画する下の位置とりあえず良い感じに表示するようにパラメータの初期値を入れていますが、これらのパラメータを変更するとUnityを再生していなくてもリアルタイムで表示が変更されていると思います。これはスクリプトに「[ExecuteInEditMode]」と記述しているからで、これによって再生していないエディット中でもStart()やUpdate()が呼ばれます。毎アップデートごとにデータを更新するのはさすがに処理が重いので、データを更新したら「prev〜」という変数に保存して余計なアップデートをしない様にしています。実際にアプリをリリースするときにはStart()だけでやればいい処理なので、Updateはリリースビルド時に削除するようなマクロを仕込んでおいた方がいいかもしれません。「UpdateLines()」というメソッドの中ではテクスチャへの描画とメッシュの作成をしています。やっていることは、2種類の目盛りの画像をテクスチャに描画するのと、その目盛りをたくさん並べた大きなサークルをひとつのメッシュとして作成する事です。Unityでテクスチャへ描画するのはドットを打つくらいしか出来ないのですが、BigStopWatchでは単純な四角くらいしか必要としないので十分です。UnityのメッシュはOpenGLでいうところのGL_TRIANGLESで描画されます。頂点配列をmesh.verticesに、UV配列をmesh.uvに同じ要素数になるように作り、mesh.trianglesでその頂点番号の配列を作ってメッシュへ設定しています。頂点配列(vertices)は必要な分だけ作れば良いのですが、頂点番号の配列(triangles)は、三角形ごとの頂点単位、つまり3つ単位でないといけません。四角形をひとつ作るなら、三角形を二つ組み合わせるけど2つの頂点は共通で使えるので、verticesとuvの配列の要素数は4、trianglesは6という事になります。「UpdateLines()」の中の処理で、後々共通で使いたいものは「BSWUtility」の方に記述しています。四角をテクスチャに描画したり座標を取得するところあたりです。目盛りはこんな感じで、四角に少しマージンを持たせて描画しています。四角いメッシュを単純に塗りつぶせばいいんじゃないかと思うかもしれませんが、やってみるとジャギーでひどい事になってしまいます。最近のiOSではマルチサンプリングが使えたりして多少ごまけたりもしますが、補間をテクスチャに任せたほうが遥かにきれいな線が表示できます。それは回転させるからの話で、回転させない四角は、ぴったりとピクセルが合う様に配置して補間させない方がきれいです。メッシュは「lineRadius」の値だけY軸方向に移動させた位置に目盛りひとつ分の座標を「CreateLinePositions()」でつくって、それを必要な数だけMatrixで回転させてメッシュ全体を作っている感じです。1個のメッシュにしないで、目盛り1個のゲームオブジェクトを複製して作っても見た目は同じでコードも分かりやすいと思うのですが、やはり処理の負荷を考えると最初からまとめられるメッシュはまとめておいた方が良いと思います。UnityではDynamicBatchという機能があって勝手にメッシュをまとめてくれたりもしますが、一度にまとめられる頂点数に制限があったりとかあまり当てにしすぎると裏切られたりするので、自分でやっておくにこしたことはないです。今回のWebPlayerビルド以上で今回は終わりです。次回はこのサークルに数字を追加します。コメントをキャンセルメールアドレスが公開されることはありません。