PUBLICANDO PARA WEB

3

Stats

5,348 visits, 7,954 views

Tools

License

This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Published on 7 Jul, 2019.

Os projetos de Construct são baseados em HTML5, o que os torna perfeitamente adequados para publicação na web. Este guia inclui algumas informações úteis para saber quando estiver publicando jogos Construct para web.

Para publicar na web, use a opção Web (HTML5) ao exportar. Quando a exportação terminar, você receberá um arquivo zip que contém todos os arquivos para upload.

OS JOGOS EXPORTADOS NÃO RODÃO ATÉ QUE VOCÊ FAÇA O UPLOAD DELES.

Os jogos não funcionarão se você tentar rodá-los diretamente do computador. Se você extrair o zip exportado para o seu computador e clicar duas vezes em index.html para executá-lo, o jogo começará a usar um URL file: /// em vez de um URL http: // ou https: //, já que o jogo está no disco e não em um servidor. Por motivos de segurança, os navegadores têm algumas limitações rígidas sobre o que pode ser feito em uma página da Web a partir de um arquivo: /// URL, e isso geralmente impede que games em Construct funcionem. O melhor fluxo de trabalho é testar visualizando no Construct durante o desenvolvimento e, em seguida, publicar imediatamente o jogo na Web após a exportação. Se você executar um jogo do disco, poderá ver uma caixa de mensagens lembrando-o disso ("os jogos exportados não funcionarão até que você os envie"). Se você precisar testar em dispositivos móveis, poderá usar a Remote Preview em vez de exportar repetidamente.

WORKAROUNDS

No Google Chrome, é possível contornar as limitações de segurança do navegador e ainda testar um jogo exportado do disco. Primeiro feche todas as instâncias do Chrome e reinicie o Chrome usando a seguinte linha de comando:

chrome --allow-file-access-from-files

No Windows, você pode fazer isso pressionando as teclas Windows + R para abrir a caixa de diálogo Executar e inserir essa linha de comando. Com o Chrome aberto neste modo, você poderá abrir o arquivo index.html exportado no Chrome e fazer com que ele funcione corretamente. Observe que o lembrete do messagebox ainda pode aparecer (ele pode ser ignorado nesse caso), e outros recursos ainda podem não funcionar, como fazer solicitações AJAX para servidores da web reais. Normalmente, não é necessário usar esse modo, mas em alguns casos isso pode ser útil para testar um jogo exportado rapidamente sem ter que publicá-lo. Observe se você pretende executar um jogo localmente em um computador, a opção de exportação NW.js é uma opção melhor.

Alternativamente, usuários avançados podem querer considerar a execução de um servidor HTTP local com um servidor como o nginx ou o Caddy. Estes são relativamente fáceis de configurar para servir o conteúdo de uma pasta no seu computador em um URL como http: // localhost: 8080. Em seguida, você pode simplesmente copiar o projeto exportado para a pasta do servidor e carregá-lo em um navegador. O jogo funcionará, pois está sendo executado em uma URL HTTP.

UPLOAD PARA A WEB.

Você precisará de um servidor da Web para fazer o upload do seu jogo. Se você não tiver um, existem muitos serviços onde você pode alugar um host de arquivo estático barato. As etapas específicas para o upload de arquivos para o seu servidor dependem do seu host. Se você precisar de ajuda para descobrir como fazer isso, entre em contato com seu serviço de hospedagem. O processo às vezes envolve ferramentas como FTP, Remote Desktop ou uma ferramenta no site do host. Alternativamente, você pode exportar para o Scirra Arcade, que hospeda o seu jogo para você.

Uma vez carregado, você deve ter um link que você pode compartilhar e começar a divulgar seu jogo! Se você projetou seu jogo com controles por toque, ele deve funcionar bem em navegadores móveis também.

É comum cometer um erro ao fazer o upload dos seus arquivos. Se você esquecer de carregar um arquivo ou pasta, o jogo pode quebrar. Se o seu jogo não parece funcionar depois de carregado, verifique se há erros no navegador e esperamos que haja uma mensagem útil (por exemplo, "meuarquivo.png retornou 404 não encontrado", indicando que você esqueceu de enviar meuarquivo.png).

