> For the complete documentation index, see [llms.txt](https://help.craftsmanplus.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.craftsmanplus.com/play/layers/code.md). # Code Build custom mechanics, effects, physics, and shaders with a Code Layer, generated by INTELLIGENCE or written by hand. The Code Layer runs custom code to create mechanics, effects, and interactive experiences that PLAY's standard layers can't. It's the layer behind [Feature Generation](/intelligence/specialties/feature-generation.md): when you ask INTELLIGENCE to build a custom feature, it creates a Code Layer in your project. Most Code Layers are generated by INTELLIGENCE, so you rarely need to read or write the code yourself. You adjust the feature through controls in the Properties panel, swap its art like any other layer, and ask INTELLIGENCE for changes. If you want full control, you can also write the code by hand. {% hint style="info" %} Code Layers run in a contained PixiJS environment. Outside packages and third-party libraries aren't supported, and browser features like network requests and storage are blocked. {% endhint %} *** ### Creating a Code Layer * **Ask INTELLIGENCE (recommended).** Describe the feature you want. INTELLIGENCE writes the code, adds any art and sounds it needs, and places the layer in your current scene. See [Feature Generation](/intelligence/specialties/feature-generation.md). * **Add one manually.** Click the **+** button to open the **Add Layer** menu and choose **Code**, or press the **`O`** hotkey. PLAY adds an empty layer named **New Code** that fills the artboard. It draws nothing until you add code in the [Code Editor](#code-editor). *** ### Properties Panel A Code Layer's Properties panel has these sections, top to bottom: * [**Transform**](/play/properties/transform.md) sets the layer's position and size. * **Code** holds the feature's controls and the **Code Editor** button. See below. * **Progression** holds the layer's Triggers and Variables. See [Progression](#progression). * [**Timeline**](/play/general/panels/timeline-panel.md) sets when the layer starts and ends in the scene. * [**Animations**](/play/properties/animations.md) adds Enter and Exit animations. The Code Layer itself has no Interactions or Effects section. Interactions belong to the layers inside it. See [Layers Inside a Code Layer](#layers-inside-a-code-layer). #### Feature Controls When INTELLIGENCE builds a feature, it adds a control to the **Code** section for each value worth adjusting: colors, sizes, speeds, counts, sounds, and so on. Change a value and the layer updates live on the canvas, without re-prompting. | Control | Used for | | ---------------------- | --------------------------------------------------- | | Color picker | Colors. Solid colors only. | | Slider or number field | Sizes, speeds, counts, durations, intensities | | Toggle | Turning part of the feature on or off | | Text field | Words the feature displays | | Dropdown | Choosing between preset options | | Sound module | Sound effects. See [Sound Effects](#sound-effects). | Hover a control to see a description of what it does. Controls are created by INTELLIGENCE. To add, remove, or rename one, ask INTELLIGENCE. *** ### Sound Effects A Code Layer can play its own sound effects, like a pop on every tap or a chime when a goal is reached. Ask INTELLIGENCE to add or change a sound, or attach a sound from your Asset Library to the chat and ask it to use that one. Each sound appears as a sound module in the **Code** section, showing the file name. Click the module's settings button to open **Audio Properties**: * **Preview** the sound with the play button. * **Select** a different sound from the Asset Library, or delete the current one. * **Volume** sets how loud the sound plays, from 0 to 100%. Sounds are always added in their optimized version. They're listed under **Code** in the [Asset Panel](/play/general/panels/asset-panel.md), where you can also replace them. *** ### Shaders Shaders change how a layer's pixels are drawn. They open up looks that standard layers can't produce: a ripple on tap, a heat shimmer, a glow, a dissolve, or a color grade that cycles over time. Ask INTELLIGENCE for the effect you want. It can apply a shader to an individual image, text, or shape inside the Code Layer, or to the whole layer. Shaders can respond to taps, pointer movement, progression, and time. Values like speed, intensity, radius, and color appear as feature controls in the **Code** section, so you can fine-tune the effect live. Shaders render the same way in the editor, in [Preview](/play/preview-and-share/preview.md), and in the exported playable. {% hint style="info" %} Shaders that animate over time hold still while the scene is paused in the editor. Play the timeline or open Preview to see them move. {% endhint %} *** ### Physics Code Layers include a built-in 2D physics engine for mechanics like falling objects, bouncing, stacking, and slingshots. Ask INTELLIGENCE for the behavior you want, like "drop fruit into a basket and score when they land". Physics is set up in code, with no separate physics panel. INTELLIGENCE exposes values like gravity, bounciness, and the number of objects as feature controls. The physics bodies take their size from the layers inside the Code Layer, so resizing one of those layers changes how it collides. {% hint style="info" %} The physics engine adds to the file size of playables that use a Code Layer. Playables without a Code Layer aren't affected. {% endhint %} *** ### Layers Inside a Code Layer The images, text, and shapes a feature uses are real layers inside the Code Layer. To work with them, click **Edit** on the Code Layer in the Layers panel, or double-click it on the canvas. In edit mode: * **Swap art.** Select an image or shape and use **Replace** to swap in your own asset. Text layers can be restyled like any other text. * **Resize.** Width and height are editable. Position and rotation are controlled by the code, so those fields are locked. * **Add layers.** You can add Image, Text, and Shape layers. A new layer only appears in the running feature once the code uses it, so ask INTELLIGENCE to work it in. While you're in edit mode, the feature's own drawing is hidden and each layer is shown at its configured size. {% hint style="info" %} Layers inside a Code Layer have no Timeline, Animations, Effects, or Press Effect sections. The code controls when and how they appear. {% endhint %} *** ### Interactions and Analytics Taps and swipes in a Code Layer are set on the layers inside it. Select one of those layers to see its **Interactions** section. * **Trigger Code** interactions are added by INTELLIGENCE. They mark an input the code responds to itself, like a tap that pops a balloon. These rows are locked, since the code handles the response. * **Standard actions** can be added to the same layers, like Start Next Scene or Launch URL. Code Layer children support **Single Tap**, **Double Tap**, and the **Swipe** gestures. Every interaction on a layer inside a Code Layer is tracked in [Analytics](/analytics/analytics-dashboard/engaged/engagements-by-layer.md), credited to that layer. CTA actions like Launch URL are also tracked as CTA clicks. To check what a feature reports before you export, open the [Analytics Event Monitor](/play/preview-and-share/analytics-event-monitor.md) in Preview. *** ### Progression A Code Layer can track its own progress and fire actions when it reaches a goal, using the same Triggers and Variables system as [Game Mechanics](/play/layers/game-mechanics.md). The **Progression** section sits below the Code section. * **Variables** are created by INTELLIGENCE along with the feature, like the number of items collected. The tab shows each variable and its start value. To add or change a variable, ask INTELLIGENCE. * **Triggers** are fully editable. Click **+** to add one, pick one of the layer's variables, set a condition, and choose an action. INTELLIGENCE can also add triggers for you. See [Triggers](/play/settings/progression/triggers.md). A Code Layer's variables can be shown with a [Progress Bar](/play/layers/components/progress-bar.md) or [Progress Text](/play/layers/components/progress-text.md) in the same scene. They're listed under the Code Layer's name in the **Track** dropdown. They aren't available in [Conditionals](/play/settings/progression/conditionals.md). A Code Layer can't read or change your project's own variables, or another game's. *** ### Code Editor The **Code Editor** button in the Code section opens the code for viewing or editing. It's there for advanced authors. Most changes are easier to make by asking INTELLIGENCE. * **Reference panel.** A sidebar lists everything the code can use, including the physics and shader tools, the layers inside the Code Layer, and the feature controls. Click **Hide Reference** to close it. * **Autocomplete.** Suggestions appear as you type, including the names of the layers and controls in this Code Layer. * **Save** checks the code by running it briefly. If it fails, an error appears under the editor and nothing is saved. If it passes, the code is saved and the editor closes. * **Cancel** closes the editor and discards your changes. {% hint style="info" %} Saving reformats the code and removes comments. {% endhint %} *** ### Assets and File Size Everything a Code Layer uses, its images, text, shapes, and sounds, is listed under **Code** in the [Asset Panel](/play/general/panels/asset-panel.md), where you can replace images, shapes, and sounds. The project's file size breakdown shows these under **Code Assets**. Duplicating or copying a Code Layer copies its code, layers, sounds, and progression together. {% hint style="info" %} Code Layers can't be global layers or placed in the Global scene, and they aren't available in Animated Banner projects. {% endhint %} --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://help.craftsmanplus.com/play/layers/code.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.