夜風のMixedReality

xRと出会って変わった人生と出会った技術を書き残すためのGeekなHoloRangerの居場所

DigiGirlzイベントで小中高生向けにHoloLensのデモをしてきました。 アプリ開発編 その③ MRTKShaderを用いたアニメーション作成

 先日DigiGirlzというイベントでHoloLensのデモアプリを作成、アテンドをおこないました。

 MRTKv2.2.0のPulseShadeを含む数多くの実験的機能を盛り込んだアプリに仕上がりました。

 今回からアプリに関して少しずつ残します。

 前回の記事はこちらです。

redhologerbera.hatenablog.com

 イベントでのデモに関してはこちら記事を見てください。

redhologerbera.hatenablog.com

〇MRTKShaderを用いた魔方陣の演出

UnityのAnimationではマテリアルもAnimationで変化させることができます。

 今回の魔方陣ではMRTKStandardShaderを用いて二つの表現を行っています。

〇魔方陣の形状を変化させる

 f:id:Holomoto-Sumire:20191227140901g:plain

 今回の魔方陣の演出では魔方陣が浮かび上がりキャラクターが登場するまでの間にイベントの主催者であるMicrosoft社のロゴをイメージしたエフェクトを用意しました。

 多くの魔方陣では最後は光に包まれて、光が晴れると同時にキャラクターがいるというパターンですが、今回はデジタルを意識した表現としてMRTKStandardShaderを組み合わせた結果、プレートが浮かび上がりながらキャラクターが登場するという演出になりました。

 こちらも前回の魔方陣の発光色を変化させるものと同じくAnimationで行っています。

redhologerbera.hatenablog.com

 〇 魔方陣の形状を変化させる

 今回、最初円形のオブジェクトの角がだんだん鋭くなり、四角形を描くAnimationを作りました。

 この表現にはMRTK StandardShaderのRound Cornersを用いています。

redhologerbera.hatenablog.com

 Round Cornersはオブジェクトのエッジを取り丸く見せる表現ができます。

 Animationを設定していきます。

 

〇魔方陣の形状を変化させるアニメーション

 基本的なアニメーション設定はその②でも触れていますので参考にしてください。

redhologerbera.hatenablog.com

 今回Round Cornersでアニメーションを付けるオブジェクトはRed,Blue,Green,Yellowの四つのPlaneになります。

 前回同様Animation WindowのAdd Propatyでそれぞれのオブジェクトを選択します。

 マテリアルをアニメーションで変化させるためにはMesh Rendererを選択します。 

 f:id:Holomoto-Sumire:20191227175045j:plain

 次に、Round cornersのパラメータを選択します。

 今回変化させるものはRound corner Radiusの値であるため、Red.Mesh Renderer.Material._Round Corner Radiusを選択します。

 Round Cornerというpropertyもありますが、これはRound Cornerという機能のオンオフに相当します。

 アニメーションを付けたいパラメータの名前自体のpropertyを選択する必要があります。

 f:id:Holomoto-Sumire:20191227175740j:plain

 選択されるとPropatyにRed.Mesh Renderer.Material._Round Corner Radiusの項目が追加されます。

 最後に時間のキーを設定します。

 f:id:Holomoto-Sumire:20191227180548j:plain

 Round Corner Radiusは値が0.5で円となるので、0:00秒目で0.5の値、1:00で1の値を取るように設定しました。

 実行します。

 f:id:Holomoto-Sumire:20191227181017g:plain

 丸みのある円から四角形へと変化するアニメーションができました。

 同様の設定をBlue,Green,Yellowにも適応します。

 f:id:Holomoto-Sumire:20191227181535j:plain

 1秒の変化ではわかりにくい気もするので2:00までキーを移動して2秒間のアニメーションにしました。

 実行します。

 f:id:Holomoto-Sumire:20191227181651g:plain

 最初きれいな円であったのが四角形へと変化する滑らかな流れを作成できました。

 今回のデモアプリでは魔方陣の形(円形)から四角形へと鉛直にPlaneを上昇させるアニメーションの中で行っています。

 以上がMRTK StandardShaderを用いた魔方陣の表現になります。