Month: November 2015

Desafio Semanal GAME ART #02 – TEMA

Chegou o dia!  E o tema é:

Escola / Tower Defense

Você deve criar a arte para um jogo Tower Defense com a perspectiva Planométrica Oblíqua e limitações do Megadrive (256×224 com 16 cores por sprite), que se passa numa Escola.

Bem simples, as mecânicas de um tower defense, na maioria dos casos, são bem simples e claras.

Bom… é só isso! Até o próximo post deste desafio!

Advertisements

Desafio Semanal #01 – Processo

Agora o post que prometi na semana passada. O passo a passo!

1) Comecei definindo a grade (tiles de 16×16) e coloquei o cubo do tutorial #00 para ajudar a determinar a escala da altura. Também coloquei logo a região correspondente ao tamanho da tela.

Passo01

2) Como o tema precisa de espaços urbanos, tratei de elaborar um tileset para as ruas, e montei um mapa para verificar a escala. Achei que ficou bom dessa forma. Nessa etapa ainda não estava me preocupando com detalhes e com relação às cores, só me preocupei com os valores para mostrar uma certa iluminação.

Passo02

Passo02_2

3) Com base numa referência, comecei a elaborar o primeiro prédio. Decidi que cada andar terá altura de 4 pixels. Ainda sem detalhes no objeto, apenas o valor.

Passo03

4) Continuei fazendo outros prédios, baseados nas referências, seguindo as formas retas e quadradas da época que se traduzem bem em pixel art.Passo 4

5) Depois já estava atrasado com o desafio, e comecei a pensar apenas no mock up. Resolvi criar uma determina região da cidade. Defini algumas ruas, onde terá água e um pequena região num nível mais elevado.

Passo04

6) Pensei em colocar alguma textura no tile para as calçadas das ruas. Essa textura só tem 3 cores. Usei modo tiling da PSDAnim para verificar como ficaria a repetição dos tiles. Todos os tiles tem esse mesmo padrão. Para evitar copiar o padrão para cada tile, usei os patterns do Photoshop. Defini o tile como um pattern, selecionei a região da calçada de cada tile e dei um Fill Pattern.

Passo05

7) Depois pensei nas cores finais. Como foi definido que terá um efeito sépia na tela. Resolvi usar um cheat. Criei um Adjustment Layer do tipo Gradient Map e ajustei as cores do degradê. Nesse ponto não estava satisfeito com as valores do asfalto e da água.

Passo06

8) Comecei a fazer os tiles para representar a mudança de nível do terreno. Sempre me preocupando com a perspectiva e os valores.

Passo07

9) Apliquei uma textura ao prédios da mesma forma que foi feita com as calçadas.

Passo08

10) Tendo já boa parte do material, comecei a montar o mapa. Combinei alguns tiles de prédios para fazer um prédio maior. Nesse ponto eu já tinha ajustado os valores da água e do asfalto. Outro detalhe importante são as sombras dos prédios. No fim, não gostei da legibilidade em geral dos prédios.

Passo09

11) Então resolvi colocar um outline para separar mais.

Passo10

12) Então chegamos no resultado final:

Passo11

13) Ficou faltando adicionar a água para representar a inundação. Para isso, foi bom ter separado cada os elementos em camadas desde o início. Os tiles das ruas e calçadas estão numa camada e os prédios em outra camada. Então bastou criar uma camada entre eles e preencher com os tiles de água. Em seguida foi só criar outra camada por cima para representar a água que aparece na frente dos prédios.

Passo12

É isso. Espero que tenha gostado. Amanhã começa o segundo desafio! Até lá!

DesafioSemanal01_result

DEVLOG #03

Sábado é dia de devlog!

Nesta semana me distanciei da programação de mecânicas do jogo e foquei em aspectos como documentação, preparação para o level design, persistência e comecei a programação do menu quando o jogo é iniciado. Haverá uma tela de seleção de número de jogadores (1 ou 2), configurações de controle e personalização de cada personagem.

Também comecei a pensar na música tema do jogo, que será tocada no final da fase tutorial. E falando em música, sempre fico atento a alguma promoção em efeitos ou instrumentos virtuais e como é Black Friday, promoções não faltaram. Passei a quinta e sexta pesquisando vários produtos que coubessem no meu orçamento de $50… hehe. Fiquei em dúvida entre o Strummed Acoustic, Sessions Strings, Sessions Horns da Native Instruments, Quatum Leap Solo Violin da EastWest e, finalmente, os Renassance Channel e PuigTec EQs da Waves. No final decidi pelo Strummed Acoustic. Queria poder comprar mais… hehe.. Mas pelo menos temos algo grátis! A Waves deu o TrueVerb, um reverb algorítmico muito bom. Ele junto com o Inverse Reverb da IK Mulmedia (que também peguei grátis meses atrás) me deixam satisfeito no campo dos reverbs algorítmicos. Só falta um bom reverb de convolução true stereo…

