Buttons to achieve various effects and functions. Reading this article is enough

Buttons are a very common component in games , It contains various forms and functions , Today, in this article, I will summarize the buttons with different click effects , And some implementation methods of buttons with different trigger conditions .

In game design, there is a noun called “ feedback ”, It generally refers to when the player is playing the game , Some of the things that games give players , For example, it is common to click a button , The button changes color , Or zoom , Or play sound effects and so on . All in all , No matter what the player does in the game , Games should give players a reasonable feedback . Let the player know what the result of his operation is .

A game with reasonable feedback must also be accompanied by a good user experience . We often click various buttons in the game , therefore , For a button , It is important to have feedback after clicking .

First , We use the various behaviors provided by the small game development tools , To implement several buttons with different momentum .

The shaking button

We use a container to represent a button , The container contains two parts , One is the text displayed by the button , One is a picture of a button .

Choose “ Dither button ” Containers , Add a “ shake ” act .

Set the parameters of jitter behavior .

Last , Add button click logic to the dither button container .

Very simple , When the button is clicked , Let's just shake it .

Such a button that triggers jitter when clicking is done ！

Pop up button

Next , We make a pop-up button , Same as the dither button , We also create a new container for the pop-up button , Then add a “ eject ” Behavior .

Set the properties of the pop-up behavior .

Last , Add button click logic to the pop-up button container .

A pop-up button is complete ！

Flip button

Similarly, create a “ Rollover Button ” The container of , Add a “ Flip ” Behavior .

Adjust the properties of the flip behavior .

Add flip logic blocks .

A button that can be flipped by clicking comes out ！

Rotating button

Create a “ Turn the button ” The container of , Add a “ rotate ” Behavior .

Adjust the properties of the rotation behavior .

Add rotation logic blocks .

The rotating blocks here are still used “ Flip ” Named after the , This is probably the negligence of the tool developer ！

Preview the buttons that can be rotated . The rotation effect is more suitable for square or circular buttons .

The above is what we can directly use the tools to provide “ Behavior ” The effect of different button clicks . You can see that each behavior has different parameters , You can adjust the parameters , To achieve the desired behavior effect .

Next, let's talk about how to use “ A moving button ” To attract the player's attention .

In one page , If you want users to pay extra attention to a certain part , There are usually three different approaches . The first is through layout and occupied area , Make the part that needs attention at the top of the screen as much as possible （ Open any page , People are used to looking down from the top ）, The occupied area shall be as large as possible . Another way is through color matching , To highlight the color of an area , To draw attention to . besides , Another way is to focus on the areas that need attention “ move ”. Imagine in a static page , If there is only one button beating , Then it's hard not to notice it .

Below we will implement several different “ move ” Button for the effect of , And introduce their uses .

Button that keeps zooming

First , Create a button container , Then add the following logic .

Preview the effect of the button .

This button is more suitable for the revival scene in the game , Click the button to revive , Similar to cardiac pacing , To guide the player to perform the resurrection operation .

delicate 1010 The resurrection button in , This effect is used , In addition, it is matched with the countdown of resurrection , It can guide players to perform resurrection operation .

in addition , After the game , If the player refreshes his highest score , The same also makes “ Share ” The button moves , Let players notice , This is more likely to generate sharing operations .

Floating up and down prompt button

alike , First create a button container , Then add the following logic .

Preview the effect .

Here I use the up and down float , You can achieve the floating effect in all directions according to your needs .

This effect is more suitable for the places that need prompt in the game , It is often used in novice tutorials , To tell players to click here or click there .

In refinement 1010 in , I used this effect to prompt players to use props . It can be seen that it is also used together with the countdown , Give players enough time to react and judge .

in addition , The button effect realized by using four different behaviors mentioned above , It can also be used to implement various “ move ” Button effect , For example, it can be rotated at intervals , Flip or zoom, and so on , The specific implementation logic is similar , We can according to the actual situation of the game , Choose different button effects as appropriate .

Last , Let's talk about the implementation of several buttons with different trigger conditions .

Current tools have provided us with 5 There are different trigger conditions , I won't go into details here .

Long press the triggered button

First , Let's implement the function of long press button trigger , For example, long press the button 1 Seconds before triggering .

First create a button , Then set two local variables for it .

“ Trigger time ” Used to control how long after the button is pressed and held ,“ Starting time ” It is used to record the time when the button is clicked .

next , Take a look at the implementation logic of the button .

Here are two building blocks that need to be explained .

Global timer ： From the beginning of the game , This timer starts recording the time of the game , We can use it to get the total time of the game , Its unit is in seconds .

Stop other events of the current wizard ： The function of this building block is to forcibly terminate the operation of an event . For example, our press event is waiting for the trigger time , At this time, if you call “ Stop the event ” Building blocks , You can forcibly terminate the logic in the press event , That is to say, our press event will not continue to wait , Will not eventually trigger .

Understand these two building blocks , The logic of the game is easy to understand , When pressed , First record the start time , Then go and constantly judge whether the current time has exceeded “ Trigger time ”, More than , Execute the trigger logic （ Here, the button turns red as a trigger ）. If you let go while waiting , Then forcibly terminate the pressed logic , The button has no chance to be triggered .

preview , Take a look at the effect of long pressing the button .

Long press the button 1 Seconds later , The button turns red .

Press and hold the button triggered at a certain time interval

Next , We implement a button that is triggered at a certain time interval after being pressed and held .

First, create two local variables that you need to use .

“ Starting time ” Used to record the start time of each cycle ,“ Time interval between ” Used to set the trigger interval .

Then let's look at the specific logic .

Logic is similar to long press trigger , We express the logic trigger by setting the number to increase .

Click preview to see the effect .

Press and hold the button without interval 0.2 Second trigger once .

In shooting games, different weapons usually have different shooting speeds , We can set the trigger interval according to the firing speed of the weapon , Different weapons have different firing rates .

I don't know if you found out , Whether it's “ Long press trigger ” still “ Long press interval to trigger ”, I use both “ Press down ” and “ Let go of ” event , Instead of using “ Hold down ” event , Why is that ？ Leave a little question , You can try to use “ Hold down ” Events perform the same function .

Press and hold the drag button

Last , Let's implement a button that can be pressed and dragged . First create a variable . Used to record whether the current button is pressed and held .

then , Implement the logic .

The logic is very simple ,“ Pressed ” The variable is used to identify whether it is currently held down , If pressed , Let's set the position of the button to the position of the finger .

Preview the effect .

I still don't use in the drag and drop implementation “ Hold down ” event , In fact, it can be through “ Hold down ” Event to set the position of the button .

You can try it in “ Hold down ” Set the position in the event , Then preview the game , Press and hold the button to quickly drag , After trying, you can understand why you are not here “ Hold down ” Event processing logic .

To sum up , In this article, we talked about various buttons . We can use various behaviors provided by the tool to quickly achieve different button click effects , It can also be done through “ A moving button ” To guide players to pay attention to some parts of the interface . Last , We talked about the implementation of some buttons triggered under different conditions .

I hope this article can help you understand various buttons and their application scenarios and implementation methods . You can choose different buttons to use according to the actual situation of your game and the purpose you want to achieve .