Make buttons (button)

The central role of the button

1. The button can receive the Click and trigger the response event.

2. When the button is clicked, multiple response events can be triggered simultaneously.

3. Buttons can have different performance of normal, hover, click, disable and so on multiple states.

4. Broadly speaking, the core of the button is to receive events, anything that can receive user action events can be called buttons.

Create button

1. Create a Sprite, this sprite will be the shape of the button.

2. Select the sprite you created, and then select Ngui->attach->collider in the Unity top menu.

3. Select the sprite you created, and then select Ngui->attach->buttonscript in the Unity top menu.

You can use a label, texture, and other controls instead of a sprite to make a button, exactly the same way.

If you need to write text on the created button, for example, "OK", "Cancel", and so on, just select this button, then create a label underneath it and write "OK", note that the label depth is higher than the depth of the button, so that a "OK" button is completed.

Tips to create a sprite remember to click Snap, let it return to the original size, and then adjust its size proportionally, so as to minimize the deformation of the picture.

Core Components Boxcollider

Boxcollider is a house component, which is exactly an object collision box, all the UI that needs to receive external input events (such as click, drag, etc.) needs to have a boxcollider, which Boxcollider represents the range of response events. If there is no boxcollider, then the control cannot receive external events anyway, which is a Ngui principle.

Since Boxcollider represents the response range for receiving events, if you set the Boxcollider size of a button to full, clicking anywhere on the screen is equivalent to clicking the button.

You can automatically generate a boxcollider by using the Attach method, or you can manually attach a boxcollider by clicking AddComponent in the Inspector panel. The difference is: through the Ngui menu attach the Boxcollider of the large downhill, will automatically just surround the scope of the control, and manually created Boxcollider, the size needs to be manually adjusted.

The bounding box of the boxcollider is a green box. As long as you expand the Boxcollider component in the Inspector panel, you will see the green box, which will not appear if the Settings menu for the Boxcollider component in the Inspector panel is closed.

Boxcollider settings:

1.Is Trigger

Whether or not to turn on the trigger, this setting is not useful for Ngui, it is open to trigger events (such as collisions and explosions) through physical collisions.

2.Material

Material setting, which is a physical material, is not useful for Ngui, it is to set a physical surface for the object surrounded by the collision box, for example, a piece of ground grass, wood, or metal.

3.Center

The offset of the center position. Boxcollider has a central point where the center is the offset from the center point of the control, which is a relative amount, so it's important to note that this center of Boxcollider is affected by the pivot Center point setting of the control itself.

4.Size

Size setting. Often used in conjunction with the Center settings to invoke the size and position of the control's response area. For example, to make a mobile phone game, there is a small close button on the screen, often causing the player to point not to it, you can rely on setting size to make its response area larger, so that the player just click to the area around the Close button, can trigger the Close button response time. It is important to note that the z-axis of size here is almost useless in the UI, and the values for x and y are in pixels.

It is important to note that Boxcollider generally relies on a non-empty, material object, for example, if the Boxcollider object has no controls (Sprite, Label, texture, etc.), there is only one boxcollider, So in most cases, this boxcollider is not able to receive events.

Core Component UI Button

The first thing to make clear is that the UI button is not a required component of a button, that is, a button can be completed without a UI button. As long as there is boxcollider on this button, you can trigger a response event through the event listener functions such as onclick (), Onhover () in the script.

The UI button has some important uses:

1. You can set the colors in different states.

2. You can set a picture in a different state.

3. It is easy to dynamically assign response times and distribute events. That is, you can temporarily animate the B button to have one or more completely different response events in a script on object A.

Settings for the UI button:

1.TweenTarget

The animation target, which defaults to the button itself. The buttons are animated when they change color when hovering over the cursor, when they are clicked, and so on. In most cases, this setting needs to be set to itself (the default is the button itself).

2.DragOver

Drag the End event, default to do nothing. Here are two options: donothing and press. This option is available because when the button is dragged, there is an intersection of events: if you drag a button, it is not only dragged, but it is also pressed. The purpose of this setting is to define whether the press event is also executed after the end of the drag.

