跪拜 Guibai
← All articles
Frontend

Building a Bamboo Cicada Toy Sim in Cocos with Physics Joints

By 亿元程序员 ·
Read original on juejin.cn ↗ Google Translate ↗ Alt translation

The tutorial demonstrates how little code is needed to get a convincing physics toy running in Cocos — a DistanceJoint2D plus a Graphics line renderer in update() does most of the work. Developers building casual mobile games can reuse the same joint-and-line pattern for flails, grappling hooks, maces, or any dangling-object mechanic.

Summary

The bamboo cicada — a noisy, spinning folk toy — gets a digital recreation in Cocos Creator. The build starts with AI-generated sprites for the stick, cicada, and background, then layers on Box2D physics: rigidbodies and colliders on both objects, plus a DistanceJoint2D to tether the cicada to the stick tip. A custom script draws a visible rope between the two anchor points each frame using the Graphics component. Interaction comes from four touch events that rotate the bamboo stick, letting Cocos' built-in physics engine handle the cicada's swing. Two features are left as reader exercises: adding spin sound via AudioSource, and replacing touch controls with device-motion input through DEVICEMOTION events for a phone-swinging experience.

Takeaways
AI-generated sprites for the stick, cicada, and background are dropped directly into the Canvas to assemble the scene.
Both the bamboo stick and the cicada get RigidBody2D and BoxCollider2D components so they participate in the physics simulation.
A DistanceJoint2D on the cicada, with its anchor points set to the stick tip and the cicada's connection point, prevents the cicada from falling away.
A custom script adds a Graphics component in onLoad() and redraws a line between the two joint anchor points every frame in update().
Four touch events (TOUCH_START, TOUCH_MOVE, TOUCH_END, TOUCH_CANCEL) rotate the bamboo stick; the physics engine propagates the motion to the tethered cicada.
Sound effects can be added later through the AudioSource component, and phone-swinging input through Input.EventType.DEVICEMOTION.
Conclusions

The entire swinging mechanic relies on Cocos' built-in physics rather than custom kinematics — the developer only rotates the stick, and the joint constraint does the rest.

Drawing the rope in update() by clearing and redrawing a single line segment is a deliberately crude approach that works fine for a toy demo but would need object pooling or mesh-based rendering at scale.

Leaving sound and device-motion as reader exercises is a common Juejin pattern that keeps the post short while signaling production-readiness to experienced developers.

Concepts & terms
DistanceJoint2D
A Cocos Creator 2D physics joint that maintains a fixed distance between two anchor points on separate rigidbodies. It acts like an invisible rod or rope, commonly used for pendulums, flails, and tethered objects.
Graphics component
A Cocos component for drawing vector shapes (lines, circles, rectangles) at runtime. It provides moveTo(), lineTo(), stroke(), and clear() methods, making it suitable for debug visuals, ropes, and simple UI effects.
DEVICEMOTION event
A Cocos input event that fires when the device's accelerometer or gyroscope detects motion. It enables phone-tilting or swinging as a game control, replacing touch or keyboard input.
Source: juejin.cn ↗ Google Translate ↗ Backup ↗