Guia prático: como colocar sua ideia no papel e aumentar as chances de criar jogos indie consistentes (final)

A prototipagem rápida é uma opção interessante na hora de criar jogos indie e pode se transformar em um diferencial ao participar de uma seleção via editais.

Para a maioria dos desenvolvedores indie de primeira viagem, quando se fala em redigir um projeto, o GDD (Game Design Document) é o primeiro elemento que vem a mente.

Visto como uma bíblia de informações, cheia de detalhes nas mais diversas áreas, o game design document perde cada vez mais força para quem está começando.

A elaboração deste documento é um pouco cansativa, já que é necessário apresentar todas as definições e registrá-las em um documento para que toda a equipe tenha acesso.

Para projetos com equipes pequenas, o desenvolvimento textual do GDD não é, na maioria das vezes, uma tarefa prática.

Ademais, deve-se levar em conta que detalhar uma ideia de um jogo em suas diversas áreas (programação, arte, game design, etc.), pode não ser suficiente para que todos compreendam seu projeto.

Mas qual a solução para resolver esses impasses?

Existem diversas técnicas, mas a que eu mais me adaptei foi a dos wireframes.

 

O que são wireframes?

Wireframe é um desenho básico, um esqueleto de um “objeto” (site, jogo, aplicativo, etc). Seu objetivo é mostrar a forma da peça para facilitar a compreensão dos membros envolvidos (clientes, desenvolvedores, usuários, etc.).

E porque fazer isso para jogos?

Já ouviu aquele ditado “uma imagem vale mais que mil palavras”?

A lógica é a mesma.

Ao construir esse esqueleto visual, toda as suas ideias para gameplay, as funcionalidades existentes, comandos, etc, vão se traduzindo em ícones que são organizados na tela.

Para começar, sugiro que você trace, no mínimo, um fluxo simplificado contendo as telas que o usuário passará.

Foto 01: Fluxo do usuário, protótipo do autor.

Observe. Comum a todo edital, primeiro as logomarcas das entidades envolvidas são exibidas (governo, estúdio, etc). Em seguida, é apresentado a tela inicial (menu), para depois apresentar a narrativa proposta.

Ao ser imerso no mundo do jogo, o jogador tem contato com um bloco denominado tutorial. Neste espaço é apresentando os controles do jogo, e mecânica de combate, etc. Após vencer o desafio inicial, ele chega ao menu de fases ou “mapa da cidade” (nome utilizado para esse projeto).

O mapa é a principal tela para acessar as fases e também nele é introduzida a opção de configurações (alteração de brilho, som, etc.). Repare que a seta não possui uma direção, isso indica que as telas “mapa cidade” e “configurações” podem alternar entre si.

Ao concluir as fases, uma nova seta direcionando ao boss é inserida. Dessa forma, ao vencer o boss o jogador pode retornar à tela inicial.

 

Prototipagem rápida

Com o fluxo em mãos, você terá uma ideia das telas que deverá criar para o seu jogo e conseguirá desenhá-las de maneira mais precisa.

Durante todo o processo, tenha em mente três pontos.

  • Primeiro: essas telas não representam o conceito final do jogo. Elas buscam apenas estruturar sua ideia de maneira prática para os colegas entenderem sua visão.
  • Segundo: seu foco deve ser agilidade e organização. Não gaste tempo desenhando ícones perfeitos ou detalhando o que não é necessário. Foque em transmitir a ideia.
  • Terceiro: o objetivo do fluxo é delimitar as principais telas do projeto. No entanto, elas podem trazer pop-ups ou novas telas que não necessitam, necessariamente, estar no fluxo.

Para fazer uma explicação prática dessa técnica, utilizarei um exemplo próprio de um projeto que desenvolvi. O texto a seguir é o conceito de um jogo cultural.

“Nome do jogo é o projeto de um jogo digital sobre um transformista que explora uma cidade intolerante atrás de informações sobre o seu professor. Desenvolvido para smartphones, o jogo propõe reflexões sobre comportamentos intransigentes em relação a pessoas diferentes daquelas socialmente aceitas pela maioria por meio de uma arte caricata e de um mundo fantasioso. O desenvolvimento deste produto cultural considera que os jogos digitais são atravessados de linguagens que, simbolicamente, criam significados e propõem reflexões críticas ao jogador.”

O conceito anteriormente apresentado foi criado após a construção das telas. Nesse cenário, eu já tinha noção de como o jogo aconteceria e ficou mais fácil criar um conceito “formal” para a comissão avaliadora.

Hora dos wireframes, vamos lá!

Foto 02: Tela logomarcas (apresentação dos envolvidos no projeto).

A primeira tela traz apenas a questão das logos. Acho interessante colocá-la, pois na hora que os avaliadores analisarem seu projeto, perceberão que você leu todo o edital (as logomarcas dos envolvidos são obrigatórios em editais).

Foto 03: Tela inicial (utilizada para gerar material de divulgação sem entrar na verba do marketing).

Em seguida, temos uma tela inicial com o nome do jogo. Muitos jogos não utilizam quando desenvolvem para mobile, fica a seu critério. Acho interessante, pois é mais um material para divulgação e não entra diretamente na verba de marketing.

Foto 04: Tela apresentação da narrativa (diálogo entre os personagens do jogo).

Dando sequência ao fluxo apresentado, temos a tela em que é feita a apresentação da narrativa. Como é um jogo com elementos de rpg, fiz uma tela simulando um diálogo para exemplificar como será feita essa apresentação (também mencionei no projeto).

Foto 05: Tela tutorial (apresentação de comandos básicos para o jogador).

Após essa introdução, trago uma tela com um tutorial básico para o jogador. O diálogo exemplifica como serão passadas as instruções e, de certa forma, tranquiliza o avaliador, pois ele percebe que estou sendo claro e coerente em minhas explicações.

Foto 06: Tela mapa cidade ou mapa de fases.

A tela Mapa Cidade é a principal e nela é possível alterar as configurações em relação ao jogo (intensidade de brilho, ligar ou desligar volume, etc.). Aqui o jogador acessa as fases e caminha em direção ao boss (simbolizado pela caveira).

Foto 07: Tela mapa cidade (inserção de um pop-up para apresentar o primeiro bloco de fases).

Ao selecionar um ponto no mapa, um pop-up surge trazendo o título do bloco “Testando o disfarce” e o primeiro grupo de fases denominado “O primeiro passo”. Todos esses blocos foram mencionados no item de apresentação da narrativa, no qual deixei bem claro que se trata de uma estrutura construída apenas para direcionar o roteirista. Afirmo também que não detalharei todos os tópicos, pois podem ocorrer alterações ao longo do desenvolvimento.

Foto 08: Tela fases, momento em que o jogador escolhe seus equipamentos.

Ao iniciar o bloco, inicia-se o processo de fases com uma tela para “construção” do personagem. Aqui, o jogador escolherá quais itens utilizará para essa aventura. No projeto também costumo apresentar alguns exemplos de itens, mas deixo claro que é um direcionamento e não uma escolha definitiva.

Foto 09: Tela fases (apresentação do gameplay).

Por fim, apresento a tela do gameplay (dentro do bloco de fases). Como essa tela traz os recursos mais utilizados, faço a explicação (posteriormente) no item sobre interface. Uma sugestão é utilizar números e dizer o que cada um representa conforme a imagem abaixo.

Foto 10: Apresentação da interface do projeto. – O nº 1  representa as barras contendo os pontos de vida e de performance do jogador que varia de acordo com suas interações pelo cenário e combate com os oponentes. O nº 2 acessa as missões disponíveis.

 

Para fechar

A construção de wireframes é uma técnica que me faz visualizar, na prática, o projeto  que pretendo desenvolver.

Ao construir essas telas, sempre focando em agilidade e objetividade, consigo eliminar várias dúvidas e até mesmo eliminar questões que não tinha pensado anteriormente.

Outro ponto positivo é na hora de fazer orçamentos.

Assim, mostrando o que foi produzido (mesmo de maneira simplificada), a pessoa que trabalhará na equipe conseguirá ter uma dimensão clara do que pretendo realizar.

É importante ressaltar que essa técnica pode se transformar em um diferencial na hora de criar jogos para editais e você deve anexar o material produzido junto ao seu projeto. No entanto, não se esqueça, um bom resultado envolve diversos outros fatores.

Por fim, pensando na questão de praticidade, deixo um site que traz diversos ícones muito úteis para criar wireframes.

http://iconmonstr.com/

E você, utiliza ou conhece alguma técnica para facilitar a escrita de projetos?

Se você gostou do conteúdo e deseja acompanhar as novidades, cadastre-se para receber tudo em primeira mão.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *