How to make a smart main menu select system?


Im looking for a smart main menu select system for my prototype.
The ideal select system would look something like Phil Fish created in Fez - that small white line around the transparent button. When pressing down, the white thingy goes down and fills the new buttons corners.

Its shown in this video here: Fez - Main Menu System - YouTube

I’ll provide more info later. And btw, if you try to give me some codes examples PLEASE WRITE THEM IN C#

Thanks anyway :slight_smile:


Have a look at:

Read through those carefully.

If you still have questions on how to use any/all of those, please post in a comment below.


Before reading this, please find yourself a transparent ‘frame’ texture. You can make one yourself by opening up your favorite editor that supports transparency, creating a box, and then deleting the inside of said box. Be sure to crop the image to the outside of the box. Additionally, when you import the sprite, you should click it and to the right in the inspector, select ‘(Sprite 2D & UI)’ from the dropdown menu. Then, click ‘Sprite Editor’ and add the number ‘10’ in each field for the ‘Border’ values. Don’t forget to click ‘Apply’ in the top right corner, or your changes won’t take effect! Then, create a new image, place it into your canvas, and set the image type (dropdown on the image component) to ‘slice.’ This will stretch the image without distorting it.

Here are 5 (powerful) lines of code that will achieve the effect you’re looking for.

Please read the script’s comments, and also remember that you can use Time.deltaTime * speed (set 'speed as a public float in your variable definitions up at the top of your script!) to increase the rate at which the rectangle moves/scales.

using UnityEngine;

public class Outline_Controller : MonoBehaviour
	public RectTransform transparentBoxOutline, target;

	void Update()
		MoveAndScale(); //Self explanatory
	void MoveAndScale()
		transparentBoxOutline.SetParent(target); //Set the box outline parent to its target
		//Lerp can be replaced with 'MoveTowards' for a more consistent effect!
		transparentBoxOutline.sizeDelta = Vector2.Lerp(transparentBoxOutline.sizeDelta, target.sizeDelta, Time.deltaTime);
		transparentBoxOutline.position = Vector2.Lerp(transparentBoxOutline.position, target.position, Time.deltaTime);

	//This method is called via a Button OnClick *OR* an EventTrigger component (try OnMouseClick!)
	//Simply add the component to the menu item, add an 'EventTrigger component, select 'Add Event',
	//Click 'OnMouseClick', and then drag the GUI Manager (or whatever object this script is on) into
	//The Object area of the EventTrigger component. Then from the DropDown, select Outline_Controller
	//And then 'Set Target'. From there, click and drag the menu item into the field that pops up
	//Next to the Outline_Controller script. That's it! Now our text calls the following function when cliked:

	public void SetTarget(RectTransform targetToSet)
		target = targetToSet;