Sonatta Sonatta
Post-mortem de Arte 2016
Faculdades Metropolitanas Unidas - FMU Graduação Tecnológica em Jogos Digitais
Gisele Miura
Post-mortem de Arte Protótipo: Sonatta
São Paulo 2016
Introdução Este post-mortem foi elaborado com o intuito de recapitular a arte elaborada para o projeto game Sonatta do qual participei, para avaliar o sucesso do projeto, identificar as melhores práticas do mesmo, as áreas problemáticas e fornecer sugestões detalhadas para a melhoria em projetos futuros. Integrei-me à equipe em setembro de 2015, participando dos ultimos dois semestres do projeto, entregue em 10 de maio de 2016 como TCC (trabalho de conclusão de curso) a faculdade FMU .
Desempenho dentro do projeto Inicialmente fiquei encarregada da vetorização das artes, remodelar a identidade visual, a arte da HUD, como o menu e a tela inicial do jogo. Criei um grupo no facebook onde foi possível um feedback mais rápido da equipe.
Logo da equipe - Dinobox
Logo pre-existente meu primeiro Logo para a Dinobox
mudou o semestre e resolvemos mudar o Logo. Precisávamos de um conceito mais polido e generalista.
Logo do jogo - Sonatta
Logo pre-existente um modelo guia..
testes..
OK! nada ficava bom.. resolvi escolher uma bela referĂŞncia
Sonatta
Cenários (composições já existentes) Para ajudar nos novos cenários, eu precisava combinar a arte com os personagens prontos e verificar o que já tinha sido feito. E a resolução do tamanha da tela usada seria de 1280x1024 para o personagem de 160x128.
Cenários (referências) Começando minhas contribuições para os cenários do projeto Sonatta. As referências fornecidas foram os jogos Guacamelle, Tiny Thief, Scribblenauts, Teslagrad, FEZ.
Guacamelle
Scribblenauts
Tiny Thief
Teslagrad FEZ
Cenários (Desenvolvimento) O primeiro cenário foi o mais difícil. Analisei muitas referências tanto de fotográficas quanto artísticas. Os cenários foram feitos em geral com o Illustrator, alguns com mix de Photoshop e Illustrator, ambos da Adobe.
Celeiro
Primeiro concept
Definitivamente não ficou bom, busquei mais refêrencias
Concept Final
Na composição, foram aproveitados poço e barris do itens de arte já feitas no grupo
Celeiro
no semestre seguinte foi acrescentado a casa do personagem principal e a parte interna do celeiro
Ficou assim na gameplay
Sala A sala da casa do personagem principal foi descontinuada na versão seguinte do jogo. Servia como “start” para a jornada do herói.
sketch fornecido por Bruno e quadro feito por ele.
É claro, alterações eram contínuas.
arte final
Vilarejo Casas empilhadas em “andaimes” dão uma visão peculiar para a cidade principal de Sonatta. Abaixo sketchs e esquemas fornecidos pelo grupo.
Vilarejo O conceito de profundidade foi baseado na referência de construção de casas do jogo Guacamelee, onde a lateral da casa não tem perspectiva, apenas a sensação de profundidade através de tons mais escuros.
Primeiro concept - visão geral
Close
Alteração nos níves dos andaimes com inclusão da casa abandonada
Igreja A parte externa da igreja manteve o mesmo padrão das construções externas (cidade). Os vitrais tiveram como referência um cenário do jogo Teslagrad. Mas outros modelos de vitrais também foram pesquisados para estudo.
Primeira versão
Versão final
sketch fornecido por Bruno
referência: cena do jogo Teslagrad
vitrais com instrumentos musicais
Interior da Igreja Alguns cenários foram construídos de uma forma diferenciada, visando dar profundidade e um clima de misterio: o interior da igreja e a caverna (ou templo sagrado) foram feitos em várias camadas. Outro cenário que foi feito em camadas foi o vilarejo, fundo, nuvens, montanhas, colinas, casas e outros objetos foram separados e movimentados na engine em velocidades diferentes e contrárias, obtendo assim a sensação de movimento.
sketch fornecido por Bruno
referência de orgão
Construindo cenário referência de colunas
Interior da Igreja Abaixo a versão final do interior da igreja e uma visão das camadas produzidas para compor o cenário.
QUINTA CAMADA objetos estáticos (como o órgao e o pupito)
SEXTA CAMADA personagens e lustre (sprites que serao animados)
VISÃO GERAL
Caverna ou Templo Sagrado Um templo localizado nos subterrâneos da Igreja com um portal mágico que leva a outros mundos. Para este clima de mistério usei tons mais escuros e aspectos sombrios na arte. A composição se deu da mesma forma que a Igreja, em camadas, visando uma profundidade.
versão na gameplay
Fábrica de sons Um cenário futurista para o personagem principal aprender conceitos musícais.
versão 1.0 e em desenvolvimento
sketch fornecido por Bruno
Precisei de ajuda para compor parte do cenário, por causa do “branco criativo”e contei com a ajuda do Bruno. Como é bom ter ajuda dos amigos!
Fábrica de sons Abaixo o cenário do interior da fábrica na gameplay e o cenário com a visão externa da fábrica.
e ficou assim na game play
Versão final - aproveitei a arte das janelas das casas do vilarejo modificando-as para a estrutura; e nas janelas no primeiro andar reutilizei a parte da borda superior da porta da igreja.
Casa Abandonada Na última versão do jogo, a chamada do herói foi composta por um novo cenário: uma casa abandonada que supostamente pertenceria ao avô do personagem principal. Dividido em duas fases, uma ante-sala e a sala do piano, onde o personagem interage e segue com seu profético destino, tornarse o último maestro a compor a grande sinfonia. ante-sala
sala do piano
visão externa da casa abandonada
Loja de música Cenário criado como um plus (não está integrado ao fluxo do jogo), a fim de despertar o interesse do jogador pelos instrumentos musicais e, por fim, em aprender música. Após pesquisar muitas referências, escolhi esta com uma composição bem iluminada e colorida. vers
O background é um fundo da fonte usada no logo do Sonatta. Na composição implementei alguns instrumentos mas nem todos ficaram na versão final.
Versão final Acrescentei nesta versão os posteres que estão no cenário Igreja (vista externa).
Fase dos Blocos Antes de chegar a fase da fábrica, nosso personagem se perdeu no teletransporte do portal do templo sagrado e tem que passar por um desafio: uma travessia de blocos onde só consegue avançar se prestar atenção nos sons agudos e graves. A equipe sugeriu um estilo steampunk para a fase. Sketch de um bloco como referência para o cenário e imagem de notas musicais (fornecida por Lucas).
para a versão final mudei os blocos como o que está em destaque.
e ficou assim na game play
ferramentas de apoio A principio, após montar um cenário, eu separava as imagens em sprites e compactava em uma pasta única (referente àquele cenário), porém não salvava numa ordem prática, o que poderia causar dúvida a quem montasse a ordem dentro da engine do jogo. Para agilizar o processo e facilitar o trabalho do programador, as imagens do cenário foram separadas em sprites numeradas numa ordem decrescente, ou seja, do fundo para as imagens que estariam mais a frente (background primeiro e assim por diante). Usamos a ferramenta chamada Trello para trocar as informações mais relevantes do grupo, como as artes que seriam usadas, a programação do jogo, a trilha sonora e efeitos sonoros, etc. A ferramenta trabalha em cartões ou quadros e assim podíamos separar cada tópico e seus assuntos relacionados em cada cartão, que pode ser visível para todos ou só parte da equipe. O criador de cada cartão poderia convidar a participar todos do time ou apenas membros para qual o cartão seria relevante (o convite é feito através de email). Optamos por disponibizilar o conteúdo para todos e separamos nos tópicos: Geral, Programação, Props/Cenário, Animação e Música. O grupo no facebook foi bem útil para se obter um feedback mais rápido da equipe, como ajudar a escolher um concept, como estava indo o processo de uma arte, documentação, pesquisa, etc. Além disso, utilizámos o chat do facebook para trocar informações mais emergenciais e reuniões (não foi usado o whatsapp por alguns motivos: nem todos do time tinham celular, limite de crédito baixo, ...). Dropbox e GoogleDrive foram usados para compartilhar arquivos mais robustos como a gameplay e vídeos de apresentação. Para a arte, especificamente, na formação de referências, além de muitas buscas no Google, usei muito o Pinterest, tanto para este projeto como para projetos futuros, onde separava os tópicos em Boards (quadros) específicos, por assunto (background, texturas, hud, logo, etc.). Outros fornecedores de referência e tutoriais foram o DeviantArt, Behance, Shutterstock, Steam, TEDs, Youtube, amigos e educadores. Trello
Minha biblioteca de referência no meu pc e dropbox
EVENTOS Um dos eventos mais importantes que alavancou nosso projeto foi definitivamente a Nerdcon, patrocinado pelo SESC Interlagos, onde fomos convidados a participar pela prof.a Tatiane Colevati (também organizadora do evento). Por causa dessa participação, podemos avaliar nosso projeto como um todo, através do feedback de pessoas que jogaram/testaram nosso jogo no evento, verificando nossas falhas e nossos prós. E acima de tudo, foi combustível para executarmos e trabalharmos com antecedência todas nossas atividades antes do TCC, o que provavelmente ficaria deixado para ser executado em cima da hora se não fosse essa força motriz de anteceder. O público alvo foi bem parecido com o público alvo de nosso projeto (principalmente público infantil de 6 a 12 anos jogaram nosso jogo). Outro evento muito importante foi o INOVAE, onde formos direcionados e orientados pelo prof. Marcelo Santos. Um público mais maduro, nos forneceu dicas e visões que quem está dentro de um projeto, por vezes, não enxerga.
NERDCON (prof. Tatiane)
INOVAE (prof. Marcelo)
Material para divulgação Para atender os eventos, foram criados materiais de divulgação como cartões de visita, flyers, banner e camisetas para nossa identificação e marketing. Concomitante a estes produtos, criei uma fanpage no Facebook, uma página no Twitter, um site institucional para que fãs e interessados pudessem visualizar, conhecer nossas atividades, opinar e interagir com nosso projeto. Para que a equipe pudesse opinar sobre as artes feitas do material de divulgação, postei as no nosso grupo no face. Escolhidas as que seriam executadas, as mesmas foram encaminhadas para fornecedores como gráficas e fabricantes.
• Cartões de Visita e flyers - Grafica Paulista (https://www.paulistacartoes.com.br/ ).
Valor pago nos cartões (1000/mil unidades), R$ 64,00 e nos flyers (1000/mil unidades), R$124,20.
• Banner - Gráfica Union Comunicação Integrada (unionintegrada@outlook.com) gráfica de um aluno da classe. Valor pago em 1 unidade R$40,00.
• Camisetas - RBK Camisetaria (http://rbkamisetaria.loja2.com.br/), empresa de um
ex-aluno da classe. Valor pago em 6 unidades foi R$ 180,00. Minha contribuição foi na arte da parte posterior da camiseta com o logo e site da DinoBox Studios, a arte frontal da camiseta foi fornecida pelo outro membro da equipe, Bruno Mossolin.
• Site - provedor utilizado foi Locaweb (http://www.locaweb.com.br/default.html ).
Valor anual de R$178,80 foi dividido pelos membros da equipe. Minha contribuição foi na produção do site (feito em HTML responsivo através da ferramenta Dreamweaver da Adobe e uploads são realizados pela ferramenta Filezilla. Certos conteúdos como os jogos no site foram produzidos pela equipe: Bruno Mossolin, Lucas Raposo, Daniel Costa, Gisele Miura. (http://www.dinobox.com.br/ ),
• Fanpage no Facebook (https://www.facebook.com/DinoBoxStudio/ ) Minha con-
tribuição foi na criação da página e publicação de conteúdo. Certos conteúdos como vídeos e gameplay foram publicados e produzidos por outro membro, Bruno Mossolin).
• Página no Twitter (https://twitter.com/dinoboxstudio ). Minha contribuição foi na criação da página e publicação de conteúdo.
• Capa do CD - Gráfica Union Comunicação Integrada (a mesma do banner), que redire-
cionou o trabalho para outra gráfica. Valor pago em 3 unidades R$15,00.
• Rótulo do CD - Compramos a etiqueta na Kalunga (http://www.kalunga.com.br/)e o
impresso foi em impressora jato de tinta disponível em casa . Valor pago em 1 pacote com 20 etiquetas, R$10,90.
Arte dos materiais de divulgação
Business Card (cartão de visitas) papel couchê 300g 4x4 UV tamanho 8,8x4,8 4x4
Flyer (panfleto) papel couchê 300g UV 4x0 tamanho 10x15 Bruno criou a arte com base no modelo da cubeecraft (ao lado) e eu preparei o fechamento para a gráfica (abaixo).
Arte dos materiais de divulgação camiseta impressao tipo transfer tamanho A4 frente e costas
capa CD couche 200g 4x0
rĂłtulos CD (gameplay e trilha sonora) banner lona 340g 4x0 60x90 cm
SITE & SOCIAL MEDIA Para a divulgação online, criei um site em HTML5 responsivo onepage (informações em uma única página; porém, futuramente, serão criadas mais páginas individuais para cada jogo e outras necessidades). Sucintamente, descrevo nossos serviços, um portfolio com alguns jogos e aplicativos feitos pela equipe, um tópico sobre o estudio e seus membros, os eventos que participamos com link de fotos e contatos de email e social media. As redes sociais criadas e vinculadas com o site foram: Facebook e Twitter. Futuramente um canal no Youtube para os vídeos já existentes e futuros. SITE
página no Twitter
videos da OST e Gameplay no Youtube
fanpage do Facebook
CONSIDERAÇÕES FINAIS Lições Aprendidas Acreditar e se apaixonar pelo projeto já faz muitas coisas funcionarem. A princípio eu teria uma participação mínima no projeto, marketing digital em redes socias, remodelagem dos logos do projeto, e alguma ajuda que pedirem para vetorização de alguma arte. Eu queria mostrar o meu potencial, e comecei a fazer algumas artes do cenário para ajudar e acabei ficando com o processo todo dos cenários. Durante o processo existem os “brancos criativos”, o jeito é respirar, fazer outra coisa, voltar pesquisando alguma referência ou inspiração relacionado ao tema (Pinterest é ótimo para isso), ou então pedir ajuda para a equipe (que mensagem querem passar com este cenário mesmo?) Alguns brainstorms foram realizados durante e entre entregas semestrais, que faziamos na própria faculdade ou no Centro Cultural de São Paulo. Trocar idéias e experiências é sempre muito bom. Acredito que faltou um planejamento melhor da equipe para uma linha onde todos pudessem se basear como um projeto de PMBOK, muita coisa foi feita e descartada, ou houve retrabalho de alguns processos. Por exemplo, ver com antecedência gráficas, nomes de registro (facebook, site, etc), evitam remorsos. Planejamento é fundamental.
Considerações Futuras Manter o desenvolvimento e manutenção contínua do projeto, verificar pendências, criar um canal no Youtube, avaliar experiências do processo e otimizar melhor nas ações futuras. Nada como olhar para trás e ver que foi feito um bom trabalho. Para isso, temos que visualizar o futuro, tendo uma visão mais holística do projeto para então segmentar e aprofundar nos trabalhos específicos para cada membro do time. Como disse, planejamento é fundamental! http://www.dinobox.com.br/sonatta/baixar/ Bom divertimento!