Criação de imagens para seus jogos - Parte 3 [Atualizado!]

[K.A.O.S]

Criação de imagens para seus jogos - Parte 3
Desenvolvido por K.A.O.S

Após um longo tempo vagando de tópicos em tópicos em diversas comunidades makers, noto que grande parte do pessoal não consegue desenvolver recursos gráficos atraentes. Se o desenvolvedor estiver usando os scripts do MOG por exemplo, dificilmente irá trocar os gráficos do mesmo pois não acredita que isso vá melhorar alguma coisa... Não que estes sejam ruins porem são tantos jogos que utilizam isso que acabam dando a impressão que é tudo um jogo só!

Por este motivo decidi disponibilizar este tópico com diversos guias de minha autoria pra que seja possível dar um 'UP' no seu projeto. Afinal, todos queremos criar algo bacana, não é verdade? Que tal investir um pouquinho nesta área?

Requerimentos:

• Tenha uma ferramenta de edição gráfica como GIMP ou Photoshop em mãos
• É necessário que o leitor possua alguma experiência com um dos programas citados p/ compreender o guia por completo pois o mesmo não foi escrito pensando nos iniciantes!
• Jogue! Tenha contato com jogos o suficiente pra saber o que você deseja fazer.

Conteúdo:
' Utilize a busca do navegador(CTRL+F) utilizando os códigos disponíveis na frente de cada assunto pra pular diretamente pra ele '

1) Criando uma logo [GD01]
2) Criando uma HUD [GD02]
3) Criando uma Tela de Titulo completa [GD03]



Outros tópicos que você pode querer ler:

Considerações iniciais sobre design gráfico para jogos:

• Saturar a imagem não irá tornar o resultado final melhor, muito pelo contrário.
• Efeito de outline(stroke) exagerados NÃO irão melhorar o aspecto ou a qualidade da sua imagem, seja ela uma figura ou texto.
• Saiba escolher as cores. Preto, vermelho e azul na mesma imagem não combina, use o bom senso. Você esta utilizando uma ferramenta de edição gráfica, se for para utilizar apenas essas cores é melhor usar o paint mesmo. ( )
• Nunca trabalhe sem uma base! Gosta da interface de um determinado jogo? Fique com ela aberta em segundo plano como forma de conseguir ideias.
• Saiba usar os recursos que tem em mãos! Não adianta nada baixar 2000 fontes e milhares de Shapes se você nem ao menos tentará manipular elas da maneira correta.

Um pequeno detalhe, outline(stroke) é algo que quando usado no 'tanto faz'(aka, pelos preguiçosos) deixa a imagem porca e sem qualidade alguma. Entretanto, utilizando ela da forma correta você poderá criar trabalhos incríveis. Portanto vou reforçar o que falei no começo do guia, saiba usar as ferramentas do programa antes de avançar!



1) Criando uma logo [GD01]

Spoiler

A logo nada mais é que a marca do seu jogo, o cartão de visitas. O jogador irá abrir seu tópico/jogo e uma das primeiras coisas que ele irá se deparar é com esse sacana. Criar um logo não é simplesmente embaralhar palavras, colocar stroke/outer glow e pronto, é ter em mente do que seu jogo se trata e trabalhar em cima deste tema. Quantas vezes ja não vi um jogo com tema futurístico com uma logo que parece ter saído de um jogo de faroeste? Sério, bom senso por favor!

Em muitos casos o desenvolvedor não tem a minima ideia de como a logo deve ficar, isso é normal. Porem se ele já tiver uma noção do que quer, pode ter certeza que o trabalho será muito mais fácil.
Vou mostrar a criação de uma logo simples pra um jogo com nome aleatório apenas pra usar como exemplo, usarei o nome mais tosco e simplista possível apenas pra ilustrar bem o que é possível de se fazer quando tem uma ideia formada, me acompanhem.

