koobas.hobune.stream
Convert UI Image size and position to Camera viewport rec.
Hi,
I'm trying to make a mini map which will be overlaid by an mask image on GUI canvas.
My canvas UI scale mode was set to Scale with screen size, and reference resolution was set to 1920x1080.
I used "mapImage" as an object for size and position comparison.
"mapImage" was put on GUI canvas, and will be hidden from the camera when playing. It's position and size made it right below the mask image.
I used the code below to match camera viewport size and position with "mapImage":
public Image mapImage;
public int canvasWidth = 1920;
public int canvasHeight = 1080;
void Start () {
float canvasWidthRatio = canvasWidth / Screen.width;
float canvasHeightRatio = canvasHeight / Screen.height;
float cameraX = mapImage.rectTransform.rect.x / canvasWidthRatio;
float cameraY = mapImage.rectTransform.rect.y / canvasHeightRatio;
float cameraWidth = mapImage.rectTransform.rect.width / canvasWidthRatio;
float cameraHeight = mapImage.rectTransform.rect.height / canvasHeightRatio;
this.camera.pixelRect = new Rect(Screen.width - cameraX, Screen.height - cameraY, cameraWidth, cameraHeight);
}
I can't make it right. Please help!
Best Answer
After all, I found the answer. My "mapImage" has pivot centered in the object which mean "cameraX" and "cameraY" have to be changed like below:
public Image mapImage;
public int canvasWidth = 1920;
public int canvasHeight = 1080;
void Start () {
float canvasWidthRatio = canvasWidth / Screen.width;
float canvasHeightRatio = canvasHeight / Screen.height;
float cameraWidth = mapImage.rectTransform.rect.width / canvasWidthRatio;
float cameraHeight = mapImage.rectTransform.rect.height / canvasHeightRatio;
float cameraX = mapImage.rectTransform.transform.position.x - cameraWidth / 2;
float cameraY = mapImage.rectTransform.transform.position.y - cameraHeight / 2;
this.camera.pixelRect = new Rect(cameraX, cameraY, cameraWidth, cameraHeight);
}
