Tutorial: Building Fluid Effects Used In Happy Glass

Tutorial: Happy Glass effects with Cocos Creator

One of the developers on our Chinese forums came up with an interesting question. They were playing the big hit of last year, Happy Glass.

The game is straightforward, draw a line and get all the water into the cup. Seems easy at first, but they start to challenge your mind as you move onto the further levels.

The Question

The adhesion effect of water in this game is easy to achieve by using layers in Construct 3. Each water drop is held together with two circular materials: The original blue circle of the water drop and the other is another circle that surrounds the water drop with the same color and is translucent. When several water droplets approach, the edges of the translucent material overlap each other, and the transparency of the original translucent edges drops. By using a shader in the current layer, you can set the alpha threshold so that the part less than the Alpha threshold is treated as transparent, and the amount greater than the alpha threshold is treated as opaque. In this way, a single isolated water droplet has all the translucent edges. It is processed to be completely transparent to represent an isolated water drop. The overlapping edges of several water droplets squeezed together will be processed to be opaque, thus forming the effect of water drop adhesion, representing the pooled water droplets, and simulating water tension. Since Cocos Creator does not have the concept of Layer in Construct 3, it cannot use a Shader for all the picture materials in a layer, so the above method is not applicable. Then the question is-is there any other way for Cocos Creator to achieve the above water effect?

Explanation

When the two translucent circles of a water drop are close, the transparency of the overlapping areas for the translucent circle will decrease. The part that is less than the alpha threshold is treated as still being translucent, and the part greater than the alpha threshold is treated as opaque. In this way, the water drop connection effect can be achieved.

640

It’s a great question! By doing this, developers can start to build their own version of Happy Glass, or use the idea for puzzles in their own game. So how can this be achieved? Luckily a developer in the group had a great answer!

Cocos Creator has a function called ALPHA_TEST that allows developers to read the alpha levels for each image.

WeChat Screenshot_20200929100043

All that is needed is to add an opaque treatment to those who hit the threshold. Call on the shader and do the following:

ALPHA_TEST(o);
o.a = 1.0;

If we do this, we’ll get this effect:

The steps

  1. Make these water droplets sprites use this code on the same level shader.

  2. A new camera is needed, add a camera that specializes in measuring the water drop nodes, put the captured picture in a sprite node, and then process this sprite node with a shader.

  1. Add the code for the alpha threshold check:

const texture = new cc.RenderTexture();
texture.initWithSize(this.sp_water_show.node.width, this.sp_water_show.node.height);
const spriteFrame = new cc.SpriteFrame();
spriteFrame.setTexture(texture);
this.camera_water.targetTexture = texture;
this.sp_water_show.spriteFrame = spriteFrame;

  1. Finally, add physics components to the water drop, arrange some physics nodes in the scene, write a few lines of water drop generation code, and you can see the effect of the water droplets:

Conclusion

For a realtime example, check this fantastic simulation and check the source code from the developer’s console in Chrome.

example

Make sure you are using Cocos Creator 2.2.2 or newer to test for yourself. Thank you to Cocos developer Liquid Fun for the explanation.

10 Likes