Imaginei um projeto chamado 'A grande Guerra dos Dragões', escolhi uma fonte simples porem expansiva, isso é... Abre espaço pra 'customização'.

Geralmente é isso que fazem com uma logo atualmente nos projetos de RPG Maker BR, haha... Vamos agora tentar mudar o aspecto dela, sem adicionar efeitos nem nada... Vamos apenas alterar a estrutura um pouco pra ver se ja muda um pouco a cara da logo.

Melhorou um pouco, não acha? Não tem porque manter tudo tão imenso na tela. Escolha o elemento que terá destaque e coloque os demais elementos apenas para dar contraste/complementar o objeto principal. Neste caso, o objeto principal é Guerra dos Dragões e o elemento complementar é 'A grande'

Agora vem a parte interessante... Shapes! Shapes são formas que podemos utilizar em nossas criações, elas variam desde simples quadrados a até mesmo imagens complexas como torres. Essas imagens possuem apenas uma cor e são perfeitas pra se trabalhar em logos, acompanhe comigo este exemplo.

Este é apenas um exemplo do que podemos fazer utilizando shapes. É importante citar que certas fontes vem com diversos formatos e desenhos incluso. Nós podemos utilizar essas fontes pra decorar nossa logo, mesmo que ela não utilize essa fonte! Ficou confuso? Note o que farei abaixo!

O que eu fiz aqui é simples, existe uma função que transforma objetos de texto em objetos de imagem no photoshop, ela se chama Rasterize Type. Com isso, inverti ela verticalmente e horizontalmente, posicionei em cima do texto original e fui apagando os cantos indesejados tanto no texto principal como neste objeto.

Você usa dois objetos distintos pra criar um terceiro objeto.

Com isso em mente, vou continuar a utilizar essa função nas demais partes do texto, porem não exagere! Mesmo que você faça no máximo duas ou três modificações, ja é o bastante pra mudar o aspecto do logo e dar um toque de originalidade.

Desta vez eu avancei um pouco mais pra mostrar como o esqueleto do logo esta fincando, observem:

Calma, isso aqui ainda ta crú. Vou começar a trabalhar agora em um fundo transparente pra ajudar na visualização de efeitos.
Primeira coisa que farei aqui é não me limitar ao gradient dentro da fonte, pois eu posso adicionar outra imagem dentro dela pra criar um efeito diferente, vejam os resultados:

O logo finalmente esta ganhando forma e ficando cada vez mais interessante, porem não podemos parar por ai pois ainda não passa de texto... Hora de adicionar um conteúdo extra.

Pense na temática do seu projeto. O que ele tem? O que você deseja que ele tenha? O que você mais quer dar destaque? Pensou? Eis aqui o que eu pensei:

Agora vamos as explicações:

A criação de uma logo consiste em unir diversos elementos e procurar deixar todos em harmonia. Você poderá juntar formas, textos, vectors, brushes... O limite é a sua criatividade! Após terminar a base da logo, eu copiei ela três vezes e apliquei efeitos diferentes em cada uma.

Primeira camada(topo da lista): Gradient color, stroke 2x [Cor vermelha]
Segunda camada(meio da lista): stroke 4x [Cor 'branca']
Terceira camada(fundo da lista): stroke 6x [Cor marrom]

Apliquei um brush de nuvens em cima da primeira camada e deixei sua opacidade em 35%. No caso dessas nuvens eu tive também que aplicar Motion Blur + Sharpen pra criar o efeito correto.

Após ter aplicado estes efeitos, decidi copiar a terceira camada e mover ela um pouco pra baixo, dando este efeito de texto 'pulando pra cima', que pode ser observado no resultado final. Decidi então aplicar uma imagem de fundo pra logo, ela era uma shape qualquer, porem fui duplicando sua camada e usando a Pen Tool pra criar mais curvas... Depois veio os efeitos internos(estes pequenos 'riscos'), eu fiz eles utilizando a Polygonal Tool e colorindo o interior selecionado com uma cor.

E assim terminamos nosso logo. Ele ficou bem simples pois a intenção era apenas mostrar o que era possível ser feito com um pouquinho mais de esforço. Este trabalho me durou menos de uma hora pra ser concluído.

[close]

2) Criando uma HUD [GD02]

Spoiler

A HUD (do inglês: heads-up display - tradução literal - display de cabeças) é a sigla para representação dos objetos do jogo, tais como: vida (às vezes representado por life/HP - do inglês vida, force - do inglês força), magia (às vezes representados por: mana - ou MP, Mana Points -). Esses atributos (assim como são chamados no jogo) variam de nome e de valor de acordo com o jogo (podendo ser traduzido para a língua original do projeto). Pode ser também usada para representar itens e outras objetos do projeto/jogo como munição, chaves, mini-mapa e até um mini-menu.

Fonte: wikipedia.org

Agora que você já sabe do que se trata uma HUD, vamos começar a trabalhar em uma do zero. Caso desejem, utilizem uma já criada e tentem melhorar o aspecto da mesma.

Tenha noção de espaço! Sempre que for desenvolver uma HUD você deve estar ciente que o objetivo de ela estar ali é auxiliar o jogador e não obstruir seu campo de visão!

Vamos começar falando dos textos inclusos em uma HUD, pois um erro comum que quase todos comentem é tentar aplicar gráficos de página de web em um jogo. Em alguns casos pode até dar certo porem em sua grande maioria deixará uma aparência estranha.

O que eu quero dizer com isso? Simples. O objeto 'texto' deve ser optimizado pra que fique em harmonia com o ambiente de jogo, observe:

O texto optimizado pra jogos é uma forma mais suave e meio desfocada nas pontas, dando a impressão que ela esta mesclada com o fundo da box. Em alguns casos são adicionados efeitos de sombra ou glow na letra pra realçar o texto ainda mais.

Claro que isso não é uma regra. Em alguns casos esta modificação poderá trazer bons resultados enquanto em outras poderá até prejudicar. Cabe a você fazer os testes e decidir usar ou não.

É importante também ficar atento a cor do texto e dos elementos da HUD, pois elas devem se mesclar e não simplesmente ofuscar uma a outra. Isso não significa que você deve sempre usar cores semelhantes, apenas tome cuidado pra não utilizar uma que acabe deixando a sensação de estar 'fora do lugar'.

Seguindo esta linha de raciocínio e aproveitando que estamos mexendo com letras, vamos começar a criar imagens pra HUD em si. O texto é um dos elementos, juntamente com valores(números) e demais 'sprites'.

Este é um exemplo simples de HUD, algo que qualquer novato poderia fazer. O que gostaria que prestassem a atenção é na escolha das cores e efeitos simples colocados na imagem. Não deram tanto destaque porem não ficou feio e tão pouco exagerado.

Vamos agora bolar uma HUD com umas formas melhores!

Explicações:

1) Foi criado um circulo utilizando shapes. Apaguei o interior deste circulo e criei outro menor em seu interior.
2) Utilizei a ferramenta Polygonal Lasso pra criar o efeito de riscado no espaço entre os dois círculos.
3) Adicionei duas shapes no circulo interno, alem de preencher com uma cor diferente(cinza) e criar um efeito de sombra nas bordas utilizando o Brush preto com 25% de opacidade.
4) Simplesmente adicionei a face de um personagem qualquer.
5) Adicionei uma nova shape no canto inferior esquerdo do circulo interno, melhorei a qualidade do rosto do personagem(desfoque + sharpen), mudei a cor do circulo interior pra marrom e adicionei um brush com a cor marrom um pouco mais clara próxima ao centro do circulo. Notem também que adicionei um efeito que 'clareia' a parte superior do circulo.
6) Pintei os cantos feitos pela Polygonal Lasso Tool com a cor verde pra dar entender ser uma barra de bonus, complementando com a barra cinza(que seria a mesma coisa de não ter bonus algum ali). Este passo foi meramente feito pra mostrar algumas coisas extras que podemos fazer.
7) Comecei a trabalhar no fundo da HUD, onde irá aparecer as informações de HP e etc... Simplesmente criei uma borda com a cor preta e preenchi o fundo tambem com preto, porem abaixei sua opacidade de forma que o fundo do mapa(quando tiver um) apareça um pouco.
8) Adicionei o texto de HP/MP, assim como os valores. Também comecei a esboçar a barra gráfica. Notem que adicionei uma shape na parte inferior, dando impressão de uma borda melhor trabalhada.
9) Finalizei o trabalho arredondando a outra ponta da HUD, adicionando uma shape nova pra não deixar o espaço muito vazio e preenchi as barras de HP e MP.

[close]

3) Criando uma Tela de Titulo completa [GD03]

Spoiler

Nesta aula estaremos colocando tudo que aprendemos em prática, desde a criação de logos, manuseio de shapes, optimização de textos e até alguns efeitos novos. Um diferencial é que também iremos mexer no RPG Maker! Afinal... O objetivo aqui não só é ensinar a criar uma tela de titulo atraente como deixar ela animada.

Mas não se enganem, animar a tela de titulo não é simplesmente colocar luzes piscando e logo com efeito de fade-in/fade-out, a coisa vai muito alem disso!

Primeira etapa: Organizando as ideias & separando material:

Antes de mais nada, pense sobre o assunto do seu jogo e nunca esqueça que seu objetivo será tentar passar essa impressão logo na tela de titulo. Pode parecer fácil mas com certeza irá fazer com que diversas pessoas fiquem pensativas antes de realmente começar a seguir esta aula.

Pensou? Ótimo. Agora você deverá traçar um rascunho dessa ideia como uma forma de facilitar as coisas.

Como assim 'rascunho'?

Imagine uma folha em branco. O rascunho serve pra você separar onde cada elemento da tela irá e ja conseguir ter uma base de como será o resultado final. No nosso caso os elementos são:

• Logo
• Renders(caso houver)
• Efeitos
• Objetos de gameplay(Novo jogo, continuar, sair...)

Algumas dicas antes de continuar:

• Você curte algum jogo onde a tela de titulo tenha despertado algum interesse? Dê uma estudada nela antes de prosseguir!
• Veja as telas de titulo que a galera produz, procure ver o que o pessoal mais elogia e tente tirar proveito deste feedback!
• Não tenha medo de fazer revisões. Por mais 'perfeita' que sua criação possae parecer ela ainda pode melhorar utilizando as sugestões dadas pela comunidade.

Uma boa sacaca é procurar por vídeos no youtube e ver algumas telas de titulo animadas, desta forma você não só vai adquirir uma boa noção da montagem da mesma como ganhará ideias sobre COMO animar suas produções!

Pois bem, estarei criando uma tela de titulo para um projeto que venho desenvolvendo aos poucos. Vou aproveitar e deixar o passo-a-passo de como eu fiz tudo! Primeiro vamos organizar as ideias sobre o projeto pra auxiliar na criação da tela:

Nome: Daibouken!
Gênero: RPG/Aventura

Com a informação acima declarada, fica claro que iremos precisar dê:

• Logo com o nome 'Daibouken!'
• O cenário/BG deverá transparecer um sentimento de aventura! Sabe quando você abre um jogo como Zelda pela primeira vez e olha a tela de titulo?(Principalmente o Ocarina), então... Aquela sensação!

Comecemos a criar a parte gráfica então! Crie uma logo!

Segunda etapa: Background!
Pense muito bem sobre o que você deseja colocar como background. Pode ser um gradiente leve, uma imagem qualquer encontrada na internet, partes de cenários... O importante é que a temática do mesmo combine com o seu projeto e com a logo que criamos!

