Ngui official website Example 3-menu

Ngui official website Example 3 -- menu The ngui sample creation process was made again by referring to the ngui example to deepen the understanding of ngui usage. (It is recommended that you first read the basic tutorial on the official website, and then read this post after you have a preliminary understanding of ngui .) This post requires the content I wrote earlier. please familiarize yourself with the previous practices before reading this post. Haha Example3-Menu The final result is that the label text in the window has a typing effect. When you press the Options button, the two windows will switch back and forth ,: Image: 1.png 1. follow the steps in the previous three posts to create a basic advanced3d UI, rename the Panel as panel-Main, and add an empty game object to it, name it window. The empty window object in the reset is as follows ,: Image: 2.png Next, the previous ngui official website Example 2-interaction-explains the process to create the window interface (this is a bit lazy, but the steps are the same as those of the above Forum, so some are omitted, and add a limited number of pictures on a post, so try to save pictures, here give address http://game.ceeger.com/forum/read.php? Tid = 4179 ),: Image: 3.png At the same time, add a typewritereffect component to the text label in panel-Main to achieve the typing effect in one step. Click "run" to try it out. Is it handsome! Image: 12.png Copy a panel-Main and rename it panel-option. Adjust the elements and use the create a new widget to add the drag bar, checkbox, and drop-down menu. Let's talk about how to create the drop-down menu. This step is the same as adding other widgets, but in the parameters, you can use the option parameter in this component to set the content of the drop-down menu, the picture on the left, difficulty is just an empty game object, which includes a self-created label and a popuplist. Four options are set in the options parameter on the left, the color of this option is enclosed in the arc ,: Image: 4.png Last Effect of panel-option ,: Image: 5.png After the settings are complete, set the Z axis value of the Panel-option to 1400, and disable its enable ,: Image: 6.png Next, add a Sprite background and a label on the left to create the window interface based on the previous ngui official website Example 2-interaction, but the steps are the same as the above Forum, so also omitted some, and add a limited number of pictures on a post, so try to save pictures, here to give http://game.ceeger.com/forum/read.php? Tid = 4179 ) Final effect: Image: 7.png In panel-option, add an animation component (component-> miscellaneous-> Animation), and set the animation variable to the window-back animation and the window-forward animation (click the smallest circle on the rightmost side of the variable to display the window on the left ). Turn off automatically ,: Image: 8.png In the same way, add an animation component (component-> miscell aneous-> animation) in panel-Main ), set window-back and window-forward animations in the animation variable ,: Image: 9.png Select the button-Option Button and add two (Component> ngui> interaction> button play animation in the menu) to it. In the first component, set target to panel-options (animation) and drag panel-options to it. Clip name indicates window-back, this is the key (remember to set two animations for both windows, which is used to play an animation, as long as the animation name is correct ). Trigger is onclick, playdirection is reverse (the animation is played in reverse mode ), If disabled on play is set to enablethenplay (the Enable of the controlled object opens and starts playing the object added to this object), disable when finished is disableafterforward (after the current playback is complete, disable the Enable of an object. In another component, set target to panel-Main (the animation object to be controlled) and trigger to on click (the animation is triggered when the object is clicked ), clip name input window-forward, which is the key. If Disabled on player is enablethenplay, and disable when finished is disableafterforward. : Image: 13.png Select the button-done in panel-option and add two (component-> ngui-> interaction-> button play animation in the menu) to the button-done and set the following parameters:: Image: 14.png This is a success! Click Run. To sum up the above three posts, we can imagine that it is very convenient to use ngui to create a dynamic GUI, and the process of adding various widgets is similar. At the same time, you only need to add a uibutton playanimation component for a button, and then set this component to control the animation that has been added to the animation component, these animations can be produced using unity curves or programming or third-party software. It also supports forward and reverse playback and can control the Enable of the target. The National Day Mid-Autumn Festival is approaching. It is estimated that the two days will not be updated. I wish you a happy Mid-Autumn Festival and National Day! (Zhejiang media college-New Media College-digital game design major-Zhang Sir)

Image: 10.png