Construct 2: Facilidades e Limitações na Produção de Games

Este é um artigo sobre Construct 2 escrito pelo Valter Pilares, engenheiro de automação e desenvolvedor independente de jogos.

O Valter Pilares também é membro da Academia de Produção de Jogos, nosso treinamento online com cursos, entrevistas e uma comunidade incrível de desenvolvedores de games.

Eu tive o prazer de conhecer pessoalmente o Valter em um encontro da Academia de Produção de Jogos no começo de 2016:

Foi nesse encontro que o Valter me falou sobre o jogo que ele estava desenvolvendo na Construct 2 e que gostaria de escrever um artigo compartilhando um pouco da experiência dele com a engine.

Dito e feito! Hoje eu deixo vocês com esse excelente artigo sobre as facilidades e limitações de desenvolver jogos com a Construct 2.

Com vocês, Valter Pilares

Para qual plataforma você está desenvolvendo o seu jogo? Qual a complexidade? Quantos membros possui a sua equipe? Você é um artista que não quer se envolver com programação? Está iniciando no mundo da produção de jogos?

Acredito que responder a estas perguntas antes de se adotar uma engine seja a melhor forma de se chegar a resultados incríveis!

Se você quer criar um jogo em HTML ou para desktop, mas não possui equipe e não manja nada de programação, sem problemas! A Construct 2 provavelmente vai atender a uma boa parte de suas necessidades!

Desenvolvendo jogos na velocidade da luz usando a Construct 2

Que tal deixar as suas ideias pularem da sua cabeça direto para o game sem ficar preso nas amarras da programação?

Sem muito esforço e em questão de minutos isso é possível. Abaixo temos uma imagem e uma mecânica de um game que ilustrará esse fato:

Ao mantermos pressionado o manche da esquerda, controlamos a direção da nave. E caso pressionemos o manche da direta, a nave atira na direção desejada. Percebam a angulação do manche esquerdo e da nave são iguais. O mesmo ocorre com a angulação do manche direito e dos tiros.

O que temos acima é um controle multi-touch que reconhece dois ou mais toques simultâneos (muito utilizado em jogos de tiro em primeira pessoa, jogos tipo Geometry Wars e muitos outros gêneros).

No Construct 2 fica assim:

Primeiramente definimos as variáveis TOUCHMOVE e TOUCHPOINT como -1:

Nos blocos de funções 24, 25 e 26, em qualquer início de toque, se “TOUCHMOVE” for igual a “-1” e o objeto “JOYSTICK” (joystick esquerdo) estiver tocado, a identidade desse toque (expressão “Touch.TouchID”, a qual gera um número positivo aleatório) será armazenada na variável “TOUCHMOVE”.

O mesmo ocorre para a variável “TOUCHPOINT” e o objeto “NORMALFIREBUTTON” (Joystick direito), o qual a identidade do toque será armazenada em “TOUCHPOINT”:

Definidas as funções acima, observe as condições para que o bloco 27 (movimentação da nave) ocorra:

• O Joystick esquerdo deve estar pressionado;
• A figura do Joystick deve estar sobrepondo pelo menos alguma parte do objeto BASEJOYST (base do Joystick indicada na seta vermelha), pois assim a área de atuação do Joystick será limitada para não prejudicar outros possíveis comandos que possam aparecer na tela;

• E a variável TOUCHMOVE precisa ser maior ou igual a 0 já que a condição inicial dela é -1, o que indica que nenhum toque foi realizado e, consequentemente, nenhuma ID atribuída.

Com as condições acima satisfeitas, o objeto JOYSTICK seguirá a posição do toque identificado, enquanto ele durar.

