Jogos em html5 russo android. Desenvolvimento de jogos HTML5 para Android do zero ao lançamento

A estratégia de Brian McHarg para desenvolver com sucesso jogos HTML5 entre navegadores e plataformas.

HTML5: o herdeiro legítimo do trono dos jogos em flash. O desenvolvimento verdadeiramente multiplataforma permite que você execute um programa uma vez escrito em um PC, tablet e smartphone, também funcionará em Smart TV e em dispositivos desktop e móveis, incluindo consoles de jogos como Xbox360 ou PlayStation 3 através de seus navegadores integrados. É claro que isso é muito atrativo para quem quer desenvolver jogos para o maior número de dispositivos e plataformas possível.

O próprio termo HTML5, assim como as especificações que ele representa, tem significados diferentes dependendo de quem o está descrevendo. Para os clientes, esta é uma tecnologia de desenvolvimento que promete um verdadeiro santo graal - e um desenvolvimento multiplataforma econômico.

Para desenvolvedores, é um substantivo coletivo para muitas tecnologias diferentes: JavaScript, WebSockets, WebAudio, Canvas, CSS3 e WebGL, para citar apenas algumas, cada uma com seus próprios padrões, fortes e fracas restrições de plataforma para plataforma.

E finalmente, ao que parece, o mais importante: para os usuários! A única coisa que importa aqui é que os usuários desejam obter as mesmas impressões e experiências com as quais estão acostumados. E essa é a principal tarefa dos desenvolvedores, principalmente se o objetivo deles for apresentar o jogo ao maior número de plataformas possível.

PC vs multiplataforma móvel

Até agora, todos nós conhecemos exemplos fantásticos de jogos HTML5 que rodam em navegadores de PC. Eles são frequentemente criados por autores de navegadores para demonstrar um determinado forças ter Programas, ou para APIs específicas que eles gostariam de ver ratificadas na especificação HTML5.

Jogos como Cutthe Rope e Contre Jour para Internet Explorer ou alguns dos excelentes experimentos para navegador Chrome como Jam ou Racer são ótimos exemplos. Se você estiver interessado no potencial para o futuro, confira bibliotecas como three.js, o Turbulenz de código aberto lançado recentemente ou o Epic HTML5 desenvolvido pela Unreal Engine.

No entanto, tente olhar para um desses exemplos em um Android com OS2.3 (Gingerbread) instalado e você verá uma imagem completamente diferente e, em alguns casos, nada. Sim, esse sistema operacional tem quase três anos, mas ainda está instalado em um terço de todos os dispositivos Android, e esse número pode ser ainda maior dependendo do seu público-alvo. E isso acontece não só em versão antiga Android. Você pode ver o mesmo em Dispositivos Apple executando iOS 5 ou dispositivos menos poderosos, como Kindle Fire. De fato, agora você não encontrará nenhum dispositivo móvel que exiba corretamente nenhum dos programas acima.

Como mencionado anteriormente, a maioria dos clientes escolhe o HTML 5 para que seu jogo de navegador seja verdadeiramente multiplataforma. Se você está desenvolvendo jogos apenas para PC, o Unity e o Flash são ótimas opções para analisar. Ambos têm - grande apoio navegadores e a capacidade de exportar para dispositivos como aplicativos individuais, graças ao qual eles podem ser transferidos para um smartphone ou tablet com o código que você precisa.

Existem dois problemas óbvios ao desenvolver um jogo multiplataforma em HTML5. A primeira é consequência da natureza difusa da especificação HTML5, onde o suporte futuro é dividido não por tipo de dispositivo, mas por tipo de navegador em cada um desses dispositivos. A segunda, e mais difícil para os desenvolvedores, é a constante mudança nas capacidades dos dispositivos móveis, o que significa que mesmo com o mesmo conjunto de funções, o jogo em um dispositivo será bem diferente do mesmo jogo instalado em outro gadget.

Para ter uma ideia de quantas opções existem, basta executar um dos muitos testes de JavaScript para testar o desempenho do dispositivo. Por exemplo, passar 100 quadros pelo Canvas funcionará relativamente bem a 60 quadros por segundo em dispositivos como iPhone 4S ou 5, Galaxy S3, Nexus 7 ou Lumia 820. Mas tente o mesmo código em outros dispositivos como Desejo HTC(19fps) Galaxy Ace(7 fps) ou iPad 1 (9 fps) e você terá que trabalhar muito para obter algo como um jogo viável.

Se o seu projeto visava um smartphone ou tablet, e especialmente se incluísse dispositivos mais antigos ou de baixa potência, é muito importante testar e definir benchmarks em um estágio inicial. Isso é necessário para entender as limitações da gama de dispositivos e decidir sobre a abordagem técnica e o design do jogo em que você trabalhará.

Se o seu projeto não foi voltado para smartphones ou tablets, provavelmente você precisa repensar seus objetivos. Por exemplo, quase um terço das visualizações de página do Reino Unido são em smartphones e tablets, e esse número está crescendo a uma taxa que ultrapassará as visualizações de página do PC já em 2014. Enquanto os dispositivos de desktop ainda dominam as horas de trabalho, as manhãs estão liderando o caminho. dispositivos móveis, e à noite - tablets, e esses dois períodos de tempo são ideais para navegar na web e jogar.

Escolha suas batalhas

Chunk desenvolve jogos multiplataforma HTML5 para emissoras e marcas há dois anos e criou jogos móveis baseados em navegador para clientes como a BBC e a Disney, que rodam em tudo, desde HTC Desire a iPad4, Nexus 7 a Xbox. 360.

Como desenvolvedores, seria ótimo para eles decidirem até que ponto incorporar nesse processo, mas isso é determinado pelo público-alvo e pelos dispositivos que eles usam. Ao trabalhar em marcas infantis, muitas vezes eles tiveram que se encontrar dentro das limitações de telefones antigos ou dispositivos de baixo custo e baixo consumo, mas ao mesmo tempo projetar e otimizar cuidadosamente muitas outras coisas, e é por isso que eles ainda acreditam que é possível desenvolver jogos impressionantes para celular, a Internet.

E o que eles tiraram dessa experiência? Bem, se você tivesse que fazer uma lista de 10 Melhor conselho para desenvolvedores de jogos HTML5, ficaria assim:

1. Escolha um público

Observe os dados demográficos e quais dispositivos estão sendo usados pelas pessoas que você está segmentando. Se você tiver os dados, use-os para identificar os principais dispositivos que seus visitantes usam e baseie suas decisões nesses dispositivos.

2. Decidir sobre o design em termos de tecnologia

Sim, deve ser sempre assim, mas as limitações e a fragmentação do HTML5 o tornam ainda mais relevante. O WebGL permitirá que você faça um excelente jogo de tiro em primeira pessoa 3D, mas é improvável (leia-se: de jeito nenhum) funcionar em tablets se eles estiverem na sua lista de plataformas de destino.

3. Faça amizade com caniuse.com

É uma ótima maneira de testar rapidamente o suporte para qualquer recurso HTML5 que você gostaria de usar em seu desenvolvimento - para praticamente todos os navegadores e dispositivos.

4. Use dispositivos, não apenas simuladores

Coloque suas mãos o máximo possível vários dispositivos, execute o maior número possível de versões diferentes de sistemas operacionais. Os simuladores o ajudarão durante o desenvolvimento, mas você só poderá obter uma imagem precisa de como seu código funcionará em um dispositivo real. Há um grande número de laboratórios com dispositivos de teste, como o Open Device Lab, que lhe dará acesso a um grande número de dispositivos. Caso contrário, procure recursos como o eBay para encontrar telefones antigos e adicioná-los ao seu ambiente de teste.

5. Esteja ciente das mudanças

A especificação HTML5 está mudando constantemente, assim como o suporte a dispositivos, então você precisa se manter atualizado com as mudanças nessas áreas. Isso é especialmente verdadeiro em áreas como áudio, onde recursos como a API WebAudio podem mudar radicalmente a experiência.

6. Seja flexível durante todo o desenvolvimento

O que funciona hoje pode não funcionar amanhã. O que não está disponível para você hoje pode se tornar disponível amanhã. Permita-se ser flexível e se adaptar às mudanças que ocorrem durante o seu trabalho.

7. Funcionalidade de escala

Colocar o celular em primeiro lugar é útil para mais do que apenas o design tradicional da web. Veja como você pode criar algo bom para smartphones e, em seguida, decida sobre a funcionalidade e o desempenho em outras plataformas, se elas permitirem. Trabalhe para os dispositivos que usam agentes de usuário ou dispositivos de mídia e aplique sua experiência com eles.

8. BEIJO (Mantenha Simples, Estúpido)

De qualquer forma, tente definir os limites e expandir as possibilidades, mas lembre-se de que você está trabalhando com tecnologia que está em sua infância, o aumento da complexidade ou ambições de projetos superestimadas só piorarão sua situação.

9. Decida a vida útil de seus projetos

Os recursos mudam o tempo todo e seu conteúdo pode ficar desatualizado muito rapidamente com os novos recursos disponíveis nos dispositivos. Se o seu jogo durar o suficiente, reserve um tempo para corrigir bugs e atualizar a versão do jogo.

Oh sim. Verifique seus jogos para todos dispositivos disponíveis O mais frequente possível!

Gladiador, você monta no meu segundo sinal

O HTML5 parece ser a tecnologia central não oficial para o desenvolvimento de jogos multiplataforma entre navegadores, não há a menor dúvida sobre isso. NO este momento não é o espaço mais confiável, mas é normal para a tecnologia em sua infância. Para verificar os recursos dos navegadores, você deve se familiarizar com sites como caniuse.com. Verifique regularmente seus jogos o máximo possível mais dispositivos disponíveis para você e seja pragmático com o design do jogo. Isso ajudará você a evitar problemas não apenas agora, mas também estará em uma posição melhor quando o suporte ao dispositivo melhorar, o que é inevitável.

Jogos grátis no Android. Feito em html5, para que possam ser reproduzidos em seu celular e tablet. Além do sistema Android, são suportados dispositivos móveis Windows, Linux, Mac e Apple. O principal é que o navegador é moderno e o sistema é novo. Controle de mouse ou tela sensível ao toque.

Os jogos para Android são perfeitos. Eles podem ser jogados no PC e no telefone. Eles podem ser baixados (instalados) para acesso rápido.

Como baixar o jogo HTML5 no seu telefone

Acesse a página do jogo em nosso site. Abra o jogo em tela cheia em um navegador moderno como o Chrome. Clique no navegador no botão com três pontos, que oculta os comandos do menu para trabalhar com a página. Role a lista e selecione "Adicionar jogo a tela principal” (Adicionar à tela principal - se você não tiver o Chrome russificado). Depois disso, o jogo aparecerá na tela do seu telefone e será possível iniciá-lo diretamente, sem iniciar um navegador.

Esta operação está disponível para telefones e tablets android e Apple, mas para o último, o comando pode estar localizado em outro lugar - no menu inferior do Safari.

O jogo pode exigir internet para funcionar (ou não, dependendo das especificidades do jogo em particular - vários jogos estão disponíveis para offline, mas isso deve ser verificado agora.) O jogo é baixado e salvo automaticamente no seu telefone, mas uma conexão pode ser necessária para baixar placares online ou outros recursos.

Instale como um jogo Android normal

Quase todo jogo HTML5 tem uma versão sob sistema operacional Android ou iOS. Se a instalação de um jogo HTML5 na tela inicial não combina com você - digamos que você queira jogar o tempo todo, e não apenas quando houver Internet -, procure o ícone nas introduções dos jogos Google Play e AppStore. Embora os jogos sejam lançados com menos frequência para dispositivos da Apple, e com mais frequência você pode ver apenas botões do Android, como este:

Botão de instalação - procure-o em jogos

Nos próprios jogos, o botão é significativamente menor, aqui é ampliado para que você se lembre dele. Preste atenção na captura de tela do jogo abaixo - tente encontrar este botão lá. Eles levam ao Google Play oficial, onde você pode baixar versão gratuita jogos com recursos avançados - como a capacidade de jogar offline.

Dedicado aos fãs do jogo no Android ...

Quando me disseram pela primeira vez que tal coisa existe, não prestei muita atenção, já que geralmente não sou grande fã de todas essas tendências novas. No entanto, então percebi que os jogos para Android são algo como brinquedos de "plataforma" - imediatamente quis experimentar o que é. Ainda me lembro de como os jogos para o prefixo "oito bits" Dendy ou Sega pareciam empolgantes para mim. E aqui a civilização chegou ao que - basta pensar, um telefone sem botões e com uma função que permite jogar. É tentador, não diga nada!

De fato, um jogo é instalado em seu telefone (ou o processo do jogo é realizado exclusivamente pelo navegador - essa opção também está sendo considerada), prestando atenção para que você possa competir não apenas com inteligência artificial (ou seja, Computador pessoal), mas também com outros participantes (todo o processo decorre online).

Benefícios óbvios do HTML5

Não é nenhum segredo que o HTML5 está substituindo o Flash e é a base da Web moderna. É por esse motivo que os jogos criados com base nele começaram a funcionar na Internet - além disso, hoje os jogos que permitem competir com outros usuários estão cada vez mais despertando interesse dos clientes (especialmente se não for necessário baixar e instalar em seu computador ). Esse recurso, por sua vez, ajuda a se livrar de muitos malware, que não permitem que você trabalhe em seu PC.

Todos esses jogos para Android e PC são criados sob navegadores modernos e eles requerem apenas JavaScript, Canvas e HTML5 para funcionar com sucesso. Dependendo de quais tarefas precisarão ser executadas durante este jogo, é costume distinguir algumas variedades:

videogames
quebra-cabeças
Estratégias
Vôo
Aventuras
Raça
Para download
Navegador

Exemplos de jogos online para Android

Anteriormente, eu não estava interessado em jogar no telefone, mas tudo mudou depois que cheguei ao site. Lá eu me familiarizei com o que são os jogos online no Android, experimentei um grande número de “brinquedos” diferentes. Quanto a mim, melhores jogos para Android, apresentado neste site (e não apenas neste) - mahjong e.

Por que digo isso? Tudo é muito simples. Durante toda a minha vida eu prefiro jogos com viés estratégico e com um claro tom de temas medievais, além de fantasia. Então posso dizer que realmente encontrei o que gosto. Mas esse nem é o ponto.

O que eu mais gostei neste site é que ele contém o mais tipos diferentes jogos online, e além disso - na verdade, todos eles exigem muito pouco em termos de software (realmente, além de JavaScript, Canvas e HTML5, nada é necessário para o seu trabalho).

Jogos grátis para Android

Graças ao modelo Free2Play, todos os jogos Android apresentados neste site são gratuitos. Eles podem ser reproduzidos em tela cheia no PC e no tablet. Mas a principal coisa que os distingue dos jogos em flash é que eles podem finalmente ser jogados no telefone.

A tecnologia subjacente que torna os jogos HTML5 possíveis é uma combinação de HTML e JavaScript. A linguagem de marcação de hipertexto (HTML) fazia parte da superestrada inicial da Internet, como a chamavam na época, e continua a ser usada para atender a todos os sites hoje. O código JavaScript foi adicionado a navegadores de segunda versão como o Netscape 2.0 em 1995 e evoluiu ao longo dos anos para se tornar mais agradável de ler e escrever. Nos primeiros dias, era conhecido como DHTML ou HTML dinâmico porque era permitido conteúdo interativo sem atualização de página. No entanto, era difícil aprender e usar no início da era da web. Ao longo do tempo Javascript com a ajuda do Google Chrome desenvolvedores se tornaram uma das linguagens de script mais rápidas. Ele também possui mais módulos, bibliotecas e scripts disponíveis gratuitamente do que qualquer outra linguagem de codificação.

Os primeiros jogos DHTML eram muito simples. Alguns exemplos dos jogos da época eram Tic-Tac-Toe e . Como os jogos feitos com essa tecnologia usam o padrão aberto do HTML5, esses jogos relativamente antigos ainda podem ser jogados hoje em um navegador moderno. Essas tecnologias passaram para a vanguarda dos jogos de navegador porque não exigem plug-ins e são mais seguras de jogar do que as tecnologias mais antigas. Os jogos HTML5 também são compatíveis e a capacidade foi aprimorada para oferecer suporte a 2D e

Em vez de uma introdução.
Depois de passar vários dias seguidos (sem pausa para dormir) estudando o suporte a HTML5 para todos os meus gadgets Android favoritos, decidi que vale a pena prestar atenção neste tópico. No artigo vou tentar revelar passo a passo todas as etapas (claro, básico/chave/principal) da criação do HTML5 aplicativo de jogos para Android da ideia ao lançamento arquivo APK.
Talvez eu não revele nada de novo para desenvolvedores veneráveis, mas para iniciantes tentarei descrever tudo da maneira mais simples possível, com capturas de tela e explicações.

Aqueles que desejam aprender mais, convido sob cat.

Idéia
Em geral, muito pode ser dito sobre o potencial do Android, sobre o desenvolvimento do HTML5 e sobre sua interação. Eu não vou fazer isso. Então, direto ao ponto.

A ideia de criar um jogo para Android provavelmente está na mente de dezenas de centenas de desenvolvedores, e daqueles que se consideram como tal. Eu não sou uma exceção.

Por que HTML5? - Natividade. Você escreve um jogo em JS e, para absolutamente qualquer sistema operacional, cria um wrapper em uma forma conveniente e em qualquer idioma.

Todo o processo será dividido em várias etapas e a candidatura final constará de duas partes:
- Embrulhar em este caso para Android)
- Um jogo

Etapa 1. Escrevendo o jogo em si
Outro benefício de escrever um jogo em HTML5 é o fato de que não requer um monte de programas em execução, IDE, emuladores e assim por diante. Tudo que você precisa é de um navegador (Chromium no meu caso) e editor de texto(anchova)

O jogo será simples: se houver um retângulo azul e um retângulo verde. A tarefa do jogador é arrastar o retângulo azul para o verde, contornando o vermelho, que se move pelo campo de jogo em uma direção arbitrária.

Para desenvolvimento de jogos vou usar J2ds (game engine)

Código do jogo finalizado:

index.html

Jogo de demonstração no J2ds v.0

Você pode ignorar a qualidade do código do jogo, pois esse não é o objetivo do artigo. Embora, é claro, você possa otimizar o quanto quiser, esse processo geralmente é interminável.

Passo 2 estúdio android. Criando um wrapper para o jogo
Não vou medir a frescura deste ou daquele IDE para desenvolvimento Android com ninguém, mas vou mostrar Exemplo Android estúdio. Para o trabalho precisamos:
- Máquina Java (OpenJDK é adequado para o meu Linux)
- Distribuição do Android Studio.

Baixe, instale.
Depois que tudo estiver instalado (esses dois programas são suficientes), inicie o Android Studio.

A janela inicial será aberta (se for o primeiro lançamento), se não for o primeiro, o próprio IDE será aberto, mas não altera a essência, vamos ao SDK Manager:

Aqui você precisa marcar as caixas que você precisa versões do android, com o qual você vai trabalhar, no meu caso é o Android 4.4.2, você pode escolher pelo menos tudo de uma vez.

A principal coisa - certifique-se de selecionar "Ferramentas" e "Extras" e clique em "instalar pacotes".

Assim que tudo for baixado, o IDE começará com um fundo cinza e vários botões, pressione o primeiro e crie um novo projeto. Se o IDE iniciou imediatamente em condições de funcionamento, então: "Arquivo-> Novo-> Novo Projeto"

Preencha os campos obrigatórios e clique em Avançar

Selecione a versão desejada do android e Avançar

Aqui selecionamos Atividade em Branco (um modelo vazio com Olá, Mundo!)

Na próxima janela, preencha os dados para criação de classes, não vou alterar para maior clareza:

Pressionamos solenemente Finich e esperamos até que o IDE configure e prepare tudo para o trabalho.

A janela do designer de formulários será aberta. Não é o mesmo que em Lazarus, Delphi, mas ainda há algo semelhante:

Não se apresse em alterar nada ou clicar em algo, a configuração ainda não acabou.
Abra "Tolls->Android->AVD Manager" para configurar o emulador.

Aqui, se não houver nada, clique em "Criar Dispositivo Virtual", se houver, você não pode criar um novo, eu já tinha, porque Eu "tropecei" enquanto descobria. Se você precisar criar um novo emulador, tudo é simples lá:
1. Escolha o tamanho da tela e o modelo do telefone
2. Escolha a versão do android (tenho 4.4.2)
3. Configure o dispositivo.

Na terceira etapa com mais detalhes:

T.K. o jogo é esticado horizontalmente, você precisa selecionar o modo paisagem.

