[Tutorial Design] Como fazer uma HUD simples com o PowerPoint

[VincentVII]

Há vários anos, quando eu conheci o RPG Maker, eu tive a ideia de fazer um pequeno jogo de zumbis. Mas no início do projeto me deparei com o seguinte problema: precisava de uma HUD para o HP do herói. Gastei um tempo procurando pela internet até que finalmente encontrei uma HUD adequada. Mas como eu era jovem eu não percebi que havia uma ferramente muito boa para fazer uma HUD e de fácil manuseio no meu PC o tempo todo, o Microsoft PowerPoint.

Nesse tutorial irei ensinar para aqueles que, assim como eu, não tem tanta habilidade no design como fazer uma HUD bem simples através dessa ferramenta do Microsoft Office. Eu usei a versão de 2010 em português, mas os conceitos são aplicáveis em qualquer outra versão.

1º Passo

Abra o PowerPoint e selecione um retângulo na ferramenta de Formas. Crie um retângulo do tamanho que você acha adequado. Aqui eu recomendo para que você deixe o zoom do PowerPoint em 150% porque dá uma melhor noção de como vai ser o tamanho normal da imagem quando salvá-la. Formate o retângulo da forma que desejar, vou citar da forma que eu fiz.

 Na aba Formatar selecione a opção Contorno da Forma e remova o contorno. Depois vá em Preenchimento da Forma e escolha uma cor desejada. Você também poder escolher aplicar um efeito gradiente que dá um tom legal no retângulo.

O resultado:

2º Passo

Agora copie o retângulo criado. Clique com o botão direito na cópia e selecione Formatar Forma. Agora vá para Cor da Linha e selecione Linha sólida com a cor preta. Depois, em Estilo da Linha  escolha as opções que mais lhe agradam. No meu caso eu coloquei uma largura de 2,5pts, pontas arredondadas e junções do tipo Bisel, mas você pode usar qualquer outra configuração.

Aproveitando que já está na tela de formatação, vá até Preenchimento e selecione a opção Sem preenchimento. A cópia do retângulo é agora o nosso contorno. Arraste para cima do outro retângulo de forma que ele se ajuste perfeitamente sobre ele.

O resultado:

3º Passo

Esse passo pode ser feito de dois jeitos dependendo do jeito que você vai criar a sua HUD. O segundo eu acho bem mais fácil e o resultado é bem melhor, porque no jogo você vai conseguir enxergar perfeitamente o movimento da HUD.

Se você pretende criar uma série de imagens para a HUD e ir substituindo. Selecione as duas figuras, mas não agrupe-as, clique com o botão direito do mouse e selecione Salvar como Imagem. Ponha um nome adequado, por exemplo: "hud100".

OBS: Você já pode salvar somente o contorno com o título "hud0" para poupar tempo.

Depois clique no retângulo original com o botão direito (tenha certeza que o contorno não esteja selecionado, pois senão as duas imagens irão diminuir junto) e selecione Tamanho e Posição. Diminua a largura de acordo a quantidade que você quer que a HUD varie, no meu caso de 10 em 10% portanto marquei a largura para 90%. Depois selecione o retângulo e o contorno e salve a imagem outra vez com outro nome.

O resultado:

Agora aperte Ctrl+Z para que o retângulo retorne ao tamanho original. Depois diminua a largura outra vez seguindo a proporção e salve. Vá repetindo essa passo até que chegue a zero (ou 10% se você já tiver salvo o contorno como zero).

Agora o jeito mais simples. Isso poupa muitas imagens e animação fica melhor. Apenas salve o contorno e barra preenchida no seu tamanho normal. Dessa forma, no RPG Maker, você sobrepõe as duas imagens e depois vai diminuindo a barra de acordo com o decrescimento do HP do personagem. A demo desse modo está no fim do tópico.

Bônus

Você pode usar outras ferramentas do PowerPoint para incrementar a sua HUD. Alguns exemplos de coisas que eu fiz adicionando algumas formas e texto:

Algo bem simples, mas que tem um resultado bem satisfatório. Caso você queira testar o resultado aqui está uma demo da HUD por eventos. O tamanho ficou um pouco grande, mas isso é ajustável.

Sinta-se livre para compartilhar esse tutorial caso queira, só dê os devidos créditos com um link mandando para cá.


That's all folks! Espero que tenha explicado tudo de uma forma bem simples e de fácil entendimento e que esse tutorial possa ser útil para quem está começando agora.

[Mepps]

Muito Bom Vicent ^^
Concerteza vai ajudar o Pessoal , eu nunca tinha
tentado fazer um HUD no  Power point mais vou tentar
e depois posto o Resultado Mesmo, obrigado por
compartilhar seu Conhecimento com a Comunidade
Vou tentar fazer uma aqui.

Abrçs e  Vlw amigo

@ Mepps

[Bieel]

Simples, em um programa simples. Por isso esse tutorial é ótimo. Bem explicativo e desenvolvido.

Obrigado por dispor, Vincent! :)

[VincentVII]

[user]Mepps[/user]