O que eu fiz nesta parte:
Coloquei a cor de fundo com um gradiente que simula o mar e fui colocando cores mais fortes/escuras na parte inferior. Minha ideia aqui é criar o fundo do mar, sem muitas coisas, apenas o suficiente!

Etapa extra!(opcional)

Se achou que o fundo ficou sem graça, coloque objetos nele! No caso deste tutorial eu procurei algumas imagens, fiz certas alterações de tonalidade e implementei como se fossem o fundo do mar mesmo! Observe:

Bem simples, não acham? Detalhe que esta imagem será apenas uma das camadas da nossa tela de titulo! Aguardem o resultado final! :D

Iremos agora avançar pra parte de efeitos! Caso você mexa no RPG Maker VX Ace assim como eu, irá precisar de um script chamado New Picture Properties with Calls, clique no link abaixo para ser redirecionado ao tópico original do script.

New Picture Properties with Calls - rpgmakerweb.com

Deixem o script instalado em seu projeto para que o usemos em breve. Por hora os efeitos que criaremos se baseiam em iluminação/ambientação. Quero que a luz no fundo do mar apareça de uma forma bem bacana e não simplesmente estática. Não só isso, quero algumas 'esferas' surgindo do fundo da imagem e indo ao topo enquanto perde opacidade.

Eu criei as imagens que irei utilizar, porem não vejo necessidade de postar elas visto que vão estar disponíveis dentro do projeto de demonstração! Iremos direto pra próxima etapa, onde parte da graça da tela vai começar a aparecer.

Terceira etapa: Efeitos!

Antes de avançar, leiam atentamente todas as explicações de como utilizar o script que mencionei acima! Após a leitura ter sido concluída você já deve ter alguma noção do que eu pretendo fazer... Exatamente... Iremos criar um outro fundo(segunda camada) desfocado que terá alguns elementos extras. Esta camada ficará com um efeito especial que este script proporciona, chamado Wave.

A configuração é algo que vai variar bastante de um projeto ao outro, então recomendo que sejam feitos diversos testes até que o resultado agrade. Eis aqui meu fundo secundário:

A partir de agora a brincadeira será dentro do RPG Maker! Juntem todas as imagens que criaram e mãos a obra! Você viu os vídeos de telas de titulo? Deu uma olhada nas que a galera da comunidade criaram? Então você sabe o que deve fazer aqui. Programe sua tela de titulo e utilize o script que recomendei caso você decida fazer um efeito semelhante ao meu!

Antes de fechar sua ferramenta de edição, nós iremos criar as opções básicas de novo jogo e etc... Vamos la?

Última etapa: Textos

Selecione uma fonte agradável e uma cor que esteja presente em sua logo. Esta cor deve ter destaque porem não deve em hipótese alguma saturar ou dificultar a visualização. Novamente, não existem coordenadas corretas aqui, teste as cores e veja qual será a melhor!

Selecione também outra cor, ela será responsável por dizer qual das opções está selecionada! Alternativamente você pode desfocar as opções pra dizer que elas não estão selecionadas, vai do seu gosto pessoal!

Essa imagem acima ainda é dentro do photoshop! Neste exato momento esta ferramenta já não nos é útil. Vamos direto ao RPG Maker terminar a programação da tela. Seja paciente, teste todas as possibilidades e quando realmente estiver satisfeito, poste seus resultados!

Daibouken! - Tela de titulo finalizada:



Download da Demo: Clique aqui!

[close]

Na próxima atualização estarei falando sobre menus!

Este tópico será atualizado com conteúdo extra na medida em que eu for arranjando tempo. Portanto recomendo que continuem a visitar o tópico constantemente!

[VincentVII]

Ótimo tutorial, K.A.O.S! Acho que vai ficar bem ao alcance dos iniciantes, eu não entendo muito de Photoshop porém consegui entender o tutorial. Ficou um resultado muito bom com efeitos não tão complexos. Eu nunca fui bom para criar logos, mas da próxima vez que precisar fazer um para alguma matéria vou tentar empregar o que vi aqui no tutorial.

