The theme of today's tips is - silky
a. Make the touch effect more silky
- nonlinear amplification
I believe everyone, when playing games, there will be a button at the beginning. Put the mouse on it, and the button will change accordingly, such as zooming in. As a beginner, the code of this section may be like this↓
Although it looks good, there is an aesthetic problem. It is too abrupt and makes people feel a sense of disharmony. In fact, we can add a little visual effect, which is to zoom in slowly↓
At this time, the effect is much better, but it has not yet reached the level of silkiness. As shown in the figure, the size of the code is enlarged to 110 and then stops abruptly, just like a brake that stops the enlargement. At this time, nonlinearity is very important. Its The effect is to speed up and then stop slowly, and there will be a silky effect↓↓↓
usage:
- Note the use of the "increment size()" statement
- The code for the added value is (target size - current size) * speed
- The value range of speed v is 0<v<1
Why is there a silky effect? Obviously, the value of increasing the size is getting smaller and smaller every time, and the reason for increasing the value of the size is because this value contains a variable——size, that is to say, this code affects the size, and the change of the size affects the following The size of the time changes, we can list the data↓
| target size | current size | Increase the size this time | speed |
|---|---|---|---|
| 110 | 100 | 2 | 0.2 |
| 110 | 102 | 1.6 | 0.2 |
| 110 | 103.6 | 1.28 | 0.2 |
The "current size" in the chart is getting bigger and bigger, and the "increased size this time" is getting smaller and smaller. In fact, this code will never make the character size reach 110, but it is infinitely close, but the effect is achieved, with a difference of 0.0000000...01 The size doesn't matter.
Some touch effects do not need to be changed in size, but use special effects instead, such as the following code ↓
Valid value range -100~100
We can also use the non-linearity mentioned above to achieve the effect, but there is no current character brightness, then we can create a variable by ourselves, and the final code is shown in the figure below↓
The usage is the same
Non-linearity can be used in transitions and touch effects to make the effect smoother. Try it out.
b. Make the movement smoother
- use the sin function to move
Let's take a cute new work as an example↓
This "new game" character can float up and down. How does it do it? Is it possible to repeat the execution 10 times to increase the y coordinate by 5 and then repeat the execution 5 times to decrease the y coordinate by 5? But that's not smooth enough. Is it nonlinear? Makes sense, but there is a code that is more concise to implement, it is the sin code↓
This code is the least used code in the calculation module, because it is rarely used, but this code can also make the movement of the character smoother (moving up and down).
The sin function is a tangent function, a member of the trigonometric function family. Baidu explains it like this: For any real number x, there is a unique value sinx corresponding to it, and the function established according to this corresponding rule.
All in all, when x is any real number, -1 ≤ sin(x) ≤ 1, the image is as follows:
This image is wavy (if you are interested in this, you can check why on the Internet), so we can do this↓
Note: sin(i * 5) cannot replace sin(i) * 5, where 5 is to make the effect more obvious (that is, the range becomes larger), and the value of i determines the speed.
c. Make the operation smoother
——Determine touch with mouse coordinates
We still take this cute new work as an example↓
Let's still take the character "New Game" as an example, but this time we don't look at its movement, but look at the effect when it is touched. We found that when we touch it, the light turns on, so the code is like this
Is this really the case, but in fact, we put the mouse in the middle of the word, that is, the mouse does not touch it, but it is still bright, is this a bug? In fact, it is not a bug, and this state is logical. As long as the mouse is placed within the specified range, the light will be on, and the operation is more convenient. How do you do it? In fact, just change the judgment condition to this
Is it very simple, but pay attention to a few points:
- Note the addition of the absolute value (abs) code
- The value range inside is the width/height of this shape divided by 2 and a little bigger