HoloLensとCreateJSをMilkcocoaで連携して現実空間と仮想空間を行き来するメモです。
気づき
HoloLensのEdgeブラウザで、CreateJSのサンプルが普通にうごいたので、これはやらねばとなりました。
こんなかんじ。
今回やりたいこと
さて、やりたいことを決めましょう。ざっくりいうと、複数画面でエフェクトをリレーする仕組みを、WEBな作り方でやってみます。
- CreateJSで1画面1UIなネタをつくる
- Milkcocoaで複数画面でエフェクトをリレーする仕組みをつくりCreateJSと連動させる
- HoloLensのEdgeブラウザで2画面、現実世界のスマホで1画面表示させる
- 現実世界と仮想世界でエフェクトが行き来する
- Cool!!
自分の素地であるフロントエンド技術をいろいろと使えて楽しいです。
つくってみた
というわけで、つくってみました。
そして、HoloLens内に2画面、スマホで1画面で舞台設定をしてみます。
動作前の静止画を撮影しましたが、テンション上がりますね！
通常のPCでのEdgeブラウザを意識すればよく、さらに言えば、ギリギリまでChromeで開発していてもHoloLensで動作がおかしいということはなかったです。
フロントエンド技術的に、ありがたかったところをメモしておきます。
- webpackでCreateJSのTypeScript変換とJavaScriptまとめるところの最小実装してみたが作りやすかった
- TypeScriptの@typesにMilkcocoaがあって書きやすかった
- npm i –save @types/milkcocoa
- CreateJSの画面レスポンシブがAnimate側からポチポチ指定して該当のレスポンシブソースが吐き出されるのでやりやすい
いざ動かしてみる
では動かしてみます！
無事、現実空間と仮想空間を行き来できました。
今回は2画面だけHoloLensで開きまして、スマホにもエフェクトが連動する、求めていたものができました。可能性を感じますね！
フル画面でウィンドウバーが消せなかったり、たくさん表示させると動作が遅くなったり、画面から外れると、よしなに動作を押させる挙動が見えましたが、そのあたりは、まだ確証が持てないので引き続き検証していきます。
よき、Milkcocoa・HoloLens・CreateJS Lifeを！！