Ou então chorar para o Uhtred... 

[K.A.O.S]

 Obrigado por comentar! Essa primeira parte é bem tranquila porem admito que deixei muitos erros no texto devido ao horário que terminei de escrever. Ainda tem alguns por ai mas vou deixar pra revisar mais tarde, quando eu for postar a segunda parte envolvendo HUDs.

Abraços e tudo de bom!

[K.A.O.S]

Tópico atualizado!

Parte 2 - Como criar uma HUD [Implementada] - 03/nov/2013

[Lima]

Muito bom, agora só falta praticar mas estou com preguiça xb

+ouro

[Kazuyashi]

Já era para eu ter comentado aqui antes e não sei por que diabos ainda não o fiz. 

De qualquer forma, tutoriais MUITO bons, KAOS! Ainda mais para alguém como eu, que não sabe bulhufas de design. Acompanhei tanto a primeira quanto a segunda e consegui pegar umas noções bem legais.

Eu tomei a aula da logo como base para tentar produzir a minha do concurso de dungeon. Não ficou lá grande coisa, mas caso ela tenha conseguido se salvar, nem que pelo menos um pouco, foi graças ao seu tutorial. Saca só:

Spoiler

[close]

Tentei fazer uma HUD também. Fiz de sacanagem mesmo, já que não pretendo usá-la em lugar nenhum. Enfim, acho que, graças ao seu tutorial, essa foi a melhor HUD que eu já fiz, apesar de ter ficado, hum, digamos, "feminina", Huahauha. xD

Spoiler

[close]

Espero que continue com as aulas, cara! Acompanharei todas!

Um grande abraço,

Kazuyashi.

[Kowts]

wow... estava a precisar de algo do tipo para dar um jeito no meu projeto. Acho que qualquer iniciante que esteja disposto a aprender... podem perfeitamente acompanhar teu tutorial. Parabéns... e abrigado, ajudou mesmo. +ouro

E Kazuyashi... o teu Logo e a HUD são simplesmente fantásticos.

[K.A.O.S]

 Fico feliz que o tópico vem sendo útil! E gostei dos seus resultados Kazu, inclusive devo dizer que a sua HUD ficou bem mais caprichada em relação a que apresentei no tutorial, meus parabéns!

A próxima atualização pode demorar um pouco alem do esperado pois também estarei aplicando a tela de titulo no RPG Maker e explicando como animar ela da forma desejada.

Agradeço a todos e aguardem a próxima aula, garanto que será muito melhor do que as atuais! 

[VincentVII]

Opa, voltei! Kazu, fique sabendo que um dia roubarei seu talento... 

O segundo tutorial está tão ótimo quanto o primeiro. Você está dando excelentes dicas para pessoas que não manjam muito de Photoshop, AKA eu. Parabéns pelo trabalho, K.A.O.S. Continue assim!

[K.A.O.S]

Tópico atualizado!

Parte 3 - Criando uma Tela de Titulo completa [Implementada] - 11/nov/2013

[Kowts]

Eu já estava de olho para ver o próximo tutorial e acho que ficou ótimo... simples e acessível para quem estiver mesmo afim de aprender.
Mais uma vez obrigado... espero que continue com esse ótimo trabalho.

[VincentVII]

Tutorial fica cada vez melhor, K.A.O.S! Pena que eu não manjo das Photoshopagens... Mas você dá dicas muito úteis. Parabéns!

[K.A.O.S]

 Fico feliz que a aula tenha agradado! Meu tempo ta bem tenso ultimamente mas queria terminar esse guia ainda nessa semana, haha.

[HardMaker]

valeu XD

[galactus91]

Esses tutoriais precisam ser mais divulgados (pois me matei pra achar esse tópico na net rs)

Só queria agradecer ao Kaos por disponibilizar essas aulas, elas são realmente fantasticas, ajudam a deixar o projeto mais profissional