トマシープが学ぶ

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

UI

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…

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とか種類とか出方をまとめる。 spatial miro Slack zoom Hubs VRChat Cluster 作るには 最後に spatial VRだと実際に拍手したり、ブラウザCを押すと手からハートのパーティクル+音が…

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…

角丸のQuadを作りたい【Unity】

VRをやっているとuGUIではなくQuadを空中に浮くパネルとして使いたいことがあると思うんですけど、そのときのQuadを角丸にしたい。 ・Blenderとかで角丸のメッシュを作る ・テクスチャを角丸にする ・Mask機能? が考えられるかな MaskはUIだけか Blenderで…

UI/UXの本3冊読んだ【なるほどデザイン】【UIの教科書】【つい】

なるほどデザイン はじめてのUIデザイン UIのコンポーネント種類 UIの見えない部分 スマホアプリ(iosとアンドロイド) キャンセル Web レスポンシブデザイン UIを作る 命名 検証 ロゴ つい 三つの体験デザイン 直感のデザイン 驚きのデザイン 物語のデザイ…

InputFieldをクリックした時、数字キーボードを出したい【Unity】

数字から始まってローマー字も含まれる文字列を入力するInputFieldがあるとする。 iPadでそのInputFieldをクリックしたときに、数字キーボードを最初に表示するように設定したい。 ContentType Custom>KeyboardType その他 最後に ContentType docs.unity3d…

UnityでのLoadingUI【インジケーター】

インジケーター、スピナー アイコン アセットストア Google Material Design Loading screen animation uGUIで作る 実装参考 進捗率を取る インジケーター、スピナー 何かをロードしている時や、処理中の時に出るあれ 種類によって名前が分かれている。 イン…

XDで作った素材をUnityのuGUIで指定の位置で配置するには・・・?

位置 おまけ:canvasの描画順 位置 XDのコンポーネントのX,Yはコンポーネントの左上&アートボードの左上との距離。 UnityのuGUIのPosX,PosYはデフォルトだと素材の真ん中&Canvasの左上の距離 まずそこが違う。 Unityで素材の原点(Pivot)を変えるにはUnity…

SourceImageにセットした画像を縦横比を保ったまま左詰めで配置する【Unity】

SourceImageにセットした画像を、元の画像サイズのまま、左詰めで配置したい。 何も設定しないと、Imageコンポーネントを付けたRectTransformの大きさにSourceImageが変更されてしまう。 SorceImageが固定なら、SourceImageの大きさに合わせたらいいけど、So…

【XDプラグイン】コントラスト比と色覚異常の見え方をチェックする【Stark】

「作ったデザインをモノクロ表示にしたら、コントラストのある良いデザインかがわかる」という記事を見た。 CTAのバランスや色、位置が適切かどうかをテストするためのよい方法は、できあがったデザインを一旦グレースケールにしてみることです。その状態で…