CONFIGURANDO TIPOS DE MIME.

Para que todos os recursos funcionem corretamente, o servidor da Web deve ter os tipos MIME certos configurados. Esta é uma forma de associar extensões de arquivos (como .png) a um tipo de conteúdo (como image / png). Se o servidor não souber sobre algumas extensões de arquivo usadas pelo Construct, ele poderá retornar 404 Not Found para o arquivo ou interpretar o arquivo incorretamente e corrompê-lo. Para mais informações, consulte a entrada manual em tipos MIME.

USE HOSPEDAGEM SEGURA.

Muitos recursos do Construct exigem que a hospedagem segura funcione. Isso significa hospedar seu site em HTTPS (com https: // no URL), em vez de HTTP inseguro (com http: // no URL). Por exemplo, suporte offline, tela inteira, acesso à geolocalização, acesso à câmera / microfone e vários outros recursos exigem que a hospedagem HTTPS funcione corretamente. É provável que, no futuro, ainda mais recursos exijam hospedagem segura.

Nos dias de hoje, qualquer novo servidor configurado deve ser seguro desde o início. Se você tiver sites inseguros, deverá começar a atualizá-los para que fiquem seguros.

Se o seu site ainda não estiver seguro, entre em contato com o host para obter suporte para garantir a segurança. Você pode precisar pagar para comprar um certificado. Alternativamente, o serviço Let's Encrypt permite que você obtenha certificados gratuitamente.

DOMAIN LOCK

Se você quiser limitar o seu jogo a apenas trabalhar em determinados sites, você pode simplesmente comparar a expressão Browser.Domain no objeto Browser. Por exemplo, se você hospedar em https://www.mywebsite.com/mygame/, a expressão do domínio será www.mywebsite.com. Você pode fazer o jogo se recusar a jogar se esse valor não for de um site que você controla. (Observe que o modo de visualização é executado no preview.construct.net, então provavelmente você deve permitir esse domínio também!) Isso torna um pouco mais difícil para alguém copiar seu jogo. Observe que essa verificação - qualquer outro tipo de cheque que você implementar - ainda pode ser contornada. Como acontece com muitos problemas de segurança, o objetivo é principalmente tornar mais difícil a cópia, em vez de torná-la completamente impossível (o que geralmente é inviável).

SOLICITAÇÕES DE DOMÍNIOS TRANSVERSAIS

Se o seu jogo carregar conteúdo de outro domínio, isso é chamado de solicitação entre domínios e algumas limitações de segurança podem afetar a permissão da solicitação. Por exemplo, se o seu jogo estiver hospedado em mywebsite.com e tentar carregar o conteúdo de otherwebsite.com, a solicitação poderá ser bloqueada e a carga poderá falhar. Isso pode afetar as solicitações do AJAX, carregar imagens em objetos como Sprite, reproduzir vídeos ou qualquer outra hora em que você carregar conteúdo de um URL.

Os navegadores limitam as solicitações de acordo com seu domínio, esquema e porta. Juntos, estes são referidos como uma origem. As solicitações para outras origens exigem que o CORS (Cross-Origin Resource Sharing) seja configurado, caso contrário, o navegador pode ser bloqueado. Normalmente, isso envolve o envio do cabeçalho HTTP Access-Control-Allow-Origin na resposta do servidor que hospeda o conteúdo. Se esse cabeçalho permitir a solicitação, ele poderá ser bem-sucedido. As solicitações podem ser limitadas a determinadas origens ou você pode usar o seguinte cabeçalho para permitir solicitações de qualquer servidor:

Access-Control-Allow-Origin: *

Não faça isso por nada sensível à segurança (como informações de perfil), pois permite que o conteúdo seja acessado por qualquer site na Internet! No entanto, geralmente é seguro para arquivos estáticos que você simplesmente deseja compartilhar entre domínios.

A visualização do Construct é executada em preview.construct.net. Se você quiser que as solicitações entre domínios sejam bem-sucedidas no modo de visualização, verifique se essa origem também é permitida.

EMBEDDING

Se você quiser incorporar um jogo dentro de outra página da web, poderá exibi-lo usando um elemento iframe. Basta apontar o iframe para o endereço da web do seu jogo. Por exemplo:

<iframe src="https://www.mywebsite.com/mygame/" width="600" height="400" scrolling="no" noresize="noresize" />

Isto irá criar um iframe de tamanho fixo (600x400) dentro do qual o jogo irá aparecer. Por padrão, o jogo será redimensionado automaticamente para preencher o tamanho definido pelo iframe. No entanto, se for um jogo de tamanho fixo, verifique se os atributos width e height da tag iframe correspondem ao tamanho do viewport do jogo.

Os atributos de scrolling e noresize são necessários para garantir que o iframe seja exibido no tamanho correto em algumas versões do iOS.

PERMITINDO FULLSCREEN

Ainda é possível que os jogos dentro de iframes entrem no modo de tela cheia, onde ocupam todo o display. Para suportar isso, seu jogo não deve ter tamanho fixo (o modo de tela cheia não deve estar desligado). Em seguida, use a ação Request fullscreen do objeto Browser em seu jogo.

A maioria dos navegadores limitam a solicitação de tela cheia para funcionar apenas em acionadores de entrada do usuário, como o On button clicked, On mouse click, On touched object e assim por diante. Isso evita que as páginas da Web fiquem em tela cheia quando o usuário não quiser.

Finalmente, você deve adicionar o atributo allowfullscreen à tag iframe da seguinte forma:

<iframe src="https://www.mywebsite.com/mygame/" allowfullscreen="true" width="600" height="400" scrolling="no" noresize="noresize" />

Com tudo isso no lugar, seu jogo iframed agora deve ser capaz de "sair" para o modo de tela cheia!

SANDBOXING

Se você executar um arcade de jogos ou quiser garantir que os jogos sejam isolados da página pai, o ponto mais importante é executar os jogos em uma origem diferente da página pai. Por exemplo, se a página pai estiver em https://www.myarcadesite.com, o iframe deve apontar para jogos hospedados em outra origem, como https://games.myarcadesite.com. A política de segurança de mesma origem do navegador impedirá que os jogos possam acessar qualquer armazenamento ou conteúdo no domínio www.myarcadesite.com.

Para mais isolamento, você pode usar o atributo sandbox da tag iframe. Isso permite mais bloqueio de recursos, como abrir pop-ups, navegar no quadro superior e assim por diante. Para mais informações, consulte a tag iframe no MDN. No mínimo, o atributo sandbox deve conter scripts de permissão para que o JavaScript do jogo seja executado. Se o jogo estiver em uma origem diferente da página pai, você também poderá usar o allow-same-origin.

Não use um atributo sandbox com allow-scripts e allow-same-origin se o conteúdo do iframe estiver na mesma origem da página pai. Nesse caso, o iframe tem permissão para simplesmente remover o atributo sandbox, para que ele não melhore a segurança. No entanto, ainda é seguro se o conteúdo do iframe estiver em uma origem diferente.

CONTROLE OS FRAMES.

Você pode querer limitar quais sites têm permissão para exibir seu jogo em um iframe. Como alternativa, você pode bloquear a capacidade de exibir seu jogo em um iframe, garantindo que ele só possa ser reproduzido ao visitar diretamente seu URL.

Nos navegadores modernos, você pode controlar isso enviando um cabeçalho HTTP Content-Security-Policy com uma diretiva frame-ancestors. Por exemplo, você pode definir isso como 'nenhum' para bloquear completamente o enquadramento ou especificar uma origem para permitir que apenas essa página exiba o conteúdo em um quadro.

Para navegadores mais antigos, você pode obter resultados semelhantes com o cabeçalho HTTP X-Frame-Options.

  • 0 Comments

Want to leave a comment? Login or Register an account!