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さんです。

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

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

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

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

とのこと。

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

展開図と立体の関係を理解するためのアプリ「展開図アシスト」を公開しました

しばらく教育アプリに注力しようと考え、ゲームではなく教育の補助アプリとして「展開図アシスト」というアプリを作りました。

http://digital-gene.com/app_geometrynets.php

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

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

小学校受験等である

★の絵の向かい側にくる面はどれか？

とか、

中学受験問題とかでよくある

立方体になったときAの点とくっつく点はどこか

この展開図を組み立てたときにありえない立体はどれか

正しいサイコロの目になる展開図はどれか？

等の問題に対して、展開図の状態から少しづつ立体になっていく様子を確認できるので、頭の中で立体を組み立てるのが苦手な子もビジュアルでわかりやすく、理解しやすくなるかなーと考えて作りました。

現在のところ立方体にしか対応していませんが、余力があれば将来的には三角錐等の他の立体にも対応したり、追加で面に線を入れる機能等が入れることができたらいいなぁと考えています。

さしあたっては作った展開図を保存できて、塾等で先生が生徒たちに解説時等に使えるような機能等をつけていきたいと思っています。

Digital GeneのFacebookのページは閉じました

Facebookのページを公開していたのですが、管理に手がまわらないので、Facebookのページを閉じました。お知らせなどは今までどおり主にTwitterやWebサイトにてお知らせしようかと考えております。

テンポよく遊べるパズルゲーム「カイトウキューブ」をリリースしました

今回のアプリ、作ったのはスノープラネット、ありえんシリーズを作っていたHiiroさんです。
スノープラネット、ありえんシリーズは企画と画像制作を行って、プログラムはShinが作っていたのですが、今回のカイトウキューブはHiiroさんほぼ一人で作られました。

テンポよく遊べるところにこだわったそうです。

通常モードのデザインもかっこいいですが、禅モードのデザインもかっこよくて好きです。

登録不要の家系図作成アプリ「すいすい家系図」をリリースしました

息子に親戚との関係を説明するために、家系図アプリ等があったらいいなーと思い、色々探したのですがユーザー登録を最初にしないといけないアプリが多く、それならば！と思い立ち、登録不要＆簡単操作で家系図が作れるアプリ「すいすい家系図」を作りました。

http://digital-gene.com/app_familytree.php

当初は私Yokoが作っていたのですが、私の祖父と祖母のそれぞれの兄弟が結婚していて（祖父の兄と祖母の姉が結婚）母方の大叔母と父方の伯従父が結婚していたりと紙で表すとややこしいかんじで、ワンタップで父方家系・母方家系を切り替える機能などをつけたところ、無限ループに陥りお手上げ状態になったので頼れる相方Shinに後の機能はお任せしました。（丸投げともいう）

年内に完成できたので、これで親戚の集まるお正月等に関係図等を見せたり、先祖の情報などをインプットできて大きな家系図ができたらいいなぁと考えています。

子供の生年月日を入力しておくと、表示される年齢は自動で計算されるので、数年後に
「あー、いとこの○○ちゃんはもうこんなに大きくなったのかー」「おばあちゃんは今年米寿なんだね」などと感じることができたりするようになるかなぁとも想像しています。

今後写真追加できるようにしたり、ファイルを出力＆入力できるようにして他の人と情報共有できたりするような機能を追加できればいいなぁと考えています。

どれだけ電話をかけても大丈夫「ぼくもできる どうぶつでんわ」をリリースしました

好きなだけ電話をかける体験ができる知育アプリ「ぼくもできる どうぶつでんわ」をリリースしました。

http://digital-gene.com/app_animalphone.php

このアプリを作ったきっかけは、娘が私のスマホを触っている時に、うっかり目を離すと電話帳から義父に無言電話をかけていて、焦ったのがきっかけです。
（こういう経験した子育て中の人って他にもいそうかと思いまして、需要があるかなぁと。）

娘が好きな動物が、何かを話しているようなかんじの電話ができるアプリを作ってみました。

うにゃうにゃ声は私の声です。録音してエフェクトかけて、人間離れした声にしました。
企画、3Dモデル制作、アニメーション作成、イラスト制作、プログラムと一人で作ってきましたがついに声優デビューだよ！（笑）

