# Combinar com código

{% embed url="<https://www.youtube.com/watch?v=55H37rygD7M>" %}

O Creator Hub, juntamente com código personalizado, é uma combinação muito poderosa para criar conteúdo. Pode usar o canvas para posicionar visualmente os itens de forma intuitiva e depois escrever código que interaja com esses itens com total liberdade. Pode até colocar um smart item, que tem o seu próprio comportamento padrão, e escrever código que reaja quando o item é ativado.

Por exemplo, pode aproveitar um smart item de alavanca existente, que já vem com os seus sons, animações e estados, e escrever código que detete quando a alavanca é puxada para executar a sua própria lógica personalizada.

Veja [Referenciar itens no código](/creator/content-creator-pt/scene-editor/expandir-com-codigo/reference-items.md) sobre como obter itens pelo nome ou por tags a partir do seu código.

## Editar código

Tem de instalar um editor de código na sua máquina para editar o código da sua scene. As opções recomendadas são:

* <img src="/files/a305eec4daaf6c2c958d5c992d5a1dddf1e5a8c7" alt="VS Code" data-size="line"> [Visual Studio Code](https://code.visualstudio.com/): Esta é a opção recomendada para developers experientes.
* <img src="/files/d7ef8798423b1db77d0089e922fcc89f1d600c49" alt="Cursor" data-size="line"> [Cursor AI](https://www.cursor.com/): Este é um poderoso editor de código integrado com IA. Permite-te escolher diferentes modelos de IA para te ajudar a escrever código, todos eles gratuitos. Esta é uma boa opção para developers que são novos em Decentraland ou TypeScript, ou se quiseres poupar tempo a escrever código.

{% hint style="warning" %}
**📔 Nota**: Se estiver no macOS, certifique-se de que a aplicação do editor de código está no diretório Applications.
{% endhint %}

Depois de instalado, poderá ter de selecionar o seu Code Editor nas definições do Creator Hub. Para fazer isso,

1. Abre o ícone da roda no canto superior direito do ecrã
2. Em **Code editor of choice**, seleciona o teu Code Editor. Poderás encontrar o teu editor listado no dropdown, ou poderás precisar de selecionar **Escolhe do teu dispositivo** para o encontrar.

## Abrir o código de uma scene

Depois de instalar um editor de código na sua máquina e de o selecionar nas definições do Creator Hub, pode clicar no **< > CODE** botão para o abrir no projeto da sua scene.

![](/files/16f4f615feb89b86fdb2b77e9b2ffb308d21e227)

Isto abre uma janela separada com o editor de código. Na margem esquerda pode navegar pela estrutura de ficheiros e pastas do seu projeto.

![](/files/f59a8d5caceb94445ab4f28447c9cfb42697cc11)

Adicione o seu código personalizado no `index.ts` ficheiro em `/src`, dentro da `main()` function. Em alternativa, pode adicionar código personalizado fora dessa function ou criar novos `.ts` ficheiros dentro da `/src` pasta, mas estes têm de ser, de alguma forma, referenciados dentro da `main()` function de `index.ts`.

{% hint style="warning" %}
**📔 Nota**: Se tiver VS Code ou Cursor instalado, mas o **CODE** botão não o abrir, pode ser que o VS Code não esteja configurado corretamente na sua máquina para abrir através da linha de comandos. Na maioria dos casos, isto é tratado como parte da instalação padrão, mas, se não for o caso, consulte [estas instruções da VS](https://code.visualstudio.com/docs/setup/mac#_launching-from-the-command-line) para ativar o VS Code a partir da linha de comandos.
{% endhint %}

Se tiver uma janela de preview aberta a executar a sua scene, sempre que alterar o código nos seus ficheiros e guardar, a scene recarrega automaticamente com as suas alterações.

## Usar IA

Pode recorrer a 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:

1. Abra o assistente de IA do Cursor clicando no **AI** botão no canto superior direito do ecrã
2. Aí pode pedir ao assistente de IA para o ajudar a escrever código. Os seus prompts podem incluir links para páginas da documentação, caminhos para ficheiros específicos no seu projeto ou até imagens. Também pode selecionar um modelo específico a usar a partir do dropdown.

A Decentraland fornece uma pasta de contexto para o assistente de IA ajudar a escrever código; essa pasta de contexto está localizada em `/dclcontext` no projeto da sua scene. O assistente de IA saberá procurar este contexto sempre que gerar código, para se familiarizar com o SDK da Decentraland.

Esta pasta é atualizada com os ficheiros de contexto mais recentes sempre que as dependências da sua scene são atualizadas. Também pode forçar a atualização desta pasta executando o seguinte:

```
npx sdk-commands get-context-files
```

{% hint style="info" %}
**💡 Dica**: Também pode adicionar os seus próprios ficheiros de contexto a esta pasta para ajudar o assistente de IA a compreender a sua scene e o seu projeto. Se o fizer, certifique-se de os adicionar num novo ficheiro nessa pasta, uma vez que os ficheiros predefinidos são substituídos quando ocorrem atualizações do SDK.
{% endhint %}

{% hint style="info" %}
**💡 Dica**: Quer ir mais longe com IA? Pode instalar skills da Decentraland no seu agente de programação com IA preferido para criar scaffolding de scenes inteiras, adicionar multiplayer, fazer deploy e muito mais — tudo a partir de prompts em linguagem natural. Veja [Vibe Coding com IA](/creator/content-creator-pt/scenes-sdk7/comecar/vibe-coding.md) para o guia completo.
{% endhint %}

## Controlo de versão

Recomendamos que crie um repo para o seu projeto no GitHub e o utilize para acompanhar as versões do seu projeto e colaborar com outras pessoas.

Se não estiver familiarizado com como fazer isto, consulte [Quickstart for repositories](https://docs.github.com/en/repositories/creating-and-managing-repositories/quickstart-for-repositories), ou use a [aplicação GitHub desktop](https://desktop.github.com/download/) para um fluxo mais simples baseado em UI.

{% hint style="warning" %}
**📔 Nota**: Carregue a pasta inteira do projeto para um repo do GitHub, mas certifique-se de que as pastas `/node-modules` ou `/bin` e o ficheiro `package-lock.json` estão todos incluídos no ficheiro `.gitignore` , para evitar sincronizá-los. Isto deverá acontecer se configurar o repo para ser do tipo `node`. Estes ficheiros são todos gerados automaticamente, e o conteúdo pode diferir de máquina para máquina.
{% endhint %}

## Veja também

* [Vibe Coding com IA](/creator/content-creator-pt/scenes-sdk7/comecar/vibe-coding.md): crie scenes descrevendo a um assistente de IA o que pretende.
* [Smart items - Basics](/creator/content-creator-pt/scene-editor/interatividade/smart-items.md)
* [Smart Items - Advanced](/creator/content-creator-pt/scene-editor/interatividade/smart-items-advanced.md)
* [States and conditions](/creator/content-creator-pt/scene-editor/interatividade/states-and-conditions.md)
* [Tornando qualquer item smart](/creator/content-creator-pt/scene-editor/interatividade/make-any-item-smart.md)
* [SDK Quick start](/creator/content-creator-pt/scenes-sdk7/comecar/sdk-101.md): siga este mini tutorial para uma introdução rápida.
* [Development workflow](/creator/content-creator-pt/scenes-sdk7/comecar/dev-workflow.md): leia isto para compreender a criação de scenes do início ao fim.
* [Examples](https://studios.decentraland.org/resources?sdk_version=SDK7): mergulhe diretamente em exemplos de scenes funcionais.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.decentraland.org/creator/content-creator-pt/scene-editor/expandir-com-codigo/overview.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.
