【cluster】アイテムの色をインタラクティブに操作する【アドカレ20日目】
見出し画像

【cluster】アイテムの色をインタラクティブに操作する【アドカレ20日目】

Cluster Creator Kit Advent Calendar 2020』の20日目の記事です.この記事では,clusterのワールドに設置されたアイテムの色をユーザーが自分好みにカスタマイズできるようにする方法を紹介します.

なお,この記事で紹介する機能の実装および執筆は,ClusterGAMEJAM2020 in WINTERの最中に行われているため,特に実装には冗長性が含まれている可能性がありますがご容赦ください m(_ _)m

はじめに

アイテムの色をインタラクティブに複数色で塗り替える方法です.様々な色の組み合わせのアイテムを事前に用意しておくことで,ユーザーが選択した色のアイテムを生成することは可能ですが,その場合一度生成したアイテムの色をその後に動的に変化させることはできません.今回の手法では,事前に設定がされていれば,アイテムの色を何度でも好きな色に変化させることができます.

これを使えば,各々が自分の好みに合うようにアイテムの見た目をカスタマイズする武器改造ステーションや,ユーザーのマーキングによる新たな遊び方の発見を促すことが可能になると思われます.

機能を構成する要素

この機能は複数のオブジェクトによって構成されています.下の図は完成したヒエラルキーです.以下では,この中で重要や役割をもつ3つの要素について解説します.

画像4

スクリーンショット 2020-12-18 23.44.41

① Item

これは色を変える対象となるアイテムです.実際はGrabbable Itemとして扱われることが多いと思います.ItemはItemコンポーネントをつけたアイテムです.配下にはBody1とBody2というただのCubeを置いています.実際に色が変わるのはこの2つのBodyです.

2つのSet Animator Value Gimmickで配下のBody1とBody2の色を変化させています.パラメータにはともに整数型のColorNum_1とColorNum_2を設定しており,その値によって状態を遷移させるようにしました.

スクリーンショット 2020-12-18 23.04.40

以下は色を変化させるためのステートマシンです.今回のような色の組み合わせを実現しようとしたとき,例えば赤青と青赤をキーの値で区別するのは面倒です.したがって,2つのBodyの色を同時に変化させずに,2つのキーの値を用いてその変化を2層化しました.最初に受け取ったColorNum_1の値によって,Body1の色が赤か青かを決定します.そのあとにColorNum_2の値によってBody2の色を変えることで,色の変化をBodyごとに独立して制御できます.ただし,この場合色の組み合わせの数だけアニメーションクリップを作成する必要があり,色の種類やBodyの数を増やせばその分労力は急激に増加します.今回は6種類のアニメーションを作成しました.

画像5

② ColorChangers

これは対象アイテムとの接触をもとにトリガーを発火させるアイテムです.例えば,ColorChanger_1_RはBody1の色をRedに変化させるColorChangerです.以下はColorChanger_1_Rのインスペクターです.衝突したアイテムに対して,それぞれ赤と青に対応する整数0と1を渡します.それをもとに,上記のアニメーションを遷移させます.Body1とBody2の色を同時に変化させることは難しいので,ColorChangerを2層化しています,

スクリーンショット 2020-12-18 23.09.58

③ ChangeColorButtons

これは先ほどのColorChangerの色を変えるためのボタンとしての役割をもつアイテムです.実際にはColorChangerの色を変えているわけではなく,赤と青のColorChangerをSet Game Object Active Gimmickで切り替えています.現在の状態はグローバルキーとして管理しており,ボタンを押すたびに0と1が切り替わります.例えば,currentColorNum_1が0のときは青のColorChangerは非表示になるので,結果的に赤のColorChangerとのみ衝突することになります.

スクリーンショット 2020-12-18 23.16.56

おわりに

本記事ではアイテムの色をユーザーが自分好みにカスタマイズできるようにする方法を紹介しました.最近ではオリジナルのアイテムをバーチャル空間に持ち込んで使用できるVCIなど,バーチャル空間のモノに対してユニークネスを与えるような取り組みがなされています.このような取り組みが,切り離して語られがちな物理世界とバーチャル世界の連続性を高めることにつながればいいなと思っています.

Twitter : @tetsuro_okuya

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
ありがとうございます!
Virtual / Augmented Reality, Food Computing. te260ku.github.io/portfolio/