1
\$\begingroup\$

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.

grid

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.

\$\endgroup\$
1
\$\begingroup\$

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:

Setup Example

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.

\$\endgroup\$
1
  • \$\begingroup\$ This code just seems like it zooms in to only contain 1 ball in the middle. Not quite sure why it does that. However I am guessing I solved my own problem still working on it but if it works, I will post my own answer. Thanks for the reply. \$\endgroup\$ Jul 19 '15 at 15:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.