Our website is made possible by displaying online advertisements to our visitors. Please consider supporting us by disabling your ad blocker.

Toggle Unity3D Sprites On Click

TwitterFacebookRedditLinkedInHacker News

When creating a game there is often the need to create a toggle. An obvious example might be for a volume controller. Click the sprite to turn the volume on, and click the same sprite to turn the volume off.

The best way to accomplish this task is to create a sprite game object that has a script with two public sprite variables. In the Unity editor add one sprite that will represent the on toggle position and another sprite that will represent the off toggle position.

using UnityEngine;
using System.Collections;

public class VolumeControl : MonoBehaviour {

    public Sprite VolumeOn, VolumeOff;
    private SpriteRenderer spriteRenderer;

    void Start() {
        spriteRenderer = gameObject.GetComponent<SpriteRenderer>();
        SetVolume(PlayerPrefs.GetInt("volume", 50) != 50 ? false : true);
    }

    void Update() {
        if(isTouched()) {
            SetVolume(PlayerPrefs.GetInt("volume", 50) != 50 ? true : false);
        }
    }

    private void SetVolume(bool IsOn) {
        if(IsOn) {
            spriteRenderer.sprite = VolumeOn;
            PlayerPrefs.SetInt("volume", 50);
        } else {
            spriteRenderer.sprite = VolumeOff;
            PlayerPrefs.SetInt("volume", 0);
        }
    }

    public bool isTouched() {
        bool result = false;
        if(Input.touchCount == 1) {
            if(Input.touches[0].phase == TouchPhase.Ended) {
                Vector3 wp = Camera.main.ScreenToWorldPoint(Input.GetTouch(0).position);
                Vector2 touchPos = new Vector2(wp.x, wp.y);
                if (collider2D == Physics2D.OverlapPoint(touchPos)) {
                    result = true;
                }
            }
        }
        if(Input.GetMouseButtonUp(0)) {
            Vector3 wp = Camera.main.ScreenToWorldPoint(Input.mousePosition);
            Vector2 mousePos = new Vector2(wp.x, wp.y);
            if (collider2D == Physics2D.OverlapPoint(mousePos)) {
                result = true;
            }
        }
        return result;
    }

}

The above code represents a simple volume toggle. The start method will cache our sprite renderer component and set the volume to whatever it was set to previously by reading the PlayerPrefs object. In the update method, when the toggle is clicked, the volume is set to the inverse. If the volume / sprite is in the on position then the renderer will draw the off sprite and set the volume to off.

The isTouched() method is very simple. It has been designed to work for mobile (touch) and computers (click). If a touch is detected and it has ended, then return true. Same thing happens if a click has ended. The method was designed to detect the end of a touch / click because often a touch down or mouse down will register multiple times causing the toggle to not perform as it should.

A video version of this article can be seen below.

Nic Raboy

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in C#, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Unity. Nic writes about his development experiences related to making web and mobile development easier to understand.

Search

Follow Us

Support This Site