Celadon Qici-h5 mini-game Draw machine 3 effect settings

Source: Internet
Author: User

Now is ready, only owed the East wind, good, we work together, first to Dongfeng East.

Fireworks particle effect

The first to implement our fireworks particle effect, click on our particle and configure it in a way.

Note that at this point we have added white.png as a particle effect.

Here are a few places to watch out for. At the end of the game, I ran the particle effect on my 5-point mobile phone, and it was properly dropped. In terms of optimization, the colortint option has been removed, and no color changes have been made, and it is not necessary to have a color control line underneath color over lifespan. But we now for their own PC to see the cool, or first hook on the time when the elimination is too late.

Our fireworks are one, so adjust the frequency frequency 0, firing angle, scale, starting speed, gravity.

We have a play on awake first tick, and then write the code to turn it off.

Set scale over life span we use a similar sin curve to achieve the feeling of a firework ember.

The setup is complete, let's look at the effect together. It's cool.

For this firework placement, the current scheme is placed in a fixed position, controlled by the program whether ignited, which ignites,

It can also be stored in a preset, dynamically loaded and displayed in the program, loaded into the preset method as follows

Drag our firework to the Prefab folder, save as preset, and wait for the runtime to dynamically create

Adding the Prefab interface to other UI scripts and then associating them with the interface, this section will not be explained in depth.

The firework that becomes preset will change color, so as to remind the programmer which elements are dynamically loaded

Crank Lever

The hand-pull rocker is divided into two parts, namely the animation of the ball and the motion of the bar.

Sphere Tweenposition Animation

We select the sphere in the interface or layout and add a script for the position transform in the property box Tweenposition

The adjustment parameters are as follows. I heard that the more excellent programmers are lazy. So steal the lazy, "set the current value as the starting value." Current value is end value, then adjust the vertical position of the sphere on the interface, and then click the Set as End value update.

On the properties of the node, anchoredy, the mouse hover will become a left and right arrow, hold, drag, like a slider to adjust the value of Y, and can be lazy bar ~

Preview the effect on the interface, um ~ O (* ̄▽ ̄*) o good good, not what I want.

The effect we want is to quickly pull it down and then bounce it back up. So can not meet us adjust the trend line. Double-click to open the trend line.

Be aware of the starting and ending points (0.0) of this curve, and the highest peak (1.0), as the effect is that the sphere is pulled by force and then bounced back to its original position. When the curve is 1, the coordinates mean the maximum, and reverting to 0 means the sphere is back in place. Start and end are in 0, in situ, between the middle to 1, that is, we set the point of to, the curve is a parabola, the more the lower the faster, and then quickly bounce back to the original position.

Turning off auto-save means that the operation cannot be recalled. However, you can right-click on the key to delete.

Preview the effect

Lever Tweenscale

Lever we decided to use a different tween to achieve a similar pull lever effect by scaling the y-axis size.

Let's adjust the pivot point position of the lever, pivot set Y to 1, which means that the entire element is offset by a high

Modify pivot point, move to the bottom of the lever, originally the upper left corner, Pivot Y is 1 in the lower left corner,

Add a Tweenscale script

Through the longitudinal deformation of the opposite direction 60% to achieve our results, while adjusting the motion curve, similar to the motion trajectory of the ball.

Now the trend is the same as the ball.

Take a look at the preview

Scrolling Draw Effect

To achieve the effect of a rolling lottery, we divided into two modules. One is a fast-scrolling module with a ghosting effect.

One is the end of the last prize to the state of whose home.

Fast scrolling

Create an award-winning empty node under Uiroot, then create two graphs below. Fast is this element.

Move the tweenposition for the fast bind location.

Adjust the start and end positions, respectively, beyond our mask area.

Later we change the speed of movement by adjusting the duration movement time.

Preview effect Other No adjustments required

Dynamic Blur

We're falling so fast, we don't have a bit of dynamic blur. We're going to add a shader now. Very simple, to the back of our code will control the blur dynamic fuzzy values, slowly slow down time will become clearer.

Stop bouncing back

Now let's set the final prize result. We gave him a tweenposition, which was not exactly the same as before, and our goal was set in the middle of the screen.

To set the positioning rebound effect, we adjust the motion curve. More fallout from the back can be cooler.

Let's see the effect.

Redemption Button Jitter

We finally show the bonus effect plus a one-off boost click Desire.

Add a Tweenscale, equal to zoom

Preview the effect

Celadon Qici-h5 mini-game Draw machine 3 effect settings

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.