3.Transition

Transition time. This is the time of the animation transition. For example, setting a button when the mouse cursor is out of date, to darken, this setting is to set it at the time the cursor is slipping from normal to black.

4.Colors Module

Here is the color and transparency of the buttons that change color and can be set in different states. A total of 4 states can be set: The normal state, the state that the button is left out of the mouse cursor, the state that the button is pressed, the button is not clicked (Boxcollider is disabled).

5.Sprites Module

Here is the wizard settings module. It is worth noting that if the Make button is made from time to time using a sprite control, then there will be no such module.

Here you can set the button to display what kind of picture in different states. Total Support 4 State: normal state, the state of the button is the mouse cursor, the state of the button is pressed, the button is not clicked (Boxcollider is disabled) state.

When a button is made from a sprite, the created sprite appears by default in the normal settings, and then any state, the button picture is the sprite will not change.

If you want the button to change in different states, you can set the sprite to display each state individually, and set the button to click the state name, which pops up a preview of all the Sprites in the gallery (the Atlas is the set of sprites to which the normal state displays).

If you want to suppress the wizard's settings in one state, you can click the small minus sign after that state. However, the normal state of the wizard can not be canceled, when the other state does not set the wizard, will default to show the normal state of the wizard.

Pixelsnap is to maintain the original pixel size, when the different state is set to display the various sprites, only check this box, it will show the different sprites are displayed in the original pixel size. If unchecked, the sprite in all states will be uniformly displayed with the size of the button control (the sprite used to make the button).

6.OnClick

This is where you set the button to respond to the Click event. The following actions can be used when setting the button response event.

Drag the object that contains the event function that the button responds to into Notify, and the object's name will appear in the Notify Settings box, and the public function in all scripts under that object will appear automatically, then select the function that you want the button to respond to.

In other words, here you can have the button respond to any of the objects, any one of the scripts, any of the public functions.

In this case, when you set the first response event, the second response event is automatically ejected, that is, the setting here allows the button to be clicked to respond to any number of events.

Make a zoom animation of a button

If you want to click the button, the button will have a zoom animation, you can click AddComponent, select Ngui->interaction, find the Buttonscale script inside, attached to the button object.

The core function of Buttonscale is to control the zoom animation of the button, its settings:

1.Script

This is the script that it calls, and we don't have to, it will be positioned automatically.

2.TweenTarget

This is the object of animation that it controls, and we don't have to. At run time, it is automatically set to the button object that currently belongs.

3.Hover

The size of the button control changes when the mouse cursor is over.

4.Pressed

The size of the button control changes when the button is pressed.

5.Duration

The time, in seconds, that the animation is scaled to complete by default of 0.2 seconds.

It is important to note that this component is generally used only for buttons.

Offset animation for making buttons

If you want the button to have an offset animation, for example, when you click the button, the button jumps to the right, making an offset animation for the button. Select Ngui->interaction->buttonoffset and attach to the button.

Settings for Buttonoffset:

1.Hover

The button is offset from the position where the mouse cursor is slipping, and the relative coordinates are offset here.

2.Pressed

The button is offset when pressed, and here is the relative coordinate.

3.Duration

Duration.

Rotate animation for making buttons

If you want the button to rotate when it is clicked, you can make a rotation animation for the button and select Ngui->interaction->buttonrotation.

Add button click Sound

In AddComponent, select Ngui->interaction->playsound to attach to the button.

Settings for PlaySound:

1.AudioClicp

The sound source file, drag the sound file here.

2.Trigger

Trigger mode, that is, under what circumstances the pronunciation effect, the default is the onclick. The following modes are given: OnClick (click), OnMouseOver (mouse cursor up), onmouseout (mouse cursor off trigger), onpress (press trigger), Onrelease (release trigger), custom (customized trigger, That is, the script controls the trigger).

3.Volume

The volume size is a floating-point number between 0 and 1.

4.Pitch

Pitch, also a floating-point number from 0 to 1.

Make buttons (button)