In the Canvas game, for this scenario, the most optimized solution is actually used, because whether it rains or not is not the key to the game, and we are not a game engine, so we generally do this, from simple to complex:
Use other tools, such as PS and AE, to let the artist draw a full-screen rain animation picture (note that it is full-screen), and then export the animation into a 1-frame-1 PNG picture Use the animation control to draw to In the current scene, just play it frame by frame
Use particle system to generate, but particles consume more CPU. Unless used on some key objects, it is really meaningless for this icing on the cake effect
For 3D games, such as Asphalt, water drop engines will be specially developed (or purchased) to allow water droplets to have natural effects such as rebound and fusion. Of course, textures can also be used, only under the screen surface, not within the scene.
2D games are generally option 1
So for a scene like the one mentioned by the questioner, it should be stickers, one by one, which is also very efficient. Anyway, the performance of raindrops looping is also reasonable.
Particle effect Each raindrop is a particle, and the particles contain static pictures or several frames of animation. Each particle has its own coordinates, 2-dimensional speed, and life cycle. Change coordinates and animation frames as time changes, which is the following Rain effect
Of course, when you go down to the bottom of the screen, you can re-randomize the coordinates and speed and put them in from the top of the screen.
Make a drop of water falling and moving animation, then cycle the width and height of the entire screen, and generate this animation at random coordinate points
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
In the Canvas game, for this scenario, the most optimized solution is actually used, because whether it rains or not is not the key to the game, and we are not a game engine, so we generally do this, from simple to complex:
Use other tools, such as PS and AE, to let the artist draw a full-screen rain animation picture (note that it is full-screen), and then export the animation into a 1-frame-1 PNG picture
Use the animation control to draw to In the current scene, just play it frame by frame
Use particle system to generate, but particles consume more CPU. Unless used on some key objects, it is really meaningless for this icing on the cake effect
For 3D games, such as Asphalt, water drop engines will be specially developed (or purchased) to allow water droplets to have natural effects such as rebound and fusion. Of course, textures can also be used, only under the screen surface, not within the scene.
2D games are generally option 1
So for a scene like the one mentioned by the questioner, it should be stickers, one by one, which is also very efficient. Anyway, the performance of raindrops looping is also reasonable.
If there is a game engine, it should use particles.
Use png to make a partial rain picture, and then control the picture effect with code, test it yourself
Particle effect
Each raindrop is a particle, and the particles contain static pictures or several frames of animation.
Each particle has its own coordinates, 2-dimensional speed, and life cycle.
Change coordinates and animation frames as time changes, which is the following Rain effect
Of course, when you go down to the bottom of the screen, you can re-randomize the coordinates and speed and put them in from the top of the screen.
There is a snowflake effect here, you can study the source code
https://github.com/jinatonic/...
Do it with svg. Please refer to Baidu for details
Make a drop of water falling and moving animation, then cycle the width and height of the entire screen, and generate this animation at random coordinate points