GMBR
Gostaria de reagir a esta mensagem? Crie uma conta em poucos cliques ou inicie sessão para continuar.
Entrar

Esqueci-me da senha

Últimos assuntos
» Retorno da GMBR!!!
por theguitarmester Ter 19 Mar 2024, 22:38

» Procuro Programador de game maker
por Wou Sex 15 Mar 2024, 10:27

» Mod APK
por gamerainha Qua 13 Mar 2024, 06:30

» Mudar cor de apenas uma palavra
por lunalol Sex 01 Mar 2024, 13:42

» Aceito pedidos de sprites (Com exemplos meus)
por Sevilha Qua 28 Fev 2024, 12:17

» Inventário simples
por Isquilo_Roedor Qui 22 Fev 2024, 15:18

» Problemas na programaçnao de inimigo [jogo DOOM LIKE]
por Black Mirror Dom 11 Fev 2024, 13:34

» ANDROID MULTI TOUCH
por DiegoBr Dom 04 Fev 2024, 12:13

» Servidor de Discord do fórum?
por Lighter Sáb 27 Jan 2024, 17:18

» Save e Load Json
por Klinton Rodrigues Qui 25 Jan 2024, 11:12

» Colisão com mais de um objeto
por aminaro Seg 22 Jan 2024, 15:02

» Oi sou novo aqui
por Thiago Silveira Alexandre Sáb 20 Jan 2024, 20:55

» Como acessar conteudo comprado no marketplace
por macmilam Sex 19 Jan 2024, 07:42

» Devlogs em vídeos do Block Room
por Joton Seg 15 Jan 2024, 16:56

» Alguém aqui já ganha dinheiro com seus games?
por Joton Seg 15 Jan 2024, 16:49

» ACERVO GMBR MAGAZINE
por Joton Qui 11 Jan 2024, 19:21

» como aumentar o obj sem aumentar a colisão??
por GabrielXavier Qua 10 Jan 2024, 07:21

» Asteroid Core - Early Acesse Update [0.2.0.0]
por JOZ. Seg 08 Jan 2024, 14:39

» Versionamento de código com GitHub
por GabrielXavier Seg 08 Jan 2024, 07:32

» Rio Rise - novo launcher do Gta San Andreas SAMP Brasil
por kolesovsup Sex 29 Dez 2023, 07:16

» a funçao approach ainda existe?
por PEDRINDEV Ter 26 Dez 2023, 20:05

