This article was first published on the WeChat public account [Little Ant Teaches You to Make Games], welcome to follow and learn more original tutorials for game development.
Hi! Hi everyone, I'm Little Ant.
This is a very beautiful WeChat mini game I made before, you can give it to adapt, and then make a small game yourself to give to the person you want to give.
I found that this article can be posted at least four times a year, once on Valentine's Day, once on Goddess' Day, once in 520, once on Tanabata [insidious].
This year I've improved a little bit and added a background song, which is the classic "Cannon" piano piece, I hope you like it.
Forgot to prepare a gift, or is there always nothing new? Then come and try it yourself!
Today is a beautiful day, so Little Ant decided to teach everyone to make a warm and beautiful "Cherry Blossom Falling Simulator" mini game with the WeChat mini game maker tool, and then give it to the loved ones.
Let's take a look at the final renderings first.
Watch the cherry blossoms slowly fall, and then unconsciously it is drizzling. Because it was raining lightly in my city today, I added a drizzle function to this small app.
Let's learn how to implement such a warm little program.
Let's start by preparing the material. A pink background, two cherry blossom petals, a rectangle that simulates raindrops, and two words to show.
Next we will add two behaviors to the cherry blossom petals: flipping and rotating. Used to simulate the feeling of falling petals.
Select Sakura Petal-1 in Hierarchy Management, and then select Manage Behavior in the Layer Properties area.
Turn on Flip and Rotate in the Manage Behaviors panel.
Tip: You'll see a lot of all kinds of behaviors that have been done and can be used directly.
When behavior is turned on, two changes occur:
- A new Behavior Block appears under the Behaviors module in the Block area. You can see that there are new blocks to control "Flip" and blocks to control "Rotate".
- A number of new control parameters for "Flip" and "Rotation" have been added under the "Manage Behavior" button in the graphical properties area.
Next, we need to add two local variables to the cherry blossom petals.
These two variables are used to record the offset in the X and Y directions as the petals fall (more on this later).
Below, we take a look at the logical building blocks of falling cherry blossoms.
The first half is very simple, after the scene starts, you start to create petals continuously, here a random building block is used to increase randomness, every 1~1.5 time, clone a petal. When the petals float off the screen, we should remove them.
Then look at the second half.
The overall logic is not complicated, mainly set a variety of random values, random size, random transparency, random movement position, random flip and rotation. Because there are many factors that affect how cherry blossoms fall, including: gravity, air resistance, gravity, wind, etc., it can be said that it is a completely random process. We can't do a full realistic simulation, just add some random values to make it look good. The cherry blossoms fall to the lower right as a whole, because cherry blossoms usually fall with a breeze, so here I pretend to have a wind blowing to the right.
In this way, the fall of the cherry blossoms is complete. You can try tweaking the various random values and see how it goes.
Next, let's take a look at how to increase the drizzle showers.
The rain does not start to fall as soon as the app is opened, but will randomly interval a period of time, the next burst, and then randomly interval a period of time and then the next burst, much like a mysterious shower.
To achieve this random shower function, first, we first select "raindrop" and add a local variable of "rain timer" to it, which is used to determine when the next rain will come.
Next, add the following logic to "raindrop".
Here, we compare the "global timer" with the local variable "rain timer" with the random value set to determine when it starts raining. And after each rain, the interval between the next rain will be set randomly.
Note that there is a "global timer" block here, the main function is to record the time of the game, that is, the moment you open the game, the "global timer" starts to record the time.
The function of the "global timer zero" building block is to reset the time recorded in the "global timer" to zero.
Finally, look at the logic of rain.
Similar to cherry blossom falling, but here it is much simpler, there is no need to flip and rotate, raindrops only need to fall vertically.
For the text displayed in the scene, you only need to hide it after opening it, and then slowly display it after 2 seconds.
Finally, take a look at the results!
After opening, slowly display the first sentence.
After a while, a light rain starts and slowly displays the second sentence.
Finally, these two warm words are also sent to you.
Watch the cherry blossoms fall, and never forget the beauty of life.
Rain is inevitable in life, but it will always pass.
--- little ants
How to get the open source link of the project: Follow the little ants, send a private message "Cherry Blossom Falling", and get the open source link of the project.