夜風のMixedReality

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

DigiGirlzイベントで小中高生向けにHoloLensのデモをしてきました。 アプリ開発編 その①

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

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

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

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

redhologerbera.hatenablog.com

  

〇デモアプリ開発

 ●期間  ・12月19~21日   

 年末の仕事の合間に夜な夜な作りました。

 ●開発環境・使用ツール

 ・Unity2019.2.9

 ・MixedRealityToolkit 2.2.0

 ・ユニティちゃんライブステージ! -Candy Rock Star-

 ・VoxelTeleporter

github.com

〇ユニティちゃん召喚魔方陣作成

 今回のアプリは地面を向いてAirTapを行うことでユニティちゃんが現れてダンスを始めるという流れです。

 ただユニティちゃんが現れるだけではつまらないので今回、召喚魔方陣を作成しました。

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

 Blenderを用いて円、四角形、それらを合わせる十字に加えC#やXmarin等の言語のロゴをイメージした六角形を大小配置し、魔方陣を作成しました。

 今回Microsoftさんのイベントということで隠し要素として召喚エフェクトの最後にMicrosoft社のロゴが浮かび上がるような演出を加えました。(今回のイベントのデモのためだけに作ったものになります)

 アニメーションはBlenderでも作成することができますが、今回はユニティちゃんとの演出を考えUnity側で行うことにしました。    

〇魔方陣のアニメーション(Unityでのアニメーション製作)

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

 今回の魔方陣のコンセプトは、極力Materialに設定されているShaderのパラメータを変更して魔方陣を表現することです。

 Unityへ取り込んだ魔方陣のMaterial設定には以前勉強したMRTKStanderdShaderを適応しています。

 アニメーションを行うためにはアニメーションをさせたいオブジェクトの親オブジェクトにAnimatiorをアタッチします。

 今回では魔方陣というオブジェクトの中に大小さまざまな図形のオブジェクトがそれぞれ入っているため、親である魔方陣にアタッチします。

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

 次にAnimationControllerとAnimationを作成します。

 プロジェクトで右クリック、createからAnimationとAnimationControllerをそれぞれ作成します。

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

 AnimationとAnimationControllerに関して簡単に説明すると次のようになります。

●Animation

アタッチされている自身と子オブジェクトに「瞬き」「走る」「座る」「移動」「スケールを変える」などのアニメーションを設定します。

●AnimationController

単体、または複数のAnimationを管理する機能です。 「瞬き」と「スケールを変える」を同時に行うことや「座る」から「走る」のanimationを切り替える際の条件等設定できます。

 イメージとしてAnimationControllerというラジカセの中にAnimationというカセットを入れているようになります。   qiita.com

 魔方陣オブジェクトのAnimatorにAnimationControllerをアタッチします。

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

 Unityの上部タブからWindow/Animatorを選択してAnimatorウィンドウを表示します。

 AnimatorウィンドウにAnimationをドラッグ&ドロップします。

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

 これで魔方陣オブジェクトでAnimationが使用できるようになりました。  

〇魔方陣の演出 

 魔方陣にAnimatorが設定されたことでアニメーションで動かすことができるようになりました。

 次にainmationを設定します。

 魔方陣オブジェクトを選択した状態で、Ainmationウィンドウを表示します。

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

 Animationウィンドウではアタッチされている自身を含む、子オブジェクトのTransform、コンポーネント、マテリアルをキーフレームごとに設定し、アニメーションを行うことができます。

 魔方陣自体のアニメーションはオブジェクトの回転と大きさを変えるのみであるため、ここではMRTKStandardShaderを適応したマテリアルのアニメーションに関して記します。

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

   今回のデモアプリで実装したMRTKStandardShaderを用いた魔方陣の表現は大きく分けて二つあります。

・魔方陣自体のサークルの発光色の変化

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

・今回のイベントの会場のMicrosoft社をイメージしたプレートの形状の変化

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

次回この二点を詳しく解説します。