Building a Bamboo Cicada Toy Sim in Cocos with Physics Joints

Insert image description here

Introduction

Hello everyone, I am Yiyuan Programmer, a lead programmer with 8 years of experience in the game industry.

I wonder if you've noticed recently that a toy called Bamboo Cicada has become popular. Did you play with one when you were a kid?

Bamboo Cicada, image from the internet

Looking back, it was a little gadget you could buy for a few bucks at a roadside stall. It was loud and noisy, and adults would often confiscate it before long.

Nowadays, finding a physical one isn't so easy anymore.

So, I decided to make one using Cocos. At the same time, give a man a fish and you feed him for a day; teach a man to fish and you feed him for a lifetime. In this issue, let's look together at how to implement a Bamboo Cicada mini-game in Cocos. Once you've learned it, remember to give a free little red heart, thank you everyone!

Note, this issue does not discuss the story behind the Bamboo Cicada, only how to quickly make a Bamboo Cicada mini-game, for learning and reference only.

1. Pre-Battle Preparations

Sharpening your axe won't delay your work of cutting wood. Make full preparations before the actual battle:

1. Download Cocos

Open the official website, we directly click download:

Click

After jumping, click download again to complete the download and installation of CocosDashboard.

Click click

2. Install the Editor

Open CocosDashboard, click Install -> Install Editor -> Choose our suitable engine version -> Here we choose 3.8.7:

Click click click

3. Create a New Project

After the editor is installed, we create a new 2D empty project named zhuzhiliao:

Click click click click

4. Prepare Assets

All game assets in this issue are generated by AI, please be discerning.

We find a partner to generate the two most critical components of the Bamboo Cicada (the bamboo stick and the cicada) and the background, and place them in the project's textures directory:

The directory is self-created

2. Scene Editing

1. UI Assembly

First, drag all our images under the Canvas:

Yes, just drag them directly with the mouse

Then, simply adjust the position of each image:

You should be proficient with the QWER keys, right? W is for move, E is for rotate

That's simple, anything else?

2. Add Components

Next, add collider and rigidbody components to the bamboo stick and the cicada respectively, and adjust the corresponding parameters according to your preference:

Of course, you can also copy the parameters

For those who don't know how to add them, just click the Add Component button at the bottom of the panel, search in the pop-up box, and select to add:

Very detailed, step-by-step

After adding, click the play button at the top to see the effect (Why does the cicada run away?):

Because the rigidbody types are different, the cicada will fall

So what to do?

3. Add Constraints

To prevent the cicada from running away, we need to add a constraint to it. Here we use a distance joint DistanceJoint2D.

Key point, this will be on the test. Commonly used for making ropes

Remember to also adjust the two anchor points of the joint to the correct positions:

You can think of them as the rope's tie points

Run it again, and you can see the cicada is constrained:

Haha, can't run away now, can you?

Isn't something missing? That's right, the rope!

3. Drawing the Rope

1. Create a New Script

In the Asset Manager, right-click the scripts directory and create a new script:

The directory is self-created

2. Edit the Script

Open the script with a script editor, add several properties at the top, and add the commonly used line-drawing component Graphics in the OnLoad method:

If you don't have a script editor, you can use Notepad

Then, simply and crudely draw the line in the update method:

No comments, just code along

3. Add the Script

To add a custom script, we can similarly just drag it up from below and set the specified properties:

One word: drag

4. Check the Effect

After running again, you can see the rope!

Those who see this have beaten 80% of the others

4. Interaction

The key interaction of the Bamboo Cicada toy is swinging. By swinging the bamboo stick, the cicada spins. Let's take a look together below.

1. Click Events

In the OnEnable method, add the four commonly used click events and their corresponding implementations:

The Four Heavenly Kings

2. Principle

The principle is actually very simple. Because we are using Cocos's built-in physics system, we only need to interact with the bamboo stick, and leave the rest of the cicada-swinging to the system. Those who want to know more can look through the official documentation.

3. Effect Demonstration

Complete the above processing to get the effect shown at the beginning of the article:

Insert image description here

5. Going Further

Those who have read this far should have noticed that two souls are still missing. Due to space constraints, I'll just briefly describe them, and you can supplement them yourselves:

1. Sound: The cicada should make a sound when it spins, which can be implemented through the AudioSource component.
2. Physical Control: The actual battle involved swinging the cicada by pressing the screen. To truly simulate the toy, you also need to support swinging the phone to swing the cicada, which can be done through the device gravity sensor event Input.EventType.DEVICEMOTION.

Conclusion

Have you all learned it? (To avoid some unnecessary trouble, the original project is not provided in this issue; it's all in the article.)

Where can you learn such clear and detailed game development thinking? Follow me, and keep up with my pace!

I am "Yiyuan Programmer", a lead programmer with 8 years of experience in the game industry. In game development, I hope to help you, and through you, I hope to help everyone.

To be honest, I want a like and a heart! Please share this article with other friends you think might need it. Thank you!