» Inimigo ataca até por trás! >:(
por saim Sex 22 Dez 2023, 08:55

» [RESOLVIDO]Spawn após morte
por Deception_1999 Dom 17 Dez 2023, 16:39

» Remunerado $$$ - Procuro programador para ajudar a "montar" um jogo
por theguitarmester Sáb 02 Dez 2023, 16:28

» Game maker nao abre
por Cerf Dom 26 Nov 2023, 12:01


Introdução ao design de interfaces

5 participantes

Ir para baixo

Introdução ao design de interfaces Empty Introdução ao design de interfaces

Mensagem por Henrique-HB Seg 02 Jun 2014, 20:28

Fala, galera o/

Voltando a ativa aqui apenas porque deixei um assunto pendente: tutoriais de design.

Quem é mais antigo vai lembrar que prometi iniciar uma série há um bom tempo, você pode encontrar o primeiro arquivo nest link.

Eu não estou mais na área de game making, apesar da participação ativa que tive por aí entre 2001 até 2009 (tô velho) e é por isso que acabei não aparecendo mais por aqui também. Agora vamos ao que interessa.

Minha ideia inicial era uma série de tutoriais sobre os conceitos do design, o ABC da coisa, porém analisando a seção de projetos atualmente percebi que isso não era o ideal e agora vou manter o foco no que é útil para os desenvolvedores da comunidade, tentar ajudar as pessoas na parte gráfica dos seus projetos.

Temas abordados: Interfaces, composição gráfica e hierarquia, direção de arte. Tudo exclusivamente voltado aos games.

Os artigos que serão postados são longos, material para estudo mesmo, mas é para quem realmente quer se dedicar e compreender o assunto. Chega de enrolação, bora trabalhar!

A mágica das interfaces

Uma interface gráfica é a conexão entre o sistema e o usuário, ela é a responsável por fazer com que a pessoa entenda e interaja com o que é exibido na tela.

Introdução ao design de interfaces Fus2z9
A interface gráfica do Photoshop.

Introdução ao design de interfaces 2cs6typ
Exemplo de interface do jogo Colin McRae Dirt.

"A melhor interface é aquela que você não percebe."

Não me lembro em qual livro estava essa frase, mas ela resume bem o caminho a ser pensado na criação de uma interface gráfica. Ela deve ser natural, intuitiva, quanto menos o usuário tiver que pensar para utilizar uma interface, melhor ela é.

De início, vamos analisar a tela de abertura de um game, que apesar de parecer simples é de extrema importância já que em geral é a primeira coisa que o jogador encontra.

Introdução ao design de interfaces 70vodh

O objetivo da tela de abertura é muito simples: permitir que o jogador inicie o game. Seja uma nova campanha ou restaurar do ponto aonde parou através da opção de load game.

Aqui o design deve ser simples, direto, o player não pode ter trabalho algum para iniciar uma partida, porém também deve ser atrativa e interessante, causar impacto. Quanto estivermos falando de direção de arte iremos ver de forma mais detalhada as questões estéticas, nossa meta aqui é a funcionalidade.

Vamos imaginar as três opções básicas: Novo jogo, carregar e opções. Junto às opções, também é preciso dar foco no logo ou título do game, identificar o que o player está prestes a começar.

Introdução ao design de interfaces 108cpyw

Deve-se evitar concorrência entre as opções e logo, espaçar as coisas, permitir que o conteúdo em questão atraia os olhos automaticamente.

Se eu bater, tem que doer

Toda ação deve ter uma resposta, quando o usuário agir na interface, ele precisa de um reforço visual que confirme essa ação. Um botão de muda de cor ou posição já é suficiente para que o player reconheça que sua ação deu resultado. Também é comum adicionar um marcador gráfico para indicar a opção ativa atualmente.

A resposta é ainda mais importante em casos que o controle é feito por um joystick, nesse caso não a ação de clique do mouse e a navegação pelas opções do menu fica inviável sem indicar onde o cursor está atualmente.

Introdução ao design de interfaces S2uuef
Veja o ícone que indica a opção atualmente selecionada.

O companheiro de aventura, o HUD
HUD = heads-up display

Em um games você pode coletar moedas, acumular pontos, sofrer dano reduzindo sua energia, morrer um determinado número de vezes e mais uma infinidade de opções que variam entre cada produto.

Introdução ao design de interfaces 2jd3no4

O primeiro passo é definir o que você precisa que seja exibido na tela. Muitos desenvolvedores apenas vão distribuindo as informações sem planejamento, é muito importante que se faça uma lista prévia — pode ser no papel mesmo — com todos os itens necessários, e evitando o que é dispensável.

Para ajudar, segue uma lista de perguntas que você deveria responder.

1 - No game há alguma forma de pontuação?
Se for o caso, vamos pensar como ela irá funcionar.

1.1 - Com que frequência o jogador vai receber pontos
Se for constante, como as moedas frequentes em Super Mario World, é interessante a pontuação estar na tela o tempo todo.

Se os eventos que adicionam a pontuação ocorrem muito espaçados na fase, é conveniente que a pontuação só seja exibida por alguns segundos na hora de adicionar os novos pontos, evitando poluição visual com um elemento que é pouco alterado.

A pontuação é uma soma de ações realizadas durante o estágio, como velocidade e número de inimigos mortos, você pode deixar para exibir os pontos obtidos apenas no final da fase.

2 - O jogador sofre dano? E a estamina?

Em geral existe uma forma de energia no game, o jogador precisa saber a quantidade de erros que ele pode cometer.

Assim como a pontuação, a exibição de energia vai depender da frequência em que ela pode ser alterada. Se o risco não é frequente, não há motivo para ser exibida o tempo todo. A ausência de uma barra de energia visível a todo momento também pode contribuir para a ambientação do game, sem um indicativo constante de que o player está com pouca ou muita energia pode ajudar a transferir o foco e atenção do jogador ao cenário e outros elementos do game.

3 - Os equipamentos mudam com frequência?

O jogador pode usar metralhadoras, espadas, um cogumelo que te deixa gigante ou uma flor que te permite disparar bola de fogo. Se os equipamentos são uma constante em seu projeto, a interface DEVE indicar o que está equipado atualmente ou na reserva.

Se o há um limite de uso para o equipamento, não esqueça de deixar na tela o quanto o gamer ainda pode usa-lo.

Introdução ao design de interfaces Wvqvk5

Seja criativo

Você não precisa se prender à uma barra de energia no topo ou um número de balas no canto inferior, existem meios mais interessantes para indicar ao jogador sua situação. Vamos a exemplos.

A energia do Mario é indicada pelo estado do personagem.
Introdução ao design de interfaces 30tpbbp

Em Dead Space, a "barra de energia" está ligado ao personagem. Também perceba que o indicador de munição está anexo a arma.
Introdução ao design de interfaces 15hy7v8

E quando a situação complica

Finalizando os elementos básicos, vamos pensar quando o game precisa de uma interface mais complexa, como em um RPG. Agora nós temos muitas informações e interações para prever, o assunto é tão grande que talvez eu reserve um artigo separado apenas para detalhar esse gênero, por ora vamos nos focar apenas no básico.

Introdução ao design de interfaces 2vx4pea
Mass effect é um excelente jogo, mas em sua primeira edição possuía alguns problemas no design de seus menus que os tornavam trabalhosa algumas ações simples, principalmente nos consoles. Revisar os equipamentos em seu inventário e fazer as trocas necessárias não era tão prático.

Introdução ao design de interfaces 120nssh
Na série Legend of Zelda, ter uma grande quantidade de equipamentos e outros itens a serem utilizados na sua jornada é algo constante, o que complica ainda mais é que durante o jogo será preciso efetuar trocas muito frequentes desses equipamentos. Entenda a solução encontrada no Ocarina of Time e como funciona melhor do que o modelo presente em Mass Effect.

Quanto menos categorias o jogador tiver que ver para encontrar um uma poção ou menos de cliques necessários para equipar uma espada, melhor é sua interface. Lembre que o principal objetivo da boa interface é ser ágil e intuitiva, o jogador precisa poder resolver rápido o que deseja para poder voltar sua atenção àquele Boss super difícil.

Alguns fatores permitem um planejamento inicial de sua interface:

- Evite muitos scrolls, exiba o máximo que puder na tela sem que o usuário tenha que ficar usando uma barra de rolagem ou trocando de tela.
- Utilize modos prático de usar / equipar um item. Botões de atalho, como por exemplo A equipa e X exclui agiliza muito a organização de um inventário.
- Em caso de uma ação que não pode ser desfeita, como vender um item ou joga-lo fora, SEMPRE PEÇA CONFIRMAÇÃO DO JOGADOR. "Você tem certeza que deseja excluir/vender este item?"

-=-=-=-=-

Assim termina nossa introdução sobre design para games e interfaces. Eu queria poder usar alguns exemplos reais aqui da seção de projetos do site, mas pensei que alguns usuários podiam se sentir desrespeitados com críticas a seu projeto. Se alguém tiver interesse em ter seus projetos analisados no quesito, indique ele aqui no tópico que vou fazer comentários e sugestões para deixar seu jogo cada vez melhor.

O próximo artigo será um projeto de interface, aplicando toda a teoria apresentada aqui, mas leia com calma, estude, o conhecimento teórico é importante no planejamento e execução de um bom jogo.
-=-=-=-=-

Este tipo de artigo da muito trabalho para ser feito e não sei se essa seção do fórum é muito visitada, então por favor, comentem dizendo suas opiniões de dúvidas e indiquem este tópicos aos amigos de fórum quando perceberem que seu projeto está com problemas no visual. Valeu!

-=-=-=-=-
Para quem não me conhece, segue o tradicional perfil de assinatura.

Henrique-HB
Diretor de arte em publicidade e web.
Um dos responsáveis por trazer o game maker para o Brasil no início dos anos 2000. Fez parte do primeiro fórum de game maker brasileiro, a ThunderStorm em 2004 e marcou presença nos que se seguiram.

Ex-administrador do extinto site BRMaker, já escreveu também para as antigas comunidades da Maker Universe, Castelo RPG, Gaming Brasil e Unidev.

Já iniciou mais de 50 projetos independentes e não terminou nenhum até descobrir que é melhor em criar e planejar do que programar. Participou de projetos de advergames e aplicativos em agências de publicidade.


Última edição por Henrique-HB em Seg 02 Jun 2014, 20:47, editado 2 vez(es)
Henrique-HB
Henrique-HB

Data de inscrição : 23/06/2008
Reputação : 6
Número de Mensagens : 114
Prêmios : Introdução ao design de interfaces Empty

Medalhas x 0 Tutoriais x 0 Moedas x 0

Ouro x 0 Prata x 0 Bronze x 0

Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0

Ir para o topo Ir para baixo

Introdução ao design de interfaces Empty Re: Introdução ao design de interfaces

Mensagem por PedroX Seg 02 Jun 2014, 20:45

Excelente artigo!
As imagens com certeza foram muito úteis.
Espero pelos próximos.

Muito obrigado!

_________________


Leia o Manual do Iniciante e a Lista de Tutoriais, para aprender bastante sobre o GM.
Recomendo o Manual completo das colisões, bem útil.
O exemplo Criar um chat (banir, kickar, etc) é interessante.

Para seu jogo ficar rápido e legal, aprenda a Aumentar o desempenho do seu jogo.

Aprenda a calcular a velocidade de suas animações


Entre para o Clube do Inglês:
PedroX
PedroX

Games Ranking : Nota B

Notas recebidas : C+B
Data de inscrição : 26/07/2008
Reputação : 311
Número de Mensagens : 6086
Prêmios : Introdução ao design de interfaces Empty

Medalhas x 0 Tutoriais x 17 Moedas x 0

Ouro x 0 Prata x 0 Bronze x 0

Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0

https://web.whatsapp.com/send?phone=5519995935953&text=Pedro

Ir para o topo Ir para baixo

Introdução ao design de interfaces Empty Re: Introdução ao design de interfaces

Mensagem por Tiago Lima Ter 03 Jun 2014, 09:13

Excelente!

Assim como fazer uma casa não é simplesmente empilhar tijolos fazer games não é, desculpe o termo, apenas cuspir código na tela. Há toda uma ciência por de trás relacionada há experiencia de usuário que o game proporciona. Eu vejo que a maioria do pessoal está tão focado no computador e na programação do jogo que se esquece que o elemento final é humano, e o publico esta mais preocupado com a experiencia, a sensação que o game proporciona que ao código poeticamente escrito por trás.

Seu artigo destaca bem a importância de uma interface humana, intuitiva, simples e visualmente bem estruturada, ou seja, para pessoas, gostei do uso de imagens para ilustrar e de todas as dicas. Estou ansioso por mais!

Abraços!  Happy
Tiago Lima
Tiago Lima

Games Ranking : Nota C

Notas recebidas : C
Data de inscrição : 14/07/2008
Reputação : 17
Número de Mensagens : 199
Prêmios : Introdução ao design de interfaces Empty

Medalhas x 0 Tutoriais x 1 Moedas x 0

Ouro x 0 Prata x 0 Bronze x 0

Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0

https://www.youtube.com/user/CanalNexteLevel

Ir para o topo Ir para baixo

Introdução ao design de interfaces Empty Re: Introdução ao design de interfaces

Mensagem por wellingtonmr Ter 03 Jun 2014, 10:40

Bom tópico acho que eu nunca tinha pensado muito sobre esse assunto,seu tópico vai ser de grande ajuda.
Pode usar o meu projeto se quiser,o nome é The Stars Fall Down está na seção de projetos em andamento lá tem a imagem da tela inicial e da hud do game e também um demo,ficaria grato em ouvir sua opinião.
wellingtonmr
wellingtonmr

Data de inscrição : 30/05/2014
Reputação : 7
Número de Mensagens : 49
Prêmios : Introdução ao design de interfaces Empty

Medalhas x 0 Tutoriais x 0 Moedas x 0

Ouro x 0 Prata x 0 Bronze x 0

Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0

Ir para o topo Ir para baixo

Introdução ao design de interfaces Empty Re: Introdução ao design de interfaces

Mensagem por Kabeção Ter 03 Jun 2014, 13:52

Realmente muito bom.

Me lembro da primeira vez que joguei Dead Space.
Todas as interfaces são paineis projetados e/ou fazem parte do próprio ambiente, a imersão que isso proporciona é incrível.

Toda a HUD de Diablo 3 por exemplo, é feita com tantos detalhes que eles provavelmente devem ter uma equipe só para isso durante todo o projeto.
Kabeção
Kabeção

Games Ranking : Sem avaliações

Data de inscrição : 08/06/2008
Reputação : 100
Número de Mensagens : 2314
Prêmios : Introdução ao design de interfaces Empty

Medalhas x 0 Tutoriais x 7 Moedas x 0

Ouro x 3 Prata x 0 Bronze x 1

Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0

http://blackcapapps.blogspot.com.br/

Ir para o topo Ir para baixo

Introdução ao design de interfaces Empty Re: Introdução ao design de interfaces

Mensagem por Henrique-HB Ter 03 Jun 2014, 14:25

PedroX escreveu:Excelente artigo!
As imagens com certeza foram muito úteis.
Espero pelos próximos.

Muito obrigado!

Valeu, já estou preparando o próximo e espero conseguir publicar logo.

Tiago Lima escreveu:Excelente!

Assim como fazer uma casa não é simplesmente empilhar tijolos fazer games não é, desculpe o termo, apenas cuspir código na tela. Há toda uma ciência por de trás relacionada há experiencia de usuário que o game proporciona. Eu vejo que a maioria do pessoal está tão focado no computador e na programação do jogo que se esquece que o elemento final é humano, e o publico esta mais preocupado com a experiencia, a sensação que o game proporciona que ao código poeticamente escrito por trás.

Seu artigo destaca bem a importância de uma interface humana, intuitiva, simples e visualmente bem estruturada, ou seja, para pessoas, gostei do uso de imagens para ilustrar e de todas as dicas. Estou ansioso por mais!

Abraços!  Happy

Isso é uma coisa que eu realmente vejo como falha na comunidade de gamer maker brasileira, são poucos que se preocupam em estudar a parte conceitual da área, o foco tem sido muito técnico. Um bom game não é feito apenas pela etapa de programação.

wellingtonmr escreveu:Bom tópico acho que eu nunca tinha pensado muito sobre esse assunto,seu tópico vai ser de grande ajuda.
Pode usar o meu projeto se quiser,o nome é The Stars Fall Down está na seção de projetos em andamento lá tem a imagem da tela inicial e da hud do game e também um demo,ficaria grato em ouvir sua opinião.
Vou dar uma olhada no seu projeto depois. Valeu!

Kabeção escreveu:Realmente muito bom.

Me lembro da primeira vez que joguei Dead Space.
Todas as interfaces são paineis projetados e/ou fazem parte do próprio ambiente, a imersão que isso proporciona é incrível.

Toda a HUD de Diablo 3 por exemplo, é feita com tantos detalhes que eles provavelmente devem ter uma equipe só para isso durante todo o projeto.

A blizzard capricha em cada detalhe de seus jogos, se não me engano a equipe de interface deles é até um pouco grande até, tudo é muito bem projetado.
Henrique-HB
Henrique-HB

Data de inscrição : 23/06/2008
Reputação : 6
Número de Mensagens : 114
Prêmios : Introdução ao design de interfaces Empty

Medalhas x 0 Tutoriais x 0 Moedas x 0

Ouro x 0 Prata x 0 Bronze x 0

Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0

Ir para o topo Ir para baixo

Introdução ao design de interfaces Empty Re: Introdução ao design de interfaces

Mensagem por Kabeção Qua 04 Jun 2014, 12:36

Pra quem se interessar aqui tem um videos legais.
Concept art da ui de Darksiders se fosse portado para iPad: https://www.youtube.com/watch?v=zCBBQm2QAFY
E o desenvolvimento da ui the Knightmare Tower: https://www.youtube.com/watch?v=IwIFzb9NxIk

E minha coleção de referencias no Pinterest: http://www.pinterest.com/christianafonso/user-interfaces/

Existe até mesmo um site asiático de exposição de arte especifico para designer de interface: http://www.gameui.cn/

Como qualquer coisa na área de criação, quanto mais você vê, mas criativo será.
Kabeção
Kabeção

Games Ranking : Sem avaliações

Data de inscrição : 08/06/2008
Reputação : 100
Número de Mensagens : 2314
Prêmios : Introdução ao design de interfaces Empty

Medalhas x 0 Tutoriais x 7 Moedas x 0

Ouro x 3 Prata x 0 Bronze x 1

Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0

http://blackcapapps.blogspot.com.br/

Ir para o topo Ir para baixo

Introdução ao design de interfaces Empty Re: Introdução ao design de interfaces

Mensagem por Conteúdo patrocinado


Conteúdo patrocinado


Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

 
Permissões neste sub-fórum
Não podes responder a tópicos