koobas.hobune.stream
UI element following mouse when using "Scale With Screen Size"
When I change the "Canvas Scaler" from "Constant Pixel Size" to "Scale With Screen Size" my current code to have a UI element follow the mouse stops working.
Here is the old code:
Vector3 newPosition = (Input.mousePosition - canvas.GetComponent().localPosition);
cursorIcon.GetComponent().localPosition = newPosition;
What happens if I use the old code now is the icon position is either too far to the left(if mouse is on the right side of the screen) or too far right(if the mouse is on the left side of the screen).
Has anyone experienced this problem and know a solution?
I was able to get much closer to having the ui element follow the mouse by using this code. But it still is not 100% correct. The further it gets away from 0,0 the less accurate it is.
If anyone has any ideas let me know.
public void OnPointerDown(PointerEventData data)
{
Vector2 mousePos = Input.mousePosition;
Vector2 canvasPos = GetComponent<RectTransform>().localPosition;
float xMultiplier = Constants.REFERENCE_RESOLUTION.x / Screen.width;
float yMultiplier = Constants.REFERENCE_RESOLUTION.y / Screen.height;
Vector2 imagePos = new Vector2(mousePos.x * xMultiplier, mousePos.y * yMultiplier);
pfImage.GetComponent<RectTransform>().localPosition = imagePos;
}
I was able to get it to work using this code:
Vector2 pos;
RectTransformUtility.ScreenPointToLocalPointInRectangle(transform as RectTransform, Input.mousePosition, Camera.main, out pos);
cursorIcon.transform.position = transform.TransformPoint(pos);
I thought I'd clear this all up - when using a canvas scaler "Scale With Screen Size", Screen coordinate space can vary with respect to Canvas space (because you canvas is scaling) - normally, plugging screen space coordinates (like Input.mousePosition) straight into canvas coordinates works fine, but the scaling canvas changes the canvas's scale factor, thus changing the conversion factor between screen and canvas coordinates.
Basically, I had this code before:
float width = Input.mousePosition - startPos.x;
float height = Input.mousePosition - startPos.y;
dragSelector.sizeDelta = new Vector2 (width, height);
And I had to change it to this:
float scaleFactor = GetComponent<Canvas> ().scaleFactor;
dragSelector.sizeDelta = new Vector2 (width/scaleFactor, height/scaleFactor);
So it's really just adding that scalar conversion to reverse the effects of the screen scaler.
Thanks man. I know it was long time ago but helped me. I wish I searched first before trying 500 code combinations :'D
Cheers this was really helpful!
Just thought I'd chime in for anyone that made the same novice mistake I did. If you're still getting an offset after this on some aspect ratio's, you also need to scale using your aspectratiofitter or even consider whether you need it.