Observe que a função set position do Joystick é composta por uma posição no eixo X, Y definida através da expressão (Touch.XForID(TOUCHMOVE,(“LAYER4”)),(Touch.YForID(TOUCHMOVE,(“LAYER4”))), onde o toque é identificado através da variável TOUCHMOVE e ocorre na Layer onde estão os manches e todos os objetos da UI (LAYER4):

Também será alterada a opacidade do manche e da borda do manche, gerando um efeito de feedback positivo, como se o manche estivesse ligado:

Em seguida, através de um dos behaviors da nave,“moveto”, incluímos a seguinte função de deslocamento:

Ela se moverá a 50 pixels/segundo no angulo da reta resultante entre o centro da base do Joystick e o centro do Joystick.

A nave também terá a mesma angulação de seu movimento:

Caso uma ou mais condições de movimentação da nave não sejam obedecidas, a condição “else” é ativada e as seguintes funções serão executadas:

O Joystick é centralizado com a sua base e as opacidades são diminuídas, gerando um efeito de desligamento. Além disso, a variável TOUCHMOVE, a qual pode conter a identidade do toque do manche direito, volta ao seu valor inicial.

Para o Joystick direito, temos praticamente o mesmo conceito, exceto que ao invés de variarmos a opacidade do manche, variamos somente o frame da sua animação (um frame com maior ou menor opacidade). Além disso, temos uma sub-rotina que fará a nave atirar a cada 0.1 segundo, caso as condições do bloco 29 sejam atendidas (na verdade quem atira é o objeto FIREGENERATOR, anexado na ponta da nave):

Note que nestas funções não estamos interferindo em nenhum aspecto da nave, mas estamos variando o angulo do objeto FIREGENERATOR da mesma forma que variamos o angulo da nave. Como o projétil possui o behavior bullet, no momento em que for gerado, a sua direção será de acordo com a angulação do objeto FIREGENERATOR, ou seja, através do manche controla-se a direção dos tiros!

Simples, não? Além disso, desempenho em um game conta muito, certo? Games gerados em Construct 2 quando exportados para HTML ou Windows podem chegar muito próximo aos sonhados 60 FPS, mesmo com muita física e grande quantidade de sprites na tela!

Veja também: Construct 2 e Telas Sensíveis ao Toque: Configurando os Controles do Seu Jogo Mobile

Mas, nem Tudo é felicidade…

Agora, com uma ferramenta poderosa assim, você deve estar pensando: “Vou exportar o game para Android, atingir um maior número de downloads e competir com outros games de sucesso!”

Foi pensando assim que, durante a fase de prototipagem do game Gravitaxi (game que será lançado na maratona da Academia de Produção de Jogos), levamos um grande susto!

Várias mecânicas como a apresentada acima foram testadas em um curtíssimo espaço de tempo, o que talvez não fosse possível em outra engine. O importante é que chegamos a uma conclusão rápida à respeito do que precisava ser mudado no game, inclusive, a própria ENGINE! É, só a ENGINE…

O que houve?

Na hora de exportar o game para Android, tudo virou um pesadelo! Celulares de desempenho mediano e até alguns de alto desempenho estavam rodando o game, mas com um FPS baixíssimo! Em torno de 20 FPS ou menos. Em alguns casos chegavam à travar!

Tentamos construir o APK em diversas plataformas. As que apresentaram melhor desempenho foram a Intel XDK e a Ludei (CocconJS), mas mesmo assim ainda não atingiam nem mesmo 30 FPS! O que estávamos fazendo de errado?

Desempenho APIs Canvas 2D e WebGL

Depois de vários testes e pesquisas chegamos às causas dos problemas.

A Construct 2 gera games baseados em HTML5. Nessa nova versão foi introduzido o API Canvas, o qual permite a geração gráfica diretamente no browser, através de script Java.

No entanto, a geração gráfica a partir do elemento Canvas exige uma grande carga de processamento, já que simplesmente é pedido que se desenhe uma imagem em uma determinada posição. Essa método é conhecido como renderização por software, onde a CPU faz todos os cálculos. Para um hardware de desktop isso é factível, mas para dispositivos mobile esse conceito fica impraticável, já que estamos lidando com hardwares bem menos potentes.

É aí que entra o WebGL! Baseado no OpenGL, é um API que trabalha no elemento Canvas do HTML5, gerando renderizações 3D e 2D de maneira muito mais eficiente, pois trabalha com a renderização por hardware. Nesse caso, a GPU é a responsável por todos os cálculos de posicionamento e transformações dos vértices das imagens. Imagine o triângulo abaixo:

Ele possui 3 vértices definidos em 2 dimensões (X,Y). Para renderizá-lo, o WebGL gera uma lista de vértices e suas respectivas posições (x,y) para cada frame e a informa diretamente à GPU através de shaders (programas que são escritos em uma linguagem própria do OpenGL, mas que são criados e compilados a partir de Java script).

Mesmo o preenchimento e cores desse triangulo são realizados de maneira semelhante ao posicionamento e transformação dos vértices.

Mas, enfim, qual a diferença de desempenho de um dispositivo rodando um game em HTML apenas com Canvas 2D e esse mesmo dispositivo rodando HTML com WebGL?

Verificou-se em testes comparativos a capacidade de diversos dispositivos manter um mínimo de 30 FPS aumentando-se o número de sprites na tela. Os resultados apontam que o WebGL é capaz de gerar até 3,5 vezes mais sprites do que o Canvas. Um ganho de performance impressionante!

E esse resultado obviamente influi diretamente no tempo de cada frame. Imaginem que para manter 60 FPS cada frame deverá rodar em 1/60 s (16 ms). Esse tempo tem que ser suficiente para a renderização e processamento do script do jogo. Então quanto melhor o API de renderização gráfica, mais tempo sobra para a lógica, a qual depende muito do programador e da complexidade do game.

Suporte para WebGL em Dispositivos Android

Ao exportar um game a partir do Construct 2 para Android, você está construindo um aplicativo nativo a partir de um game feito em HTML5. Com isso você exporta também o API WebGL e todas as suas funcionalidades. No entanto, muitos dispositivos ainda não possuem suporte para WebGL.

Com isso, a renderização das imagens passa a ser através do Canvas 2D, o que limita consideravelmente os tipos e a qualidade dos jogos que poderão rodar no dispositivo. Segue uma lista de compatibilidade:

Uma boa notícia é que o número de dispositivos e browsers que estão adotando WebGL vem aumentando consideravelmente. Provavelmente em um futuro bem próximo, praticamente todos terão esse suporte. Mas até lá, o que fazer? Comprei o Construct 2 para fazer jogos para PC e Android e assim será!

Otimizando o Desempenho do seu Game

Otimizar o desempenho do seu game sem comprometer a qualidade do mesmo é sempre uma boa prática, mas quando o assunto é crosswalk de HTML5 para Android a otimização é mandatória!

Como desenvolvedor você deve prever que muitos dispositivos não terão suporte para WebGL. Nesse caso, seguem algumas dicas muito eficazes para melhorar o tempo de processamento da lógica:

• Diminua o número de vértices dos blocos de colisão das Sprites. Para a maioria dos casos 4 vértices resolvem o problema;
• Evite expor muitas sprites num mesmo frame.
• Evite o uso de partículas! Em mobiles que rodam apenas Canvas 2D ela só vai travar o sistema! Lembre-se que uma partícula é uma sprite;
• Reduza o número de frames das animações. Deixe entre 10 e 12 FPS;
• Evite usar o behavior Physics. Esse é o grande matador de desempenho. Para a movimentação de objetos, ao invés de usar impulsos ou aplicação de força sobre objetos use 8 direction, moveTo, etc;
• Evite criar ou destruir sprites. O ideal é reaproveitá-los no mesmo Canvas. O processo de deslocamento de sprites utiliza muito menos processamento do que a criação ou destruição de sprites;
• Use TileMaps ao invés de cenários desenhados. Além de deixar o game mais rápido, também vai deixá-lo menor, pois o TileMap compõe o cenário utilizando uma mesma sprite diversas vezes.

Não limite a sua criatividade buscando sempre o melhor desempenho. Procure testar e variar os itens acima para encontrar um ponto ótimo de desempenho x qualidade. Se você viu que um dispositivo mais modesto está rodando bem com 100 sprites na tela, ótimo! Coloque mais 100.

Esperamos que as dicas acima o ajude a utilizar o Construct 2 da melhor forma possível. Embora tenha algumas limitações para mobile, elas tendem a sumir num futuro muito próximo. Já para desenvolvimento em desktops, o céu é o limite!

Comentários Finais (por Raphael Dias)

E aí, curtiu o artigo do Valter?

Então agora eu quero te dar seu próximo passo:

Se você também quer começar a desenvolver jogos, eu sempre recomendo começar dos mais simples para ir ganhando experiência. Eu criei um ebook com uma seleção de 16 jogos simples para você ter como uma referência sobre o tipo de jogo que eu acredito ser ideal para quem está começando.

Além disso, também incluí a quantidade de cópias vendidas de cada um desses jogos (dados reais vazados da Steam). Baixe o ebook gratuitamente no botão abaixo: