【cluster】Unityを使わず、動く床アイテムを作成
かおもさんのCICrafterというツールは、Unityなしでクラフトアイテムをアップロードすることができます（Windows PC用）。
そしてワールドクラフトでは、ついに「動く床の上に乗るとアバターも一緒に動く」設定ができるようになりました。アスレチックワールドやエレベーター機能などに使える「動く床」を作ってみましょう！
ダウンロード・解凍・起動
まずは↑こちらからCICrafterをダウンロードし、解凍します。
CICrafterを実行（CICと書いてあるアイコン）。
初回起動時はアクセストークンが要求されます。
clusterで発行し、入力しましょう。アクセストークン発行ページ
床を作る
アプリが起動したら「パッケージパーツ」をクリック（ちょっとわかりづらいですが、クリック可能です）
リストから「直方体」を選びます。
そして「追加」ボタンをクリックすると、ハコができます。
スケールのXとZを2、Yを0.1にし、床っぽくします。
アイテム名を適当に入力。
「アイテムサイズを計算する」をクリックすると自動でワールドクラフトに置いたときのサイズが入力されます。
細かい設定
色を変えたいとき
左中央の部分、右端にあるスクロールバーを下に持っていくと色などの設定がでてきます。
「色相」は0～360で入力、「彩度」「明度」は0～1で入力。適当に入れていけば色を設定可能です。
アイテムの設定
このアイテムは「動く」「スクリプトをつける」としたいので、今後は左下の部分、右端にあるスクロールバーを下に持っていき「Movable Item」と「Scriptable Item」にチェックを入れます。
サムネイル撮影
さらに下にスクロールすると、サムネ撮影ボタンがあるのでサムネを作りましょう。
これで準備完了です。
「アップロード」ボタンをクリックしてください。
アップロード・スクリプト編集
無事、clusterにアイテムがアップロードされたでしょうか？
ワールドクラフトを開き、バッグの「つくったもの」からあなたのアイテムを配置しましょう。
スクリプト編集の準備
「開発者向け機能」をONにしていない人は、「設定」の「その他」からONしてください。
「プレイモード」にし、「デベロッパーメニュー」を開き、「コンソール」「スクリプトエディタ」（とオマケで「スラッシュコマンド」）をONにします。
これでスクリプトの編集の準備が整いました。
コピペするスクリプト
以下のスクリプトは以前掲載したものですが、再掲します。
上から下まで選択して[Ctrl]+[C]キーなどでコピーするか、黒いエリアの右上にマウスカーソルを持っていくと出るコピーボタンを使ってコピーしてください。
const hayasa = 1.0;
const nagasa = 2.0;
const muki = new Vector3(1,0,0);
$.onUpdate(deltaTime => {
if (!$.state.shokika) {
$.state.shokika = true;
$.state.ichi = $.getPosition();
$.state.time = 0.0;
}
$.state.time += deltaTime;
let _ichi = $.state.ichi.clone();
let _muki = muki.clone();
const nagasa_now = Math.sin($.state.time * hayasa) * nagasa;
_ichi.add(_muki.multiplyScalar(nagasa_now));
$.setPosition(_ichi);
});
アイテムのスクリプト編集
ワールドクラフトに戻り、「クラフトモード」に戻しましょう。
そして中央のマルを配置したアイテムに合わせて[F12]キーを押します。
するとスクリプトエディタが開きます。
まだスクリプトは何も入っていない、カラッポの状態です。
そこにさっきのスクリプトを[Ctrl]+[V]キーなどで貼りつけると、もうそれだけでアイテムが動き出します。
問題なさそうであれば、青い「アップロード」ボタンをクリックしてください。
しばらくするとアップロードが完了し、アイテムが2個になっています
（右のがCICrafterでアップロード直後のもの、つまり動かない。左のが新しくスクリプトを加えて動くようになったアイテム）
動く床についてくる設定
「動く床」に乗るとアバターがついてくるようになるには、もう1つ設定が必要です。
こちらの左端のボタンをクリックし、
画面下の右端にある、人型のボタンをクリックしてから動く床などの設定を行います。
とりあえず全部ONで問題ないでしょう。
完成！
これで動く床が完成しました！
応用：上下移動
これは上下移動するエレベーターっぽいパターンです。
最初の3行のhayasa・nagasa・mukiが変わっていますね。
あと実は最後のほうの行にあるnagasa_nowの計算方法も変わっています。
これは初期位置より下に行ってほしくないのでやっている計算です。
const hayasa = 0.5;
const nagasa = 4.0;
const muki = new Vector3(0,1,0);
$.onUpdate(deltaTime => {
if (!$.state.shokika) {
$.state.shokika = true;
$.state.ichi = $.getPosition();
$.state.time = 0.0;
}
$.state.time += deltaTime;
let _ichi = $.state.ichi.clone();
let _muki = muki.clone();
const nagasa_now = -(-1+Math.cos($.state.time * hayasa)) * nagasa * 0.5;
_ichi.add(_muki.multiplyScalar(nagasa_now));
$.setPosition(_ichi);
});
SubNodeを使った応用編
少し難しくなりますが、SubNodeを使うと動くアイテムをより狙った場所に配置しやすくなります。
CICrafterで直方体を追加する前に「SubNode」を追加しましょう。
その後で下に増える2つめの「追加」ボタンを使って直方体をつくります。
他はここまで書いた記事と同じです。アップロードしてください。
スクリプトはこう変わる
const hayasa = 1.0;
const nagasa = 2.0;
const muki = new Vector3(1,0,0);
const node = $.subNode("SubNode000")
$.onUpdate(deltaTime => {
if (!$.state.shokika) {
$.state.shokika = true;
$.state.ichi = new Vector3(0,0,0);
$.state.time = 0.0;
}
$.state.time += deltaTime;
let _ichi = $.state.ichi.clone();
let _muki = muki.clone();
const nagasa_now = Math.sin($.state.time * hayasa) * nagasa;
_ichi.add(_muki.multiplyScalar(nagasa_now));
node.setPosition(_ichi);
});
変わったのは5行目の「node」というものを取得している部分、初期位置が(0,0,0)になっている部分、最後のあたりの$.setPositionがnode.setPositionに変わった部分です。
何がよくなるのか？
元々のスクリプトだと、アイテムを配置しようとしても、アイテムが「最初に出た場所」に戻ってしまって配置しづらかったのではないかと思います。
しかしSubNodeを使った場合、ちゃんと狙った場所に配置しやすいはずです。
これは、「アイテムそのものではなく、アイテムの『子（SubNode）』を動かせ」という風にしたからなんですね。
クラフトアイテムのスクリプトはワールドに出した瞬間動き始めてしまいます。なので、初期位置を記録する形だと「その後で配置場所をズラそうとしても、最初に出た場所に戻っちゃう」わけです。
SubNodeを使うことで、「ユーザーが配置した場所を基準にしろ。そしてその位置を基準にして『子（SubNode）』を動かしなさい」とできるわけです。
アスレチックのように細かい配置が重要なワールドで使う場合、少し作り方が難しくはなりますが、このスタイルがいいでしょう。
さらに応用
真ん中あたりにある
$.state.ichi = new Vector3(0,0,0);
ここを、
$.state.ichi = new Vector3(0,2,0);
こんな風に変えると、配置した場所からさらに上方向に「2」あがった場所を基準にして動かせるようになります。ワールドクラフトにある 「床とかとつながった場所にしか配置できない」問題を無視できる ので、アスレチックがもっと作りやすくなりますよ。
Discussion