娘にはアプリが概ね好評で、話している吹き出し見ながら「でんちゃ（電車）だねー」「いちご」とか動物が何を話しているかを私に伝えてくれます。

ファンタジーの世界でのお店体験アプリ「アイテムショップ」リリースしました

ファンタジーの雰囲気の中でアイテムを売ったり合成したりして新しいアイテムを作るアプリ「アイテムショップ」をリリースしました。

前回の更新からかなり間があいてしまいましたが、その間アプリとしては「ぼくもできるエレベーター」「ぼくもできる回転寿司🍣」という子供向けアプリや、「ありえんごーほーむ」「ありえん蚊プチャー」というありえんシリーズのゲームアプリや、HoloLensのアプリとして「Vending Machine」「Catch people」をリリースしていました。

今回リリースしたアプリ「アイテムショップ」は、前々から作りたいなー作りたいなーと思っていたのですが、色々と先延ばしになりなかなか着手できなかったのですが、ようやく制作することができたアプリです。😄

私、こういうちまちまアイテム合成して売るっていう類のゲームが好きなんです。
新しいアイテム見つけた時の嬉しさとか、少しづつ増えていくアイテム一覧とか。始まりは子供の時にやったマリーのアトリエが最初のきっかけかなぁ。
なので、最近リリースしていた子供向けアプリ等は自分の子供が喜ぶかなーという観点で作っていましたが、今回のこのアプリは完全に自分のために作ったというかんじですね。

ファンタジーの世界っていうのも好きだったので、
背景はUnityのAssetストアで購入した「Top-Down Interiors」を使わせていただきました。このパッケージは暖炉や松明の炎も置くだけでパーティクルやライティングもセットされているので簡単に雰囲気が出るし、ポリゴン数少ない割にテクスチャの書き込みが細かいので、モバイルに向いているしということで、とても良かったです。

キャラクターもアセットストアで購入できれば良かったのですが、思っているようなセット等がなかったので、人物達については自分で３Dモデルやテクスチャを作成しました。

制作期間は他のアプリに比べて少し時間がかかったのですが、出した後にも色々バグが見つかり、慌ててアップデートしたりしていますが💧、プレイしてくれた人たちからも色々レビューをいただいて、応援していただいているのが嬉しいので、少しづつアップデートしてさらに楽しめるアプリにしていけたらなぁと思っています。

Unity Pro 安くなりましたね + 子供生まれました

先日より、UnityProが値下がりしましたね。
月額27,000だったのが、新しいUnityProに切り替えたら請求が12,581円になっていました。

今までなかったUnityPlusというプランも新しくできたようなのですが、
Proの契約を始めたのが去年の１２月だったので、今年の１２月までUnityProの契約を続けないと行けないというところがあったので、もうそれだったら、新しいProで契約しようかという話になりました。

噂のポケモンGoもUnityで作られているそうですし、ここでこれだけ値下がりしたら、さらにUnity使って開発する人が増えそうですね。
DigitalGeneとしても、もう少しUnityで開発したアプリをリリースしたいと思っています。

----------

話は変わりますが、

更新がしばらく止まっていましたが、先日３人目が産まれました。

現在生後１ヶ月。元気に成長してくれています。

"月と地球と太陽と"をリリースしました

Unityアプリとしての第４段、「月と地球と太陽と」です。
今回はゲームや幼児向けアプリではなく、教育の補助的なアプリとして作成しました。
初期バージョンは機能が少ないですが、余力があれば「この月の時には太陽がどの位置にある？」等の問題を答える、さらに勉強に役立つような機能をつけていけたらと考えています。

とりあえず、Unityを触りだして、３Dで作ってみたいと考えていたアプリを複数作ってみました。
また、何かアプリアイデアが思いついたら作っていきたいなぁと思います。

ぼくもできる バスボタン リリースしました

本日、Unityアプリ第三弾、「ぼくもできる バスボタン」リリースしました。
Appleストアは審査が通れば、数日中にリリースされると思います。
（クリスマス休暇にぶち当たったら、まだしばらく先になるのかなぁ・・・）

「バスのボタンを押すだけ」
という単純なアプリですが「ぼくもできる 自動販売機」が次男にも、ユーザーにも意外に好評なので、同じように、次男が押したがるバスのボタンが好きなだけ押せるというアプリを作りました。

