Unity + WebXR + Meta Quest 3 でブラウザから表示できるVRのゲームを作るテスト

アプリをインストールせず、ブラウザからサイトを表示させるだけでVR表示ができるWebXRというのが面白かったので、コンテンツを作ってみようと思いました。

まずはサンプルを使わせていただき一連の流れを確認しようと思います。

参考にさせていただいたサイト

WEB VRとは？UNITY WEB GLを利用して簡単にWEB VRアプリを作成する方法

プロジェクト作成

File -> Build Settings　から　WebGL -> Switch Platform

Window  -> Package Manager 右上の+ボタンから Add package from gif URLで以下のURL

【Web XR Export】

https://github.com/De-Panther/unity-webxr-export.git?path=/Packages/webxr

【Web XR Interactions】

https://github.com/De-Panther/unity-webxr-export.git?path=/Packages/webxr-interactions

Web XR Interactions -> Import into project　プロジェクトにサンプルが入る

XR Plug-in Management -> Web GL -> Check Web XR Export 

Window -> WebXR -> Copy WebGLTemplates

Player -> Resolution and Presentation のWebGL Template をebXRFullView2020

Buildで出力されたファイルをWebサイトへアップロードするとブラウザから見える

エラーが表示されるとか正しく起動しない場合

「Unable to parse Build/Build.framework.js.gz! This can happen if build compression was enabled but web server hosting the content was misconfigured to not serve the file with HTTP Response Header "Content-Encoding: gzip" present. Check browser Console and Devtools Network tab to debug.」と表示された

以下のサイトを参考にさせていただきました。

https://51n1.uk/post/web-publishing-with-unity-webgl/page1.html

Project Settings -> Player -> Publishing Settings -> Compression Format

を　「Gzip」から「Disabled」に変更

再度実行したら以下のエラーが表示されました。

「HTTP Response Header "Content-Type" configured incorrectly on the server for file Build/Build.wasm , should be "application/wasm". Startup time performance will suffer.」

「.htaccess」に以下の一行を追加

AddType application/wasm wasm

Meta Quest 内のMeta Quest BrowserでファイルをアップロードしたURLにアクセスして、「VR」のボタンを押す

ブラウザからVRのアプリが起動します

法人化しました

 今まで個人事業でアプリを作っていましたが法人化しました。

仕事内容や事業形態は変わらないけど、アプリの開発者名がPlus Inc.になったので、とりあえずここでもご報告をしておこうかと。

Apple WatchでGoogleのショッピングリストを開く

GoogleHomeから音声でショッピングリストに買い物のリストを追加してるのですが、それをApple Watdchからみたかったのですが、アプリが無いのでどうしようかと思っていたところ、ショートカットという機能を使えばなんとか開けることができました。

1.iPhone上で「ショートカット」をタップします。

こんなアイコンです↓

2.画面右上の「＋」マークをタップ

3.ショートカット名（何でもいいです。私は「ショッピングリスト」としました）を入力し「(+)アクションを追加」をタップします

4.「Web」（コンパスアイコン＋Web）をタップします。

5.「Webページを表示」を選択

6.URL内にショッピングリストのURL(https://shoppinglist.google.com/)

7.次のアクションの提案「URLを開く」

8.「完了」

試しに再生ボタンを押したら「プライバシー」でそのWebページを表示していいかどうかのダイアログが表示されますが「許可」

9.できあがった「ショートカット」の右上(…)をタップして詳細を表示

10.右上閉じるボタン（x）の左の設定ボタン(スライダーのアイコン)をタップ

11.Apple Watchに表示をオンにする

これで、AppleWatch内のショートカットからショッピングリストの内容をみることができます。

（一番最初に開いた時にGoogleのアカウントログインの画面がでるかもしれません）

…しかし、文字めちゃくちゃ小さいけどね。

Googleさん、専用アプリ作ってくださいよ…。

（買い物のリストをGoogleのkeepやiCloudのリストを使えばいいのですが、GoogleHomeの音声入力と連携させたいということで、今のところGoogleのショッピングリスト(https://shoppinglist.google.com/)を使っています。）

2021年11月現在の情報です。

2022年10月　追記

それまではGoogle Nestからの音声での入力が便利だったんだけど、Watchが便利でずーーっとつけていることが多くなったので、Watchで見れるiCloudのリマインダー（リスト）に「買い物リスト」というのをつけてWatchからSiriで入力する運用に最近変えてみました。

そっちの方が便利かな。

平野・山地・河川を使って遊ぶアプリ「あそんでまなべる 日本の地理」リリースしました

ジグソーパズル感覚で平野・山地・河川を遊んで学べることができるアプリ「あそんでまなべる 日本の地理」リリースしました。

　

うちの子もそろそろ勉強で山地山脈や河川を覚えるようになってきて、ユーザーの方々からもそういったものをあそんでまなべるシリーズで欲しいというご要望もいただき、それを受けて開発しました。

実は、アプリの構想は数年前からあり、試作などを作ったりは2年前からしていたのですが、当初作った時にはフル3Dでパズルを作り、スペックの低いスマートフォンだと重くて遊べないという問題がありました。
（以下のTweetの動画だとサクサク動いているように見えますが、そこはパソコンで動かしているので快適に動いているように見えますが、スマートフォンで動かすと全然使い物にならないレベルでした）

実は2年前に一度山地山脈、河川を当てはめる地理パズルゲームを開発していたのですが、山地の立体感を出そうと全部のピースを3Dモデルで作ったところ、動作が重くなりゲームが快適に遊べないかんじになってしまったので、開発を断念しました。 pic.twitter.com/ykgK3Uevc0

— デジタルジーン＠夫婦でアプリ開発中 (@digital_gene) March 16, 2020

そこで、１から素材を作り直し、プロジェクトを作り直して快適に動くことを優先してアプリを作ってみました。
(少し斜めから見ると立体で見えるというビジュアルは捨てがたかったけど😭)

ビギナーモードは有名な山や河川等だけ抽出したモードなのですが、エキスパートモードは初めてだとひくぐらいパズルのピースが多いぐらいのモードにしました。
しかし、そんなエキスパートモードですがプチプチ穴を埋めていくのがジグゾーパズル的に楽しいと感じてもらえるのではないかと思っています。

今後も少しづつアップデートしていって、湖沼や島でパズルを遊ぶモードなどを追加していったり、いきなり全国ではハードすぎるという人向けに地方ごとに分割したモードなども追加できたらいいなぁと思っています。

あそんでまなべるイタリア地図パズルをリリースしました。

定番のあそんでまなべるジグゾーパズルシリーズの「あそんでまなべるイタリア地図パズル」をリリースしました。

今まで作っていたシリーズの遊び方は変えずにシステムをリニューアル！
頑張ってプレイすると素敵な風景等の写真を集めることができる「アルバム」機能を追加しました。

https://digital-gene.com/app_italymappuzzle.php

iOS
http://itunes.apple.com/jp/app/id1499114258

Android
https://play.google.com/store/apps/details?id=com.digitalgene.mappuzzleit

AmazonFireタブレット
https://www.amazon.co.jp/gp/product/B084TPGMMB/ref=mas_dl

 

内部的な話ですと、今までのあそんでまなべるシリーズと違い、今回はUnityを使って作りました。
今年はあそんでまなべるシリーズをバシバシ作っていきたいなぁというのが目標です！

バランス積みゲー「ポイポイショッピング」をリリースしました

バランス良くカートに商品を積んで どれだけアイテムを購入できたか競うゲームアプリ「ポイポイショッピング」をリリースしました。

https://digital-gene.com/app_supermarket.php

iOS
https://apps.apple.com/app/id1493151508

Android
https://play.google.com/store/apps/details?id=com.digitalgene.supermarket

ぼくもできる 自動販売機、ぼくもできる 回転寿司のように物理演算を使ったごちゃごちゃした楽しさが出るゲームかと思います。
ゲームを最後までプレイするのは簡単でなのでお子様でも楽しんでもらえるかなーと思っています。（ただし、ランキングで高得点を出そうとすると高額商品＆商品のバランス等を考慮する必要があるので、なかなか難しいゲームにもなるかと思います。）

おじぎの角度が学べる「おじぎ帳」をリリースしました

今回のアプリの制作はHiiroさんです。

～制作者より
実はおじぎは何種類かに角度が区分されててそれぞれに名前や適した役割があるんですね。
（まあ何となくでも通るくらい大らかなところも良さとは思いますが。）
おじぎの角度による役割を知ると、状況に合わせておじぎを使い分ける事ができます。
加えてモヤっとしたわだかまりも無くなりスッキリで精神衛生上も良くなります(個人差有)。
社会人になってビジネスマナー的なおじぎに不安を感じたくない人にもいいかもしれないですね。

おじぎ帳では、一般的用途・ビジネス上のおじぎの役割はもちろん、 鳥居をくぐる時、お賽銭を入れる時、お願い事をする時…など、 神社のお参り角度にも対応しているので、 状況に合わせてしっかりお辞儀を使い分けできると格好いいだけでなく、 おじぎの特別な名前も知っていると一目置かれるかも…。

そんなわけで、お役立ちアプリとしてお使いいただけると本望です。
大体言われたり教えてもらってもたところですぐ忘れちゃうのが人間。
忘れても、必要な時にパッと起動して確認してください。
直前になると不安になってくる初詣の時とか！

あ、あと用例は角度によってはいくつかパターンが出る場合があります。
何度も見てると変テコなのも出てくるかもしれませんね。
今後も何か思いついたら入れるかもしれません。(…予定)

とのこと。

神社のお参りで使うおじぎの種類を調べている時にアプリを作ろうと思ったとのことです。