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 makertoo · Nov 02, 2015 at 03:46 PM · unity 5canvastransition

Transition between menu screens in Unity 5 (Canvas)

Hello everybody, I'm working on a general menu game Unity 5). I have my first screen. I have two panels inside my canvas and I want to implement my screen transition.

alt text

What is the best way to do it? Do anybody have a simple (even the simpliest) exemple with a transition between 2 screens or a clear tutorial (I've found many youtube videos but I don't know what will be the best)? Thanks in advance.

menu1.png (208.5 kB)
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

1 Reply

· Add your reply
  • Sort: 
avatar image
4

Answer by Statement · Nov 02, 2015 at 04:29 PM

Create an animation controller for your UI with animation clips to do the transitions you wish to have.

Animation Manual
Animation Tutorials

I don't know what effect you are looking for.

Below are steps to make a simple animation between two positions using triggers. At the end you'll have two buttons that hide and show a panel with animations.

To get started with anything, setup a canvas and create an empty game object child to represent your panel. Add an Animator component to the panel. Create a new Animation Controller from the Assets menu. Call it MyTransition or something. Double click MyTransition to view the Animator Window and flow diagram for the controller. Add two Trigger Parameters called "Show" and "Hide". Parameters are found at the top left corner of the Animator Window. Select your panel from the hierarchy and set the controller of the animator to MyTransition.

Open the Animation Window (not Animator Window) and make sure you've selected the panel. On the right panel of this window you can create a new clip. Do so. Save it somewhere and name it "Show.anim". Here you can define an entire animation, but we'll keep it simple and just record the current position of the panel, so add a Property for Rect/Anchored Position and then add a keyframe. Then create another clip from the dropdown above the properties, call it "Hide.anim". Drag the panel where you want it to be when it's hidden while in record mode (you're in it by default). This will create a keyframe for you automatically. Now you have two animation clips which basically is just two recorded positions. They can be more advanced, but this is the minimum. Close the animation window or at least turn recording off.

At this point you have 2 animation clips, 1 animation controller with 2 triggers and one animator.

Double click MyTransition again to view it. You should now have the boxes "Entry", "Exit", "Any State", "Show" and "Hide". Show and Hide are your two animation clips. Entry, Exit and Any State are flow nodes.

Right click the "Any State" and make a transition to animation clip Show. Select the white transition arrow and view the contents in the inspector. Scroll down to Conditions and add a Condition: Show (this is your trigger).

Now, right click the "Any State" and make a transition to the animation clip Hide. Select the white transition arrow and view the contents in the inspector. Scroll down to conditions and add a condition: Hide (this is your trigger).

Ok, that is animation set up. To play either of the animations, call animator.SetTrigger("Hide") or animator.SetTrigger("Show"). To make a quick test, add two ui buttons for hiding and showing the panel. On Click for the hide button, add the panel, then select Animator.SetTrigger function and input "Hide" in the parameter field. Do the same for the other button but input "Show" instead of hide.

Add an image or whatever to your panel, hit playmode and click the buttons. The panel should now be moving back and forth when you click the button. You can improve the animations and animate other properties as well, if you want. Learn Animation and Animator window, so you get a complete picture of options available to you, like animation events for example.

Comment
Add comment · Show 2 · 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 makertoo · Nov 03, 2015 at 10:43 AM 0
Share

Thank you for your reply, its very detailed. However, I'm working with Canvas and Panels. $$anonymous$$y first (and probably the main) goal is just, at first, to have this: $$anonymous$$enu 1 with "Load"> Click on de "Load"-> $$anonymous$$enu 2. I want to do this with the new canvas system. I've tried to switch positions, change the lookAt of my main camera but it doesn't work.

avatar image Statement makertoo · Nov 03, 2015 at 01:26 PM 1
Share

However, I'm working with Canvas and Panels

Ok.

To get started with anything, setup a canvas and create an empty game object child to represent your panel

Isn't that kinda what I said?

I've tried to switch positions, change the lookAt of my main camera but it doesn't work.

If you want to animate the camera, then animate the camera ins$$anonymous$$d of the panel.

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

4 People are following this question.

avatar image avatar image avatar image avatar image

Related Questions

How to make a smooth transition between two servers ? (UNET, NetworkManager) 0 Answers

UI Background Bug 0 Answers

Multiple Canvases visual overlap issue 2 Answers

Rotating multiple images continuously (2D) - Mobile performance/optimizations 2 Answers

Canvas scaler issues (not scaling properly) 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