Object Placement alignment to background image

[nivenj]

Hi,

I’ve been struggling with this for a week now. I’m new to unity and the learning curve is steep but enjoyable

What I am trying to achieve is this:-

I have an background image which will act as a playing board of sorts (think chess board). This image will be static during play. I want this image to scale to the full screen of whatever mobile device is in use.

I place my objects using localPosition which align to a specific area on the background image. the problem is, that if I view it on a 16:9 screen the objects are aligned differently than when i view it on a 16:10 screen. I understand why this is, as i’m positioning based on a fixed point in space but the image is scaling.

How can I go about achieving what I am trying to do. i.e. perfect alignment irrespective of screen scaling.

Thanks in advance

[alexanderbrevig]

You could do either of the following:

1. Create a mathematical model of the board, so that you could simply calculate the position based on some data. F.ex if you wanted to be at the beginning of the fourth square of a chess board you could do this: float xPos = (4-1)/8 * Screen.width;
2. If you know the pixel position of where you want to be you can simply map to screen coords mathematically: screenPosX = Screen.width / image.width * imagePosX. After you know screen x and y you can use Camera.ScreenToWorldPoint for generating a world coordinate from the screen coords.

Good luck!

[nivenj]

Thanks for the response guys,

@robertu taking your advice I found the following post auto-scale

public class PositionCamera : MonoBehaviour {
 
    public float fWidth = 9.0f;  // Desired width 
 
    void Start () {
 
       float fT = fWidth / Screen.width * Screen.height;
       fT = fT / (2.0f * Mathf.Tan (0.5f * Camera.main.fieldOfView * Mathf.Deg2Rad));
       Vector3 v3T = Camera.main.transform.position;
       v3T.z = -fT;
       transform.position = v3T;
    }

This works perfectly if the camera is at a 90 degree angle to the image, the problem is, my Camera POV is at an angle to the Image to give the perception of depth.

Any idea how i could reconfigure the above code for my situation? (I’m a bit lost at how it works).

This is the image:

This is the Camera POV: