Como fazer seu HTML5 Jogo App-Ready
Claro, seus jogos em HTML5 são realmente páginas da web, mas você está indo para fazê-los funcionar de uma forma que também os torna agir como apps. Você precisa fazer um par de coisas. Você pode adicionar um ícone para o seu jogo para que ele apareça na área de trabalho, você pode modificar o tamanho assim que o jogo ocupa toda a tela, e você pode ter o seu jogo armazenado offline.
Menu
Gerenciar o tamanho da tela do jogo
A primeira coisa a considerar é o tamanho da tela. Esta é uma coisa fácil de mudar, mas ele pode ter grandes implicações no seu jogo. Um jogo que funciona bem em um tamanho pode ser muito mais fácil ou mais difícil com um tamanho diferente. Você pode mudar o tamanho ea posição do jogo com o Cena o objetivo de setSize () e setpos () funções.
Em geral, você encontrará 1024 x 768 e 800 x 600 para ser os tamanhos de tela mais comumente usados. Faz sentido para ir um pouco menor do que essas resoluções. Claro, se você tiver um dispositivo específico que você deseja programar para, você pode simplesmente dimensionar o seu programa diretamente para o seu dispositivo.
Depois que você sabe o tamanho que você quiser, você pode simplesmente usar o Cena o objetivo de setSize () método para alterar a tela para qualquer tamanho que você preferir.
Lembre-se que para muitos jogos, mudando o tamanho da tela vai realmente mudar o jogo. Também, a maioria de entrada vai acontecer na tela real, então pense sobre como os polegares grandes são, e tentar projetar seu jogo para os dedos do usuário não ocultar qualquer ação na tela.
Como fazer o seu jogo parecido com um aplicativo
Há um par de truques maravilhosas que você pode fazer para os usuários do IOS. Você pode projetar seu jogo para que o usuário pode adicionar um ícone diretamente para o desktop. O usuário pode, em seguida, iniciar o jogo como qualquer outro aplicativo. Você também pode fazer o navegador ocultar o navegador normal de apetrechos para que o seu jogo não se parece com ele está sendo executado em um navegador!
Acontece que ambos os efeitos são muito fáceis de realizar. versões modernas de IOS já tem a capacidade de armazenar qualquer página da web no ambiente de trabalho. Basta visualizar a página web no Safari e clique no botão Share. Você vai encontrar uma opção para salvar a página da web para o desktop.
No entanto, o ícone padrão para um aplicativo salva é muito feio. Se você quer um ícone de boa aparência, você pode salvar uma pequena imagem do seu jogo como um .png arquivo e colocá-lo no mesmo diretório que o seu jogo. Então você pode adicionar esta linha para sua página (no cabeçalho), e essa imagem aparecerá na área de trabalho quando o usuário economiza seu jogo:
Como um bônus adicional, o iPhone eo iPad irá ajustar automaticamente a imagem para olhar como um ícone da Apple, adicionando um efeito de vidrados e cantos arredondados.
Como remover a barra de ferramentas do Safari da tela do jogo
Embora o jogo parece ser bom a partir da tela principal, quando o usuário ativa o jogo, ainda é óbvio que o jogo faz parte do navegador web. Você pode facilmente esconder a barra de ferramentas do navegador com uma outra linha no cabeçalho:
Este código não vai fazer nada diferente, a menos que o jogo é chamado a partir do desktop. No entanto, nesse caso, ele esconde a barra de ferramentas, tornando o jogo olhar e sentir como um aplicativo completo. Como um bônus adicional, este executa o jogo em modo de tela cheia, dando-lhe um pouco mais de espaço para o jogo.
Mais uma vez, esta é uma solução específica para Apple. Não há uma maneira fácil de obter o mesmo efeito em dispositivos Android.
Como conservar o seu jogo off-line
Agora o jogo está olhando muito como um aplicativo, exceto que ele é executado apenas quando você está conectado à Internet. HTML5 tem uma característica maravilhosa que lhe permite armazenar uma página web inteira localmente a primeira vez que é executado. Então, se o usuário tenta acessar o jogo e o sistema não pode obter on-line, a cópia local do jogo é executado em seu lugar.
Este é um efeito relativamente fácil de conseguir:
Fazer o seu jogo estável.
Antes de usar o mecanismo de armazenamento off-line, você vai querer certificar-se de seu jogo está perto de liberar pronto. No mínimo, você precisa ter certeza de que você sabe todos os arquivos externos necessários pelo jogo.
Construir um cache.manifest Arquivo.
Olhe para o diretório que contém o seu jogo, e criar um novo arquivo de texto chamado cache.manifest.
Escrever a primeira linha.
A primeira linha do cache.manifest arquivo deve conter apenas o texto CACHE MANIFEST.
Faça uma lista de todos os arquivos no diretório.
Escreva o nome de cada arquivo no diretório, um arquivo por linha. Tenha cuidado com a sua capitalização e ortografia.
Adicione o atributo manifesto.
A etiqueta tem um novo atributo chamado manifesto. Use isto para descrever para o servidor onde o manifesto de cache podem ser encontrados:
Carregar a página normalmente.
Você vai precisar para carregar a página web uma vez no modo normal. Se tudo estiver configurado corretamente, o navegador irá tranquilamente fazer uma cópia do arquivo.
Teste offline.
A melhor maneira de testar o armazenamento off-line é para desligar temporariamente o acesso sem fio em sua máquina e, em seguida, tentar acessar o arquivo. Se as coisas funcionaram, você será capaz de ver a sua página como se você ainda estavam online.
Verifique as configurações do servidor.
Se o armazenamento off-line não está funcionando, você pode precisar verificar com a sua administração do servidor. o text / manifesto tipo MIME precisa ser configurado no servidor. Você pode ter que pedir o administrador do servidor para definir esta opção no .htaccess arquivo para sua conta:
texto AddType / manifest cache-manifesto