Quando todas as configurações forem inseridas, clique no triângulo verde e inicie o emulador. Depois de iniciar, esperamos até que o dispositivo esteja totalmente carregado e o SO seja iniciado:

Não feche esta janela, a emulação ocorrerá nela. Agora você pode retornar ao editor e alterar a orientação no designer de formulários:

Você pode correr! Agora é definitivamente possível.
Se você for solicitado a selecionar um emulador, marque a caixa abaixo:

Meus parabéns! Tudo funciona, verificado!

Minimize nosso emulador (mas não feche!) e vá para o editor, tudo é um pouco mais complicado (um pouco) lá.
Você precisa mudar para o modo "Texto". No seu activity_main estão descritos todos os elementos que estão no formulário. Incluindo o próprio formulário. E não é um formulário =).

Porque estamos fazendo um jogo em HTML5, e aqui temos apenas um wrapper para o jogo, removemos todo o texto e colamos o seguinte:

Agora, se você voltar para o design, ele ficará diferente:

Como você pode ver, agora em vez de “Hello, World”, um WebView estendido para tela cheia ostenta por completo. Este objeto é nossa "janela" para o mundo do jogo.

Você pode até correr, ver se vai Tela branca. Ir em frente.

E então precisamos ir ao nosso projeto, para isso abrimos o campo “Projeto” à esquerda e selecionamos a guia “Android”, caso não esteja selecionada:

Esta aba mostra a estrutura do projeto e todos os seus arquivos e recursos internos.

título do spoiler

Precisamos encontrar o arquivo "manifesto" e adicionar "aplicativo" à definição próxima linha:
android:hardwareaccelerated="true"

É hora de trabalhar na funcionalidade do nosso "navegador", porque é isso! Abra a classe "MainActivity.java" e remova tudo desnecessário, deixando apenas o principal:

título do spoiler

Pacote com.soft.scanner.demogamehtml5; importar android.support.v7.app.AppCompatActivity; importar android.os.Bundle; classe pública MainActivity estende AppCompatActivity ( @Override protected void onCreate(Bundle savedInstanceState) ( super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ) )

Se você não esqueceu, adicionamos um WebView no arquivo activity_main, preste atenção na linha em negrito:
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@+id/webView"
android:clickable="true"
android:scrollbars="nenhum" />

Precisamos declarar um objeto da classe WebView.

Para fazer isso, adicione à lista de importações:

Importar android.webkit.WebView;

E então declaramos nosso objeto myWeb dentro da classe MainActivity:

WebView protegido myWeb;

Agora, depois da linha setContentView(R.layout.activity_main); cole o seguinte código:

/* Encontre nosso navegador */ myWeb= (WebView) findViewById(R.id.webView); /* Configura nosso navegador */ myWeb.getSettings().setUseWideViewPort(true); myWeb.setInitialScale(1); myWeb.getSettings().setJavaScriptEnabled(true); /* Carrega a página */ myWeb.loadUrl("file:///android_asset/index.html");

Aqui está o que eu tenho no editor:

E aqui está o que está no emulador:

Se você sente o mesmo, estamos no caminho certo!

Falta pouco para fazer:
Onde carregamos a página em nosso navegador, o caminho para o arquivo se parece com isso: "file:///android_asset/index.html"
Deve-se notar que podemos armazenar quaisquer arquivos dentro do nosso jogo, tendo acesso a eles.

No nosso caso, a pasta chave é "android_asset", vamos criá-la (sim, não está no projeto por padrão):
“Arquivo -> Novo -> Pasta -> Pasta de ativos”, uma janela será aberta onde você só precisa concordar com o IDE.
Percebido? O projeto tem uma nova pasta:

Clique com o botão direito nele -> "Mostrar em Arquivos", o explorador do sistema será aberto (no meu caso, Nautilus), preste atenção no caminho para a pasta. Tenha em mente que a pasta é chamada de "assets", mas é acessada via "android_asset".

Então tudo é bem simples - copie nosso jogo para a pasta de ativos:

O arquivo index.html é o mesmo índice do início deste artigo. Bem, vamos tentar correr!

Um pequeno conselho: é melhor testar em um dispositivo real via USB, para que os resultados do teste sejam mais claros, e o controle do mouse não é a opção mais conveniente, sem mencionar vários cliques.

