- Home /
UI Element Got & Lost Focus Handling
I am working on desktop game so that want to move focus using arrow keys. Default initial button focus, I have already setup. As well by pressing arrow keys controls is also moving from one button to other but I want to set up scale up and down animation.
When button got focus, I want to do scale up for that button. When button lost focus, I want to do normal scale for that button. <-- I want to implement this thing.
I found this way but this don't contains scale up and down feature. This contains sprite change functionality.
For UI setup, I have used new Unity UI, so my all UI controls belongs to that.
There is no question here.
Edit your post to fill out more information including what you have tried so far.
@meat5000, what I need to do that I don't know!! So that I asked here. I thought Unity has definitely some mechanism exist for this stuff that I don't know.
Well, by 'focus' do you mean
or
Look at the selectable class, perhaps, and just place your scaling code within the OnSelect callback or just use the isHighlighted flag.
http://docs.unity3d.com/ScriptReference/UI.Selectable.OnSelect.html
http://docs.unity3d.com/ScriptReference/UI.Selectable.OnDeselect.html
Answer by meat5000 · May 06, 2016 at 12:20 PM
This is actually very easy. Just put this on each Selectable Object you wish to scale on Select.
using UnityEngine;
using System.Collections;
using UnityEngine.UI;
using UnityEngine.EventSystems;
public class ScaleButton : MonoBehaviour, ISelectHandler, IDeselectHandler{
Vector2 offMax;
Vector2 offMin;
RectTransform myRT;
void Start ()
{
myRT = transform as RectTransform;
offMax = myRT.offsetMax;
offMin = myRT.offsetMin;
}
public void OnSelect(BaseEventData data)
{
myRT.offsetMax = offMax * 1.1f;
myRT.offsetMin = offMin * 1.1f;
Debug.Log(gameObject.name + " Selected");
}
public void OnDeselect(BaseEventData data)
{
myRT.offsetMax = offMax;
myRT.offsetMin = offMin;
Debug.Log(gameObject.name + " Deselected");
}
}
Get the transform as RectTransform and cache the current offset values. Scale the offsets in Select and put them back to the cached value on Deselect.
@meat5000, Thanks for your awesome reply but I have one question now. If I have 6 buttons then I need to write 6 scripts like this? any way exist through which I can detect button as well.
Simply use this
http://docs.unity3d.com/ScriptReference/EventSystems.BaseEventData-selectedObject.html
to detect which button is pressed.
public void OnSelect(BaseEventData data)
{
if(data.selectedObject.name == "$$anonymous$$yButton")
{
myRT.offset$$anonymous$$ax = off$$anonymous$$ax * 1.1f;
myRT.offset$$anonymous$$in = off$$anonymous$$in * 1.1f;
}
}
No, you dont do like that!
You create 1 script, and apply the same script to each button. on select event it will trigger own instance of the script, you dont even need to care of the button name
@meat5000, why we are changing offset value here? I want scale up down of selected object.
As I mentioned in a comment, actually changing the scale of the RectTransform can alter the sprite in a way that prevents click detection in the correct areas. The proper way to scale a UI element is to adjust the corners of the rectangle with respect to the position of the Anchors.
http://docs.unity3d.com/ScriptReference/RectTransform-offset$$anonymous$$ax.html
Did you try the script? The buttons will grow by 10% when clicked.
The pointers in the Standalone Input module take care of the touch and mouse, since the Touch Input $$anonymous$$odule was deprecated. Check out the class in the Scripting API for more info. The end result will be the same.
The offset values are a normalised scale respective to the position of the anchors. You should place the anchors where you want your reference box to be for that element. For example you can position your anchors at the biggest size you want the element to be and in the correct position and then use an offset value of 0.9 and 1 ins$$anonymous$$d of 1 and 1.1.
Really using the offsets is just one way of doing it. If you read the RectTransform docs you will discover many more useful variables and methods to help you get the behaviour you want.
The important thing in this answer was the Implementation of the interfaces in order to use the desired functions for each behaviour. What you do within those functions is up to you. Just remember that there is much useful information provided to these Interfaces through BaseEventData and PointerEventData.
Answer by Briksins · May 06, 2016 at 11:32 AM
You need to use custom script, where you detect when button in focus
According to API "Button" Class implements ISelectHandler which has method OnSelect, it should fire off each time when your button selected. Once you capture this event you need to get selected button RectTransform component and scale from there
@Briksins, Okay I understand your custom script concept. but how to detect particular controls focus enter and focus leave?
just updated my response with exact class names, interfaces and method name
Note that some users report that adjusting the scale of a UI element messes with the click detection. Scale using anchors etc.
@Briksins, this one also cool answer, I up voted your answer too.
"No, you dont do like that!
You create 1 script, and apply the same script to each button. on select event it will trigger own instance of the script, you dont even need to care of the button name"