広告

この広告は30日以上更新がないブログに表示されております。
新規記事の投稿を行うことで、非表示にすることが可能です。
posted by fanblog

2021年10月05日

【Unity】スクリプトを使わず、簡単に3D/2Dで画面比率(アスペクト比)を固定したい(レスポンシブUIの応用)

はじめに

久々の更新です!
いえい!

というわけで。


「画面比率を固定したい!」


そんな時があると思います。

2D、3D関わらず。


そしてインターネットを泳いでいたのですが、
自分の知っている比率固定を紹介している方が全然いなかったのでここで紹介しておきます。

皆がみんなスクリプトで固定しようとしているんですが、
何か意味があるんでしょうか……?

今回の方法はノーコーディングですよ!

↓これが今回の完成図です。
画面比率固定_最終動作テスト.gif
いい感じに視界もUIも比率固定できていますね



では早速始めていきます!



解像度決めとシーンのセットアップ


まずはターゲットとなる画面解像度を決めます。

今回は横1920、高さ1080のFHDでいきたいと思います。

そしたらシーンのセットアップ。

画面比率固定_シーンのセットアップ.PNG



右クリック > UI > Canvas から Canvasを作成。


画面比率固定_Canvasの作成.PNG


これで準備完了です。


画面比率固定_Canvasのセットアップ完了.PNG


Canvas Scalerの設定


  • 「UI Scale Mode」を「Scale With Screen Size」に変更
  • 「Reference Resolusion」をターゲット解像度に変更(ここでは1920x1080)
  • 「Screen Match Mode」を「Expand」に変更


画面比率固定_CanvasScalerの設定.PNG
変更後


実際に固定


Canvasの子に空のオブジェクトを作成して、WidthとHeightにそれぞれターゲット解像度を入力します。
オブジェクトの名前は何でもいいですが、ここでは「Aspect Controller」としておきます。

画面比率固定_固定.PNG
子オブジェクト作ってWidthとHeightを指定


あとは「Aspect Controller」の子オブジェクトにUIを追加していくだけです!

画面比率固定_動作テスト.gif


範囲外を黒背景にする


これは簡単です。

Imageを作成して、Aspect Controllerの後ろに目一杯引き延ばして配置します。

確実にAspect Controllerの後ろ(ヒエラルキーでいえば上)にくるようにしてください。

画面比率固定_黒背景.PNG
背景が黒くなった


なんなら好きな色に変更できますね!

カメラの視界を表示する


お次はカメラの視界を表示していきます。

どこでもいいのでAssetsフォルダ内にRender Textureを作成してください。
名前は何でもいいです。
ここでは「Main Render Texture」にしておきます。

画面比率固定_RT作成.PNG
RenderTexture を作成


RenderTextureのSizeに解像度を入力します。

画面比率固定_RTサイズ設定.PNG
解像度を入力


AspectControllerの子にRawImageを作成し、目一杯に引き延ばす or Width/Heightに解像度を入力します。
今回は後者で。

画面比率固定_AspectControllerの子にRawImageを作成.PNG
RawImage作成


画面比率固定_RawImage設定.PNG
RawImageのWidth/Heightに解像度を入力


RawImageの「Texture」、カメラの「TargetTexture」に
それぞれ作成したRenderTextureを割り当てます。

画面比率固定_RawImageにRTセット.PNG
RawImageの「Texture」にRenderTextureを割り当てる


画面比率固定_MainCameraにRTセット.PNG
カメラの「TargetTexture」にRenderTextureを割り当てる


警告の非表示


画面比率固定_カメラなし警告.PNG
なんか警告出てる



このままだと、カメラのレンダリング結果をそのままRenderTextureに出力しているので、

「画面を表示してるカメラがないよ!」

と警告されています。

特に支障はないので、Gameタブを右クリックして
「Warn if No Cameras Rendering」の項目のチェックを外し
ます。

画面比率固定_カメラなし警告解除.PNG
チェックを外して警告を消す


完成


ぐにぐに動かしても比率の変わらないカメラ視界・UIの完成です!

画面比率固定_最終動作テスト.gif


問題点


カメラのレンダリング結果を画像に出力&表示しているので、
タップやクリックの座標がズレます

ScreenPointToRay()なんかが使えません!

……ので、スクリプトで補正することをお勧めします。

補正に関しては以下のリンクを参考にしてください。


【Unity】低解像度に設定したRenderTextureを使いつつ、クリックした位置にキャラクターを動かす - テラシュールブログ





2021年01月11日

【unity】複数の値でゲージ(メーター)を作る

今回は、複数の値を保持するゲージ(メーター?)らしき何かを作りました。
こんな感じのアレです

複数の値でメーターを作る.PNG

とはいっても、ImageのFillAmountを使うメーターの応用です。



続きを読む




2020年11月07日

【unityエラー】ユニティちゃんSSUに同梱されてるUnityChanSpringBone-release-1.1で多量のエラーでた

エラー出る...




ビルドが出来ねぇ!!



ユニティちゃんSunny Side Up(HDRP版) をDLして、HDRP用だけど通常プロジェクトに持ってきた。

色々設定していい感じ。


エディタのプレイモードでも問題なく「SpringBone」は動作していた。


いざビルド


とりあえず一旦書き出してみようと、ビルド…。

スクリーンショット (83).png

(一部他のエラーもあるけど)UnityChanSpringBoneで50以上のエラーだ。

笑うしかねぇ。


この「UnityChanSpringBone」はunity公式がこれ単体で発表しているものなので正直言ってユニティちゃんSSUに深い関わりがある訳ではないと思う。


続きを読む




2020年10月09日

【Blender】カーブで髪の毛をモデリングするチュートリアル動画

タイトルそのままの内容です。


モデリングソフトであるBlenderで

髪をモデリングするお手頃な方法の動画を見つけたので紹介。


一からちまちま作るより、かなり効率がいいと思います。


ノードを使ったレンダリングまでしてくれるのでサンプルとしてはかなりありがたい…。









2020年07月30日

【blender2.8】3Dカーソルが動いて選択ができなくなった話

タイトルそのまんまで、ある日Blenderを触っているとマウスクリックによる選択操作が効かなくなりました。

一大事だったので色々とネットを泳いでみても解決に繋がりそうな情報はなく、ダメ。

色々といじった結果......というか、

調べていたらハッと気づいて試してみたら直りました。

前提として

「選択操作が効かなくなる」という現象は

環境によっても違うと思います。


私の場合、

ポーズモードでボーンが左クリックで選択できない

という非常事態に陥りました。

これを解決(?)したメモ記事です。

超が付くほど単純でした。



続きを読む




2020年04月12日

【unity】2019.3.5f1でポストプロセス(PP)v2インストールしたらエラーでた

なんでかは分かりませんが、

「post-processing stack v2」を

インストールしたら

次のエラーが出ました。



エラー内容


どん

Copying assembly from 'Temp/com.unity.multiplayer-hlapi.Runtime.dll' to 'Library/ScriptAssemblies/com.unity.multiplayer-hlapi.Runtime.dll' failed




続きを読む




2020年04月08日

【unity】アナログスティックの角度を0〜360度で取得したい

メモです!

タイトルの通り、外部コントローラー(DualShock4とか)の

スティック入力を角度で取得したい記事です。

続きを読む




2020年03月17日

【Unity】ViewportPointToRay()とはなんなのか

ViewportPointToRay() とは


ViewportPointToRay()とは、正規化されたビューポート座標を

もとにRayを計算する関数です。


説明終わり。



分かる訳がない


公式リファレンスにはそんな感じで記述されていますが、


正直、何がなんだか分かりません。


まずビューポート座標が曖昧です...。


そこから知る必要がありそうです。


ビューポート座標


調べてみましたが、どうやらUnity専用の用語?っぽいです。


複数の画面解像度画面の大きさでの利用を想定したときに、


カメラの視界を基準にした座標系らしいです。


カメラ左下の座標が(0, 0)、右上が(1, 1)となるようです。
ビューポート座標.png

なので、画面中央を指定する場合のビューポート座標は(0.5, 0.5)となります。


結論、ViewportPointToRay() とは


画面左下の座標を(0, 0)、右上を(1, 1)としたときの


座標に合わせて、その座標からRayを計算する関数だということです。



使用例 画面中央からRayを飛ばしてみる


void Update () {
 RaycastHit hit;
 var ray = Camera.main.ViewportPointToRay(new Vector2(0, 0));
 if (Physics.Raycast(ray, out hit)) {
  // ray処理
 }
}





以上です!


閲覧ありがとうございました。




2019年08月17日

【活動休止?】

いきなり本題


タイトル通りですね。



プロフィールを見てもらうと一目瞭然ですが、

僕はまだ高校生なのです。


そしてついにやってきました!

今年は受験です!


なので、ブログ・You Tube共に活動が極端に少なくなります

というか、今年が受験なので既にセーブしてました。


ブログの方は更新しない、という事では無いですが、

あと半年で数記事更新するのかどうか…。

って感じですかね。



You Tubeは完全に休止しようかと思います。

だから、You Tubeの次の更新は来年!



身勝手ですみません。

ご迷惑お掛けします m(_ _)m



ですが、

ブログ、You Tubeのコメント・TwitterのDMなど

には返信が可能
だと思います。

なので分からない事の質問や

実装するシステムで躓いている
など、

どんどんコメント等してください!



では、また来年!




2019年03月22日

【Unity】キャラ正面とターゲットの2点間の角度を三次元ベクトル(Vector3)を使って求める

ベクトルの2点間の角度の求め方をメモ   φ(. .)メモメモ

続きを読む




検索
プロフィール
ピノまっちゃさんの画像
ピノまっちゃ
どうも、ピノまっちゃ(PinoMatcha)です!
ゲーム制作をちょこまか頑張ってる大学生で、プログラミングも独学です。
ですので実力は全然ですが、最善を尽くして頑張っております!

名前の由来はピノの抹茶味が好きだからじゃなくて、ピノと抹茶が好きだからです!


更新 : 不定期!
プロフィール
新着記事
最新のコメント
更新事項
2018/8/2 定期更新への変更の報告に追記しました。

2018/5/10 「続きを読む」機能の使い方がやっと分かりました。

2017/9/14 プレイヤーを動かす:関数の解説の一部を書き直しました。

2017/8/1 【unity5】カメラ移動・回転させる方法に多数の画像を追加しました。
カテゴリーアーカイブ
YouTubeチャンネル
Fantiaリンク
よければ応援お願いします!

Pixivアカウント
現在、調整中です…
×

この広告は30日以上新しい記事の更新がないブログに表示されております。