▼そのUnityの作業、依頼しませんか?
2Dゲーム

【Unity】Canvasの大きさをカメラの範囲内に収めるように調節する方法

UnityのCanvasのサイズを調整する
  • Canvasが大きくてゲーム開発しにくい
  • Canvasの大きさをカメラの範囲内にしたい

というのを解決するのが当記事です。

Canvasの大きさをカメラの範囲内に収めるようにし、大きなCanvasをうまく調整していきます。

Canvasが大きいので調整する

↑こんなでかいCanvasを小さくします

【Unity】Canvasの大きさをカメラの範囲内に収めるように調節する方法

現在の状態

  • Androidにプラットフォームを切り替えてある。
  • Gameビューのアスペクト比が【800×1280】にしてある状態

説明します。

Androidにプラットフォームを切り替えてある。

UnityでAndroidにプラットフォームを切り替えてある。

【File】→【Build Settings】→【Android】→【Switch Platformを押す】

iOSでもWebGLでも可です。ただ今後の展開もわかりやすくするためです。切り替えのやり方は10秒でOK!Unityでプラットフォームを変更(切り替え)する方法をご覧ください。

Unityでプラットフォームを切り替える方法
10秒でOK!Unityでプラットフォームを変更(切り替え)する方法「Unityでプラットフォームを変更する方法が知りたい」という悩みを解決します。非常に簡単に変更することができます。【File】→【Build Settings】→【左下からプラットフォームを選ぶ】→【Switch Platformを押す】で変更できます。...

Gameビューのアスペクト比が【800×1280】にしてある状態

UnityでGameビューのアスペクト比が【800×1280】にしてある状態

【Gameビュー】→【Free Aspect】→【WXGA Portrait(800×1280にした】

もちろん他のサイズでも可です。ただここのサイズがのちのち重要となってきます。

【Render Mode】→【Screen Space - Camera】

Unityで【Render Mode】→【Screen Space - Camera】

【Canvas選択】→【Canvas】→【Screen Space - Camera】

 

【Render Camera】に【Main Camera】を格納する

Unityで【Render Camera】に【Main Camera】を格納する

【Render Camera】→【Main Cameraを入れる】

【Screen Space - Camera】に【Main Camera】を入れることで、【Main Camera】の撮影範囲に収まるようなサイズ設定されます。

もちろん【Main Camera】以外のカメラでも構いません。

これでCanvasの大きさを変更することができましたが、UIパーツの調整をしましょう。このまま下にすすめてください。

UIパーツの調整する

Canvasの大きさを調整したあとに、以下の設定もすることをおすすめします。

【UI Scale Mode】→【Scale with Screen Size】

 Unityで【UI Scale Mode】→【Scale with Screen Size】

【Canvas選択】→【Canvas Scaler】→【UI Scale Mode】→
【Scale with Screen Size】

 

【Reference Resolution】→【Gameビューで指定した画面サイズにする】

Unityで【Reference Resolution】→【Gameビューで指定した画面サイズにする】

【Canvas選択】→【Canvas Scaler】→【Reference Resolution】→【Gameビューで指定した画面サイズにする】→【X800 Y1280】

これでUIパーツのサイズ調整できました。

 

【Reference Resolution】と実機画面サイズが合わないときの設定

【Reference Resolution】で設定したサイズと実機の画面サイズが合わないときに、どう調整するかも決めていきましょう。

【Match】を【Width】か 【Height】に変更

Unityで【Match】を【Width】か 【Height】に変更

【Canvas選択】→【Canvas Scaler】→【Match】→
【幅をそろれる場合Width(0)】・【高さをそろれる場合Height(1)】

幅をそろれるか、高さをそろえるかを設定できます。Heightに変更した場合は、高さがそろうことになります。

よくわからない場合はあとでも変更できるので、安心してください。

 

最終的にこんな感じになります

CanvasのInspector

Canvasはこんな感じに合わさる

Canvasのサイズが調整でき、UIの解像度も調整でき、幅をそろれるようにしました。高さにそろれることも多いので、ここは適宜お願いします。

Sceneビューはこんな感じ

Canvasの大きさが調整された様子

しっかりCanvasの大きさが調整されました。

 

まとめ

・Canvasの大きさを調整

  • 【Render Mode】→【Screen Space - Camera】
  • 【Render Camera】に【Main Camera】を格納する

・UIパーツの調整

  • 【UI Scale Mode】→【Scale with Screen Size】
  • 【Reference Resolution】→【Gameビューで指定した画面サイズにする】

・幅か高さ、どっちをそろえるか

  • 【Match】を【Width】か 【Height】に振り切る

こちらの【Unity2D&3Dサンプルゲーム】動画よりわかりやすく記事でゲームを作ろうもご覧ください。

Unityサンプルゲーム
【Unity2D&3Dサンプルゲーム】動画よりわかりやすく記事でゲームを作ろう【チュートリアル】【Unity2D&3Dサンプルゲーム・チュートリアル】Unityにおいてのサンプルゲームの作り方が書いてある記事って少ないですよね。そこで当サイトUnishar(ユニシャー)が動画よりわかりやすいサンプルゲームを無料で提供します。...

さぎのみや(@saginomiya8)でした。SNSでシェアしてね( ・∇・) 一生無双モードで頑張る。

参考文献

 

ABOUT ME
さぎのみや
さぎのみや
超書手。現在はUnityメディア「ユニシャー」の運営とゲーム開発がメインです。Unity、ライティング関係のお仕事お待ちしております。 >>詳しいプロフィール >>Amazonほしいものリスト
【Unity3D】新しいサンプルゲーム(チュートリアル)を作りました!!!
Unity有料サンプルゲーム

「Unityで3Dゲームを本格的に作っていきたい!」という人におすすめのチュートリアルとなっています。

画像のようなゲームの作り方を販売しています。色々と応用できるサンプルゲームとなっています。ぜひ、作ってみてください。

詳細
>>【Unity3Dサンプルゲーム・チュートリアル】「フリスビーを犬に届けよ!」の概要

>>BOOTHでこのチュートリアルを見る

【RT・フォローであなたのスキルが上がる】

シェアフォローする

さぎのみやのモチベが上がる

コンテンツの質が上がる

あなたの能力も上がる

あなたの
Twitterでのシェア

であなたの能力が上がります。

>>さぎのみやのツイッター(@saginomiya8)

 

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください