VCI UI応用編-カラーサークルを作る-

この記事は平面的なUIを作りたいとVCIでリング的なUIをつくりたいの続編のUIの記事です

カラーサークルを作りたい

作るのは↓みたいな感じです。

https://twitter.com/sakkinonana/status/1473699175510724608
#モデル
今回は上記二つのモデルの流用でほぼできてしまいます。ただし、カラーの四角形を出すためにVCIでは直接テクスチャをいじれないため、三つのテクスチャを重ねて四角形を表現しています。（実は、アルファブレンドしかできないのでこれも正確ではないのですが、また込み入った話になるのでまたの機会に。）

unityのヒエラルキー（階層構造）は以下のようになります。

selection_coneが実際に持つアイテム、Sphereが操作に連動して動くインジケーター（最悪なくてもよい）、quadがカラーの四角形板で平面UIのcubeと同じくホワイトボードみたいな役割をします。

今までと同様バーチャルキャストではある経路に沿ってだけ動く、みたいな拘束はかけられないため、掴みたいスタイラスと、実際に値をとるものとを別にします。その上で板上のインジケーターの座標を計算してスクリプトで移動させるという形式を取ります。

#スクリプト
以下スクリプトを貼り付けておきます。前回の流用なので、例によって別オブジェクトの色を位置に応じて変えています。

main.lua

local stylus = vci.assets.GetTransform("selection_cone")
local indicator = vci.assets.GetTransform("SphereQ")
local plane = vci.assets.GetTransform("Quad1")
local ring = vci.assets.GetTransform("torus")
local ctr = vci.assets.GetTransform("Sphere")
local lscale=0.5*2
-- indicator.SetPosition(Vector3.zero)

local flg_color = 0

function onUse()
    flg_color = (flg_color + 1) %2
end

local hueangle = 0
function update()
    if flg_color == 0 then
        local nowctrpos = Vector3.ProjectOnPlane(stylus.GetPosition()-ring.GetPosition(),ring.GetRotation()*Vector3.up).normalized*.6*lscale
        ctr.SetPosition(ring.GetPosition() + nowctrpos)
        hueangle = Vector3.SignedAngle(nowctrpos,ring.GetRotation()*Vector3.left,ring.GetRotation()*Vector3.up)+180

        local starcolor = Color.HSVToRGB(hueangle/360,1,1)
        vci.assets.material._ALL_SetColorFromIndex(4,starcolor)
    elseif flg_color == 1 then
        -- local pos = Quaternion.Inverse(ring.GetLocalRotation())*Vector3.ProjectOnPlane(stylus.GetLocalPosition()-ring.GetLocalPosition(), ring.GetLocalRotation()* Vector3.up)*2   
        local pos =Quaternion.Euler(0,0,-90)*Quaternion.Euler(90,0,0)*Quaternion.Inverse(ring.GetRotation())*Vector3.ProjectOnPlane((stylus.GetPosition()-ring.GetPosition()), ring.GetRotation()*Vector3.up)/0.8*ring.GetLocalScale().x
        indicator.SetLocalPosition(pos)
        print(pos)
        --4 plane 0 stylus 1 ring 5はだめ 6 star 
        vci.assets.material._ALL_SetColorFromIndex(6,Color.HSVToRGB(hueangle/360,pos.y+0.5,pos.x+0.5))
    end

end

今回は、はじめはリングUIを操作し、一回useするとリング状のインジケーターは固定され、今度は四角形上のポインターが動き、もう一回useすると、最終的な色が決定されます。
ちょっと面倒なのでローカルだけで動くように作っているので、一部同期しないところがあるかもしれません。

#おわりに
実際UIを一から作るのは以外に大変ですから、VCI製作者としては他にも使いたいUIはたくさんあると思うので、ぜひ皆さんも作ったら共有していってください。いちいちUIに消耗してるのはもったいないからね。

今回はカラーサークルに使ったけど、他にも値の決定など使える場面はたくさんあると思います。これまでのスライドバー、リング、平面UIを組み合わせればいろいろなことができるようになるかもよ？

読んでいただきありがとうございました。