Pré-visualizar a sua cena

O que pode ver na pré-visualização de uma cena

Depois de você ter criado uma nova scene ou descarregado um exemplo de scene você pode pré-visualizá-la localmente.

Usando o Scene Editor no Creator Hub

Certifique-se de ter instalado o Creator Hub.

1. Abra o projeto da sua scene.

2. Clique no Preview botão no canto superior direito. Isso abrirá uma nova janela com o Decentraland Desktop Explorer, executando apenas a sua scene. Lá, você pode se mover pela scene e interagir com items interativos.

Configure diferentes opções de preview no menu dropdown ao lado do Preview botão:

• Open Console Window During Preview: Abre uma nova janela com a saída da console da scene. Isso é útil para debug de erros na scene.

• Skip Auth Screen: Ignora a tela de seleção de conta e faz login automaticamente com a conta em que você já está autenticado no momento. Isso vem desativado por padrão; ative-o se quiser testar várias contas.

• Landscape Terrain Enabled: Alterna a paisagem ao redor da scene. Isso vem ativado por padrão; desative-o para reduzir o uso de memória da scene.

• Show QR Code for Mobile: Exibe um código QR que abre a pré-visualização da sua scene no aplicativo móvel do Decentraland. Leia o código com um telefone na mesma rede Wi-Fi que o seu computador. Veja Preview on mobile para mais detalhes.

📱 Preview no mobile: Você também pode pré-visualizar sua scene diretamente no aplicativo móvel do Decentraland. Use a opção Show QR Code for Mobile no Creator Hub, ou execute npm run start -- --mobile a partir da CLI. Veja Building for Mobile para o guia completo.

Usando a CLI

Para pré-visualizar uma scene, execute o seguinte comando na pasta principal da scene:

npm run start -- --explorer-alpha

Quaisquer dependências que estejam faltando são instaladas e, em seguida, a CLI abre a scene automaticamente em uma nova aba do navegador. Ela cria um servidor web local no seu sistema e aponta a aba do navegador para esse endereço local.

Sempre que você fizer alterações na scene, a pré-visualização recarrega e atualiza automaticamente, então não há necessidade de executar o comando novamente.

📔 Nota: Algumas scenes dependem de comunicação com um servidor externo para realizar lógica personalizada ou armazenar e recuperar dados. Ao pré-visualizar uma dessas scenes, provavelmente você também terá de executar o servidor localmente em outra porta. Verifique o readme da scene para instruções sobre como iniciar o servidor e também a scene.

Parâmetros do comando de preview

Você pode adicionar os seguintes flags ao npm run start comando para alterar o seu comportamento:

• -- --web3 Conecta o preview à wallet do navegador para usar o avatar e a conta associados.

• -- --no-debug Desativa o painel de debug, que mostra estatísticas da scene e de desempenho.

• -- --explorer-alpha Executa o preview no novo cliente desktop do Decentraland.

• -- --mobile (alias -- -m) Mostra um código QR no terminal que abre sua scene no aplicativo móvel do Decentraland num telefone conectado à mesma rede Wi-Fi. Veja Preview on mobile.

• -- --skip-version-checks Evita verificar se a versão do framework SDK da scene corresponde à sua versão da CLI e, mesmo assim, inicia o preview.

• -- --port para atribuir uma porta específica para executar a scene. Caso contrário, será usada qualquer porta disponível.

• -- --no-browser para impedir que o preview abra uma nova aba do navegador.

• -- --w ou -- --no-watch para não ativar o monitoramento de alterações no sistema de arquivos e evitar hot-reload sempre que o código da scene mudar.

• -- --c ou -- --ci Para executar o preview do parcel em um servidor unix remoto

📔 Nota: Os parâmetros precisam ser adicionados com dois conjuntos de hífens, por exemplo npm run start -- --web3.

Avançado: iteração rápida com remote asset bundles

Para scenes pesadas com muitos modelos 3D, você pode acelerar o carregamento e o recarregamento da scene reutilizando os asset bundles que já estão publicados nos servidores do Decentraland, em vez de carregar os modelos 3D brutos e não otimizados. Isso é especialmente útil ao iterar sobre alterações apenas de código.

