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
0
Question by LordTravolta · May 03, 2016 at 08:17 PM · c#animationspritesanimationsmenu screen

How to make a smart main menu select system?

Hi!

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: https://www.youtube.com/watch?v=Uv_ivloDMnE

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

Thanks anyway :)

Comment
Add comment · Show 4
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 jgodfrey · May 04, 2016 at 01:25 AM 0
Share

It looks like the effect is just a simple tween of a rectangle's size and position between two different UI elements. $$anonymous$$any of the freely available tweening systems on the asset store would provide the features you'd need to do this fairly easily (for instance, HOTween). Otherwise, you can do it completely on your own with a bit more work.

avatar image LordTravolta jgodfrey · May 04, 2016 at 04:52 AM 0
Share

Thanks for your comment.

I'll take a look at this application, although, I don't have any idea how to use this asset store application to fill my needs.

Thanks for the reply anyway :)

avatar image Zoogyburger · May 04, 2016 at 05:01 AM 0
Share

The main menu system shown in the vid you posted was quite cool but I would make make my system like this

https://www.youtube.com/watch?v=QxRAIjXdfFU

This is just a suggestion.

avatar image LordTravolta Zoogyburger · May 04, 2016 at 05:08 AM 0
Share

Hi,

that kind of a menu does not fit in the game's design Im currently working on, but thanks for the suggestion anyways :ˆ)

1 Reply

· Add your reply
  • Sort: 
avatar image
0

Answer by Addyarb · May 04, 2016 at 04:59 AM

alt textHello,

Have a look at:

  • Vector3.Lerp

  • Transform.localScale

  • Rect.size

  • Transform.SetParent

Read through those carefully.

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


UPDATE:

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;
         }
 
     }
 



screen-shot-2016-05-04-at-14558-am.png (97.8 kB)
Comment
Add comment · Show 3 · 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 LordTravolta · May 04, 2016 at 05:13 AM 0
Share

Thanks for your reply.

I'll take a look at those articles, and how those work, but I still have the vibe that I would need a sample of some kind, if you have the time of course.

Appreciate your time for the answer, thank you.

avatar image Addyarb LordTravolta · May 04, 2016 at 05:50 AM 1
Share

I have updated my answer, as well as added a screenshot of the hierarchy in case it gets confusing. Please let me know if you have any questions. I will be happy to help!

avatar image Addyarb · May 04, 2016 at 05:20 AM 1
Share

I always have the time to help those who are willing to learn :)

What you are trying to accomplish is quite simple once you know the fundamentals of what I have linked above. I realize that it is difficult to visualize how all of these classes work together to perform such a smooth effect, but I assure you that it is absolutely achievable in very little time with the right code.

Lets make a deal. I will work on some code in order to demonstrate the concept, and you take the time to learn the fundamental concepts behind them?

I'll post again shortly with the code!

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

178 People are following this question.

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

Related Questions

How to play all the animations array inside animation component 0 Answers

Animation rigging doesnt work until I disable and re-enable Rig Builder 2 Answers

Animation Transition Unity 0 Answers

Animation returns to the initial position 0 Answers

Looking to activate animation when clicking a button 0 Answers


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