Notícias diárias, blogs de desenvolvimento e histórias do desenvolvedor de jogos diretamente na sua caixa de entrada
Mergulho profundo: vários sistemas de menu e design de UI no APICO
As muitas partes móveis do APICO significam que o seu sistema de menu precisa ser tão dinâmico quanto a sua jogabilidade. Veja como os desenvolvedores da TNGineers criaram uma interface de arrastar e soltar para complementar a natureza astuta do jogo.
6 de julho de 2022
13 minutos de leitura
Game Developer Deep Dives é uma série contínua com o objetivo de lançar luz sobre design, arte ou recursos técnicos específicos em um videogame, a fim de mostrar como decisões de design aparentemente simples e fundamentais não são tão simples assim.
As parcelas anteriores cobrem tópicos como UI e níveis de dificuldade em Cook Serve Forever, os desafios da programação 2D para Sweet Transit, animação baseada em física em Gibbon: Beyond the Trees e design de inventários espaciais no simulador de pesca escura Dredge.
Nesta edição, Ell, metade da equipe de desenvolvimento de jogos independentes TNgineers, compartilha como eles projetaram o design exclusivo do menu do APICO, cobrindo a personalização de arrastar e soltar, o design dos botões e a evolução do sistema desde o primeiro lançamento até o lançamento final.
Sou Ell (@ellraiser), desenvolvedor da TNgineers, um estúdio independente de desenvolvimento de jogos que comecei com meu irmão, Jamie (@metakitkat)! Recentemente, lançamos o APICO, um jogo simulador de apicultura descontraído sobre criação, coleta e conservação de abelhas (nada menos que no Dia Mundial das Abelhas!).
Situado em uma série de ambientes exuberantes, APICO combina minijogos de coleta de recursos, biologia e apicultura, inspirando-se em uma mistura de apicultura e floricultura da vida real e de fantasia (só não pense nas abelhas aquáticas…).
Um dos recursos sobre os quais as pessoas falam muito é o sistema de menu do APICO. Certamente é uma situação de ame ou odeie, marmite! No entanto, este sistema é algo de que estou muito orgulhoso, então pensei que seria divertido mergulhar no design UX/UI do APICO e falar sobre algumas das decisões tomadas ao longo do caminho.
Apenas um jogo aconchegante sobre gerenciamento de menu (ah, e abelhas, eu acho…)
Ao projetar o jogo pela primeira vez, eu sabia que queria ter um grande foco no sistema de menus, e não apenas por causa da minha própria tendência de fundo no design da UI! O que sempre me frustrou em jogos como Terraria, Starbound ou Minecraft foi o fato de eu só poder abrir um menu por vez.
Especialmente quando você tem vários minijogos de artesanato diferentes para alternar!
Precisa de um item para colocar em uma estação de artesanato? Você tem que abrir a caixa, colocar o item em seu inventário, ir até a estação de artesanato, colocá-lo de volta - e à medida que os processos ou a fabricação ficam mais complicados, essas idas e vindas podem se tornar irritantes rapidamente.
Desde o início, eu queria que o APICO removesse completamente esse limite e permitisse que os jogadores abrissem quantos menus quisessem - para o bem ou para o mal.
Esta também não é uma configuração avançada haha
Imediatamente, o fato de vários menus poderem ser abertos ao mesmo tempo trouxe muitos problemas e cenários que precisaríamos considerar. Como você colocaria vários menus em camadas uns sobre os outros e, ao mesmo tempo, facilitaria o acesso ao que você deseja? Como você permitiria facilmente que os jogadores transferissem itens entre menus e evitassem o mesmo sofrimento doloroso de criação que estávamos tentando evitar em primeiro lugar? Qual a melhor forma de mostrar ao jogador que essa funcionalidade existe?
Arraste-me para o inferno (UI)
Um dos primeiros problemas foi, ok, ótimo, podemos abrir vários menus diferentes, mas agora precisamos ser capazes de movê-los facilmente pela tela!
Dado o quão longe o jogador pode “alcançar” com o mouse, seria muito fácil abrir um menu fora da tela ou abrir um menu em cima de outro menu, então precisávamos absolutamente de uma maneira de mover os menus. No início, usamos um botão no menu - manter pressionado o botão permitiria arrastar o menu para onde você quisesse.
Os primeiros designs de menu de 2 anos atrás!
Isso funcionou bem, mas não foi imediatamente óbvio - além disso, as hitboxes nesses botões eram bem pequenas e não o tornavam muito fácil de usar. Dado que o jogo já estava se tornando rapidamente um simulador de sistema operacional, pensei em seguir o design das janelas do computador e dar a cada menu uma barra na parte superior que você poderia arrastar! Dessa forma, seria um hitbox muito maior para o jogador arrastar, ao mesmo tempo que reutilizaria um conceito com o qual qualquer pessoa que usa um PC estaria familiarizada.
Foi quando mudamos o jogo para o GameMaker e tivemos que refazer tudo :’)
Eu também queria deixar bem claro qual menu você estava arrastando, então dei a cada menu um estado de “arrastar”, que incluía destaques visuais extras, uma linha direta ligando o menu ao objeto pai conforme você move o menu, também como uma mudança no cursor do mouse para usar o símbolo de “arrastar” com o qual todos estamos familiarizados.
Por favor, não julgue os sprites da interface do usuário do primeiro jogo dos bebês: 'D
Portanto, agora podemos exibir vários menus ao mesmo tempo, ver a que eles estão vinculados e organizá-los como quisermos na tela. No entanto, os jogadores ainda podiam mover os menus uns sobre os outros, ocultando-os efetivamente. Precisávamos pensar em como os menus se empilhariam uns sobre os outros sem tornar tudo extremamente frustrante!
Cebolas Têm Camadas
Agora, talvez de forma bastante tola, eu dei aos jogadores o poder de abrir quantos menus quisessem e movê-los para qualquer lugar da tela!
No entanto, se um jogador tivesse vários menus abertos, o jogo começaria a ter problemas para saber “qual” menu mostrar no topo. Quando se tratou de selecionar e destacar um menu, o jogo seguiu a ordem em que foram criados. Isso significava que você poderia passar o mouse sobre um menu e o jogo destacaria involuntariamente um menu diferente abaixo se esse menu fosse criado “primeiro” quando o jogo fosse carregado.
Eu me arrependi de ter feito o OS Simulator 2022? Muito mesmo.
Resolvi esse problema tendo três camadas ou “profundidades” diferentes para um menu:
uma profundidade padrão baseada apenas na criação
uma profundidade de “último destaque” para manter o último menu interagido empilhado sobre quaisquer outros
uma profundidade “destacada” para priorizar qualquer menu que esteja destacado no topo
Muitas lágrimas mantêm este sistema unido
Com essas três camadas, eu poderia trocar a profundidade de um menu com base no que o player estava aberto e sobre o qual estava passando o mouse, e facilitar a “troca” entre menus (ou seja, assim que você destacasse parte de um menu, ele se tornaria “destacado” e estiver acima de todos os outros, se você mover o cursor do mouse para fora desse menu, ele ainda permanecerá no topo onde você o deixou).
Isso funciona de maneira um pouco diferente de como as janelas do sistema operacional funcionam, já que normalmente você precisa clicar nelas primeiro para colocá-las em foco. No entanto, dado que o jogador geralmente está segurando um item que está tentando mover entre os menus, eu queria tornar um pouco mais fácil mover um item segurado sem precisar clicar duas vezes (ou seja, primeiro para selecionar e depois novamente para interagir) . Isso também evitaria conflito com o jogador que realmente deseja clicar nos slots do próprio menu.
Apertando meus botões
Outro desvio das janelas comuns do sistema operacional que você deve ter notado foi o posicionamento dos botões! Inicialmente, planejei colocar esses botões onde você esperaria, ou seja, no canto superior direito.
E isso foi antes de você poder usar “Q” para definir o menu destacado como alvo…
No entanto, depois de testá-los, descobrimos que havia alguns casos (especialmente com os menus maiores) em que você abria um menu e ele ficava parcialmente fora da tela, o que significa que você não poderia realmente acessar os botões até mover o menu de volta. em vista.
Especialmente os meninos corpulentos gostam do menu Centrífuga.
Agora você poderia argumentar que eu poderia ter movido automaticamente os menus para estarem sempre visíveis e não se sobreporem, mas quando você terminar de ter dor de cabeça pensando em maneiras fáceis de fazer isso, isso também significaria que o próprio objeto no o mundo superior (mais qualquer outra coisa) seria potencialmente coberto pelo menu, o que poderia se tornar confuso/frustrante para o jogador ao longo do tempo (ou seja, algumas caixas próximas uma da outra e querer abrir as duas).
A maioria dos botões também possui um atalho de teclado!
Para evitar isso, movi os botões para o lado esquerdo - dessa forma eles estariam sempre à vista e também ao lado do mouse quando o objeto fosse clicado (já que os menus abrem automaticamente logo à direita de o objeto ao qual pertencem), para que você tenha acesso fácil a uma ação imediata sem precisar mover muito o mouse.
Usar um layout vertical também significava que poderíamos encaixar vários botões diferentes, o que apreciaríamos mais tarde, quando adicionássemos vários outros botões, como um botão de ajuda, um botão de classificação automática de inventário e - provavelmente o mais importante - um alvo. botão.
Título espirituoso sobre alvos
Na maioria dos jogos com menus e inventário de jogador, você pode clicar com a tecla Shift pressionada para mover itens rapidamente de um para outro!
Isso é algo que tivemos que incluir, especialmente dada a memória muscular que o Minecraft e seus amigos enraizaram em nós ao longo dos anos (o que poderia ser um assunto totalmente diferente…). No entanto, agora temos um novo problema: se você clicar com a tecla Shift pressionada em um item quando tiver mais de um menu de destino aberto, para onde ele deveria ir?
O que decidi fazer foi permitir que um menu seja especificado como “destino”, clicando em um botão no próprio menu ou usando uma tecla de atalho do teclado quando o menu estiver destacado para rotulá-lo como “destino”. O menu “direcionado” receberia então todos os itens clicados com shift automaticamente!
Você pode ver o pequeno botão circular acender em laranja quando “direcionado”.
Nos bastidores, eu reutilizaria esse conceito de “menu de destino” mesmo quando houvesse apenas dois menus abertos, alternando automaticamente o “alvo” nos bastidores - isso ajudou a reforçar visualmente o conceito de “menu de destino” como o laranja O botão ainda acenderia, ajudando o jogador a perceber o padrão antes mesmo de entrar em um movimento mais avançado de shift-click.
Vamos colocar um alfinete nisso
Agora você pode abrir vários menus, organizá-los e especificar o que vai para onde. O que acontece quando você fecha esses menus? Você precisa reorganizar seu espaço de trabalho novamente? Isso foi algo que surgiu nos estágios iniciais de design (ter a capacidade de fixar um menu em um local específico da tela), mas não adicionamos isso ao jogo inicialmente!
Inicialmente, fechar e abrir um menu redefiniria sua posição ao lado do objeto pai para evitar que você o perdesse acidentalmente fora da tela. No entanto, à medida que mais pessoas jogavam o jogo e se acostumavam com a mecânica, os jogadores queriam ser capazes de configurar sua sala de controle de usina de mel definitiva, ir embora e poder voltar mais tarde e ainda ter esses menus no mesmo. lugar onde os deixaram.
Redefinindo a posição por padrão.
Após o lançamento do APICO, descobrimos que MUITOS jogadores estavam realmente adotando o sistema de menus múltiplos (o que foi incrível de ver!), então acabamos recebendo muitos pedidos de jogadores perguntando se poderiam fixar seus menus no lugar.
Abrindo na última posição fixada.
Felizmente (para mim), este foi apenas o caso de expor algo que já estava lá por padrão. O jogo já estava armazenando a última posição dos menus – bastava zerá-lo quando você o abrisse novamente. Foi fácil NÃO redefinir a localização de um menu se o botão fixado estivesse ativado e, em seguida, salvar o status “fixado” dos menus para quando o jogo fosse carregado na próxima vez.
Método para a loucura
Eu vim daquele pipeline clássico “Design de produto > Design gráfico > UX > Full Stack Dev” (como você…), e uma das coisas que aprendi há muito tempo foram as “10 heurísticas de usabilidade” de Jakob Nielsen.
Estes foram um conjunto de 10 princípios orientadores sobre os quais Jakob escreveu (em 1994!) sobre o estado de um sistema para design de interação geral, tanto físico quanto digital, e havia muitas boas regras aqui aplicáveis ​​a muitas áreas diferentes. de design, mesmo no espaço digital moderno.
Eles sempre estiveram na minha mente sempre que desenvolvi algo, e fazer o APICO não foi diferente!
O fato de eu ter que adicionar essa validação… smh
Neste ponto, agora tínhamos todo esse sistema (apicOS? Vou sair) onde o jogador pode ter vários menus diferentes, organizá-los como quiser e sentar-se em sua sala de controle baseada em abelhas loucas com todos os tipos de botões e alavancas na frente deles.
No entanto, não adianta ter um milhão de coisas para clicar se você não tem ideia do que qualquer uma delas faz, então havia muitas coisas que poderiam ser feitas para melhorar a UX geral que tornaria um jogo fortemente baseado em UI muito mais acessível. e fácil de usar:
Constantemente ter dicas de ferramentas para coisas que você passa (o que é X? o que posso fazer com X?)
Garantir que as mensagens de erro sejam claras (por que não posso fazer X?)
Na mesma linha, mostrando cursores claros de interação do mouse (não permitido, arrastar, edição de texto)
Validar as informações antes de permitir que os jogadores coloquem coisas nelas (por que você tentou colocar as abelhas no lixo?)
Mostrar o “status” de certas coisas úteis em todos os momentos (que horas são? que clima/bioma?)
Slots de Sawbench, assim como eu, exigem validação <3
Todas essas coisas resultam em uma experiência de usuário tranquila que permite aos jogadores se familiarizarem facilmente com o sistema, além de fornecer formas mais avançadas de interagir com o jogo, uma vez que se acostumem com os princípios gerais estabelecidos!
Todas essas heurísticas ainda são muito relevantes hoje em todos os aspectos do design, e há muitas coisas que podem ser aplicadas em jogos! Todos nós já jogamos um jogo em que algo não estava muito claro ou era muito frustrante de entender e, a partir dessa experiência, eu queria ter certeza de que o jogador tivesse todas as informações que desejasse em todos os momentos - sem se sentir completamente sobrecarregado ou excessivamente portátil o tempo todo.
Se você estiver interessado em conferir o APICO por si mesmo, você pode obtê-lo com todos os suspeitos do costume - também temos uma demonstração gratuita no Steam / Itch.io / GameJolt, então se você quiser mexer no sistema de menu sozinho, você pode tentar isso aí também!
Muito obrigado por ler!
 “10 Heurísticas de Usabilidade para Design de Interface do Usuário”, Jakobs Nielson, 1994 (https://www.nngroup.com/articles/ten-usability-heuristics/)
Você pode gostar
Explorando o relatório do estado da indústria de jogos de 2024 - Game Developer Podcast ep. 392 de fevereiro de 2024
Inspiração fantasma e o autor ético com Xalavier Nelson Jr. 8 de dezembro de 2023
Projetando Killer Queen: do experimento de playground à sensação moderna dos fliperamas 18 de outubro de 2023
Rod Humble e King Choi ilustram a ambição de Life By You 22 de setembro de 2023
Receba notícias diárias, blogs de desenvolvimento e histórias do desenvolvedor de jogos diretamente na sua caixa de entrada
Assine os boletins informativos para desenvolvedores de jogos para ficar por dentro das últimas notícias, insights de design, dicas de marketing e muito mais