LoginSignup
3
1

More than 5 years have passed since last update.

MixedRealityToolkit-UnityのColorPickerをMRDesignLabs_Unityを使って書き換えてみた

Posted at

HoloToolkitから名前が変わりMixedRealityToolkitになりましたね。
色々環境を新しくして、そのMixedRealityToolkitにあるColorPickerのサンプルをMRDesignLabs用に書き換えてみました。
今回はプロジェクトを最初から作ってみました。
プログラム自体がかなりスッキリとしました。

環境

完成イメージ

プロジェクト新規作成

Unityのプロジェクトを新規作成していただき、
ダウンロードしてきたものをこのように配置します。

s100.png

  • Main Cameraを削除します

s101.png

  • HUXのHoloLens用カメラを設置します

s102.png

s103.PNG

  • マテリアルを新規作成してColorPickerImageをドラッグ・アンド・ドロップします

s104.png

  • ColorPickerImageの設定を変更します

s105.png

  • キャンバスを追加

s106.PNG

  • World SpaceにしてScaleを変更出来るようします

s107.PNG

  • 設定はこんな感じにしました。キャンバス名はColorPickerCanvasでサンプルと同じにしています。

s108.PNG

  • 色を選択するやつを追加します。3D ObjectのQuadを追加しましょう。

s109.PNG

  • 名前はPickerにしてMaterialsを先程作成したColorPickerMaterialを指定します

s110.PNG

  • Pickerに新規スクリプトを追加する

s111.PNG

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);
        }
    }
}
  • 色を反映するパレットを追加する

s112.PNG

大きさと配置はご自由に
s114.PNG

  • プレビュー用パレットを追加する

s115.PNG

s116.PNG

  • GazeableColorPicker.csに適用していく

s200.png

s201.png

s202.png

  • CanvasRendererのSetColorを選択する

s203.png

  • 下のOn Picked Colorも同じようにする

s204.png

実行

Unityのプレビュー画面でも確認出来ます。
s205.png

おまけ

今のままではパレットはその場に居座り続けます。
追従するように設定しておきましょう。

ColorPickerCanvasに対してTagalongとBillboardいうスクリプトをアタッチします。
s207.png

s208.png

最後にUWP用に書き出します。

s206.png

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1