Wayback Machinekoobas.hobune.stream
May JUN Jul
Previous capture 12 Next capture
2021 2022 2023
1 capture
12 Jun 22 - 12 Jun 22
sparklines
Close Help
  • Products
  • Solutions
  • Made with Unity
  • Learning
  • Support & Services
  • Community
  • Asset Store
  • Get Unity

UNITY ACCOUNT

You need a Unity Account to shop in the Online and Asset Stores, participate in the Unity Community and manage your license portfolio. Login Create account
  • Blog
  • Forums
  • Answers
  • Evangelists
  • User Groups
  • Beta Program
  • Advisory Panel

Navigation

  • Home
  • Products
  • Solutions
  • Made with Unity
  • Learning
  • Support & Services
  • Community
    • Blog
    • Forums
    • Answers
    • Evangelists
    • User Groups
    • Beta Program
    • Advisory Panel

Unity account

You need a Unity Account to shop in the Online and Asset Stores, participate in the Unity Community and manage your license portfolio. Login Create account

Language

  • Chinese
  • Spanish
  • Japanese
  • Korean
  • Portuguese
  • Ask a question
  • Spaces
    • Default
    • Help Room
    • META
    • Moderators
    • Topics
    • Questions
    • Users
    • Badges
  • Home /
  • Help Room /
avatar image
2
Question by Viggotron · Sep 21, 2015 at 07:55 PM · canvastoggletoggle button

Toggle input with sprite swap instead of checkmark?

Hi folks!

I'm trying to make a toggle input (in Unity 5 using canvas), but I need it swap the sprite rather than overlay a checkmark sprite on top of the backgrund sprite. Since my sprites are decorated with transparent cut-outs I can't just overlay one with the other..

Any ideas? It seems like a pretty common use case to me..

Peace - Viggo

Comment
Add comment
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users

4 Replies

· Add your reply
  • Sort: 
avatar image
3

Answer by TheGering · Aug 03, 2016 at 08:18 AM

here another version, use toggle as usual, but with this component attached the background is disabled/hidden, when checkmark is shown:

 using UnityEngine;
 
 namespace UnityEngine.UI
 {
     [ExecuteInEditMode]
     public class ToggleGraphicSwap : MonoBehaviour {
 
         Toggle _toggle;
         Toggle toggle {
             get { return _toggle ?? (_toggle = GetComponent<Toggle>()); }
         }
 
         void Awake() {
             toggle.onValueChanged.AddListener(OnTargetToggleValueChanged);
         }
 
         void OnEnable() {
             toggle.targetGraphic.enabled = !toggle.isOn;
         }
 
         void OnTargetToggleValueChanged(bool on) {
             toggle.targetGraphic.enabled = !on;
         }
     }
 }
Comment
Add comment · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image
1

Answer by Miguel-Ferreira · Sep 30, 2015 at 07:56 AM

I ended up using this

 using UnityEngine;
 using System.Collections;
 using UnityEngine.UI;
 
 public class ToggleSpriteSwap : MonoBehaviour {
 
     public Toggle targetToggle;
     public Sprite selectedSprite;
 
     // Use this for initialization
     void Start () {
         targetToggle.toggleTransition = Toggle.ToggleTransition.None; 
         targetToggle.onValueChanged.AddListener(OnTargetToggleValueChanged);
     }
 
     void OnTargetToggleValueChanged(bool newValue) {
         Image targetImage = targetToggle.targetGraphic as Image;
         if (targetImage != null) {
             if (newValue) {
                 targetImage.overrideSprite = selectedSprite;
             } else {
                 targetImage.overrideSprite = null;
             }
         }
     }
 }
 
Comment
Add comment · Show 1 · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image AnnaB417 · Feb 05, 2016 at 02:58 PM 0
Share

@$$anonymous$$iguel Ferreira THAN$$anonymous$$ YOU, this code works perfect and is exactly what I needed to know!

avatar image
0

Answer by ptblk · Mar 12, 2016 at 02:35 PM

where do you attach this? I cant seem to see anything change. I have put it onto my canvas, linked the toggle and sprite, but nothing happens

Comment
Add comment · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image
0

Answer by HyunMok_Moon · Nov 16, 2020 at 02:05 AM

put this code after line 20 and line 22.

 if (newValue) {
     targetImage.overrideSprite = selectedSprite;
     targetImage.enabled = false;
 } else {
     targetImage.overrideSprite = null;
     targetImage.enabled = true;
 }

When toggle on, Checkmark will show, and targetImage(Background) hide. Toggle off, Checkmark will hide, and targetImage(BG) will show.

Comment
Add comment · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users

Your answer

Hint: You can notify a user about this post by typing @username

Up to 2 attachments (including images) can be used with a maximum of 524.3 kB each and 1.0 MB total.

Follow this Question

Answers Answers and Comments

7 People are following this question.

avatar image avatar image avatar image avatar image avatar image avatar image avatar image

Related Questions

My music player is getting detached from toggle after changing scenes 0 Answers

Need help understanding toggle code. 0 Answers

Toggle Group save stats 0 Answers

Toggling checkbox in toggle in GUILayout.Toggle 1 Answer

How to make toggles stay highlighted when clicking away 1 Answer


Enterprise
Social Q&A

Social
Subscribe on YouTube social-youtube Follow on LinkedIn social-linkedin Follow on Twitter social-twitter Follow on Facebook social-facebook Follow on Instagram social-instagram

Footer

  • Purchase
    • Products
    • Subscription
    • Asset Store
    • Unity Gear
    • Resellers
  • Education
    • Students
    • Educators
    • Certification
    • Learn
    • Center of Excellence
  • Download
    • Unity
    • Beta Program
  • Unity Labs
    • Labs
    • Publications
  • Resources
    • Learn platform
    • Community
    • Documentation
    • Unity QA
    • FAQ
    • Services Status
    • Connect
  • About Unity
    • About Us
    • Blog
    • Events
    • Careers
    • Contact
    • Press
    • Partners
    • Affiliates
    • Security
Copyright © 2020 Unity Technologies
  • Legal
  • Privacy Policy
  • Cookies
  • Do Not Sell My Personal Information
  • Cookies Settings
"Unity", Unity logos, and other Unity trademarks are trademarks or registered trademarks of Unity Technologies or its affiliates in the U.S. and elsewhere (more info here). Other names or brands are trademarks of their respective owners.
  • Anonymous
  • Sign in
  • Create
  • Ask a question
  • Spaces
  • Default
  • Help Room
  • META
  • Moderators
  • Explore
  • Topics
  • Questions
  • Users
  • Badges