neurobit

[neurobit]

Instruções de como jogar e carinhas animadas! :D

[neurobit]

Argh! 3 meses sem postar aqui. Mas estou vivo, e trabalhando no jogo, sim :) Mais atualizações em breve, cheias de novidades!

[neurobit]

Organização de assets

Outro dia o Rami do Vlambeer postou algo interessante sobre desenvolvimento de jogos:

E como ele está certo! Polir e lançar demora pra cacete! Eu devo estar lá pelos 200%. E olhe que esse jogo é simples pra cacete.

Voltei a trabalhar no BlobPong após uma semana tentando fazer um protótipo funcionar para a GBJam, sem sucesso.

Estava disposto a começar as animações dos paddles, mas quando abri o PSD com os assets eu quase chorei com tamanha desorganização (sim, tudo culpa minha).

Estava assim:

Uma loucura, eu não sei como cheguei até aqui com esse arquivo desse jeito hahahha! Na verdade eu fui criando os assets e exportando, sem me preocupar muito com organização. Mas chega uma hora que fica anti-produtivo trabalhar assim.

E lá se foi um tempo para organizar todos os assets em um só arquivo:

E as camadas:

Por sinal, esse é um recurso incrível que foi implementado desde o Photoshop CC 2014: é possível exportar gráficos usando essas 'tags' nas camadas, nomeando da maneira como você quer que seja exportado. Não é preciso mais exportar imagem por imagem, é só usar essa nomenclatura (detalhes aqui) e ativar em File > Generate > Image Assets.

Abraços :)

[neurobit]

SBGames 2015

Vamos às atualizações! Desde a ultima vez que postei aqui, o jogo nem tinha nome oficial ainda. Pois agora tem, batizei de Blob Pong e até já criei uma logo pra ele: 

Além disso, no dia 11 de agosto descobri que o SBGames estava com inscrições abertas para participar da mostra de jogos. O SBGames é um simpósio anual que acontece em uma cidade diferente a cada ano e é voltado para desenvolvedores de jogos, com palestras sobre game design, arte e programação. Já participei duas vezes e gostei muito, vale a pena gastar uma graninha e ir lá conferir como anda nossa indústria.

Mas voltando à inscrição, era o último dia e eu tive que preparar um material às pressas: screenshots, dois vídeos (um trailer de gameplay e outro do jogo rodando num device de verdade) e deixar o jogo com uma cara mais profissional para entrar na categoria de jogos em desenvolvimento.

Melhorei as telas de menu, pause e fim de jogo, tirando os placeholders e colocando uns gráficos melhores.

Foi beeeeem corrido e bem chato editar os vídeos, o tempo para inscrição estava acabando e eu não tinha nenhum programa de edição para fazer os trailers. Dei uma pesquisada rápida e não encontrei nenhuma alternativa grátis que fosse intuitivo o bastante. Nas alternativas pagas encontrei o ScreenFlow que é muito fácil de usar e foi uma mão na roda na hora de editar os vídeos. Gravei a tela do Mac com o QuickTime e me gravei jogando no iPhone com o MotoX (qualidade péssima). Consegui fazer os dois vídeos que ficaram bem simples, mas que servem pra demonstrar como o jogo funciona. Confiram abaixo:

Trailer de Jogabilidade:

Demonstração no iPhone:

No fim, deu tempo de fazer a inscrição e agora é esperar para ver se o Blob Pong entra na mostra.

Abraços!

[neurobit]

Dias 7, 8, 9...

Tá na hora de me livrar da contagem de dias nos títulos dos posts. Às vezes trabalho bastante num dia e fico cansado ou sem vontade de escrever. Não quero nem preciso que esse blog seja uma coisa obrigatória, no final das contas terminar o jogo é o mais importante.

Pois bem, desde a última vez que escrevi aqui, o jogo mudou bastante. Vamos às mudanças:

Arte: eu estava querendo mudar os skins dos paddles para algo mais relacionado à espaço, e fiz essa nave:

Coloquei no jogo e achei que ficou bem sem graça. Não combina com o estilo de arte que eu imaginei pro jogo.

Fui por um caminho totalmente diferente e dois blobs fofinhos para usar como skins dos paddles:

Gostei bem mais desses, já coloquei no jogo (como deu para ver no gif do post anterior) e por enquanto estou bem satisfeito. Ainda preciso fazer os outros estados dos paddles: idle, movimentando, colidindo com a bola, fazendo ponto e tomando ponto.

A bola agora é azul, assim como suas partículas de rastro e explosão.

Game design: durante o jogo vão aparecer algumas estrelas que poderão ser coletadas pelo jogador (bola vinda do paddle do jogador, colide com estrela) e estas poderão ser acumuladas para o jogo continuar em caso do jogador tomar um ponto (que causa um game over). Quando a bola vier do inimigo, a estrela não é coletada.

Monetização: no caso de game over, o jogador pode escolher pagar com uma quantidade de estrelas para continuar o jogo ou assistir um AD. Preciso pesquisar como exibir ADs no jogo, mas não deve ser complicado.

Variáveis: descobri que as variáveis precisam ser setadas para o valor inicial toda vez que o layout é reiniciado, pois elas são persistentes se não houver uma mudança de layout ou reinício total do jogo.

Menus: Estou usando bastante o LiteTween para exibir e sumir com os menus. O plugin é bastante poderoso e bem completo, mas é preciso ter um pouco de cuidado para não quebrá-lo com a secagem de parâmetros.

Dificuldade: O jogo estava muito difícil nos primeiros pontos e ficando muito fácil quando o score ia aumentando, deveria ser o contrário. Fiz uma regra pra velocidade da bola aumentar cada vez menos a medida que o score aumenta e fiz o paddle inimigo ficar cada vez mais rápido. Ficou bem melhor mas preciso de testes.

Ângulo da bola: corrigi um problema que a bola às vezes ficava com um ângulo muito horizontal e ficava batendo em linha reta de um lado pro outro sem subir ou descer. Às vezes ela até voltava pro sentido contrário, era bem estranho. O que fiz foi observar se as bola estava entre os ângulos mais horizontais (0º e 10º, 170º e 180º, 180º e 190º, 350º e 360º) e rotacionar a bola 15º no sentido relativo à direção.

Gambiarra: às vezes eu acho que estou fazendo muita gambiarra e que algumas funcionalidades poderiam ser feitas de alguma maneira mais simples e mais rápida. Mas quer saber? O que importa é que o jogo funcione, e que eu consiga entender o "código".

E finalmente gifs com as mudanças!

[neurobit]

Alguns bugs são simplesmente lindos!

[neurobit]

Dia 6

Mudei o gameplay. Agora o jogador precisa fazer o maior score possível, não é mais comparação de score com a IA. Se o jogador perder uma bola (inimigo pontuar) é game over.

À medida que o jogador vai pontuando, a velocidade do jogo aumenta. Deixa eu explicar: criei um fator de dificuldade que vai aumentando à medida que o jogador pontua (acerta a área adversária). Esse fator é usado pra definir a velocidade da bola e a velocidade da IA.

A ideia aqui é fazer uma progressão de dificuldade que faça o jogador querer bater o próprio score toda vez que recomeçar o jogo. Preciso dizer que está bem desbalanceado ainda. Tá super difícil nos pontos iniciais e vai ficando fácil à medida que os pontos aumentam (devia ser o contrário, né). Vou pensar nisso.

A bola agora volta pro paddle do jogador quando este marca um ponto.

Ainda sobre o gameplay, estou pensando em fazer uns planetas atravessarem a tela, só pra causar mesmo. Também quero fazer uns coletáveis, que poderão ser usados para fazer a partida continuar (em caso de game over). Não sei se deveria já estar me adiantando nisso, mas estou pensando em como monetizar, usando ads em vídeo no final das partidas ou para fazer o jogador continuar... Vou amadurecer isso.

GIF TIME:

[neurobit]

Dia 5

O problema de usar apenas o tempo livre pra trabalhar em algum projeto pessoal é perceber que existe pouco tempo livre. A evolução é lenta, mas o é importante manter o foco e não perder interesse no projeto.

Hoje fiz uns testes com um addon de behaviour chamado Litetween que ajuda a fazer movimentos de uma maneira muito fácil e intuitiva. Muito bom para movimentar objetos com efeitos elásticos e suavização ease-in e ease-out. São detalhes que dão uma polida nas animações, deixando tudo bem fluido. Pretendo usar esses movimentos em mudanças de tela, pra exibir botões e elementos de HUD.

Falando de telas, adicionei uma splash inicial e um menu antes de iniciar o jogo. E finalmente saiu o score! 

Resultado do dia:

[neurobit]

Dia 4

Falei que ia fazer o score hoje, não fiz. hahahah. Falei que gosto de partículas né? Pois coloquei bastante delas, quando a bola passa dos paddles e marca um ponto.

Uma coisa que parece simples mas que deu um trabalhinho pra fazer foi esse efeito da bola sumir em fade na colisão nas extremidades da tela e aparecer no centro. Isso porque tive que desabilitar o bullet, tirar a visibilidade das partículas de rastro, dar fade-out na bola, esperar 2 segundos, reposicionar no centro e restaurar a visibilidade do rastro. Ah, e mostrar a explosão da bola, que é o mais legal.

E ficou assim:

Será que amanhã sai o score? 😛

[neurobit]

Dia 3

ARTE!

Hoje foi produtivo! Olhando o post de ontem, parece outro jogo. Nada como colocar uns gráficos legais.

Deixa eu mostrar logo o gif, pra falar sobre o que mudou:

- Velocidade: fiz a bola ficar super rápida, e a velocidade muda de acordo com a posição que a bola bate no paddle, quanto mais nos cantos mais rápida é a velocidade que a bola retorna. Utilizei o mesmo conceito da definição de ângulo de retorno, a diferença é que preciso de uma velocidade pequena no meio e velocidades maiores nos lados esquerdo e direito do paddle. Pra isso, transformei o produto da equação em um valor positivo, que soma velocidade a partir do centro, tanto pra direita quanto pra esquerda, dependendo do ponto de contato da bola com o paddle: 

- Inteligência do inimigo: também deixei bem mais rápida, pra balancear a dificuldade (pros meus reflexos, preciso ver outras pessoas jogando para balancear melhor). Talvez valha a pena ter 3 níveis de dificuldade para serem escolhidos no início. Outro ponto que vale a pena comentar é que eu não deixo o inimigo acompanhando a bola em super velocidade o tempo todo, quando a bola está longe, eu diminuo a velocidade do paddle e assim fica parecendo um movimento mais natural.

- Área de interação: a área do touch agora vai até o meio da tela. Caso o dedo escorregue pra cima, o jogador ainda não perde o controle do paddle.

- Feedback: quando a bola bate nos paddles, estes balançam um pouco para dar a sensação de pancada. Usei o behaviour "Sine", ativando na colisão da bola com o paddle e desativando após o período do Sine.

- Partículas! Adoro partículas! Criei um objeto de partículas e usei o behaviour "Pin" para grudar no ângulo e posição da bola.

- Gráficos: uma boa prática no Construct é usar imagens básicas com o formato que você precisa pra colisão e deixar os gráficos finais do jogo apenas acompanhando esses objetos, usando o behaviour "Pin". Assim você não precisa ficar setando minuciosamente todos os pontos de colisão.

- Fundo: a imagem de fundo agora tem 1400x1400px de tamanho (bem maior que a tela. Assim ela funciona em outros dispositivos com proporções de tela diferentes.

- Paddles: não sei porque motivo o paddle que o jogador controla com o touch não colide com as paredes laterais. Por isso, limitei os paddles para eles não saírem da largura da tela utilizando uma fórmula bem ruim hahaha, não vou mostrar.

- Sprite font: como estou fazendo um jogo pra dispositivos móveis, depender de fontes de sistema não é uma opção. Inseri uma sprite font e utilizei a default do Construct pra testar, apenas mudando a cor pelo Photoshop. Esse artigo no site da Scirra dá uma ajuda. O texto que aparece no gif está estático.

Amanhã devo fazer o Score. Ou não! 😄

[neurobit]

Dia 2

Eu estava um pouco desanimado hoje mas acabou que o dia valeu a pena. Dormi pouco na noite passada e por conta disso fiquei cansado, sem muita cabeça pra desenvolver.

Resolvi escrever um pouco das funcionalidades do jogo e escolher um tema. Dei uma lida numas partes do livro de Jesse Schell (A Arte do Game Design) sobre estética e tema pra refrescar um pouco as ideias. Um tema que gosto muito é espaço. Penso muito em fazer jogos com temáticas espaciais.

Resolvi ir por esse caminho, trabalhar na arte, usando o tema de espaço. Procurei algumas referências no Pinterest e esbocei um background de espaço para colocar no jogo. Fiquei em dúvida qual resolução utilizar, se fazia padrão iPhone 6 (375x667px) ou retina (750x1334px). Resolvi ir pelo padrão, para poder depois fazer upscalling para outras resoluções. Preciso lembrar de usar tudo em vetor ou bitmaps enormes reduzidos em smartobjects (estou usando Photoshop). Um bom artigo sobre as diversas resoluções do iPhone é esse The Ultimate Guide To iPhone Resolutions do PaintCode.

Ansioso de saber como o background ficaria no jogo, exportei a imagem com resolução retina, dei boot no Windows e abri o Construct. Sei lá por qual motivo o projeto não rodava o preview. Mexi nas configurações e coloquei o endereço ip da máquina virtual como url de preview ao invés do padrão localhost. Funcionou!

Só por curiosidade resolvi acessar essa url diretamente pelo iPhone, não funcionou. Lembrei que o firewall do Windows estava ligado, o que poderia estar bloqueando o acesso. Criei duas regras liberando o acesso pela porta 50000, a padrão do Construct e sim, consegui acessar o preview diretamente pelo iPhone, sem precisar exportar o projeto no Construct. É só rodar o build e o iPhone atualiza automagicamente o preview no browser. Invalidou todo meu workflow de ontem, hahaha. Melhor assim. Ficou mais rápido para testar.

Aproveitei para fazer a "inteligência artificial" do paddle inimigo, que nada mais é que acompanhar o eixo X da bola, simulando o comportamento 8-direction pra direita e para a esquerda.

Abaixo os builds rodando no Moto X (é, derrubei e quebrei a tela dele) e no iPhone 6:

E um gif, pra mostrar o paddle inimigo acompanhando a bola:

[neurobit]

Dia 1

Hoje praticamente configurei o "ambiente de desenvolvimento" e criei o projeto inicial.

Primeiro problema: Uso Mac e o Construct só roda em Windows. Então vamos lá:

- Baixei e instalei o VirtualBox da Oracle que cria máquinas virtuais. Poderia ter usado o Bootcamp no Mac pra criar uma partição e rodar Windows nativo, mas não tô afim de ficar pulando de sistemas operacionais o tempo todo. O Construct é leve e roda bem no VirtualBox.

- No VirtualBox usei uma imagem de um Windows 7 que tinha aqui na máquina e instalei com mais ou menos 40GB de HD, 2GB de RAM e 32MB de vídeo. Tá rodando bem, mas talvez precise de mais vídeo posteriormente.

- Com a ajuda desse vídeo, configurei algumas pastas compartilhadas entre o Mac e o Windows para poder colocar arquivos que possam ser usados nos dois sistemas.

- Baixei o Construct, instalei, apliquei o arquivo de licença que também já tinha.

- Para poder testar no iPhone, criei um workflow bem básico e rápido: no Construct, exporto o projeto em HTML5 para uma pasta compartilhada que aponta para o diretório público do meu Dropbox no Mac. No Mac, copio o link público do index.html e abro no Safari. O Safari está configurado com iCloud Tabs e com isso as abas do desktop podem ser visualizadas no Safari do iPhone. No iPhone, abro a página do arquivo, e adiciono à Home Screen.

- Esse processo só precisa ser feito uma vez. Toda vez que eu exportar o projeto, é só esperar o Dropbox fazer o upload e abrir o jogo no iPhone, que já está com o ícone criado na Home Screen.

Testei um projeto básico e rodou sem problemas. Bom sinal pra começar com o Pong. Pra isso, criei os Paddles, uma bola e paredes, para colisão. Na maioria dos exemplos, os desenvolvedores usam o Bullet Behaviour na bola e deixam ela quicar nos paddles com um ângulo randômico ou exatamente igual ao da colisão.

Eu quero ser mais purista e fazer o Pong mais parecido com o original, que dependendo do ponto em que a bola colide em relação ao paddle, ela quica de volta com uma velocidade e ângulos diferentes, por exemplo, quanto mais nos cantos do paddle a bola bater, mais inclinado é o ângulo em que ela volta, e mais rápida é a velocidade.

Pra isso usei o evento que define manualmente o ângulo de movimentação da bola com a seguinte expressão: 270 + 75 (Ball.X - Paddle.X) / (Paddle.Width / 2)

Essa expressão cria uma variável de -1 a 1 que é multiplicada a um limite que eu escolhi, no caso é 75 graus. Lembrando que no Construct, o ângulo 0º fica à direita, 90º voltado para baixo, 180º à esquerda e 270º para cima.

Copiei o comportamento para o paddle adversário invertendo a direção para baixo, adicionei uma faixa para o Touch, fiz os paddles seguirem o X do touch e cheguei no resultado abaixo:

Valeu por hoje. Amanhã pode ser que eu tente mudar a velocidade da bola de acordo com a posição de colisão. Ou comece a trabalhar na arte. Ou nenhum dos dois! 😊

[neurobit]

Decidi começar (voltar?) a desenvolver jogos

Já criei uns tantos protótipos mas nunca finalizei nenhum jogo (por conta própria). Tenho alguns lançados, mas foram fruto de trabalho em equipe.

Há alguns meses resolvi desenvolver sozinho porque não tenho tanta paciência de começar projetos com outras pessoas e parar no meio caminho (ou bem no início) por falta de vontade de uma das partes ou por incompatibilidade de tempo e de momentos da vida.

Sozinho posso lidar eu mesmo com minha ansiedade, frustração e conflitos de ego.

Estou usando o Construct 2 da Scirra como plataforma de desenvolvimento porque tenho mais segurança / costume com esse programa e fujo o máximo de escrever linhas de código.

É, sou designer, formado em faculdade de desenvolvimento de jogos e não gosto muito de programar. O Construct é uma ferramenta que utiliza a lógica de programação sem a necessidade de criar código. A maioria das funções já estão prontas e só precisam ser utilizadas em eventos e ações.

Resolvi começar com um jogo BEM simples. PONG. Acho que não dá pra ser mais simples que isso. Quero finalizar rápido e lançar na Apple Store, pro iPhone. Tenho um iPhone 6, um iPad 3 e um Moto X, que vou usar como plataformas de teste pros jogos. Lanço pro iPhone, se achar que vale a pena, lanço nas outras plataformas.