Create screen-space user interfaces for Decentraland scenes using React-ECS.
npx skills add https://github.com/decentraland/sdk-skills --skill build-ui-decentraland
Please help me install this Agent Skill. Skill: build-ui Source: https://github.com/decentraland/sdk-skills/tree/main/build-ui Command: npx skills add https://github.com/decentraland/sdk-skills --skill build-ui-decentraland
Developers need a simple way to add 2D screen‑space overlays such as HUDs, menus, dialogs, and input forms to Decentraland scenes without dealing with low‑level rendering details.
ReactEcsRenderer.setUiRenderer and define virtual screen dimensions for responsive scaling.UiEntity, Label, Button, Input, and Dropdown with extensive layout, styling, and event options.addUiRenderer and remove them with removeUiRenderer.UiCanvasInformation ensure UI adapts to different devices and resolutions.Add a call to setupUi() in your scene's main function to display the UI.
High-intent search queries and answers about installing and using this skill.
You can build a 2D HUD for a Decentraland scene using React-ECS to create screen-space overlays. Initialize the UI with ReactEcsRenderer.setUiRenderer, define virtual screen dimensions, and call setupUi() in your scene's main function to render the interface.
Decentraland user interfaces support React-ECS components like UiEntity, Label, Button, Input, and Dropdown. These elements offer extensive layout, styling, and event options for building interactive menus, dialogs, and input forms.
To update UI elements like health bars in real time, use module-level variables to manage state in React-ECS. This allows your screen-space interface to reflect changes dynamically as the underlying data updates.
Yes, you can add multiple independent UI overlays to a Decentraland scene. Use the addUiRenderer function to add separate UI modules and removeUiRenderer to remove them when they are no longer needed.
Yes, TypeScript is required to create screen-space menus and dialogs using React-ECS. You must use TypeScript files with a .tsx extension to properly define and render your UI components.
dcl-regenesislabsScaffold a new Decentraland SDK7 scene project with configuration files.
dcl-regenesislabsBuild 2D user interfaces for Decentraland scenes using React-ECS and JSX.
Arupbiswas09Integrates Three.js and @react-three/fiber into React applications for declarative 3D graphics.
decentralandApply and manage physics forces on the local player in Decentraland scenes.