トマシープが学ぶ

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

UI

設定画面UI

Cluster Neoket VRchat InspixWorld VirtualCast Cluster ClusterのUIまた変わってた 左上のハンバーガーメニュー 左にメニューが出る>設定 画面中央にUI出る ClusterスマホUI_Event - YouTube ClusterスマホUI_World - YouTube Neoket 右下の大きなハンバ…

テキストの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 事例 ウマ娘「通信中にエラーが発生しました」 (今まで5回ぐらい出たけどリトライ押したら何事もなかったかのように進む) Slack Chrome「インターネットに接続されていません」 …

しゃべってるよ表現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 NEOKET 同じ会社のスマホ版 利用規約 Cluster アバター選択を閉じたらこんな感じ。意外と質素 VirtualCast Steamでアップデートするときにも利用規約出た。 Altspace 利用規約 ローディング Steamでインストールするときにも出るよね FallGuys START文字…

Unityの自動スクロール

ScrollViewの下にコンテンツがたまっていったときに、一番下にスクロールして最新のコンテンツが見えるようにしてほしい。LINEみたいな感じ Scrollbar scrollRect.verticalNormalizedPosition コルーチン使う Scrollbar 観察してたらScrollbarのValueの0~1で…

コメント・チャット入力UI

Slack zoom Teams GoogleMeet Cluster Hubs アイコン Slack 入力したら右下のSendマークがアクティブになる Slack通話だとこんな感じ zoom Enterを押したら入力される Teams GoogleMeet Sendマークがある 入力したらSendマークがアクティブになる ちなみにチ…

スマホでの3D移動UI

スマホゲームでの3Dキャラの移動方法 左下の丸を動かす方式 荒野行動/PBGMobile Cluster ピンチ その他 Unityアセット StandardAsset Ultimate Joystick Joystick Pack 最後に 左下の丸を動かす方式 画像検索したらだいたいこの方式 www.google.com 荒野行動…

VRやテレビ会議でのリアクション機能まとめ

zoomなどのテレビ会議ほか、ClusterやVRchatなどにもあるエモーションのUIとか種類とか出方をまとめる。 Slack zoom Hubs VRChat Cluster 作るには 最後に Slack 端のキーボードマークからテキストも打てる。 どんなふうに表示されたっけ・・・左下に表示さ…

DoozyUI使ってみる【Unity】

DoozyUI 参考 インストール サンプル スライド見ながら作る データベース UI作成&設定 UICanvas UIView アニメーション設定 UIButton Sound ノード管理 GraphControllerをシーンに置く 完成 画面タップでUI出す UIDrawer UIPopup (おまけ)UnityのUIBuilde…

Web通話システムのUIスクショまとめ

音量ゲージのUIは以前まとめた bibinbaleo.hatenablog.com zoom FaceTime GoogleMeet Slack Hubs Cluster discord zoom 左端にマイク・カメラミュート切り替え。右端に退出 参加者一覧 FaceTime GoogleMeet 下にマイク、通話終了、カメラ。右上に参加者 ちな…

独身セールで70%オフでアセット買った【RayFire for Unity・DoozyUI 】

今日の夜中1時までの独身セール。 assetstore.unity.com 対象商品をカートに入れて割引コードを入れる方式。 SINGLESDAY70OFF コードを入れたら元々持っているバウチャーは支払いに使えないみたいで、クレカで買った。 3つアセット買ったので紹介だけする(…

360度動画ビューワーアプリのUIまとめ

Youtube 360channel VRSQUARE ハコスコ Blinky XRStadium 最後に Youtube www.youtube.com いつものUI+左上にクリックでビュー操作できるものがある。 https://www.youtube.com/watch?v=R4NBnu1-wcA&feature=emb_titleより アプリだとVRモードにするボタン…

Unityパフォーマンス改善

VRのUnityプロジェクトが激重になったので、どうにかしたい。 プロファイラは見た。 bibinbaleo.hatenablog.com 次はパフォーマンス改善。最適化ともいうのかな? いろいろツールやアプローチ方法はありそう。 初心者なので間違ってるところも多いと思います…

VR空間内のエラー表示UIまとめ

UI VR

そういえばVR内でのエラー表示見たことないなと思っていくつかのVRソフトでWifiを切って試してみた。 Cluster VRChat VirtualCast RecRoom 最後に Cluster Wifiを切って1分後ぐらいにUIが出てきた キャンセルを押すとVR内の描画は止まってガビガビになる。 …

CEDEC2020の聞いたセッションメモ50

タイムシフトで見たり記事読んだセッションメモ。 記事になっているものは記事を貼ったので、CEDECのパスを買っていない人にも参考になると思う。 くくりは私の雑な括りです。 CEDiLで発表スライドのpdfはみれます cedil.cesa.or.jp 各社のCEDEC2020記事リン…

最前面に表示するUnlitシェーダー&WorldSpaceのCanvasを最前面に表示する

最前面に表示するUnlitシェーダー WorldSpaceのCanvasを最前面に表示する 最前面に表示するUnlitシェーダー VRのUI的なものにUnlit/Textureを適用したQuadを使うことはよくあると思いますが、これを常に最前面に表示したい。オブジェクトに隠れて見えなくな…

UIパフォーマンスのお勉強

そろそろ気にしたほうがいいお年頃ですかね・・・ 今までまったく気にしてなかったけど、UnityのUIをメインに仕事で触る身としてはそろそろ気にしたほうが良さそう (間違っている箇所あると思います) 参考 Profiler-UIについて バッチングの途切れ バッチ…

Unityデザイナーズバイブルを読んだメモ①【エディタ/uGUI】

こちらの本をやっていく www.borndigital.co.jp Unity2019.4.5f1使用 エディタ PackageManager オブジェクト操作 UI操作(RectTransform) おまけ)UIScaling レイアウト uGUI 9スライス FillCenter 画像サイズ AspectRatioFitter Outline2重付け グラデーシ…

音量ゲージ・音量調整バーのUIスクショまとめ

音量ゲージにも何種類あって、 ・自分のマイクの音量を示すもの ・相手の出力音量を示すもの ・出力音量を変更するスライダー など それぞれの種類を見ていきたい。 自分のマイク音量 相手の出力音量 出力音量を変更するスライダー 最後に 自分のマイク音量 …

【Unity】ボタンにホバーした時のテキスト表示をスクリプトなしで実装する【EventTrigger】

よくVRのUIで、ボタンアイコンにレーザーを当てたらそのボタンの説明が出てくるUIあるじゃないですか。 あれを簡単に実装したい。 できた EventTriggerを使う とっても簡単で、ButtonにEventTriggerコンポーネントを付けて、PointEnterとPointExitに表示非表…

アプリやソフトのライセンス・権利表記場所スクショまとめ

権利表記が必要な素材やソースコードを使ってアプリやソフトを作った場合、どこかに権利表記をしないといけない どこにすればいいのか。参考記事とかググりつつも、結局実例で調べるのが一番参考になりそうなので色々なアプリのスクショをとっていく 表記方…

白ニューモフィズムデザインのアプリをUnityで作った【制作編】

前回構想したので、作ります。 bibinbaleo.hatenablog.com ストップウォッチ事例 素材とか パーツ制作 音 フォント ThirdParty表記 アプリアイコン Unity コード DeviceSimulator UIとか MacBuild Github 最後に ストップウォッチ事例 必要な要素はとか表示…

タブ切り替えをuGUIのToggleで作る【Unity】

uGUIのToggleだけでタブ切り替えを作れるらしい!コード書かなくてもできるんだ! fantom1x.blog130.fc2.com できた 環境:Unity2019.3 構成 TabBackGround 空のGameObject Toggle 見た目の調整 パネル Toggleのイベント 完成! 最後に 構成 TabBackGround …

タブバーのデザインまとめ【アプリ事例】

下のボタンを押したら画面が切り替わる。 随時追加する。 VR ambr ios AppStore(iPad) GooglePlayStore Googleフォト Twitter Instagram デンソーのQRコード Yahoo乗り換え 時計(Android公式?) Lips ユニクロ GU Honeys 東京流通センター ABCマート ノジ…

【VRTK】起動したカメラの下にUIを移動する【Unity】

カメラの子オブジェクトにUIを入れたい。(というか頭にUI追従してくれたらいい) VRTKはVRSimulator、Oculus、SteamVRとかいろいろなカメラがある。 起動したもののカメラの下にUIを入れるにはどうしたらいいのか。 mainCamera取得 これでできた GameObject…