しかし、自動販売機に比べて、バスに乗る子って結構少なかったりするのかな・・・。

初Unityでアプリ作ってみました。

今まで、ゲームアプリは色々作ってきましたが、全てXcode上でプログラムを組んで・・・という形で作ってきましたが、初めてUnityに手を出してみました。

■Look for people

にぎやかな街の中から 指定された人物を見つけるという、有名な「ウォー●ーを探せ」的なゲームです。






















モデルは、アセットストアの
SinplePeopleシリーズを使わせていただきました。
https://www.assetstore.unity3d.com/jp/#!/content/15126

こういう、アセットストアのアイテムが使えるのがUnityの良さだなぁと思います。




■ぼくもできる 自動販売機

自動販売機にお金を入れてジュースを買うというだけのアプリ。
うちの次男に大人気。



最近、自動販売機を触りたがる次男（2歳半）のために作りました。
読み通り、次男にはオオウケです。


Unity、解ってはいたことですが、実際作ってみると、開発速度がめちゃくちゃ早い！
いろんなオブジェクトの位置調整とか、物理演算の処理とか、今までのやり方でできなくは無いけど、完成までの速度が桁違いに速くなる感がありました。

問題点は・・・出来上がった実行ファイルの容量がめちゃくちゃ大きいことですかね。

世界地図パズル・国旗クイズのグルジアをジョージアに変更しました。

先日の4月22日に今まで日本語表記「グルジア」だったGeorgiaが「ジョージア」に変更されました。
http://www.mofa.go.jp/mofaj/press/release/press4_002048.html

それに伴い、あそんでまなべる世界地図パズルと国旗クイズの日本語設定時のグルジアをジョージアに変更しました。

アメリカのジョージアとかぶるからややこしいという話がありますが、
それを言い出すと、別の国だけれど名前が似ているアフリカのコンゴ民主共和国とコンゴ共和国、カリブ海のドミニカ共和国とドミニカ国等、もっとややこしいところはあると思うので、住んでいる人が呼んでほしいって呼称で呼ぶのが一番いいのじゃないかなぁと思います。

あそんでまなべる日本の国立公園をリリースしました

あそんでまなべるシリーズの新作、「日本の国立公園」を先日リリースしました。

作ったきっかけは、環境省の方から日本の国立公園をPRするアプリを作って欲しいという問い合わせがあって、こちらがメインで、環境省の人が協力という形であればということで作りました。
（もともと、国立公園などを覚えるアプリも作りたいなぁと考えていたので。世界遺産を覚えるアプリ等も考えてはいますが、世界遺産は数が半端ないのと、毎年増えたりするので情報の管理が大変だなぁという点で躊躇しています。）

デザインについては、
国旗クイズでアイコンをデザインしてくれた丹羽優介くんにお願いしてみました。

アプリのデザイン全部を人にお願いするというのは初めてで、
自分一人でプログラムとデザインをやっていると、プログラムに都合の良いデザインを作るので製作時間は早くなるのですが、いつもワンパターンで面白みのないデザインになりがちだったのですが、デザイナーが作ったものをプログラムで実現するというのは、作りやすいように作るものより、色々と面白いかんじになるなぁと体感しました。

iPadのRetinaディスプレイに対応しないとAppleの審査が通らなくなったっぽい

先日、「あそんでまなべる たし算パズル」のチャレンジモードを追加したバージョンを公開したのですが、実はこれ去年の12月上旬にはAppleに申請をだしていたのです。

しかし、Appleの審査が通らなかったり、Appleがクリスマス休暇に入ったりして、ようやくリリースできたのが1月中旬でした。

審査に落ちていた理由が、「iPadはiPad専用の表示にしてくれ」みたいなことを書かれていて、いやいや、iPhoneとiPadが同じレイアウトのアプリなんて、大量にあるでしょ・・・と思っていたのですが、よくよく聞いてみると、どうやらiPadのRetinaディスプレイに対応しないといけないってことらしく。
なので、Retinaディスプレイに対応したバージョンを作ってようやく審査に通りました。

今後、他のアプリもRetinaディスプレイに対応していかないといけないのかぁ・・・。