Swift初心者がApple Vision Proアプリ作成.その2 / オリジナルUI作成編
こんにちは。
クラウドソリューショングループのsatokです。
今回は以前紹介したジェスチャ部分の続きとして、3次元空間に表示するUIの作成が完成したので紹介します。
目次
1. 作成画面部品
今回のアプリで必要となる画面のパーツは主に以下の4種類となります。
A. HPゲージ
B. デジタル時計
C. メニュー画面
D. ブラウザ画面
今回これらは全て平面で良かったので、Dのブラウザ画面を除いてPowerPointで作成しました。
それぞれの見た目と役割について説明していきます。
A. HPゲージ
HPゲージは、Apple Vision Pro(以下AVP)本体の電池残量を表示します。
電池残量に応じて枠内の緑の部分が伸縮し、同時に「/100」の左側に電池残量(5%刻み)を表示できるようにしました。
今回は電池残量が100%、75%、50%、25%の時の画像素材を用意し、充電残量に応じて表示を切り替えています。
本当は残充電量に応じてアナログ的にHPバーの長さを変更したかったのですが、画像を貼り付けたエンティティを、その形を崩すことなく変形させるアイデアが悉く上手く行きませんでした。
この点は将来的に改善していきたいと思います。
B. デジタル時計
デジタル時計はそのまま時計です。
hh:mm:ssの形式で、1秒ごとに表示を更新しています。
今回は表示を変更する際に一瞬点滅するように見せたかったため、あえて変更時に一瞬消える方法を用いています。(次章で動作風景も載せておきます)
時計は文字そのものをエンティティとして出力しているため、立体感があり裏側からも見ることができます。
C. メニュー画面
続いてメニュー画面です。
この画面は前回の記事にてスワイプした後に表示される画面です。
各アイコンを押すことで様々なアクションが発生する予定です。
現状実装しているのはブラウザの表示のみですが、他アプリの起動やスクリーンショットの撮影など今後機能を増やしていきます。
D. ブラウザ画面
最後にブラウザ画面です。
とはいえ、これはSwiftUIで用意されているものなので自前では特に用意していません。
ブラウザを開くだけならデフォルトのブラウザアプリで開く方法もあったのですが、その方法を使うとなぜかエンティティと紐づいているアンカーの座標がおかしくなることがあったため、今回はアプリ内でブラウザ画面を別途開く処理にしました。
(恐らくvisionOS側の処理で、アプリからアプリを開く際にウィンドウの座標を触っているような感じがしましたが、真相は不明です。機会があれば別途詳細に調査しようと思います。)
2. 動作風景
最後に動作風景の動画を載せておきます。
だいぶ形になってきたと思います。
※音が出ます、ご注意ください
3. 最後に
今回はSwift初学者がAVP向けのアプリのUI部分を作成する様子をお届けしました。
本当は3DのオブジェクトをBlender等でしっかりと作成したかったのですが、時間の関係で今回は無理やり画像で処理しました。
今後はさらに機能を増やし、いずれは様々なXRアプリの玄関口となるようなアプリにしたいと思っています。
またどこかでお会いしましょう。
