見出し画像

ななめに回転するアイテムを作る

inaba（イナバ）

こんにちは。イナバです。
メタバースプラットフォーム　clusterでアイテムやワールドを制作しております。

本日は、先日つくった斜めに回転するアイテムのベースとなるscriptについて記載したいと思います。

実際に作ったアイテムはこちら。

動きはこんな感じ。

アイテムの設定方法

今回はScriptというよりUnityでの設定方法が重要です。
以下の構成でオブジェクトを設定していきます。
（細かく空のオブジェクトに区切っているのは私のクセみたいなものなので、もっとすっきりさせる方法があると思います。）

オブジェクトの構成

①空のオブジェクト（ななめ回転椅子）
：Item、Scriptable Item、Ridable Itemのコンポーネントをつけています。

②空のオブジェクト（支点）
：回転の支点となる位置に空のオブジェクトを置き、①の子オブジェクトとして設定します。

原点（0,0,0,）を回転の支点とします

③回転軸
：空のオブジェクトで回転する軸を設定しています。20度傾むけて②の子オブジェクトとして設定します。

20度ななめに傾けました

④表示するアイテムやsitPosition
：実際に表示するアイテムとsitPisitonを③の子オブジェクトとして設定します。

CubeにsitPositionをつけました

ワールドにアップすると下記のように、斜めにCubeが傾いて設置されます。

Cubeがななめに設定されました

scriptの設定方法

scriptは以下の通り。

const speedA =30;
const axis = new Vector3(0, 1, 0);

$.onUpdate(deltaTime=>
$.onUpdate(deltaTime=>{
    let rotA = $.subNode("回転軸").getRotation();
    let nextRotA =  rotA.clone()
     .multiply(new Quaternion().setFromAxisAngle(axis, speedA * deltaTime));
     $.subNode("回転軸").setRotation(nextRotA);{
    let rotA = $.subNode("回転軸").getRotation();
    let nextRotA =  rotA.clone()
     .multiply(new Quaternion().setFromAxisAngle(axis, speedA * deltaTime));
     $.subNode("回転軸").setRotation(nextRotA);
});

$.subNode("●●●")の中身に動きをつけるオブジェクト名をいれます。
今回、回転させるのは③で設定した回転軸のオブジェクトなので、$.subNode("回転軸")とを記載しました。
回転軸が回ることで、その子オブジェクトであるキューブやsitPositionも一緒に回転してくれます。

speedAが回転するスピードを設定していますので、数字を変えることで回転スピードをかえることができます。

斜めに回転するアイテムができました。

応用編

①２つの回転を組み合わせる

以下のようにスピード、subNodeを2つ記載することで、2つの異なる回転を組み合わせることも可能です。
以下は、回転軸を中心とした斜め回転と、支点を中心とした横回転の組み合わせです。

const speedA =30;
const speedB =30;
const axis = new Vector3(0, 1, 0);

$.onUpdate(deltaTime=>{
    let rotA = $.subNode("回転軸").getRotation();
    let nextRotA =  rotA.clone()
     .multiply(new Quaternion().setFromAxisAngle(axis, speedA * deltaTime));
     $.subNode("回転軸").setRotation(nextRotA);

    let rotB = $.subNode("支点").getRotation();
    let nextRotB =  rotB.clone()
     .multiply(new Quaternion().setFromAxisAngle(axis, speedB * deltaTime));
    $.subNode("支点").setRotation(nextRotB);
});

②座ると回転するようにする

置いてあるときは止まっていて、座ると回転がはじまるscriptです。

const speedA =30;
const axis = new Vector3(0, 1, 0);

$.onRide(isGetOn => {
    $.state.isGetOn = isGetOn;
  })
$.onUpdate(deltaTime=>{
    if (!$.state.initialized) {
        $.state.initialized = true;
        $.state.pivot = $.getPosition();
        $.state.time = 0.0;
        $.state.isGetOn = false;
      }    
      if (!$.state.isGetOn) return;

        let rotA = $.subNode("回転軸").getRotation();
        let nextRotA =  rotA.clone()
         .multiply(new Quaternion().setFromAxisAngle(axis, speedA * deltaTime));
         $.subNode("回転軸").setRotation(nextRotA);

});

こちらはこの記事でも紹介しています。

③斜め回転＋座るとアイテムが変化する

今度は斜めに回転するキューブに座ると、キューブが光るアイテムをつくりました。こちらはUnityの設定を以下のように少し変えています。

回転軸にCubeA（通常のキューブ）、CubeB（光るキューブ）を
子オブジェクトとして付けています
const speed =30;
const axis = new Vector3(0, 1, 0);

$.onUpdate(deltaTime=>{
    let rot = $.subNode("回転軸").getRotation();
    let nextRot =  rot.clone()
     .multiply(new Quaternion().setFromAxisAngle(axis, speed * deltaTime));
     $.subNode("回転軸").setRotation(nextRot);
});

const subNode1 = $.subNode("CubeA");
const subNode2 = $.subNode("CubeB");
$.onRide(() => {
  let active1 = subNode1.getEnabled();
  let active2 = subNode2.getEnabled();
  if (active1) {
    active1 = false;
    active2 = true;
  } else {
    active1 = true;
    active2 = false;
  }
  subNode1.setEnabled(active1);
  subNode2.setEnabled(active2);
  $.state.active1 = active1;
  $.state.active2 = active2;
});

前半部分が回転軸を回転させるscript、後半が座っていないときはCubeA（通常）、座った時にCubeB（光る）を表示させるscriptです。

こちらのギミックはミッコちゃんさんのscriptを参考としております。
以下の記事も併せてご覧いただければと思います。

さらに、支点や回転軸の位置を変えることで、様々な動きを付けることも可能です。
冒頭で紹介したアイテムは回転軸をかなり遠くに置くことで、大回りの動きをつけています。

参考になれば幸いです。


いいなと思ったら応援しよう！