Frontend

Building a Bamboo Cicada Toy Sim in Cocos with Physics Joints

By 亿元程序员 · Aug 6, 2026

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.

From the discussion

The discussion barely engages with the article's technical content. Most comments are expressions of surprise, nostalgia, or confusion at seeing a bamboo cicada toy recreated in code. One commenter provides a Docker one-liner to deploy and play with the toy directly, which stands out as the only substantive contribution.

— A Docker image exists that lets anyone deploy and play with the bamboo cicada toy simulation immediately.

— Some readers are unfamiliar with the physical bamboo cicada toy the article simulates.

Featured comments

爱理财的程序媛

docker run -d \ --name zhuzhiliao \ --restart unless-stopped \ -p 8123:80 \ registry.cn-qingdao.aliyuncs.com/lys_ns/app:zhuzhiliaov1 直接部署就能玩，笑死了

See top comments, translated →

Source: juejin.cn ↗ Google Translate ↗ Backup ↗