Unity2D로 화면의 가로 세로 비율을 고정하고 싶다 [Unity]

11611 단어 초보자Unity2DUnity
2D 게임을 만들 때 여러 기기에서 화면 크기를 배경에 맞추고 싶을 때가 있었기 때문에 메모.
  • 배경에 크기를 맞추고 싶습니다
  • 종횡비를 고정하고 싶습니다
  • 배경에서 튀어나오는 부분은 검게하고 싶다
  • 장치의 화면 크기에서 세로 또는 가로로 정렬할지 여부를 결정하여 화면 비율을 고정으로 표시합니다.

    이번에 사용할 이미지



    이것의 종횡비를 유지한 채로 표시하고 싶습니다.
    640x960 세로 이미지


    배치



    그대로 배치했을 뿐이므로 당연히 화면과 맞지 않습니다.


    세로로 맞추다



    화면 크기를 이미지의 세로 크기에 맞추는 스크립트를 준비하고 카메라에 연결합니다.
    카메라의 orthographicSize이 카메라의 세로 폭의 절반이므로 거기에 이미지 크기를 픽셀 단위로 나눈 값을 넣습니다.

    StableAspect.cs
    private Camera cam;
    // 画像のサイズ
    private float width = 640f;
    private float height = 960f;
    // 画像のPixel Per Unit
    private float pixelPerUnit = 100f;
    
    void Awake () {
        // カメラコンポーネントを取得します
        cam = GetComponent<Camera> ();
        // カメラのorthographicSizeを設定
        cam.orthographicSize = height / 2f / pixelPerUnit;
    }
    

    화면의 세로 사이즈에 맞았습니다.


    옆 여백을 잘라내기



    아직 양쪽의 여백이 둥글게 보이므로 이것을 마스크하는 형태로 숨깁니다.
    Camera viewport rect이 화면의 어디에 그려지는지를 설정하는 속성이므로 설정합니다.
    그렇다고 해도 inspector 상의 프로퍼티명과 스크립트로 이름이 다른 것은 왜일까요.

    StableAspect.cs
    private Camera cam;
    // 画像のサイズ
    private float width = 640f;
    private float height = 960f;
    // 画像のPixel Per Unit
    private float pixelPerUnit = 100f;
    
    void Awake () {
        // カメラコンポーネントを取得します
        cam = GetComponent<Camera> ();
        // カメラのorthographicSizeを設定
        cam.orthographicSize = height / 2f / pixelPerUnit;
    
        // 縦幅の倍率
        float bgScale = height / Screen.height;
        // viewport rectの幅
        float camWidth = width / (Screen.width * bgScale);
        // viewportRectを設定
        cam.rect = new Rect ((1f - camWidth) / 2f, 0f, camWidth, 1f);
    }
    

    이 viewport rect는 상당히 곡자이며 0에서 1 사이의 값으로 정규화됩니다.
    가로 폭을 맞추는 것만이므로, width/Screen.width로 피트할 것 같은 생각이 듭니다만, 그럼 안 됩니다.
    이미지의 세로 폭이 화면 크기에 맞게 스케일되어 있기 때문에 스케일 비율을 가미해야 합니다.
    그것이 bgScale입니다.


    세로뿐만 아니라 옆에도 맞는다



    가로 방향도 가미합니다.

    StableAspect.as
    private Camera cam;
    // 画像のサイズ
    private float width = 640f;
    private float height = 960f;
    // 画像のPixel Per Unit
    private float pixelPerUnit = 100f;
    
    void Awake () {
        float aspect = (float)Screen.height / (float)Screen.width;
        float bgAcpect = height / width;
    
        // カメラコンポーネントを取得します
        cam = GetComponent<Camera> ();
        // カメラのorthographicSizeを設定
        cam.orthographicSize = (height / 2f / pixelPerUnit);
    
    
        if (bgAcpect > aspect) {
            // 倍率
            float bgScale = height / Screen.height;
            // viewport rectの幅
            float camWidth = width / (Screen.width * bgScale);
            // viewportRectを設定
            cam.rect = new Rect ((1f - camWidth) / 2f, 0f, camWidth, 1f);
        } else {
            // 倍率
            float bgScale = width / Screen.width;
            // viewport rectの幅
            float camHeight = height / (Screen.height * bgScale);
            // viewportRectを設定
            cam.rect = new Rect (0f, (1f - camHeight) / 2f, 1f, camHeight);
        }
    }
    



    Update에 이 처리를 쓰면, 리얼타임으로의 리사이즈에도 대응할 수 있습니다.
  • 좋은 웹페이지 즐겨찾기