How do you use Unity Sprites with Prime31's Touchkit?

Questions & Answers
1

I can’t seem to find any documentation or examples on the best practices for implementing Prime31’s Touchkit with basic Sprites.

Currently I’m getting the sprite info such as width, height, originX and originY and then using this info when I setup the Recognizer. But I have a feeling I’m doing this wrong?

I basically hacked the DemoTwo scene that comes with Touchkit as follows;

Firstly I added a sprite to the scene named “pauseBtn”

Secondly I changed the DemoTwo.cs as follows;

public class DemoTwo : MonoBehaviour
{
	private VirtualControls _controls;

	void Start()
	{
		_controls = new VirtualControls();
		_controls.createDebugQuads();
	}

	void Update()
	{
		_controls.update();
	}

}

and then I updated VirtualControls.cs as follows;

public class VirtualControls
{
	public bool pauseDown;
	private TKButtonRecognizer _pauseRecognizer;
	public TKRect pauseRect { get { return _pauseRecognizer.boundaryFrame.Value; } }

	public GameObject pauseBtn;
	float pauseBtnWidth;
	float pauseBtnHeight;
	float pauseBtnOriginX;
	float pauseBtnOriginY;

	void PauseBtnInfo(){
		pauseBtn = GameObject.Find("pauseBtn");
		pauseBtnWidth = pauseBtn.GetComponent<SpriteRenderer>().bounds.size.x;
		pauseBtnHeight = pauseBtn.GetComponent<SpriteRenderer>().bounds.size.y;
		pauseBtnOriginX = pauseBtn.GetComponent<SpriteRenderer>().bounds.center.x;
		pauseBtnOriginY = pauseBtn.GetComponent<SpriteRenderer>().bounds.center.y;
	}

	public VirtualControls()
	{
		PauseBtnInfo();
		setupRecognizers();
	}

	public void update()
	{
		// reset our state
		pauseDown = false;

		// first update our touches then use our recognizers to set our state
		TouchKit.updateTouches();

		pauseDown = _pauseRecognizer.state == TKGestureRecognizerState.RecognizedAndStillRecognizing;
	}

	public void createDebugQuads()
	{
		createQuadButton( pauseRect, Color.green );
	}

	void createQuadButton( TKRect rect, Color color )
	{
		color.a = 0.2f;

		// find the center point in Unity units
		var center = Camera.main.ScreenToWorldPoint( rect.center );
		center.z = 0;

		// create the quad button
		var button = GameObject.CreatePrimitive( PrimitiveType.Quad );
		button.transform.position = center;
		button.renderer.material.shader = Shader.Find( "Sprites/Default" );
		button.renderer.material.color = color;

		// scale the quad button accordingly
		button.transform.localScale = new Vector3
		(
			TouchKit.instance.pixelsToUnityUnitsMultiplier.x * rect.width,
			TouchKit.instance.pixelsToUnityUnitsMultiplier.y * rect.height
		);
	}

	void setupRecognizers()
	{
		_pauseRecognizer = new TKButtonRecognizer( new TKRect(TouchKit.instance.designTimeResolution.x - pauseBtnWidth*50f, TouchKit.instance.designTimeResolution.y - pauseBtnHeight*50f, pauseBtnWidth*50f, pauseBtnHeight*50f), 0f );
		TouchKit.addGestureRecognizer( _pauseRecognizer );
	}
}

As you can see the pauseBtn data has to be “adjusted” a bit so that the debugQuad aligns with the sprite position. But if I move the sprite in the scene I then have to guess the co-ordinates again.

Mike mentions in the readme file that the TKButtonRecognizer class “has been designed to work with any sprite solution for button touch handling. This lets you keep your input totally separate from your rendering.” so I’m thinking I’m doing this totally wrong?

If anyone has implemented Sprites with Touchkit sucessfully I would really appreciate any help or tips.

thanks in advance,
Nathan

2

Ok so I played around with the code a bit more and realised that I need to convert Worldspace co-ords to Screenspace co-ords so updated the following code;

void PauseBtnInfo(){
		pauseBtn = GameObject.Find("pauseBtn");

		float sizeX = pauseBtn.GetComponent<SpriteRenderer>().bounds.size.x;
		float sizeY = pauseBtn.GetComponent<SpriteRenderer>().bounds.size.y;
		float centerX = pauseBtn.GetComponent<SpriteRenderer>().bounds.center.x; 
		float centerY = pauseBtn.GetComponent<SpriteRenderer>().bounds.center.y;

		Vector3 bottomLeft = new Vector3(centerX - (sizeX/2), centerY - (sizeY/2));
		bottomLeft = Camera.main.WorldToScreenPoint(bottomLeft);
		Debug.Log ("bottomLeft = " + bottomLeft);

		Vector3 bottomRight = new Vector3(centerX + (sizeX/2), centerY - (sizeY/2));
		bottomRight = Camera.main.WorldToScreenPoint(bottomRight);
		Debug.Log ("bottomRight = " + bottomRight);

		Vector3 topLeft = new Vector3(centerX - (sizeX/2), centerY + (sizeY/2));
		topLeft = Camera.main.WorldToScreenPoint(topLeft);
		Debug.Log ("topLeft = " + topLeft);

		Vector3 topRight = new Vector3(centerX + (sizeX/2), centerY + (sizeY/2));
		topRight = Camera.main.WorldToScreenPoint(topRight);
		Debug.Log ("topRight = " + topRight);

		pauseBtnWidth = bottomRight.x - bottomLeft.x;
		Debug.Log("pauseBtnWidth = " + pauseBtnWidth);

		pauseBtnHeight = topLeft.y - bottomLeft.y;
		Debug.Log("pauseBtnHeight = " + pauseBtnHeight);

		pauseBtnOriginX = bottomLeft.x;
		Debug.Log("pauseBtnOriginX = " + pauseBtnOriginX);

		pauseBtnOriginY = bottomLeft.y;
		Debug.Log("pauseBtnOriginY = " + pauseBtnOriginY);
	
	}

and also

void setupRecognizers()
	{
		_pauseRecognizer = new TKButtonRecognizer( new TKRect(pauseBtnOriginX, pauseBtnOriginY, pauseBtnWidth, pauseBtnHeight), 0f );
		TouchKit.addGestureRecognizer( _pauseRecognizer );
	}

now I can move the sprite around in the scene and the debugQuad and TKRect both update automatically :slight_smile:
Now I just need to clean up this code, turn it into a method that I can call and input a sprite and get it to spit out all those co-ords that I can pass to the TKRect.