Etapa 3Android Studio Construindo o aplicativo e assiná-lo

Quando o jogo é totalmente depurado por você (em um navegador ou em um emulador), o wrapper está completamente pronto e todas as etapas de desenvolvimento terminadas, você pode construir o aplicativo. O Android Studio permite criar aplicativos e assiná-los com suas chaves.

Para criar chaves neste IDE existe utilidade especial ferramenta-chave.

Vamos passar para a criação de um arquivo de aplicativo executável ("Build -> Generate Signed APK"):

Se você não criou chaves e aliases antes, clique em "Criar novo"
Você pode preencher os campos a seu critério, a exatidão dos dados é inteiramente sua.

O primeiro campo é o caminho para a pasta onde a chave será salva.
Após clicar em Ok, o formulário será preenchido automaticamente:

Para aplicativos subsequentes, não é necessário criar novas chaves, você pode assinar outros aplicativos com sua chave, é exatamente para isso que serve o botão “Escolher Existente”
Na próxima etapa, o IDE solicitará que você insira a senha novamente e especifique a pasta para salvar o arquivo APK.
admin na categoria Sem categoria. Adicionar aos favoritos.

Depois de passar vários dias seguidos (sem pausa para dormir) estudando o suporte a HTML5 para todos os meus gadgets Android favoritos, decidi que vale a pena prestar atenção neste tópico. No artigo tentarei cobrir todos os passos (claro, básico/chave/principal) da criação de um aplicativo de jogo HTML5 para Android desde a ideia até o lançamento do próprio arquivo APK. Talvez eu não revele nada de novo para desenvolvedores veneráveis, mas para iniciantes tentarei descrever tudo da maneira mais simples possível, com capturas de tela e explicações.

Aqueles que desejam aprender mais, convido sob cat.

Idéia

Em geral, muito pode ser dito sobre o potencial do Android, sobre o desenvolvimento do HTML5 e sobre sua interação. Eu não vou fazer isso. Então, direto ao ponto.

A ideia de criar um jogo para Android provavelmente está na mente de dezenas de centenas de desenvolvedores, e daqueles que se consideram como tal. Eu não sou uma exceção.

Todo o processo será dividido em várias etapas e a candidatura final constará de duas partes:
- Wrapper (neste caso para Android)
- Um jogo

Etapa 1. Escrevendo o jogo em si

Outra vantagem de escrever um jogo em HTML5 é o fato de que o teste não requer um monte de programas em execução, IDEs, emuladores e assim por diante. Tudo que você precisa é de um navegador (Chromium no meu caso) e um editor de texto (BlueFish)

O jogo será simples: há um retângulo azul e um retângulo verde. A tarefa do jogador é arrastar o retângulo azul para o verde, contornando o vermelho, que se move pelo campo de jogo em uma direção arbitrária.

Para o desenvolvimento de jogos usarei J2ds (game engine).

Código do jogo finalizado:

index.html

Jogo de demonstração no J2ds v.0

Você pode ignorar a qualidade do código do jogo, pois esse não é o objetivo do artigo. Embora, é claro, você possa otimizar o quanto quiser, esse processo geralmente é interminável.

Etapa 2Android Studio Criando um wrapper para o jogo

Não vou medir a frescura deste ou daquele IDE para desenvolvimento Android com ninguém, mas vou mostrar no exemplo do Android Studio. Para o trabalho precisamos:
- Máquina Java (OpenJDK é adequado para o meu Linux);
- Distribuição do Android Studio.

Baixe, instale.

Depois que tudo estiver instalado (esses dois programas são suficientes), inicie o Android Studio.

A janela inicial será aberta (se for o primeiro lançamento), se não for o primeiro, o próprio IDE será aberto, mas não altera a essência, vamos ao SDK Manager:

Aqui você precisa marcar as versões do Android que você precisa com as quais você vai trabalhar, no meu caso é o Android 4.4.2, você pode selecionar pelo menos todas de uma vez.

A principal coisa - certifique-se de selecionar "Ferramentas" e "Extras" e clique em "instalar pacotes".

Assim que tudo estiver baixado, o IDE começará com um fundo cinza fosco e alguns botões, clique no primeiro e crie um novo projeto. Se o IDE iniciou imediatamente em condições de funcionamento, então: "Arquivo-> Novo-> Novo Projeto"

