トマシープが学ぶ

Unity/VR/AR/デザイン好きのミーハー 記事内容は自分用のメモです

UI

MapUI

UI

マップでのピンの表現 まとまるタイプ 重なりっぱなし まとまるタイプ 重ならないように近くにあるものはまとまって数字がつくタイプ PayPay 重なりっぱなし 大きさに差がある。下にバナー 下にバナー。店の種類によってアイコンが違う たべろぐ 下にバナー …

画像を設定していないときに表示されるデフォルトの画像集

UI

画像を設定していないときに表示されるデフォルトの画像はどんなものがあるか調査! CHARGE SPOT。薄いグレー+ロゴ NewsDigest 都会の画像+グラデーション+ロゴ 過去の胃炎と画像詰め合わせ+薄い青+ロゴ はてなブログ。グレーの菱形模様+ロゴ Peatix …

マルチ解像度で2つ並んだテキストをいい感じに表示したい【uGUI】

パターン① パターン2 パターン① 赤と黒みたいに、横に並んだテキストUIがあるとする これをマルチ解像度(特に細長いスマホ)でもテキストが切れないようにいい感じに表示したい。 stretch-mediumにしたら こんな感じになる;; LayoutGroupを使ってこういう…

CEDEC2022セッションメモ52

去年 bibinbaleo.hatenablog.com 他社記事など ファミ通 www.famitsu.com 4Gamer www.4gamer.net Game Watch game.watch.impress.co.jp CEDECのチャンネルに動画ある。タイムテーブルの右端のセッションかな? www.youtube.com Unityの講演もYoutubeにある w…

XDとUnityで透明度が違うときの変換

XDとUnityで透明度が違う 理由 TransparencyConverter 白黒の時の一覧表 画像書き出しの場合 XDとUnityで透明度が違う XDで作ったデザインをUnityに反映する作業をしているのだが、XDで設定されていた透明度をUnityのImageに適用したら全然見た目が違った! …

スマホ縦でのジョイスティックの位置と右手左手どっちで持つか問題

昔も少し調べたけど、スマホで移動する時に使うこの丸いやつのデザインというか位置 bibinbaleo.hatenablog.com 縦画面ジョイスティック 刃牙VR(Door共通っぽい) 左下 メタパ 左下 zepeto 左下 Rev World 右下。矢印付き ちなみにClusterは横だけど左下。横…

無限スクロール城【Unity】

無限というかループというか要素が輪っかのようになっているスクロールを作りたいqiita.com github.com FancyScrollView こちらを使ってみる github.com manifest.jsonに書いた後、PackageManagerからDemoをインストールした "dependencies": { "jp.setchi.f…

アバター選択画面UI

Metapa アプリを起動した後、名前を決めた後、アバター選択。その後ワールド選択 設定から変更する時 Cluster。ワールドに入る前に選択画面が出る。ワールド毎に別のアバターを選べる 伊勢丹VR。設定からアバター zepeto。アプリで一つ? rec room。部屋の鏡…

UIデザインクイズ

UI

こちらのツイートで紹介されてたゲームやってみた ゲームでデザインを学べる無料サイトまとめ pic.twitter.com/j1NfnRsniB — デザイン研究所 (デザ研) (@designkenkyujo) 2022年3月13日 UI間違い探し 色当て サイズ当て カーニング UI間違い探し cantunsee.s…

6桁のコードで入室UI

VR UI

プライベートなルームに6桁のコードで入室するUIはよくある。まとめる。 バーチャルTGC bigscreen BratSaber rec room Zepeto Hatjitsu Slido 最後に バーチャルTGC 参加 会場に入る前の画面で友達を探す IDを入れる 見つからなかったとき グループ作成 bigs…

ロビーやイベント選択画面

UI

bigscreen ホームにメニュー画面があってそこからロビーに行く ロビーにはみんないるし、そこから2個ぐらいの部屋に行けた Cluster Clusterもワールド&イベント選択はUI。トップにロビーへのボタンがある。 ロビーも存在する 人気のワールドに行ける ちなみ…

バーチャル空間内でのパネル

なぜ人は空間にパネルを置くのか 企業のバーチャル展示会は大体パネルを置いている。 改めて調査 XRKaigiの時のめちゃバース。 ZEPETO パネルっていうかランキングだけど サーティーワンのCMが流れていたパネル。ふちがあって光ってる Award会場の大きなスク…

【Unity】XD⇨UnityへのUI反映のための手探りフローメモ

この記事は以下のアドベントカレンダー2の記事です。 qiita.com 「エンジニアリングに興味があるデザイナーやデザインに興味があるエンジニアが知見や想いを書き綴っていくカレンダーです」とのことだったのですが、デザインとエンジニアリングに両方関係し…

画像付きSNSシェアUI

アプリ内の様子を画像付きでSNSでシェアできるものまとめ Alto's Odyssey: The Lost City Cluster ユージェネ 伊勢丹VR Virtual Fighter なかったもの Alto's Odyssey: The Lost City ゲーム 設定>フォトモードで撮影 ZENモードというゲーム性が少ないモー…

読み込み中のUIプレースホルダー【スケルトンスクリーン】

コンテンツを読み込み中の時、真っ白な画面を出すのではなくコンテンツがまだ提供されていないことを示すために、プレースホルダを出すと良いってAppleのガイドラインに書いているらしい。 追記 スケルトンスクリーンという呼び方があるらしい qiita.com こ…

Rect2DMaskのソフトシャドウ【uGUI】

ソフトマスクを調べてた時にちょうどこちらの記事が出てきた shibuya24.info RectMask2Dだとソフトにできるらしい。 これでスクロールビューの下の部分をボヤーっと出来たらいい感じになりそう!と思って試した。 結果的にImageとかtextはできたけど、TextMe…

uGUIのボタンにソフトシャドウを付けたい

uGUIの機能で付けられるShadowはくっきりしている。 もやもやっとしたのを付けたい 方法1:影画像を背景に置く 方法2:ボタン画像に初めから影を付けておく 方法2:アセット 最後に 方法1:影画像を背景に置く もやもやとした画像をXDとかで作って、ボタ…

UnityのuGUIで逆マスクとモワモワMask

UnMask もわもわMask UnMask 大きい画像の中の一部を切り抜く逆マスクは既存のuGUIのマスク機能じゃできないらしい。 以下のアセットを使えば逆マスクができる github.com kan-kikuchi.hatenablog.com OpenUPMでもPackagManagerのgitでも入れられる。ちゃん…

iOSのスクロールーバーのデザインとuGUI

iOSのスクロールバーのデザイン Appleが配布しているXDのガイドライン?みたいなのには載ってなかった safariだとこんな感じ。 半透明で、背景の色の明度?によって白と黒と変わるっぽい。どうやって判定してるんだろう? 設定アプリでも表示される uGUI uGU…

外部サイトへのジャンプ注意UI

最近、別のサイトにジャンプする時に注意のダイアログが一旦入ることが多い。 邪魔だよね〜 まとめてみる GoogleMap Discord ? 最後に GoogleMap GoogleMapのブラウザでお店のURLを押したら、別タブで確認のページが表示されるようになった 特におしゃれさ…

使い方画像

zepeto バーチャルTGC DOOR 空間の中に説明オブジェクトを置くスタイルすごくいい。 Clusterの原宿ワールド イヤホン必須になってた チュートリアルワールドの画像も変わってた docomoのアプリはチュートリアルがあった 背景が難しいんだよね~無地の背景に…

メニュー・設定画面UI

ウマ娘 Widar tiktok radiko Nitendo Online Amazon Lightroom Navitime Yahoo乗換案内 Googleフォト Rev World バーチャルTGC Inspix World zepeto Mozila Hub Cluster Neoket VRchat VirtualCast ウマ娘 右上のメニューから オプション Widar tiktok プロ…

テキストのURL部分をクリックできるようになるuGUI-Hypertext使ってみた【Unity】

uGUI-Hypertext Unityでテキストの選択 uGUI-Hypertext UnityのテキストがURLだった時にクリックできるようになるもの。(ブラウザで開く挙動は入ってない) github.com ここからunitypackageダウンロード Releases · setchi/uGUI-Hypertext · GitHub こちら…

LayoutElementsの子の中でサイズ変えるときはContentSizeFitterではなくLayoutGroup

テキストチャットみたいなリストを作った bibinbaleo.hatenablog.com そのリストに入るチャットの中メッセージ量によって、そのチャットオブジェクトのサイズを変えようとContentSizeFitterを使ったら怒られた LayoutGroupのControlChildSize LayoutGroupのC…

iPhoneのセーフエリアに対応する

リジェクトされる? Unityで確認 対応 全画面 参考 リジェクトされる? iPhoneXシリーズからホームボタンがなくなった&上にノッチができた。 画面内のホームバーと、ノッチのへこんでいない部分にはUIを置いたらダメなんだって;; セーフエリアと呼ばれる…

ネットワークエラーのUI

WiFi切れた時に出るエラーのUXライティング探し〜 事例 参考 MaterialDesign 事例 GoogleMap。こんなの初めて見た。Googleってこんなテイストだったっけ? ピクミンブルーム zepeto バーチャルTGC かわいい Steam ウマ娘「通信中にエラーが発生しました」 (…

しゃべってるよ表現UI

ゲームとかVRSNSとかでしゃべってるときに、誰がしゃべっているのかをどう表現しているのか。 VRchat Neoket RecRoom AltspaceVR Cluster その他 VRchat ネームプレートの枠が青く光る why I stopped uploading vrchat fullbody.. - YouTube より引用 おしゃ…

退出ボタンUIまとめ

退出のUI MozilaHubは右下 Clusuterは右上 NEOKETは左上。変わったアイコンだ。 文字でExitって書いている奴もある。Altspaceは左下の赤いボタン FallGuys 設定画面にある。 方向 ちゃんと画面端の方向を矢印が示している。 左上に右矢印の退出アイコンを使…

Modern UI Packよかった【Unity】

Modern UI Pack 一覧 使い方 注意点 TextMeshPro 黒背景用 一気に色などを変える 個別に変える スクリプトから反映 ProgressBar DropDown Modern UI Pack かっこいいUIパーツが入ったパック 定価20ドルだけど、なぜか90%オフで2ドルで買えた。 購入後に見て…

トップページ+利用規約同意+ロード画面まとめ

PC スマホゲーム PC NEOKET 同じ会社のスマホ版 利用規約 Cluster アバター選択を閉じたらこんな感じ。意外と質素 VirtualCast Steamでアップデートするときにも利用規約出た。 Altspace 利用規約 ローディング Steamでインストールするときにも出るよね Fal…