質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.93%

unity 画面サイズ調整について

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 266

hikaaaaaaaa

score 19

unityにてゲーム開発をしております。

動画を組み込んでおり、動画のサイズを1242×2688で作成しており
他の背景画像も同じ1242×2688で作成をしております。

アプリの下部にバナー広告を実装しようとしており、
サイトを参考にスクリプトを作成し、1242×2688を基準にリサイズ(1242×2208等)を試みましたが、縦の比率は固定で反映されるのですが
背景の横の部分が黒くなってしまいます。

黒い部分をなくし、他のサイズでも同じ画角での実装をするにはどのようにしたらできるのでしょうか。
アドバイスをいただけますと幸いです。

図を添付させていただきます。

現在1242x2688で組み込みを行い、1242x2208にすると縦の大きさは1242x2688の比率でサイズが調整がされるのですが、左右の部分が黒くなってしまいます。
(Unityのデフォルトだと青だと思います。)

理想は1242x2688のサイズの配置を黒い部分なく、縦横の比率を変えずに1242x2208の画面内におさめたいです。

カメラにアタッチ

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

[ExecuteInEditMode()]
[RequireComponent(typeof(Camera))]
public class CameraStableAspect : MonoBehaviour
{
    [SerializeField]
    Camera refCamera;

    [SerializeField]
    int width = 1242;

    [SerializeField]
    int height = 2688;

    [SerializeField]
    float pixelPerUnit = 100f;


    int m_width = -1;
    int m_height = -1;

    void Awake()
    {
        if (refCamera == null)
        {
            refCamera = GetComponent<Camera>();
        }
        UpdateCamera();
    }

    private void Update()
    {
        UpdateCameraWithCheck();
    }

    void UpdateCameraWithCheck()
    {
        if (m_width == Screen.width && m_height == Screen.height)
        {
            return;
        }
        UpdateCamera();
    }

    void UpdateCamera()
    {
        float screen_w = (float)Screen.width;
        float screen_h = (float)Screen.height;
        float target_w = (float)width;
        float target_h = (float)height;

        //アスペクト比
        float aspect = screen_w / screen_h;
        float targetAcpect = target_w / target_h;
        float orthographicSize = (target_h / 2f / pixelPerUnit);

        //縦に長い
        if (aspect < targetAcpect)
        {
            float bgScale_w = target_w / screen_w;
            float camHeight = target_h / (screen_h * bgScale_w);
            refCamera.rect = new Rect(0f, (1f - camHeight) * 0.5f, 1f, camHeight);
        }
        // 横に長い
        else
        {
            // カメラのorthographicSizeを横の長さに合わせて設定しなおす
            float bgScale = aspect / targetAcpect;
            orthographicSize *= bgScale;

            float bgScale_h = target_h / screen_h;
            float camWidth = target_w / (screen_w * bgScale_h);
            refCamera.rect = new Rect((1f - camWidth) * 0.5f, 0f, camWidth, 1f);
        }

        refCamera.orthographicSize = orthographicSize;

        m_width = Screen.width;
        m_height = Screen.height;
    }
}


Panaleを作成しアタッチ

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

[ExecuteInEditMode()]
public class RectScalerWithViewport : MonoBehaviour
{
    [SerializeField]
    RectTransform refRect = null;

    [SerializeField]
    Vector2 referenceResolution = new Vector2(1242, 2688);

    [Range(0, 1)]
    [SerializeField] float matchWidthOrHeight = 0;

    float m_width = -1;
    float m_height = -1;

    private const float kLogBase = 2;

    private void Awake()
    {
        if (refRect == null)
        {
            refRect = GetComponent<RectTransform>();
        }
        UpdateRect();
    }

    private void Update()
    {
        UpdateRectWithCheck();
    }

    private void OnValidate()
    {
        UpdateRect();
    }

    void UpdateRectWithCheck()
    {
        Camera cam = Camera.main;
        float width = cam.rect.width * Screen.width;
        float height = cam.rect.height * Screen.height;
        if (m_width == width && m_height == height)
        {
            return;
        }
        UpdateRect();
    }