Preencha os campos obrigatórios e clique em Avançar

Selecione a versão desejada do android e Avançar

Aqui selecionamos Atividade em Branco (um modelo vazio com Olá, Mundo!)

Na próxima janela, preencha os dados para criação de classes, não vou alterar para maior clareza:

Pressionamos solenemente Finich e esperamos até que o IDE configure e prepare tudo para o trabalho.

A janela do designer de formulários será aberta. Não é o mesmo que em Lazarus, Delphi, mas ainda há algo semelhante:

Não se apresse em alterar nada ou clicar em algo, a configuração ainda não acabou. Abra "Tolls->Android->AVD Manager" para configurar o emulador.

Aqui, se não houver nada, clique em "Criar dispositivo virtual", se houver, você não pode criar um novo, eu já tinha, porque Eu "tropecei" enquanto descobria. Se você precisar criar um novo emulador, tudo é simples lá:
1. Escolha o tamanho da tela e o modelo do telefone
2. Escolha a versão do android (tenho 4.4.2)
3. Configure o dispositivo.

Na terceira etapa com mais detalhes:

T.K. o jogo é esticado horizontalmente, você precisa selecionar o modo paisagem.

Quando todas as configurações forem inseridas, clique no triângulo verde e inicie o emulador. Depois de iniciar, esperamos até que o dispositivo esteja totalmente carregado e o SO seja iniciado:

Não feche esta janela, a emulação ocorrerá nela. Agora você pode retornar ao editor e alterar a orientação no designer de formulários:

Você pode correr! Agora é definitivamente possível.

Se você for solicitado a selecionar um emulador, marque a caixa abaixo:

Meus parabéns! Tudo funciona, verificado!

Porque estamos fazendo um jogo em HTML5, e aqui temos apenas um wrapper para o jogo, removemos todo o texto e colamos o seguinte:

Agora, se você voltar para o design, ele ficará diferente:

Como você pode ver, agora em vez de “Hello, World”, um WebView estendido para tela cheia ostenta por completo. Este objeto é nossa "janela" para o mundo do jogo.

Você pode até correr, ver se vai aparecer uma tela branca. Ir em frente.

Esta aba mostra a estrutura do projeto e todos os seus arquivos e recursos internos.

Explicação

Precisamos encontrar o arquivo "manifesto" e adicionar a seguinte linha à definição "aplicativo":
android:hardwareaccelerated="true"

É hora de trabalhar na funcionalidade do nosso "navegador", porque é isso! Abra a classe "MainActivity.java" e remova tudo desnecessário, deixando apenas o principal:

Explicação

pacote com.soft.scanner.demogamehtml5; importar android.support.v7.app.AppCompatActivity; importar android.os.Bundle; classe pública MainActivity estende AppCompatActivity ( @Override protected void onCreate(Bundle savedInstanceState) ( super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ) )

Precisamos declarar um objeto da classe WebView.

Para fazer isso, adicione à lista de importações:

Importar android.webkit.WebView;
E então declaramos nosso objeto myWeb dentro da classe MainActivity:

WebView protegido myWeb;
Agora, depois da linha setContentView(R.layout.activity_main); cole o seguinte código:

Aqui está o que eu tenho no editor:

E aqui está o que está no emulador:

Se você sente o mesmo, estamos no caminho certo!

O arquivo index.html é o mesmo índice do início deste artigo. Bem, vamos tentar correr!

Etapa 3Android Studio Construindo o aplicativo e assiná-lo

Para criar chaves neste IDE existe um utilitário especial "KeyTool".

Vamos passar para a criação de um arquivo de aplicativo executável ("Build -> Generate Signed APK"):

Se você ainda não criou chaves e aliases, clique em "Criar novo". Você pode preencher os campos a seu critério, a exatidão dos dados é inteiramente sua.

O primeiro campo é o caminho para a pasta onde a chave será salva. Após clicar em Ok, o formulário será preenchido automaticamente:

Para aplicativos subsequentes, não é necessário criar novas chaves, você pode assinar outros aplicativos com sua chave, é exatamente para isso que serve o botão “Escolher Existente”.

Na próxima etapa, o IDE solicitará que você insira a senha novamente e especifique a pasta para salvar o arquivo APK.