HoloToolkitから名前が変わりMixedRealityToolkitになりましたね。
色々環境を新しくして、そのMixedRealityToolkitにあるColorPickerのサンプルをMRDesignLabs用に書き換えてみました。
今回はプロジェクトを最初から作ってみました。
プログラム自体がかなりスッキリとしました。
環境
- Unity 2017.1.0f3
- MixedRealityToolkit-Unity for Unity 2017.1.0f3
- MRDL V.0.1.3 Unity 2017 Compat
- Visual Studio 2017
完成イメージ
MixedRealityToolkit-UnityのColorPickerをMRDesignLabs_Unityを使って書き換えてみた。 #HoloLens #HoloLensJP pic.twitter.com/96BIJO0a6d
— がおまる@HoloLens研究者 (@gaomar) 2017年8月16日
プロジェクト新規作成
Unityのプロジェクトを新規作成していただき、
ダウンロードしてきたものをこのように配置します。
- Main Cameraを削除します
- HUXのHoloLens用カメラを設置します
- マテリアルを新規作成してColorPickerImageをドラッグ・アンド・ドロップします
- ColorPickerImageの設定を変更します
- キャンバスを追加
- World SpaceにしてScaleを変更出来るようします
- 設定はこんな感じにしました。キャンバス名はColorPickerCanvasでサンプルと同じにしています。
- 色を選択するやつを追加します。3D ObjectのQuadを追加しましょう。
- 名前はPickerにしてMaterialsを先程作成したColorPickerMaterialを指定します
- Pickerに新規スクリプトを追加する
GazeableColorPicker.cs
// Copyright (c) Microsoft Corporation. All rights reserved.
// Licensed under the MIT License. See LICENSE in the project root for license information.
using HoloToolkit.Unity.InputModule;
using HUX.Focus;
using HUX.Interaction;
using System;
using UnityEngine;
using UnityEngine.Events;
namespace HoloToolkit.Examples.ColorPicker
{
public class GazeableColorPicker : MonoBehaviour
{
public Renderer rendererComponent;
[System.Serializable]
public class PickedColorCallback : UnityEvent<Color> { }
public PickedColorCallback OnGazedColor = new PickedColorCallback();
public PickedColorCallback OnPickedColor = new PickedColorCallback();
private bool gazing = false;
private void Start()
{
FocusManager.OnFocusEnter += FocusManager_OnFocusEnter;
FocusManager.OnFocusExit += FocusManager_OnFocusExit;
}
// フォーカスアウト
private void FocusManager_OnFocusExit(GameObject arg1, FocusArgs arg2)
{
gazing = false;
}
// フォーカス当たった
private void FocusManager_OnFocusEnter(GameObject arg1, FocusArgs arg2)
{
gazing = true;
}
void Update()
{
if (gazing == false) return;
UpdatePickedColor(OnGazedColor);
}
void UpdatePickedColor(PickedColorCallback cb)
{
FocusInfo hit = FocusManager.Instance.GazeFocuser.FocusHitInfo;
if (hit.transform.gameObject != rendererComponent.gameObject) return;
Texture2D texture = rendererComponent.material.mainTexture as Texture2D;
Vector2 pixelUV = hit.textureCoord;
pixelUV.x *= texture.width;
pixelUV.y *= texture.height;
Color col = texture.GetPixel((int)pixelUV.x, (int)pixelUV.y);
cb.Invoke(col);
}
// タップ処理
public void Tapped(InteractionManager.InteractionEventArgs e)
{
UpdatePickedColor(OnPickedColor);
}
}
}
- 色を反映するパレットを追加する
- プレビュー用パレットを追加する
- GazeableColorPicker.csに適用していく
- CanvasRendererのSetColorを選択する
- 下のOn Picked Colorも同じようにする
実行
おまけ
今のままではパレットはその場に居座り続けます。
追従するように設定しておきましょう。
ColorPickerCanvasに対してTagalongとBillboardいうスクリプトをアタッチします。
最後にUWP用に書き出します。