Cocos Anatomy

Explode a running Cocos Creator game (2.x and 3.x) into a 3D layer view, split by child nodes.

# Cocos Anatomy — Explore the Game Beneath the Surface **See inside any running Cocos Creator game. Understand its structure. Inspect every layer.** Ever wondered how a Cocos Creator game is actually structured behind the screen? **Cocos Anatomy** is an interactive 3D scene inspector that helps you explore the internal structure of any supported running Cocos Creator game. It transforms the game's live Canvas into a depth-separated 3D view, allowing you to inspect rendering order, explore node hierarchies, identify assets, examine materials, and investigate how individual elements are assembled. Instead of guessing what's happening inside a game, you can see it directly — without opening the original project or accessing its source code. ## ⚡ HOW TO ACTIVATE — READ THIS FIRST **Cocos Anatomy does nothing until you turn it on.** It never runs by itself, so you will not see anything change when you open a game page. To open the layer view, do **one** of these on the page that runs the game: - **Press Alt + Shift + L**, or - **Click the Cocos Anatomy icon** in the Chrome toolbar (pin it from the puzzle-piece menu to keep it in sight). Do the same again to leave the layer view. If the shortcut does not respond, check or change it at `chrome://extensions/shortcuts`. Tip: if the extension's icon shows "N/A" for a moment after you activate it, no supported Cocos Creator game was found in that tab. ## GET STARTED IN SECONDS 1. Open any webpage running a supported Cocos Creator game (3.x, 2.4+, or experimental 2.1.x). 2. **Press Alt + Shift + L or click the Cocos Anatomy toolbar icon.** 3. The game Canvas unfolds into interactive 3D layers, arranged along the depth axis according to their rendering order. From there, you can select, inspect, rearrange, hide, and explore individual elements directly in the running game. No source code modifications. No Cocos Creator editor required. No additional setup. ## WHAT CAN YOU DO WITH COCOS ANATOMY? ### 1. Inspect Rendering Order & Identify Nodes **Understand exactly which node is responsible for each visual element.** Cocos Anatomy separates Canvas children into individual 3D layers, making their rendering order visible and easy to inspect. - Hover over a layer to highlight its boundaries. - Click a layer to select it and reveal its node path in the console. - See how individual nodes are positioned relative to other elements. **Why it matters:** When investigating unexpected rendering behavior, incorrect layering, or UI elements appearing in the wrong order, you can identify the responsible node instead of manually searching through the scene hierarchy. ### 2. Reveal Hidden Layers & Overlapping UI **Discover elements that are difficult to identify in a normal 2D game view.** Cocos Anatomy makes overlapping elements easier to distinguish through interactive layer outlines. - Display selectable regions simultaneously. - Highlight individual layers when hovering. - Use **Alt + Click** to select a layer underneath another element. **Why it matters:** Overlapping UI, invisible elements, and unexpected visual obstructions are common debugging challenges. This feature helps you identify which elements occupy the same screen space and understand what is actually being rendered. ### 3. Explore the Scene Hierarchy in 3D **Navigate from the entire Canvas down to individual nodes and their children.** Double-click any layer to split it apart and reveal its child elements in 3D space. Continue exploring deeper levels of the scene hierarchy, then click an empty area or press **Esc** to navigate back. **Why it matters:** Complex scenes can contain deeply nested nodes and components. Exploring them visually makes it easier to understand how the interface is assembled and how parent-child relationships affect the final result. ### 4. Discover Assets Used by Each Node **Find out which resources are connected to a specific scene element.** Double-click a layer with no further children to inspect the assets referenced by its components. Supported asset types include: - Images and Sprite Frames - Sprite Frame Animations - Audio Clips - Materials - Bitmap Fonts - Spine Skeletons **Why it matters:** When analyzing an unfamiliar game, identifying which assets belong to which nodes can be time-consuming. Cocos Anatomy provides a direct way to discover these relationships without manually searching through the original project. ### 5. Inspect & Experiment with Materials **Understand how materials affect the appearance of game elements.** Inspect material parameters and defines, then modify them directly in the running game to see the visual results immediately. - Adjust material parameters. - Explore material defines. - Preview changes in real time. - Save named presets for future experiments. All temporary edits are automatically restored when you close the panel. **Why it matters:** Technical artists and developers can investigate visual effects, compare material configurations, and experiment with rendering properties without repeatedly modifying project files or rebuilding the game. ### 6. Browse & Preview Game Audio **Explore the audio resources currently loaded by the game.** Cocos Anatomy provides a centralized panel for browsing loaded audio clips, organized into music and sound effects. Each clip includes a built-in player for immediate playback. **Why it matters:** Quickly identify audio resources, review sound effects, and understand which audio assets are available in the running game without searching through the original asset directory. ### 7. Reorder & Hide Layers in Real Time **Experiment with the scene composition without permanently changing the game.** - Drag layers to change their sibling render order. - Toggle the eye button to hide or show individual layers. - Observe how these changes affect the final game presentation. **Why it matters:** This is useful for testing visual arrangements, investigating overlapping elements, and understanding how rendering order influences the appearance of a scene. These are temporary inspection changes, not permanent modifications to the original game. ### 8. Navigate the Scene from Any Perspective **Explore complex scenes using interactive 3D navigation.** Rotate, zoom, and move around the scene using: - Mouse - Trackpad - Keyboard - Touchscreen **Why it matters:** A 3D perspective makes spatial relationships between layers easier to understand, especially when inspecting deeply nested or heavily overlapping UI elements. ## WHY INSTALL COCOS ANATOMY? Cocos Anatomy brings several inspection capabilities into one convenient tool. Without it, investigating an unfamiliar running game may require access to the original project, navigating through the editor hierarchy, searching for assets, or repeatedly modifying and rebuilding the game. With Cocos Anatomy, you can: - **Understand unfamiliar games faster** — Explore their live scene structure without opening the original project. - **Debug visual issues more efficiently** — Identify overlapping nodes, rendering order, and hidden elements. - **Investigate asset usage** — Discover which images, animations, materials, fonts, and audio clips are associated with individual nodes. - **Experiment without rebuilding** — Test material changes and layer arrangements directly in the running game. - **Learn from real-world implementations** — See how actual Cocos Creator games organize their scenes and resources. Whether you are debugging your own game, investigating a QA issue, studying another implementation, or learning how Cocos Creator works internally, Cocos Anatomy gives you a practical way to look beneath the surface. ## BUILT FOR SAFE, NON-INTRUSIVE INSPECTION Cocos Anatomy is designed to inspect running games without permanently changing their original state. - **Runs only when you activate it:** It works only on the tab where you press Alt + Shift + L or click the toolbar icon. It has no access to your other tabs and does not run in the background on the pages you visit. - **No permanent changes:** Temporary inspection changes are restored when you close the panel. - **No source modifications:** No need to modify the game's source code or editor project. - **No accounts or external services:** No registration or external dashboard required. - **No network requests:** Operates locally and collects no user data. - **Local preset storage:** Material presets are saved in the webpage's own `localStorage`. ## COMPATIBILITY **Supported versions:** - Cocos Creator 3.x - Cocos Creator 2.4+ - Experimental support for Cocos Creator 2.1.x **Not supported:** - Cocos Creator 2.0 - Cocos Creator 2.2 - Cocos Creator 2.3 When an unsupported version is detected, Cocos Anatomy displays a compatibility notice and leaves the game untouched. ## WHO SHOULD INSTALL COCOS ANATOMY? **Game Developers** Understand scene hierarchies, rendering order, node relationships, and asset usage when debugging or studying game implementations. **QA Engineers** Investigate overlapping UI, hidden elements, unexpected rendering behavior, and visual inconsistencies more efficiently. **Technical Artists** Inspect materials, experiment with rendering properties, and understand how visual assets are used throughout a game. **Game Learners & Researchers** Explore real-world Cocos Creator implementations to gain a better understanding of scene composition, components, and game architecture. --- **Stop guessing what's inside the scene. Start exploring it.** Inspect the hierarchy. Discover the assets. Understand the rendering. **Press Alt + Shift + L on any Cocos Creator game to begin.** **Cocos Anatomy — Your X-ray vision for Cocos Creator games.**