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

0 Flares 0 Flares ×

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:

Academia de Produção de Jogos

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:

Construct 2

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:

construct-2-valter-pilares-1

construct-2-valter-pilares-2

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

construct-2-valter-pilares-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”:

construct-2-valter-pilares-3

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

construct-2-valter-pilares-4

  • 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;

construct-2-valter-pilares-5

  • 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):

construct-2-valter-pilares-6

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:

construct-2-valter-pilares-7

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

construct-2-valter-pilares-8

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:

construct-2-valter-pilares-9

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:

construct-2-valter-pilares-10

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):

construct-2-valter-pilares-11

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!

construct-2-valter-pilares-12

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…

construct-2-valter-pilares-13

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?

construct-2-valter-pilares-14

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:

construct-2-valter-pilares-15

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:

construct-2-valter-pilares-16

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.

construct-2-valter-pilares-17

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!

construct-2-valter-pilares-18

Comentários Finais (por Raphael Dias)

E aí, curtiu o artigo do Valter?

Então agora eu quero te dar seus próximos 2 passos:

Passo #1: Baixe o ebook gratuito “12 Dicas Matadoras Para Criar Jogos na Construct 2” para dar seus próximos passos com a Construct 2.

Passo #2: Comente abaixo respondendo a pergunta “Você já desenvolveu algum jogo usando a Construct 2? Se sim, qual?

Fico esperando seu comentário abaixo.

Grande abraço,

Raphael Dias