VR まつり in 札幌で発表した資料の修正版です。

1. Mont Blanc Pj. / LITTAI
hheeccoommii
ゲーム xx リアル

2. LLIITTTTAAII (テーブルトップレゴシューティング） MMoonntt BBllaanncc PPjj..（レゴプロジェクションゲーム）
http://tips.hecomi.com/entry/2014/09/10/003900http://tips.hecomi.com/entry/2015/08/06/003049
hecomi (http://tips.hecomi.com)
MMaaggiicc VVRR（VR 空間で指で魔法を描いて発射）
http://tips.hecomi.com/entry/2014/12/19/235052
自己紹介

3. LLIITTTTAAII (テーブルトップレゴシューティング） MMoonntt BBllaanncc PPjj..（レゴプロジェクションゲーム）
http://tips.hecomi.com/entry/2014/09/10/003900http://tips.hecomi.com/entry/2015/08/06/003049
MMaaggiicc VVRR（VR 空間で指で魔法を描いて発射）
http://tips.hecomi.com/entry/2014/12/19/235052
自己紹介
hecomi (http://tips.hecomi.com)
VR 関係なくてスミマセン…

4. 現実の世界とインタラクション
• 色々ネタが思いつく
• 見た目に面白い
• 新規性もある
• 適度な難易度で幅広く勉強できる

5. 現実の世界とインタラクション
• 研究になってるものは結構ある
• 最近は便利なモノが増えて一般でも出来るようになってきた
• でも活用しているものは少ない
• 技術デモで終わり、が多い
• 実生活に落としこむみたいな壮大なのは大変…

6. 現実の世界とインタラクション
• 研究になってるものは結構ある
• 最近は便利なモノが増えて一般でも出来るようになってきた
• でも活用しているものは少ない
• 技術デモで終わり、が多い
• 実生活に落としこむみたいな壮大なのは大変…
ゲームにする！

7. MONT BLANC PJ （2013, 2014）
レゴ x プロジェクションなゲーム
@jojonki (電気・ハード)
@hecomi (認識・ゲーム)

8. プロジェクションマッピング
写真引用元： Digital Life Innovator
（http://saya.s145.xrea.com/archives/2012/09/tokyo_station_v.html）
プロジェクタで立体物に映像を投影し、
リアルとバーチャルを融合する手法
例： TOKYO STATION VISION

9. プロジェクションマッピング
写真引用元： Digital Life Innovator
（http://saya.s145.xrea.com/archives/2012/09/tokyo_station_v.html）
プロジェクタで立体物に映像を投影し、
リアルとバーチャルを融合する手法
例： TOKYO STATION VISION
かっこいい！やりたい！！

10. もっと面白く出来ないか？
• 静止した立体物に映像を投影
• バーチャルなモノに見せかける

11. もっと面白く出来ないか？
• 静止した立体物に映像を投影
• バーチャルなモノに見せかける

12. もっと面白く出来ないか？
• 動く・動かせる立体物に映像を投影
• バーチャルなモノに見せかける

13. もっと面白く出来ないか？
• 動く・動かせる立体物に映像を投影
• バーチャルなモノに見せかける

14. もっと面白く出来ないか？
• 動く・動かせる立体物に映像を投影
• バーチャルな世界と連動・干渉

15. もっと面白く出来ないか？
• 動く・動かせる立体物に映像を投影
• バーチャルな世界と連動・干渉
＝ リアルとバーチャルをもっと融合

16. もっと面白く出来ないか？
• 動く・動かせる立体物に映像を投影
• バーチャルな世界と連動・干渉
＝ リアルとバーチャルをもっと融合
ゲームとして作ってみた

18. コンセプト
レゴで作成した立体ステージにプロジェクションしたゲーム

19. レゴを自由に組み替えることでゲームの世界も連動して変化
コンセプト

20. コンセプト
ゲーム中のオブジェクトとハードウェアが連動

21. 下地は灰色のレゴ

22. ゲームを投影
LED プロジェクタ

23. 赤外線カメラ
赤外線投光機
下地が黒く見える！
天井に投光してまんべんなく
赤外線を当てるのがミソ

25. レゴをグリッドで区切って変化を検出

26. レゴをグリッドで区切って変化を検出

27. • 要接写
• コントラスト低
• 遠方/低解像度で解析可
• コントラスト高
デプスカメラとの比較
今回の方式 Kinect

28. • そこそこ取れる
• 計算が面倒...
• 遠方/低解像度で解析可
• コントラスト高
デプスカメラとの比較
今回の方式 Intel Creative
Camera

29. 筐体
下にプロジェクタ、上に赤外線カメラが入っている

30. 一号機では赤外線投光機を使用
天井に一旦投射して平行光源を作るのがミソ

31. 弐号機では Xtion に変更
デプスは使わず赤外線投光機 + 赤外線カメラの機能を利用

32. 認識の様子

33. ゲーム
Unity で作成、ブロックの着脱を受け取ってステージを生成
コントラスト高めのステージ

34. ゲーム
Unity で作成、ブロックの着脱を受け取ってステージを生成
コントラスト高めのステージ

35. 連動ネタ
ゲームのキャラがブロックを叩くと光る
また、叩くとブロックがゲームの中で動くが実際にも動いてるように見える

36. 連動ネタ
ブロックが動いてキャラを攻撃
MFT 2013 版では糸で吊っていた

37. 連動ネタ
ブロックが動いてキャラを攻撃
MFT2013 版では糸で吊っていた
連動ネタ
ブロックが動いてキャラを攻撃
OMMF 2014 版ではネオジム磁石方式に変更

38. 連動ネタ
ベルトコンベアでキャラが供給される

39. ゲームとブロックの連動ネタ
バーチャルなキャラクタが実際のブロックを吹っ飛ばす

40. ゲームとブロックの連動ネタ
バーチャルなキャラクタが実際のブロックを吹っ飛ばす

41. MFT 2013 / OMMF 2014 に出展

42. 出展しての気づき
小さい子でもすぐ理解して遊んでくれる！

43. なんで直感的に遊べた？
① 簡単な操作だけで色々できる
レゴ à 3歳の子供から遊べる
ブロックとブロックをくっつけるだけ

44. なんで直感的に遊べた？
② 現実でやったこと ＝ ゲームで起きたこと
• 実際のモノが当たり判定を生じる
• 画面越しにでなくその場で見える

45. まとめ
現実で行った操作をゲームに反映
ゲームで起こったことを現実に反映
直感的で子供から大人まで楽しめる！
そしてもっと色々出来るはず！

46. LITTAILIT TABLE INTERFACE （2015）
@jojonki (電気・ハード)
@hecomi (認識・ゲーム)
@izmhrats (ランキング)

47. 前回を踏まえて
良い点を引き継ぎつつ、自由度を大きくしたい
• 複数人で同時に遊べる
• リアルタイムに動かせる
• もっとゲームの世界に干渉できる

48. LITTAI
• （デモ動画）

49. テーブル上で実際に自機を操作しながら遊ぶシューティング
コンセプト

50. ハードウェアとゲームの世界が連動
コンセプト

51. LITTAI コンセプト1
• （デモ動画）
コンセプト
ハードウェアとゲームの世界が連動

52. 操作するものはリアルタイムにカスタマイズ可能
コンセプト

53. 全体図
ホームセンターや Amazon で色々買って組み立て

54. 全体図
拡散板
（赤外線カメラ＆赤外線投光）
画角が小さいため光路を
稼ぐために一旦下へ投射

55. 画も綺麗に映るし上面に置いたものやタッチも下から見やすい
アクリル板 x トレーシングペーパー

56. 明るい環境下でもそこそこ見える（プロジェクタは500 lm）
展示の様子

57. 全体の流れ

58. 全体の流れ

59. センサ選定
• センサ選定は重要（今回はカメラ）
• 赤外線カメラのプロコンを作成
• Xtion / RealSense / LeapMotion / Kinecv v2 / USB赤外線カメラ等
à 光源一体型でブレに強い Kinect v2
• 業務用赤外線カメラが欲しかった…
• 高いので今回は見送り...

60. 全体の流れ

61. ブロック認識
赤外線透過フィルム
（裏に ArUco マーカが仕込んである）
ArUcoマーカ
ゲーム連動ボタン
+ LED（緑/黄）
3Dプリントした半透過レゴ

62. 下の画が表面に浮き出てくる不思議な石
ゲーム操作・スコア表示とボムに使用、東急ハンズで売ってる（￥1,260）
テレビ石

64. 上面に拡散層を置かないと側面から見るとボケる
テレビ石

65. 認識側からだと上面のタッチが下面のタッチと同じように見える
テレビ石

66. 認識側からだと上面のタッチが下面のタッチと同じように見える
テレビ石
底面に黒いシールを貼って
この位置で回転をトラッキング

67. テレビ石
認識側からだと上面のタッチが下面のタッチと同じように見える
赤外線透過フィルムを貼って隠す

68. テレビ石
最初はコレをメインに使ったネタをやろうと思っていた…

69. （応募時のムービー）コンセプトムービーも作っていたが...

70. たくさんあった先行事例…
先行研究調査 重要です... Lumino (Hasso Plattner Institute, 2010)

71. たくさんあった先行事例…
先行研究調査 重要です... Ficon (明治大 福地研, 2010)

72. たくさんあった先行事例…
先行研究調査 重要です... Printed Optics (Disney Reserch, 2012)

73. 認識範囲の調整

74. 下処理

75. テレビ石認識

76. テレビ石認識
中心からレイを放射
通過した平均角度で認識
輝度がちょっと落ちるので
タッチだけ別の閾値で計算

77. マーカ認識

78. マーカ認識
マーカに隣接した形状を認識
突端配置パターンを認識
レゴを仮定（最小幅、90 で曲がる等）して
ポリゴンのノイズを除去

79. 認識（動画）

80. ゲーム側で使えるように三角化して OSC でゲームへ送る
三角化には polypartition（https://github.com/ivanfratric/polypartition）を利用
ポリゴンの三角化

81. http://github.com/hecomi/LITTAI

82. 全体の流れ

83. 3D プリントする
ボタン

84. 3D プリントする
モジュール

85. 認識しやすいよう反射率を稼ぐために裏は薄めのプラ板を貼る
モジュール

86. 組み合わせで色んな形態になる
ボタン + モジュール

87. 色々な形を試して操作しやすさから真ん中に決定
ボタンバリエーション

88. TWE-Lite を使って無線で Push Down/Up イベントを送る
お察しの通り取りこぼす頻度が高いので方式は要改善…
回路

89. 通信
￥22,,998800
TWE-Lite は簡単で便利で安い
http://mono-wireless.com/jp/products/TWE-Lite-USB/
振動アクチュエータ
TWE-Lite DIP
ToCoStick

90. 通信
TWE-Lite は簡単で便利で安い
http://mono-wireless.com/jp/products/TWE-Lite-USB/

91. 通信
TWE-Lite は簡単で便利で安い
http://mono-wireless.com/jp/products/TWE-Lite-USB/

92. 組み立てて完成
裏にマーカと赤外線透過フィルムを貼って完成
電池はボタン電池で切れたらショットが撃てなくなるので交換

93. 全体の流れ

94. Unity で作成
時間なかったので全部プリミティブ
ゲーム

95. アイテムや敵のロケータを配置
もっと色々やりたかったですがイベント用に 1 分程度で終わる簡単な難易度に…
ゲーム

96. ポリゴン情報を送信してメッシュおよびコライダを生成
送られてきた頂点をつめるだけ、描画・衝突共に同じメッシュを共有できて簡単
自機の生成

97. フィルタ処理やハードウェアイベントのハンドリングなど
カメラは 30 fps なので補間をして滑らかにするなど…
その他もろもろ

98. 全体の流れ

99. プロジェクションされた画
プロジェクタでそのまま映すと画は歪んでいる
投影される画の位置合わせも必要、時間がなかったのでなるべく楽をしたい...

100. MadMapper
プロジェクションマッピングに便利な Syphon クライアント
320 € するけど試用版（ロゴが入る）もある

101. Syphon※ で送られてきた複数画像を変形合成
※ Mac OS X 用のアプリケーション間でフレームを共有する仕組み
MadMapper

102. Syphon※ で送られてきた複数画像を変形合成
※ Mac OS X 用のアプリケーション間でフレームを共有する仕組み
MadMapper
複数の映像ソース
（SSyypphhoonnサーバ）

103. MadMapper
複数の映像ソース
（SSyypphhoonnサーバ）
送られてきた映像
Syphon※ で送られてきた複数画像を変形合成
※ Mac OS X 用のアプリケーション間でフレームを共有する仕組み

104. MadMapper
複数の映像ソース
（SSyypphhoonnサーバ）
送られてきた映像
変形して合成
（出力映像）
Syphon※ で送られてきた複数画像を変形合成
※ Mac OS X 用のアプリケーション間でフレームを共有する仕組み

105. Funnel
keijiro さんによる Unity 向け Syphon サーバ実装
https://github.com/keijiro/Funnel

106. Funnel
keijiro さんによる Unity 向け Syphon サーバ実装
https://github.com/keijiro/Funnel
すごい簡単

107. 出展当日の朝までやってました...
組み合わせて何とか完成

108. 8/1、2 に行われた MFT 2015 に展示してきました
展示の様子

109. 準備中…
展示の様子

110. 展示の様子
PC は 3 台（認識、ゲーム & 表示、ランキング）
負荷分散も出来るし説明用に画面も見せやすい。

111. 説明とランキングを用意
展示の様子

112. 説明とランキングを用意
展示の様子
どんな機体を使ったか見える

113. お子様も沢山遊びに来てくれました
展示の様子

114. 自由な発想で色々な機体が作られてました
もっと色々武器のパターン用意しておけば良かった…
展示の様子

115. 展示の様子
ハイスコアチャレンジ…
テレビ石を撃つとスコアが増えるのでなるべく死なない用に暇な時間は撃つのがコツ

116. 良かった点（頂いたご意見）
実際のものをコントローラとして操作は簡単
ゲームパッドよりも直感的に移動・回転・操作出来る
小さい子やゲームが得意でない人でも楽しめる
新しい見た目・体験
動いてるのが不思議
その場で組み立てたものがすぐゲームの中で使えるのは新しい

117. 良くなかった点（反省）
ルールが複雑過ぎ
ブロック組み立てつつ敵の弾を避けて攻撃して…は大変すぎ
コンセプトをゲームデザインに結び付けられなかった（協力プレイ要素もあんまりない…）
性能が駄目
遅延が大きく没入感少（機器の性能が不足、認識から出力まで段が多すぎ(Syphonとか）、もっと工夫すべき）
外乱への対応が難しい（腕の棄却が不十分だったり予期しないものを置かれたり…）
ハードウェア取りこぼしが多い（ハードウェアの設計と会場の無線の問題）

118. 良くなかった点
ルールが複雑過ぎ
ブロック組み立てつつ敵の攻撃を避けて攻撃して…は大変すぎ
コンセプトをゲームデザインに結び付けられなかった
（見た目良くてもゲームは駄目 & その割に協力プレイ要素もあんまりない…）
性能が駄目
遅延が大きく没入感少（機器の性能が不足、認識から出力まで段が多すぎ(Syphonとか)、もっと工夫すべき）
外乱への対応が難しい（リアルタイムで裏でもスレッショルドいじってたのですが…）
ハードウェア取りこぼしが多い（ハードウェアの設計と会場の無線の問題）
アピールしたいことは絞ってデザインすべき
リアルタイムはよく考えてネタ作りが必要

119. まとめ
• 現実の世界 x ゲームのネタはポテンシャルがある
• 研究で終わらせない、プレイアブルにする
• つくって共有して盛り上げて行きましょう！

120. Q: 作成経過がたくさん残ってるのは何故？
A : チャットで全部残しているから
進捗報告はなるべくこまめにやるようにしました

121. Q: 作成経過がたくさん残ってるのは何故？
A : チャットで全部残しているから
進捗報告はなるべくこまめにやるようにしました