Como criar um game html5

Um cavaleiro do espaço sobre a sua nave te anima a jogar e enquanto você decide, de repente você se vê, manobrando uma nave espacial, elegendo projéteis e atirando contra seus atacantes, que não são poucos. Assim começa o novo jogo html5 do site de videogames Spritted, chamado War Games: Space Dementia. “A ideia surgiu porque eu queria fazer um jogo com tema árcade de ação. Gosto muito do jogo Robotron 2084; ele é simples divertido e por isso em inspirar-me nele”, explica Eduardo Ortega, chefe de produto de Spritted, que desejou revelar todos os segredos, e junto com seus equipe explicou todas as etapas da criação de um videogame.

Eduardo se descreve com “um apaixonado pelos videogames e principalmente os que possuem uma jogabilidade simples e direta como proporcionam os jogos clássicos”, a ideia era criar War Games: Space Dementia como um “jogo Arcade, simples e fluído”. A primeira etapa no processo criativo de um videogame é ter uma ideia e uma vez definida é transmitida para a guia, ou seja determinar o tema do seu videogame. Para isso, a equipe que dará vida ao novo jogo deve reunir-se e esclarecer qual será o plano.

“Assim que tenho definido qual o tipo de jogo desejado, nos reunimos e criamos o esboço de uma visão geral do que será o jogo”, explica Ortega. Junto com ele trabalham um programador e desenhador. Este último cria primeiramente um esquema para a interface do usuário, ou seja, o menu, os botões e as transições entre telas. O desenhador também responsável pela experiência do usuário que consiste em desenvolver todo o fluxo de tela e eventos de uma forma intuitiva e amigável para o usuário”, segundo Ortega. E finalmente, o desenvolvimento do jogo, ou seja as telas, nos inimigos, os itens, etc... e tudo esboçado de uma forma geral. Assim que o desenhador realiza tudo isso e apresenta a Eduardo, que por sua vez aprova e o demais é colocado em pratica: os rascunhos do desenvolvedor e os primeiros códigos do programador.

Paixão e inspiração, musas do design de games

Daniel Peña o responsável pela criação dos personagens e de suas formas físicas aos objetos dentro do jogo. O desenhador de Spritted trabalhou anteriormente em agências de publicidade mas sua paixão pelos videogames fez com que ele acabasse criando o desenho. Este jovem de Valladolid afirmou que a ideia para desenhar War Games: Dementia surgiu ao escutar uma música dos anos oitenta: ‘Avalon’ de Roxy Music. Por conta deste título e depois da aprovação de Eduardo Ortega, decidiu-se criar os personagens relacionados a lenda do rei Arthur e os cavaleiros da mesa redonda.

O título inicial do jogo era Defenders of AVA, mas talvez seria entendido como referência ao grupo nórdico de música pop ABBA e foi alterado para Knights of Space para não criar confusões. No entanto, o título atual acabou sendo escolhido por razões comerciais. “O título Knights of Space era uma pequena homenagem aos Guardiões da Galáxia de Marvel” explica Peña, que confessou utilizar também essa pequena piscada no desenho da logo.

O processo de desenho é, surpreendentemente, bastante clássico. Daniel precisa apenas de papel e lápis para criar seus esboços, e quando tem a ideia clara e está satisfeito, scaneia os resultados e passa o Ilustrador. Este programa do Adobe permite digitalizar as ilustrações criadas. Ilustrações totalmente inspiradas, lembrando mais uma vez, no Rei Arthur. “K1-ARZ a bordo de sua nave XK-LIBUR deve defender 3 setores que rodeiam KM-LOT”; assim relata pena o argumento de War Games: Space Dementia e explica que K K1-ARZ é a versão galáctica de King Arthur.

Revelam também que a inspiração estética para este jogo foi em parte pelo ilustrador e pai do personagem de comic Hellboy, Mike Mignola e de seus característicos tons contrastados, a escassez de cor e os polígonos com que costuma trabalhar. Além da influência dos jogo clássicos de Arcade dos anos oitenta como Tron, Asteroids ou R-Type.

A programação, o esqueletode um videogame

Focado em sua paixão pela jogabilidade simples, Ortega propôs ao programador sua ideia de criar um jogo de sobrevivência mais simples e de apenas uma tela. David Satín comenta que cria jogos desde os onze anos de idade e agora é o programador de jogos de Spritted. Quando o chefe do projeto deu a responsabilidade do projeto a este jovem profissional para que criasse um jogo inspirado em Robotron 2084, em seguida surgiu a ideia do jogo Smash TV.

David sempre gostou deste clássico jogo de Arcade e predecessor de Robotron 2084, por isso decidiu continuar com a dinâmica de Smash TV para criar War Games: Space Dementia. Robotron saiu em 1982 e o objetivo do jogo era eliminar todo os robôs que se rebelaram contra os seres humanos no ano de 2084 e ir salvando os sobreviventes. Mais tarde, em 1990, o Smash TV foi criado e tinha o mesmo objetivo de sobrevivência: um concorrente de um programa de televisão do futuro deve matar seus atacantes e ir capturando ‘powerups’.

“Escolhemos fazer um jogo de naves porque o desenvolvimento era mais simples”, confessa David. Por tratar-se de um jogo com vista aérea, criar uma nave vista desde cima era mais fácil do que criar um homem. David explica que a criação do videogame é parecida a “quando você cria um desenho animado na bora de um livro e ao passar as páginas o desenho criar vida; assim cada página é um sprite”.  ‘Sprite’ é o equivalente aos fotogramas no mundo cinematográfico.

No caso de War Games: Space Dementia, o jogo foi planejado desde o início com vista aérea, e por isso as naves foram elegidas com o objetivo de criar as oito posturas que o movimento de uma pessoa requer: de frente, de costas, de lado, etc. “Se você cria um tanque avião, visto desde cima, como não possui cabeça nem nuca e nada similar, basta criar um Sprite”, afirma David. Oito postura requerem oito vezes mais tempo, tanto para programar – já que cada movimento necessita um código – como para desenhar.

David vai programando em função dos desenhos que chegam de Daniel. Trabalham mão a mão e tomam decisões em conjunto, ainda assim David é o responsável de lhe atribuir inteligência artificial a cada objeto do jogo, ou seja um comportamento especifico. “Cada tipo de nave tem um comportamento e inteligência únicos. As dos dois primeiros níveis são lentas e com movimentos errôneos, as últimas ao contrário, possuem apenas uma margem de erro e são capazes de fazer perseguição em equipe e antecipar seus movimentos”, explica Santín.

É possível atribuir movimentos e comportamentos únicos a cada objeto do jogo graças ao controle das variáveis que foram o Universo, e segundo Santín “Algumas destas variáveis são a velocidade, gravidade, velocidade de reação, capacidade de disparo, vidas, capacidade de seguimento e de autogiro.

Sem dúvida, umas das grandes dificuldades enfrentadas por David durante a criação de War Games: Space Dementia foi conseguir um bom rendimento apesar de todo o movimento das naves, projéteis, personagens, etc, que há no jogo. “É difícil encontrar no mercado jogos em html5 para mover tantos objetos simultaneamente a um ritmo tão bom”, conclui David.

Html5, um idioma universal?

Santín explica que o “programa html5 possui muitas dificuldades principalmente no rendimento já que não é tão potente como uma linguagem nativa, mas tem a vantagem de ser multiplataforma”. A linguagem nativa é a própria de um processador específico e cada jogo possui a sua; Apple, Android, etc. “Se você programa um aplicativo em seu código nativo é como cria-lo no idioma deste dispositivo, e por isso você não tem que ‘traduzir’ nada, sendo mais veloz”.

Por isso, é possível afirmar que o html é um idioma compreensível para todo o mundo mas não é nativo, e por isso não será tão eficiente. “É o que acontece ao usar um idioma comum, pois logo cada dispositivo deverá interpretá-lo em seu próprio idioma”, conta David.

Por esse motivo, o programador necessita ter um cuidado e ênfase especial para gerar um código muito eficiente, já que o código será jogador em todos os tipos de dispositivos, desde computadores muito potentes até celulares antigos com conexões lentas. O html5 não se comportará da mesma maneira em um dispositivo e em outro, e por isso é necessário vários teste para que o resultado final seja uma boa execução em todos.

Inclusive, ao jogar com o celular temos há a sensação de estar conduzindo uma nave graças à dinâmica da dual joystick, característica de Robotron 2084 e Smash TV. E graças ao Phaser, Framework utilizado por David para programar os jogos, havia acabado de lançar o plug-in de dual joystick foi possível inserir no jogo sem ter que criá-lo desde o zero.

 “Phaser é um Framework, considerado um conjunto de estruturas de programação focadas e enfrentar algum tipo de problema. Concretamente, Phaser está orientado à criação de videogames”, esclarece Santín. Ele é o responsável por manejar os sprites, inserir sons, possui ferramentas para a criação de jogo e está focado em atribuir-lhes um rendimento muito alto.

Apesar da ideia inicial de Eduardo Ortega fosse q de criar um jogo de sobrevivência simples de apenas uma tela – que permite jogar indefinidamente até perder – o resultado foi bem diferente. Ao ver o potencial do jogo e poder dedicar tempo (confessam que isso coincidiu no verão), seus criadores foram mais além e acabaram criando um jogo html 5 muito mais desenvolvidos e detalhado. Definitivamente, um jogo de naves que se divide em zonas em três zonas, nas quais oi protagonista deve enfrentar cinco tipos de inimigos que atacam de forma diferente, e ao vencer o mostro todas as vezes. Essa é a magia dos games e a dinâmica da sua criação.

Artigo escrito por Paula Gil Alonso.