Para ativar este modo, inicie o cliente desktop do Decentraland com os seguintes argumentos:

npm run start -- --realm http://127.0.0.1:8000/ --position 0,0 --local-scene true --debug --skip-version-check true --lsd-use-remote-ab <ab-source>

O <ab-source> o argumento muda dependendo de onde a scene já está publicada:

• Em Genesis City: --lsd-remote-ab-server Genesis

• Em um World: --lsd-remote-ab-world <world-name>.dcl.eth

Por exemplo, para pré-visualizar uma cópia local de uma scene que já foi implantada em um World:

npm run start -- --realm http://127.0.0.1:8000/ --position 0,0 --local-scene true --debug --skip-version-check true --lsd-use-remote-ab --lsd-remote-ab-world myworld.dcl.eth

Em ambos os casos, --realm http://127.0.0.1:8000/ aponta o cliente para o seu servidor local de preview (execute npm run start primeiro para iniciá-lo), e --local-scene true faz com que o cliente carregue o código da scene a partir daí.

📔 Importante: Ao usar este modo, é recomendado que todos os seus assets de arte já estejam publicados, com os asset bundles totalmente processados pelos content servers. Se você adicionou quaisquer assets novos, você não terá o carregamento otimizado, pois eles serão carregados como arquivos gltf brutos, como acontece quando você executa um preview normalmente. Mas, se você modificou localmente um asset que já estava publicado, mantendo o mesmo nome de arquivo, então você verá a versão antiga publicada desse asset.

Nesse caso, faça primeiro o redeploy da scene, aguarde a geração dos asset bundles (veja Asset bundle conversion), e depois volte a usar este modo para iteração apenas de código.

Carregar uma scene para o decentraland

Quando estiver satisfeito com a sua scene, você pode carregá-la e publicá-la no Decentraland. Para isso, você deve possuir LAND, um Decentraland NAME, ou um nome ETH ENS, ou ter permissões concedidas por alguém que possua. Veja publishing para instruções sobre como fazer isso.

Pré-visualizar o tamanho da scene

O tamanho da scene mostrado no preview é baseado na configuração da scene.

Edite isso na segunda aba do menu da scene no Scene Editor.

Use os dropdowns e clique em Apply Layout para alterar as dimensões da sua scene. Você também pode clicar em cada parcela individual para desativá-la no seu layout.

Você também pode editar o scene.json arquivo para listar várias parcelas no campo "parcels". Veja definir parcelas via linha de comando para mais detalhes.

💡 Dica: Durante a execução do preview, as coordenadas das parcelas não precisam corresponder às que a sua scene realmente usará, desde que sejam adjacentes e estejam organizadas no mesmo formato. Depois, você terá de substituí-las pelas coordenadas reais quando implantar a scene.

Ver a console da scene

Abra a console clicando no ícone no canto superior direito. Aqui você pode ver quaisquer mensagens de erro e também qualquer texto que a sua scene imprima na console por meio de console.log().

Você também pode abri-la pressionando a ` tecla no seu teclado. Você também pode pressionar Shift + ` para abrir a console ainda mais ampla, caso precise ver mais texto.

Testar uma scene multiplayer localmente

Se iniciar um preview de uma scene e o abrir em duas (ou mais) janelas Explorer diferentes, cada janela aberta será interpretada como um jogador separado, e um mock communications server manterá estes jogadores sincronizados.

Interaja com a scene numa janela e depois mude para a outra para ver que os efeitos dessa interação também são visíveis lá.

Usando o Creator Hub, clique no botão Preview uma segunda vez, e isso abre uma segunda janela do explorer do Decentraland. Você deve se conectar em ambas as janelas com endereços diferentes. As mesmas sessões permanecerão abertas à medida que a scene recarrega.

Como alternativa, pode abrir uma segunda janela do Decentraland Explorer escrevendo o seguinte num URL do browser:

decentraland://realm=http://127.0.0.1:8000&local-scene=true&debug=true&multi-instance=true