Unity sprites and layouts

Question

I am trying to learn Unity for a simple board game. The question is, is it possible to use grid layout group (or any layout component) with sprites? The goal is to fit a board into my view regardless of the aspect ratio of the device.

The following grid should contain 7 by 7 sprites and it should scale up and down (no more then lets say 100 px) and have an aspect ratio of 1. I've tried adding a canvas and a panel that has a grid layout group component but it seems like sprites are not affected when added to the panel.

Also it seems like when I try to work with a panel or a canvas they have a fixed sizes in units. Having fix sizes feels a little bit off.

Is there a way to use layout components so sprites can have relative distances between them.

So far I am stuck and lost in tutorials and feeling like the answer should not be this complicated.

Any push to the right direction is welcome.

Answer 1

There are a few different approaches that you can take to get your game to work on all ratios. I will explain to you what I found works best for me, in Unity. It may be a viable option for you as well.

The concept is to set a "Viewable Area", where the camera will zoom and clamp to, regardless of the screen ratio or size.

Take a look at the following example picture:

The darker rectangle in the center is the "Viewable Area" that will always be visible. You want to put all your important game objects inside of this area, to ensure it will draw in game.

The background is left purposely larger than the Viewable area. This is important, as different ratios will cut off at different places depending on your Viewable rectangle proportions. You need to get a little clever to fill in the blank areas, the large repeating background is a great way to fill this space.

Simply create a GameObject to define your Viewable Area, and set its Position, Width and Height. You can add a spriteRenderer (1 unit sprite, for the size to be correct) like I did to visually see it in your scene. Then, attach the below script to your Camera, and drag this object to the "Area" property to link the script to the Viewable Area. The code should do the rest for you.

Comment if you have any questions about this implementation.

using UnityEngine;
using System.Collections;

public class CameraZoom : MonoBehaviour
{
    public Transform Area;

    public void Update()
    {
        float height = Area.localScale.y * 100;
        float width = Area.localScale.x * 100;

        float w = Screen.width / width;
        float h = Screen.height / height;

        float ratio = w / h;

        float size = (height / 2) / 100f;

        if (w < h)
            size /= ratio;

        Camera.main.orthographicSize = size;

        Vector2 position = Area.transform.position;

        Vector3 camPosition = position;
        Vector3 point = Camera.main.WorldToViewportPoint(camPosition);
        Vector3 delta = camPosition - Camera.main.ViewportToWorldPoint(new Vector3(0.5f, 0.5f, point.z));
        Vector3 destination = transform.position + delta;

        transform.position = destination;
    }

}

To optimize, move this code to its own function and manually call it when your scene moves around, instead of calling it on every Update() cycle.