    void UpdateRect()
    {
        Camera cam = Camera.main;
        float width = cam.rect.width * Screen.width;
        float height = cam.rect.height * Screen.height;
        m_width = width;
        m_height = height;

        // canvas scalerから引用
        float logWidth = Mathf.Log(width / referenceResolution.x, kLogBase);
        float logHeight = Mathf.Log(height / referenceResolution.y, kLogBase);
        float logWeightedAverage = Mathf.Lerp(logWidth, logHeight, matchWidthOrHeight);
        float scale = Mathf.Pow(kLogBase, logWeightedAverage);

        refRect.localScale = new Vector3(scale, scale, scale);

        // スケールで縮まるので領域だけ広げる
        float revScale = 1f / scale;
        refRect.sizeDelta = new Vector2(m_width * revScale, m_height * revScale);
    }
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • hikaaaaaaaa

    2020/07/23 12:53

    上下はみ出しのほうが良いです。。

    キャンセル

  • IShix

    2020/07/25 19:07

    2Dと3Dどちらですか?

    キャンセル

  • hikaaaaaaaa

    2020/07/25 19:08

    IShixさん
    2Dです。

    キャンセル

回答 1

+1

今使っているものを共有します

CameraStableAspectRectScalerWithViewportを一旦停止して下記スクリプトを試してみてください。

9:16または16:9を基準にCamera.aspectで調整する方法です。
動画を使ったことが無いのでどうなるか分かりませんが、一度お試しください。

サンプル

動画ではなく画像を配置したサンプルです。

1242×2688
![イメージ説明

1242×2208
イメージ説明

ダウンロード

今回のサンプルを共有します。
AspectFitCameraTest.unitypackage 保存期間60日

使い方

  1. メインカメラにAspectFitCameraをアタッチ
  2. カメラのSizeを11にする
    イメージ説明
  3. 再生して確認 ※再生中のみ動作します。

カメラにアタッチするスクリプト

using System;
using System.Diagnostics;
using UnityEngine;
using UnityEngine.Assertions;

public sealed class AspectFitCamera : MonoBehaviour
{
    /// <summary>
    /// 基準となるアスペクト ※必ずportalの値を入れる
    /// </summary>
    public static readonly Vector2 DEFAULT_ASPECT = new Vector2(9, 16);
    /// <summary>
    /// ターゲットとなるカメラ
    /// </summary>
    [SerializeField] Camera targetCamera;
    /// <summary>
    /// (Editor Only) 再生中にアスペクト比が変わった場合対応するか?
    /// </summary>
    [SerializeField] bool isUpdateOnRuntime = true;

    float startOrthographicSize;
    float defaultAspect;
    float currentAspect;

    void Awake()
    {
        Assert.IsTrue(targetCamera.orthographic, "Cameraの設定をorthographicにしてください");
        startOrthographicSize = targetCamera.orthographicSize;
        // 端末がlandscapeの場合逆にする
        defaultAspect = Screen.width > Screen.height
                        ? DEFAULT_ASPECT.y / DEFAULT_ASPECT.x
                        : DEFAULT_ASPECT.x / DEFAULT_ASPECT.y;
    }

    void Start()
    {
        Apply();
    }

    // エディタ上のみUpdateを機能させる
    [Conditional("UNITY_EDITOR")]
    void Update()
    {
        if(isUpdateOnRuntime)
        {
            Apply();
        }
    }

    void Apply()
    {
        if(Math.Abs(targetCamera.aspect - currentAspect) > 0)
        {
            currentAspect = targetCamera.aspect;
            var r = defaultAspect / targetCamera.aspect;
            targetCamera.orthographicSize = startOrthographicSize * r;
        }
    }

    void Reset()
    {
        targetCamera = Camera.main;
    }
}

Canvasの設定

Expandに設定すると良いです
イメージ説明

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.93%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る