Enfim, uma semana sem muitas novidades para mostrar… Até a próxima!

PSDAnim 0.3.2

Mais um update da PSDanim! (Se você ainda não a conhece, clique aqui).

Durante a elaboração dos tiles do desafio semanal, tive a ideia de adicionar o suporte a tiling na PSDAnim.

Novidades:

  • Conserto de alguns bugs que foram introduzidos na versão anterior.
  • Zoom até 8x.
  • Nova visualização: tiling.

Gostou? Baixe aqui!

 
psdanim3.png

Se tiver alguma dúvida, deixe seu comentário. É isso!

Em breve novas features!

Devlog #02

Mais um sábado, mais um post de devlog!

Nesta semana adicionei várias coisas! Comecei testando a implementação de um reconhecedor de padrões para ser utilizado em alguns puzzles do jogo. Como foi feito? A base de entrada era composta por 6 classes, contendo 8 amostras cada. Em seguida, criei dois classificadores usando o algoritmo k-NN (com k=3 ou 5), sendo que o primeiro utilizaria momentos de Hu para o vetor de características e o segundo apenas o histograma. Escolhi estas características, pois são rápidas de implementar e não tem uma grande complexidade para serem computadas em tempo-real (as imagens utilizadas no jogo são de 128×128 px). Posteriormente, os resultados dos dois classificadores são combinados e classe com o maior número de indicações (os classificadores faz k1 e k2 indicações) é a escolhida. Porém, se ela não atingisse mais da metade dos votos ((k1+k2)/2), o padrão de entrada seria rejeitado. Pois bem, depois de vários testes fui ajustando o classificador, mas a taxa de acerto não estava sendo suficientemente boa. Fim do primeiro dia…

No segundo dia, fiz mais experimentações, e nada satisfatório… Talvez outras características?… Por fim, acabei eliminando este método, pois pensei em outro mais familiar para os jogadores. Imagine a tela de bloqueio do seu celular. Dividi a imagem em zonas, e em seguida calculo o histograma de cada zona. Se o valor dos pixels preenchidos for maior que um limiar, significa que aquela zona foi marcada. Ter um limiar  é importante, pois o jogador pode pintar sem querer alguma zona ao deslocar o cursor de pintura. Outro ponto importante desta forma é valorizar traços retos e diagonais, já que o controle do cursor é preferencialmente feito por um joystick. Então, nada de desenhos complexos.

Reconhecerdor de Padrões

Nos dias seguintes, foram basicamente de implementações de mecânicas para jogos de plataforma: botões acionáveis, plataformas móveis, escadas, itens coletáveis, etc.

Enfim, uma semana de bastante trabalho e muitas ideias para a próxima semana… Até o próximo sábado!

Desafio Semanal #01 – Resultado!

Olá! Aqui trago o meu resultado do desafio semanal! Como fiquei meio focado nesses últimos dias no Our Worlds e em outras coisas, o tempo planejado para o desafio acabou sendo menor do que eu imaginei… Em breve terei esse tempo disponível novamente! Outro ponto, é que escopo planejado acabou sendo muito grande, deixei de fazer muitas coisas da lista que elaborei..  (me empolguei com a ideia do jogo). Mas chega de mimimi! Na imagem acima você pode ver o meu resultado. Foi um bom aprendizado. Utilizei essa perspectiva pela primeira vez par fazer uma arte de jogo e achei satisfatório para o tempo alocado. Enfim… Durante a próxima semana, criarei um post detalhado do processo de criação e o próximo desafio começa no dia 29/11! Até lá!

DevLog #01 + Update do Desafio Semanal

Estou estreando outra série de posts chamada DevLog! Aqui falarei um pouco do desenvolvimento do jogo que é a expansão do jogo “Our Worlds” que criei na Ludum Dare #30. No momento, só tenho programado as funcionalidades, ainda não toquei na programação gráfica nem a arte do jogo. Algumas novidades:

Sistema de Itens e Inventário: Ontem programei a parte gráfica do inventário. Inicialmente, resolvi colocá-la acima do personagem. Depois testarei em algum lugar fixo na tela.

Editor de Fases: O jogo está sendo criado com a DPEngine, que é um framework que criei um tempo atrás para jogos 2D em pixel art e possui um sistema rápido e próprio de colisões por pixel! Logo, as fases não são baseadas em tiles nem polígonos de colisão. São utilizadas máscaras (imagens) para determinar onde há ou não colisões. Esse método tem algumas vantagens, como utilizar máscaras irregulares e/ou dinâmicas de colisão . Uma desvantagem é que utiliza mais memória, mas isso não é problema hoje em dia. Para o editor de fases, o que fiz foi incluir a rasterização dos polígonos criados pela PolyMesh e suporte para salvar e carregar uma polymesh em um arquivo.

Polígono rasterizado


E sobre o desafio semanal…

Desafio Semanal

Bom.. tive que adiar a data final para a próxima semanal. Acabei tendo que fazer outras coisas no horário planejado, mas está indo! Anteontem fiz alguns testes de tamanho. Resolvi utilizar tiles 16×16 e construí os shapes de alguns prédios para testar a escala. Parece bom.

Desafio Semanal #01 – Primeira Fase do Processo

No post de domingo foi dada a especificação, de acordo com a fase 1 da primeira: D1-Receber Especificação do Problema. Evitei dar mecânicas para que cada um tivesse sua liberdade criativa e procurasse responder às suas próprias dúvidas. A partir deste ponto, comecei a procurar informações e referências sobre inundações para obter um entendimento sobre o assunto (nota mental: talvez seja melhor mudar o nome desta etapa para ‘Entender o Problema’). Então, pesquisei na wikipédia sobre inundações em português e inglês. Encontrei acontecimentos interessantes nos anos 30, como esta lista de inundações nos Estados Unidos e a enchente de Porto Alegre em 1941, há fotos e vídeos sobre estes acontecimentos.

Com base nas informações coletadas anteriormente, iniciei a etapa 2 (D2 – Definir Possíveis Soluções). Listei as causas, efeitos e formas de evitar as inundações, como pode ser observado no diagrama abaixo. Também procurei palavras-chave para descrever o ambiente naquela época e como queremos dentro do jogo. Como não havia informado as mecânicas, o sistema do jogo em si, acabei criando-as um neste momento (um exercício de game design é sempre bom!), apenas um esboço para ter informações necessárias para determinar quais serão os assets a serem feitos.

Brainstorm - Clique para ampliar

Brainstorm – Clique para ampliar

Finalmente ao final desta etapa, defini que teremos os seguintes assets:

  • Terreno (não plano): grama e terra. com perspectiva RPG Top-Down. A iluminação será como se estivesse sempre meio nublado pela manhã, perto do meio-dia, com efeito sépia em tudo.
  • Água: representar rios, lagos e mar.
  • Visão subterrânea.
  • Cidade (ruas, prédios, carros), inspirada em Nova York dos anos 30.
    • Prédios para cada nível de ocupação, e antes e depois de serem atingidos.
  • Representação da inundação.
  • Construções de drenagem.
  • Interface gráfica (calendário, tamanho da população, dinheiro, previsão do tempo).

Em seguida na etapa 3, coletei referências sobre os prédios de Nova York de 1930, diversas imagens de inundações em cidades da época e da atualidade, além de imagens que possam representar o “mood” que queremos.

Bom, é isso pessoal. Como é primeira semana deste desafio, ainda tenho que melhorar algumas coisas. Se algo não ficou  muito claro ou se omiti algo que você considera important, poste qualquer dúvida nos comentários. Então, tudo ok? Já podemos colocar a mão na massa (ou os pixels na tela)!

Desafio Semanal de Game Art: Semana #01 – Tema

Chegou o dia!  E o tema é:

Inundações

Você deve criar a arte para um jogo de simulação ou gerenciamento, com a perspectiva RPG Top-Down, ambientado nos anos 30, com limitações do SNES (256×224 com 16 cores por sprite; máximo de 256 cores simultâneas) em que o objetivo é minimizar as perdas provocadas pelas inundações.

O tema foi gerado meio que aleatoriamente baseado em várias listas que criei (gêneros de jogos, perspectivas, página aleatória da wikipédia, etc). As mecânicas fica por conta da interpretação de cada um. Não há necessidade de implementá-las. Fique ligado nos próximos posts ao longo da semana em que detalharei o meu progresso, e claro que você pode começar já! Agora!

PSDAnim 0.3.0

Acabei de disponibilizar a versão 0.3.0 da PSDAnim. Agora a versão Windows vem com um instalador e não é mais necessário instalar bibliotecas de terceiros. Para usar é só instalar e executar! Outra novidade é a possibilidade de ocultar/exibir animações.

A PSDAnim é uma ferramenta que criei pra auxiliar o meu processo de criação e exportação de animações em pixel art dentro do photoshop e outros programas que exportam em psd (como o Clip Studio Paint). Cada vez que você salva o arquivo, a ferramenta detecta a mudança e atualiza a visualização instantaneamente! Cada quadro é um grupo na raiz com o formato “NomeAnimacao_Numero” (por exemplo”walk_1″ é considerado um quadro da animação walk), porém o número não indica a ordem. A ordem dos quadros é fixa, de baixo para cima. Isso evitar ter de gerenciar os grupos e camadas dentro da timeline do Photoshop.

Download (grátis)!