2018.08.22 ガチラボ vol.8の資料です。 https://kumamcn.connpass.com/event/97946/

1. 2018.08.22 KumaMCN ガチ本

2. 前回まで
• 実機なしでHoloLensアプリ開発やーる（導入、ウンコ投げ）
• https://www.slideshare.net/satoshibfujimoto/20180613-vol4
• 実機なしでHoloToolkit-Unity全部やーる
• https://www.slideshare.net/satoshibfujimoto/20180801-vol7

3. 実機なしで
お絵描きつくーる
～実機は持ってる人から奪え～

4. 開発環境
• Unity 2017.2.2p2
• https://unity3d.com/jp/unity/qa/patch-releases/2017.2.2p2
• Windows Store .NET Scripting Backendにチェック
• HoloToolkit-Unity-2017.4.0.0.unitypackage
• HoloToolkit-Unity-Examples-2017.4.0.0.unitypackage
• https://github.com/Microsoft/MixedRealityToolkit-Unity/releases
-> 2017.4.1.0もあるよ
• Visual Studio 2017 (15.7.6)
• ユニバーサルWindowsプラットフォーム開発, Unityによるゲーム開発に
チェック
• Windows 10 SDK (10.0.17134.0)
• Windows 10 April 2018 Update

5. 参考文献
• HoloLensハンズオン：ハンドトラッキング&音声入力編
• https://www.slideshare.net/ssuserc0d7fb/hololens-76412075
• HoloLensでお絵描きする
• https://qiita.com/miyatama/items/06e2b01cbdf4661bc81d

6. Unityを起動

8. 設定

17. MRTKのインポート

25. いつもの設定

26. Main CameraをDelete

27. 以下のPrefabをProjectから検索し
HierarchyへD&D
- MixedRealityCameraParent
- DefaultCursor
- InputManager

28. MixedRealityCameraParent->
MixedRealityCameraの設定

29. 丸いぽっちをクリックして
FakeSpatialMappingMesh
をアタッチ
ProjectからSpatial Mappingを検索し、
HierarchyへD&D

31. Spatial Perceptionにチェック

32. プレイボタンで実行！

33. こまめにシーンを保存（Ctrl＋S）

34. Cubeの作成

40. 作ったMaterialをCubeのMaterialにアタッチ

41. Two Hand Manipulatableを
Add Component
Manipulation Mode を
Moveにする

42. Trail RendererをAdd Component
TimeをInfinity
MinVertexDistanceを0.05
Widthを0.02

43. できた

44. ジェスチャを使う

45. TwoHandManipulatableを消す

49. DrawingManager.csを
VisualStudioで開く

50. ソースコード
https://gist.github.com/SatoshiRobatoFujimoto/85cea6
72f27567484ff322457f60a581

51. DrawingManager.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
使用するライブラリ

52. DrawingManager.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using HoloToolkit.Unity.InputModule; ジェスチャを使うために追記

53. DrawingManager.cs
public class DrawingManager : MonoBehaviour
{
// Use this for initialization
void Start()
{
}
// Update is called once per frame
void Update()
{
}
}
最初に一度だけ呼ばれる関数
フレームごとに呼ばれる関数

54. DrawingManager.cs
Public class DrawingManager : MonoBehaviour , ISourceStateHandler, IInputHandler
{
// Use this for initialization
void Start()
{
}
// Update is called once per frame
void Update()
{
}
}
手の検出 タップのUP/DOWNの検出

55. DrawingManager.cs
public class DrawingManager : MonoBehaviour , ISourceStateHandler, IInputHandler
{
// Use this for initialization
void Start()
{
InputManager.Instance.PushFallbackInputHandler(gameObject);
}
// Update is called once per frame
void Update()
{
}
}
どこでタップしてもイベントを発火させるハンドラの登録

56. DrawingManager.cs
public class DrawingManager : MonoBehaviour , ISourceStateHandler, IInputHandler
{
// Use this for initialization
void Start()
{
InputManager.Instance.PushFallbackInputHandler(gameObject);
}
// Update is called once per frame
void Update()
{
}
以下にイベントの関数を追記していく

57. DrawingManager.cs
//手が検出されたら発火する関数
public void OnSourceDetected(SourceStateEventData eventData)
{
Debug.Log("Detected");
}
//手がロストしたら発火する関数
public void OnSourceLost(SourceStateEventData eventData)
{
Debug.Log("Lost");
}
・・・

58. DrawingManager.cs
//人差し指を倒したとき（キーボードを押したときと同じ）
public void OnInputDown(InputEventData eventData)
{
Debug.Log("Down");
}
//人差し指を倒した状態から上げたとき（キーボードを離したときと同じ）
public void OnInputUp(InputEventData eventData)
{
Debug.Log("Up");
}
}

59. 実行してConsoleを見てみる
• Shift押したときにDetected、離したときにLost
• タップ（Shift+クリック）したときにDown、Upが出力される

60. ソースコード
https://gist.github.com/SatoshiRobatoFujimoto/67dfba
9c72709790fe1645eafe693030

61. DrawingManager.cs
public GameObject obj;
private bool isDrag = false;
void Update()
{
if (isDrag)
{
//Cubeの位置を更新
}
}
public void OnInputDown(InputEventData eventData)
{
isDrag = true;
Debug.Log("Down");
}
public void OnInputUp(InputEventData eventData)
{
isDrag = false;
Debug.Log("Up");
}
public void OnSourceLost(SourceStateEventData eventData)
{
isDrag = false;
Debug.Log("Lost");
}
ドラッグしている間、なんかする

62. DrawingManager.cs
IInputSource currentInputSource;
private uint id;
public void OnInputDown(InputEventData eventData)
{
currentInputSource = eventData.InputSource;
id = eventData.SourceId;
・・・
タップしたときにイベントを更新

63. DrawingManager.cs
void Update()
{
if (isDrag)
{
//Cubeの位置を更新
Vector3 pos;
currentInputSource.TryGetGripPosition(id, out pos);
obj.transform.position = pos;
}
}
手の位置を取得する

64. ObjにCubeをアタッチする

65. 実行

66. 一回目タップ
二回目タップ
一回目タップ終了時から二回目タップ時まで線が引かれてしまう
→ドラッグし終わって、次のタップしたときから新しくCubeを生成する

67. ソースコード
https://gist.github.com/SatoshiRobatoFujimoto/fb69fa
cf8bbd242629b0e1cf986332ec

68. DrawingManager.cs
private GameObject obj;
public GameObject cube;
public void OnInputDown(InputEventData eventData)
{
currentInputSource = eventData.InputSource;
id = eventData.SourceId;
obj = GameObject.Instantiate(cube);
isDrag = true;
Debug.Log("Down");
}
タップしたらcubeを複製

69. CubeをProjectビューにD&Dして
HierarchyのCubeを消す

70. ProjectビューのCubeを
DrawingManagerのCubeへ
アタッチする

71. 常に同じ位置から線が引かれてしまう

72. DrawingManager.cs
private GameObject obj;
public GameObject cube;
public void OnInputDown(InputEventData eventData)
{
currentInputSource = eventData.InputSource;
id = eventData.SourceId;
Vector3 pos;
currentInputSource.TryGetGripPosition(id, out pos);
cube.transform.position = pos;
obj = GameObject.Instantiate(cube);
isDrag = true;
Debug.Log("Down");
}
cubeを複製する前にcubeの位置を更新しておく

73. できた
けど、cubeが映るのがダサい

74. DrawingManager.cs
public void OnInputUp(InputEventData eventData)
{
obj.transform.localScale = Vector3.zero;
isDrag = false;
Debug.Log("Up");
}
ドラッグ終了時に、Cubeのスケールをゼロにする

75. できた

76. 削除ボタン

79. ButtonのRect Trasformを調整する

80. フォントサイズは大きく、Scaleで調整
CanvasのRect Trasformを調整する
Render ModeをWorld Spaceにする

81. フォントサイズをデカくして
スケールで調整する

82. ソースコード
https://gist.github.com/SatoshiRobatoFujimoto/acfb33
7a45fafbe273dabaa10eaca426

83. DrawingManager.cs
public void ResetLines()
{
GameObject[] cubes = GameObject.FindGameObjectsWithTag("Cube");
foreach (GameObject cube in cubes)
{
Destroy(cube);
}
}
Cubeタグの付いたオブジェクトを
全て削除する

84. CubeのTagからAdd Tagを選択

85. Cubeのタグを作成

86. Cubeのタグを選択

87. ButtonのOn Click()に
DrawingManagerをアタッチする

88. 作成したResetLines()関数を割り当てる
これでボタンをタップしたときにResetLines()が実行される

89. マウスクリックもできてしまうので注意
ボタンから離れてお絵描きしてから、ボタンを押してみる

90. できた

91. 実機を奪え