Combinar com código
Combine conteúdo criado no Scene Editor com o poder de escrever código.
O Creator Hub mais código personalizado é uma combinação muito poderosa para criar conteúdo. Você pode usar o canvas para posicionar itens visualmente de forma intuitiva e, em seguida, escrever código que interaja com esses itens com total liberdade. Você pode até colocar um smart item, que tem seu próprio comportamento padrão, e escrever código que reaja quando o item for ativado.
Por exemplo, você pode aproveitar um smart item de alavanca já existente, que já vem com seus sons, animações e states, e escrever código que detecte quando a alavanca é puxada para executar sua própria lógica personalizada.
Consulte Referenciar itens no código para obter itens pelo nome ou por tags no seu código.
Editando código
Você deve instalar um editor de código na sua máquina para editar o código da sua scene. As opções recomendadas são:
Visual Studio Code: Esta é a opção recomendada para developers experientes.
Cursor AI: Este é um poderoso editor de código integrado com IA. Ele permite que você escolha diferentes modelos de IA para ajudar a escrever código; todos são gratuitos. Esta é uma boa opção para developers que são novos em Decentraland ou TypeScript, ou se você quiser economizar tempo escrevendo código.
📔 Nota: Se você estiver no macOS, certifique-se de que o aplicativo do editor de código esteja no diretório Applications.
Depois de instalado, talvez seja necessário selecionar o seu Code Editor nas settings do Creator Hub. Para fazer isso,
Abra o ícone da roda no canto superior direito da tela
Em Code editor de choice, selecione seu Code Editor. Você pode encontrar seu editor listado no dropdown, ou talvez precise selecionar Escolher do seu dispositivo para encontrá-lo.
Abra o código de uma scene
Depois de instalar um editor de código na sua máquina e selecioná-lo nas settings do Creator Hub, você pode clicar no < > CODE button para abri-lo no projeto da sua scene.
Isso abre uma janela separada com o editor de código. Na margem esquerda, você pode navegar pelos arquivos e pela estrutura de folders do seu projeto.
Adicione seu código personalizado no index.ts file em /src, dentro da main() function. Caso contrário, você pode adicionar código personalizado fora dessa function ou criar novos .ts files dentro da /src folder, mas eles devem ser referenciados de alguma forma dentro da main() function de index.ts.
📔 Nota: Se você tiver o VS Code ou Cursor instalado, mas o CODE button não abrir, pode ser que o VS Code não esteja configurado corretamente na sua máquina para abrir pela linha de comando. Na maioria dos casos, isso é tratado como parte da instalação padrão, mas, caso não esteja, veja estas instruções do VS para habilitar o VS Code pela linha de comando.
Se você tiver uma janela de preview aberta executando sua scene, sempre que você alterar o código nos seus files e salvar, a scene recarrega automaticamente com suas alterações.
Usando IA
Você pode aproveitar assistentes de IA como Cursor ou Claude Code para ajudar a escrever o código da scene. Por exemplo, para usar o Cursor, faça o seguinte:
Abra o assistente de IA do Cursor clicando no AI button no canto superior direito da tela
Ali você pode pedir ao assistente de IA que ajude a escrever código. Seus prompts podem incluir links para páginas da documentação, paths para files específicos do seu projeto ou até imagens. Você também pode selecionar um modelo específico para usar no dropdown.
A Decentraland fornece uma folder de contexto para o assistente de IA ajudar você a escrever código; essa folder de contexto está localizada em /dclcontext no projeto da sua scene. O assistente de IA saberá pesquisar esse contexto sempre que gerar código, para se familiarizar com o SDK da Decentraland.
Essa folder é atualizada com os arquivos de contexto mais recentes sempre que as dependencies da sua scene são atualizadas. Você também pode forçar a atualização dessa folder executando o seguinte:
💡 Dica: Você também pode adicionar seus próprios files de contexto a essa folder para ajudar o assistente de IA a entender sua scene e seu projeto. Se fizer isso, certifique-se de adicioná-los a um novo file nessa folder, pois os files padrão são sobrescritos quando updates do SDK acontecem.
💡 Dica: Quer ir além com IA? Você pode instalar skills da Decentraland no seu agente de codificação de IA preferido para montar scenes inteiras, adicionar multiplayer, fazer deploy e muito mais — tudo a partir de prompts em linguagem natural. Veja Vibe Coding com IA o guia completo.
Controle de versão
Recomendamos que você crie um repo para o seu projeto no GitHub e o use para acompanhar as versões do projeto e colaborar com outras pessoas.
Se você não estiver familiarizado com como fazer isso, veja Quickstart for repositories, ou use o GitHub desktop appliacation para um fluxo mais simples baseado em UI.
📔 Nota: Faça upload da pasta inteira do projeto para um repo do GitHub, mas certifique-se de que as folders /node-modules ou /bin e o folder package-lock.json file estejam todos incluídos no .gitignore file, para evitar sincronizá-los. Isso deve ser o caso se você configurar o repo para ser do tipo node. Esses files são todos gerados automaticamente, e o conteúdo pode diferir entre máquinas diferentes.
Veja também
Vibe Coding com IA: construa scenes descrevendo o que você quer para um assistente de IA.
Introdução rápida ao SDK: siga este mini tutorial para um curso intensivo rápido.
Fluxo de trabalho de desenvolvimento: leia isto para entender a criação de scenes do início ao fim.
Exemplos: mergulhe diretamente em scenes de exemplo em funcionamento.
Atualizado