GUI Skew

Unity Engine
1

Title says it all… has anyone created a control for skewing GUI controls without destroying on the mouse event Rect?

thanks in advance

2

When you say skew, do you mean a graphical shear effect (where a rectangle is transformed to a parallelogram)? You can do this by setting the GUI matrix as follows:-

+-          -+
| 1  s  0  0 |
| 0  1  0  0 |
| 0  0  1  0 |
| 0  0  0  1 |
+-          -+

The easiest way to do this is to start with the identity matrix and just change the first row. The s variable indicates the amount of shear in proportion to the Y coordinate :-

var s: float;

function OnGUI () {
	var mat = Matrix4x4.identity;
	mat.SetRow(0, Vector4(1, s, 0, 0));
	GUI.matrix = mat;
	GUI.Button(Rect(0, 0, 50, 50), "Hello");
}

(You may need to modify this further, depending on what you want to do.)
This will handle clicks on GUI elements correctly, but if you need to use mouse positions you’ve sampled directly (with Input.mousePosition) then there are an extra couple of steps. You need to subtract the mouse Y position from Screen.height to get the GUI position and then transform this modified mouse position by the inverse of the matrix you’ve used to shear the GUI:-

var transPoint = Input.mousePosition;
transPoint.y = Screen.height - transPoint.y;
transPoint = mat.inverse.MultiplyPoint3x4(transPoint);
	
if (buttonRect.Contains(transPoint)) {
  print("On the button");
} else {
  print("Outside the button");
}
3

Great, thats what i’m looking for :stuck_out_tongue:
Thanks mate

4

Is it possible to achieve this behavior in Unity 5 with new gui system?
Thanks in advance.

5

In Unity 5’s new system you can perform rotations on the X, Y and Z on canvas elements and this should allow you to get the right look (it also has the benefit of transforming by eye in the editor rather than script and not requiring additional work for making sure input events work).