Eu também não, até alguns meses atrás quando resolvi dar um treinada no RPG Maker para ver se eu ainda manjava dos paranauê (finalmente cedi a pressão popular e falei essa frase). Eu estava fazendo um HUD simples, daquele que a gente monta substituindo uma imagem por outra (já tinha feito uma apenas diminuindo o tamanho da imagem). Como eu não tava a fim de procurar uma na net, pensei: Será que dá pra fazer uma no PowerPoint? Pus a mão na massa e obtive esse resultado.

Quando você fizer o seu, posta aí para a gente dar uma olhada.

[user]Bieel[/user]

Valeu, Bieel! Tentei deixar a explicação simples e detalhada ao mesmo tempo.

[Kazuyashi]

Cara, é impressionante o que se pode fazer com o power point. 

Muito legal, cara! Com certeza é um modo bem incomum de se fazer uma HUD. E o resultado é bem satisfatório mesmo. Cumpre o que promete. Obrigado por compartilhar, Vincentão!

Um grande abraço,

Kazuyashi.

[DFox]

Achei bem legal, só que acho meio "inútil" fazer várias imagens dela diminuindo, já que na verdade tem como fazer sem isso. Mas o Tutorial é muito bom para iniciantes ou pessoas que não saibam mesmo mexer com design para criar huds muito complexas (meu caso, pois sou um fiasco em design).

[VincentVII]

[user]Kazuyashi[/user]

Valeu Kazu! É a melhor escolha para alguém que precisa de um resultado bom e é preguiçoso (AKA: Eu)

[user]DFox[/user]

Sim, é meio inútil mesmo. Um jeito muito mais simples ainda (que eu vou incluir no tutorial agora) é você salvar apenas o contorno e a barra e no RPG Maker você coloca uma em cima da outra. Depois é só ir diminuindo a barra preenchida e pronto.

[DFox]

Mas não foi isso que eu quis dizer, é que você pode fazer ela simplesmente ir diminuindo pelos eventos ou aumentando, ou se você utilizar uma HUD que fique colada no canto esquerdo da tela você pode fazer a HUD ir se movendo para esquerda ou direita (jeito improvisado huaha)

[VincentVII]

Você não pode simplesmente diminuir a HUD se a barra estiver salva junto com o contorno, porque desse ambos irão diminuir e não vai dar o efeito de uma barra se enchendo. Mesma coisa se você mover ela para esquerda. Você vai ver o contorno dos lados direito ou esquerdo sumindo. Portanto, se você não quiser fazer várias imagens, o melhor jeito e salvar o contorno e a barra em imagens diferentes.

[DFox]

Eu sei, foi o que eu quis dizer. Eu disse que era inútil salvar várias imagens (100%, 90%, etc) e só salvar as imagens separadas(hud e fundo) que daria certo, isso que eu quis dizer.

[VincentVII]

Eu sei, foi o que eu quis dizer. Eu disse que era inútil salvar várias imagens (100%, 90%, etc) e só salvar as imagens separadas(hud e fundo) que daria certo, isso que eu quis dizer.

Ok, ok!

Adicionei uma demo com uma HUD feita por eventos para demonstrar o resultado.

[dodoop]

Muito interessante mesmo! haha'
Eu pessoalmente nunca dei muita atenção no power point, sugiro que vc fase esse tuto em vídeo, não entendi muita coisa pois não sou nada familiarizado com o power point, seria legal vc fazer um vídeo e ate mesmo com algumas coisas adicionais...Apesar que não sei se valeria a pena o esforço!

[VincentVII]

Eu até queria fazer em vídeo, mas meu computador é meio ruim para gravar. Os vídeos sempre saem muito lentos então eu acho que não valeria a pena. Pode até parecer confuso aqui, mas se você abrir o PowerPoint vai ver que tá tudo indicado sem nenhuma dificuldade.

[dodoop]

Na verdade eu tinha ate mexido no power point ontem mais era tarde e eu tava mó nóia, agr mechendo eu vi que realmente é meio ate fácil, e nem sabia desse potencial no power point, pelo que vi la da pra faser cada barrinha bonita e com muito mais facilidade do que criar uma no photoshop! le de boca aberta ~~
haha
Agora sim, vai da pra min fazer umas HUDs com um design bem legal apsokapsk
Agr só falta eu estudar aquela parte final alie de incrementar com formas e texto! ;3 rsrs

[VincentVII]

[user]dodoop[/user]

Nossa, foi mal! Já era para ter te respondido faz tempo.

Sim, o PowerPoint é muito útil para fazer coisas simples. Tipo, Photoshop te permite fazer todo um trabalho mais "profissional", detalhado, com mais efeitos. Mas para um novato que mal sabe aplicar uma render (AKA: eu), o PowerPoint já é uma mão na roda.

A incrementação não é difícil, o ruim é só garantir que não fique com alguns vãos abertos e posicionar o texto certinho. Ah é! Eu editei um pouco o tutorial, não sei se você notou, e adicionei uma demo mostrando que não é necessário ficar fazendo uma barrinha para cada porcentagem de HP.