Tutorial do Mesh 201 Capítulo 2: Carregar um arquivo HTML local não compartilhado em um WebSlate

Agora que você está pronto e teve a chance de experimentar o projeto, vamos passar para o script de conteúdo da Web no WebSlates! Um WebSlate é basicamente uma grande tela interativa. Você pode usá-lo para visualizar painéis, páginas da web, fotos e vídeos ou interagir com mapas, diagramas e dados. Na Estação 1, carregaremos um arquivo HTML local não compartilhado em um WebSlate.

Adicionar o WebSlate à cena

1. Abra a cena do StartingPoint .

2. Na janela Cena, certifique-se de estar posicionado de forma que esteja na frente e olhando para a Estação 1, mostrada abaixo.

   

   A estação já tem um objeto no lugar que tem algum texto descritivo e um botão Carregar . Concluiremos a estação adicionando um WebSlate abaixo do botão e, em seguida, atualizando um gráfico de script anexado ao botão Carregar para que, quando o usuário clicar no botão, um arquivo HTML não compartilhado seja carregado no WebSlate.

   Todos os WebSlates que adicionaremos e/ou trabalharemos estão contidos na hierarquia do GameObject MeshWebSlates .

   

3. Na Hierarquia, recolha o objeto staticSceneObjects, se necessário.

4. Expanda MeshWebSlates e, em seguida, expanda seu objeto filho chamado 1 - LocalWebslate.

   

5. Na janela Projeto, pesquise o pré-fabricado WebSlateFramed. Certifique-se de escolher Todos ou Em Pacotes para o filtro Pesquisar.

   

6. Arraste WebSlateFramed da janela Project e, em seguida, na Hierarquia, solte-o no espaço entre 2 - LocalWebslate e ChapterLabel para que seja o primeiro objeto filho de 2 - LocalWebSlate.

   

   Nosso WebSlate agora está em cena, mas não tem o tamanho ou a posição que queremos.

   

   Vamos mudar isso.

7. Na Hierarquia, certifique-se de que WebSlateFramed esteja selecionado e, em seguida, no Inspetor, atualize os valores de Escala no componente Transformar para o seguinte:

   Escala: X = 2,5, Y = 1,5, Z = 1

   Agora está muito melhor!

   

Alterar a URL do WebSlate

1. Na Hierarquia, expanda o pré-fabricado WebSlateFramed.

2. Selecione o objeto filho de WebSlateFramed chamado WebSlate.

3. No Inspetor, navegue até o componente WebSlate e observe que a propriedade URL atual (a URL padrão do WebSlate) está definida como a home page de toda a Microsoft.

   

   Vamos alterar a URL para que ela aponte para a home page do Microsoft Mesh.

4. Adicione "mesh" ao final da URL na caixa de texto URL atual .

   

Abra o script do botão

1. Na Hierarquia, expanda ChapterLabel, expanda Ações e selecione LoadButton.

   

   No Inspetor, você pode ver esse LoadButton com o nome "Carregar HTML". O componente tem sua propriedade Source definida como Graph e se conecta a um arquivo de ativo de script chamado "LoadButtonLocalStart". O GameObject LoadButton também tem variáveis que usaremos no script.

   

   Dica

   A propriedade Source do script tem duas opções: Graph e Embed. Cada um tem vantagens e desvantagens; você pode saber mais sobre eles no artigo Unity Script Machine. Usamos a opção Graph aqui porque esse tipo "Source" tem maior flexibilidade ao se conectar ao Mesh Cloud Scripting.

2. No componente Máquina de script, clique no botão Editar gráfico.

3. Estacione a janela Gráfico de script ao lado das guias Projeto e Console . Clique em sua guia para ver seu conteúdo.

   

Dica: Se você quiser mais espaço na janela do Gráfico de Script , clique no botão de três pontos e selecione Maximizar ou clique no botão Tela Inteira no canto superior direito da janela.

Importante: Observe que o segundo nó no script é denominado Corpo interativo da malha: é selecionado localmente. Há dois nós "Corpo interativo de malha" disponíveis; esses nós permitem que você use interacionáveis de malha com Visual Scripting, como com eventos de interação ou para modificar a transformação de destino manipulável por meio do script visual. Se você quiser que apenas a pessoa que aciona um evento o experimente, use o nó que diz "Está selecionado localmente". Se você quiser que todos os participantes do evento o experimentem, selecione o nó que simplesmente diz "Está selecionado". Veja as diferenças na imagem abaixo. O texto acima de cada nó pode ajudá-lo a confirmar o comportamento.

.

Em nosso script atual, usamos o nó com "Is Selected Locally". Isso significa que, quando o participante clicar no botão Carregar, somente ele verá a nova página HTML que é carregada no WebSlate anexado.

Criar uma variável de objeto WebSlate

O gráfico de script já foi iniciado para você. Concluiremos as tarefas necessárias para habilitar o botão Carregar na Estação 1 para carregar a página HTML.

A primeira coisa que precisamos fazer é criar uma variável de objeto que tenha o valor do WebSlate GameObject que é filho do WebSlateFramed GameObject.

1. No campo Novo nome da variável, digite o nome "WebSlate" e pressione a tecla Enter.

.

1. Clique no menu suspenso Tipo e, em seguida, pesquise e selecione "WebSlate".

.

1. Arraste o WebSlate GameObject da Hierarquia e solte-o no campo Valor da nova variável.

.

Obter a página HTML

1. Clique na porta Saída de Controle do nó If e arraste para a direita. Isso abre o Fuzzy Finder. AVISO: Depois de abrir o Fuzzy Finder, não clique em nenhum lugar fora da interface do Unity. Isso fecha o Localizador difuso e causa um comportamento imprevisível no Gráfico de script.

2. No Fuzzy Finder, pesquise "Web Slate: Carregar conteúdo HTML (Ativo HTML)" e selecione-o. Observe que há dois nós com nomes muito semelhantes.

   

   Você quer aquele que diz Html Asset, não Html Content.

   

3. Arraste a variável de objeto do WebSlate recém-criada e coloque o nó gerado acima e à esquerda do nó Carregar conteúdo HTML.

4. Conecte a porta de saída de dados do nó Obter Variável de Objeto à primeira porta de entrada de dados do nó Carregar Conteúdo HTML.

   

5. Já temos a página da Web que queremos carregar em um nó Get Variable no gráfico de script. Arraste um conector da porta de Saída de Dados do nó Obter Variável e conecte-o à porta de Entrada de Dados do nó Carregar Conteúdo HTML.

   

Teste o trabalho

1. No Unity, salve o projeto.

   AVISO: Atualmente, há um bug no projeto em que salvá-lo pode fazer com que o texto nas caixas de texto de informações desapareça.

   

   O texto reaparece quando você entra no modo de reprodução. Tenha isso em mente ao trabalhar nas outras estações.

2. Pressione o botão Reproduzir do Unity Editor.

3. Posicione-se na frente da Estação 1 e observe que o WebSlate está exibindo a home page do Microsoft Mesh.

   

4. Clique no botão Carregar . O WebSlate carrega e exibe uma página da variável que você conectou no Gráfico de Script que diz "Olá, Mundo".

   

   Esta página vem da variável HTMLAsset no gráfico de script do botão.

   

   DICA: Para obter algumas informações extras sobre como o script funciona, assista-o no Gráfico de Script enquanto clica no botão Carregar . Os conectores entre os nós exibem dicas informativas e animações.

5. Quando terminar, clique no botão Reproduzir do Unity Editor para sair do modo Jogar.

Próximas etapas

Capítulo 3: Carregar um arquivo HTML compartilhado local em um WebSlate.