Unity intermediário: design de UI

Name: Unity intermediário: design de UI
Author: Ken Geary

Criar ecrãs iniciais da IU, um menu principal e elementos de sobreposição

Preview the first lesson free — get full access to all 4 lessons.

Curso: sob demanda

Olá, bem-vindo a esta lição sobre Unity. Nestas lições, você aprenderá como trabalhar com usuários interfaces para criar um menu iniciar, telas iniciais e em -sobreposições de status do jogo. As interfaces de usuário, normalmente chamadas de UI, são parte integrante de qualquer aplicativo ou jogo interativo. Ele permite que um usuário selecione opções de jogo clicando ou tocando botões de menu, insira dados ou ajuste um widget, como um controle deslizante. As telas da UI também são usadas para exibir um título de jogo ou jogo sobre a tela. Estaremos criando um jogo básico de plataforma em 2D. Inicie o Unity Hub, em seguida, selecione Novo Projeto, escolha 2D, verifique o caminho do seu arquivo, então chamaremos este projeto de Platformer. Clique em Criar projeto. O editor do Unity terá a mesma aparência que se estivesse trabalhando em um Projeto 3D, exceto a janela de cena, é alternado para 2D visualizar. Faça uma pasta Cenas, se ainda não estiver lá. Salvaremos esta cena como UI. Exploraremos uma amostra dos muitos elementos da UI disponíveis para crie interfaces de usuário começando com um jogo de tela objeto. A tela é um espaço reservado invisível para sua outra IU elementos, como painéis, imagens e botões. Na hierarquia, clique com o botão direito, selecione UI, em seguida, selecione Tela. Observe que um sistema de eventos é adicionado automaticamente. No inspetor, existem vários componentes que compõem a tela. No modo de renderização, você pode fazer com que a tela apareça no mundo espaço, o que é útil se quisermos ter, por exemplo, um jogo objeto com um gráfico informativo flutuante mostrando o saúde do objeto. Queremos que este menu ocupe toda a tela do jogo, então vamos deixe isso no espaço da tela. Defina o dimensionador de tela para dimensionar com o tamanho da tela, então se o usuário estiver rodando o jogo em um nível inferior ou superior monitor de resolução, a IU será dimensionada de acordo. Defina a resolução de referência para 960 por 540. Observe também na visualização da cena que a tela é muito grande e se você alternar 3D em órbita para ampliar, você pode ver o quão grande é no espaço mundial. O Unity ao trabalhar no espaço da tela 2D mostrará apenas isso canvas tela cheia e está bloqueado para a câmera. Podemos adicionar um fundo colorido simples clicando com o botão direito em Tela, selecione IU, e adicionaremos um painel. O painel padrão é baseado em uma imagem sprite branca. Podemos alterar a cor e a transparência clicando no botão ferramenta de cores no inspetor. Use a roda de cores e o quadrado para selecionar um azul claro. Por padrão, a cor do componente do painel também possui transparência. Podemos criar uma cor sólida clicando no controle deslizante alfa designado pela letra A e perfazendo 100%. Se apertarmos o play, veremos o painel em tela cheia. Pare de jogar, e vamos definir nossa visualização de jogo para exibição em HD. Clique na guia do jogo, e use o menu suspenso para definir a exibição para 16 por 9 aspecto. Certifique-se de que o controle deslizante de escala esteja definido como 1x, para que possamos ver o jogo inteiro na visualização do jogo. Clique de volta para a guia de cena e selecione o painel na hierarquia. O elemento de interface de texto permite adicionar, por exemplo, títulos a sua tela. Certifique-se de selecionar o painel primeiro, para que cada elemento aparecem sobre a tela. Clique com o botão direito, selecione UI, Texto, Text Mesh Pro. Se você nunca usou o Text Mesh Pro antes, poderá ver um pop-up janela para instalar itens essenciais, como fontes, de que precisamos. Clique em importar. Isso instala as fontes que precisamos, mas não precisamos de exemplos, então vamos fechar o painel. Agora que temos uma fonte para usar, no inspetor, altere o entrada de texto para My Platformer Game. Observe que o elemento de texto é estático e não possui interações se clicado durante o jogo. Pressione a tecla W para ativar a ferramenta mover e mova o texto para cima perto do topo. Você também pode agarrar as alças laterais, arraste-os para qualquer uma das bordas, e podemos centralizar o título. Você também pode acertar o alinhamento, clique no ícone para fazer um alinhamento central, e isso deve ser muito bom para o nosso título. Uma alternância é útil para menus de jogos, onde você pode querer o usuário para ativar ou desativar coisas, como sons. Clique com o botão direito no painel, selecione IU, alternar. Vamos mover esse botão para cima e para a esquerda do painel. Gire o botão de abertura na hierarquia. Selecione o rótulo e mudaremos esse rótulo para música. Por padrão, a imagem usada em um quadrado de alternância é uma marca de seleção, mas você pode mudar isso para qualquer outra imagem de sprite. Clique em reproduzir. Agora podemos clicar em nosso botão de música e marcar e desmarcar isso, como se estivéssemos ativando ou desativando a música. Lembre-se de que ainda precisamos adicionar código para funcionar com o elementos interativos em seu jogo. Um elemento deslizante é útil para controles de interface de jogo, como som volume. Selecione o painel, clique com o botão direito, interface do usuário, controle deslizante. Vamos girar na hierarquia, e você pode ver vários componentes. Tudo isso pode ser personalizado em forma e cor. Vamos mover o controle deslizante sob o botão de alternância, clique em reproduzir, e clique e arraste para ajustar o controle deslizante. Pare de jogar. O controle deslizante também pode ser redefinido para funcionar como uma barra de saúde, usando código para ajustar a barra de preenchimento do controle deslizante conforme a saúde do jogador diminui ou aumenta. Isso economiza tempo, não tendo que construir isso do zero. Um elemento de botão atua como um botão e reage quando clicado. Clique com o botão direito no painel, interface do usuário, botão, malha de texto pro. Vamos mover o botão sob o controle deslizante. Gire para abrir o botão na hierarquia, selecione o texto, e no inspetor, altere a entrada de texto para clique em mim. Pressione reproduzir. Agora vamos ver como o sombreamento da cor do botão muda conforme você clique. Esse fornece feedback de que o botão foi clicado. Pare de jogar. Você pode personalizar as cores conforme necessário, para cada elemento. Um elemento suspenso permite que o usuário veja as opções quando clicado e selecione essa opção. Painel do botão direito, interface do usuário, suspenso, malha de texto pro. Mova isso um pouco para a direita do nosso último elemento, e no inspetor, role para baixo, e a seção de opções permite remover ou adicionar adicionais opções, bem como alterar o nome da opção e adicionar um imagem opcional. Vamos adicionar mais uma opção clicando no sinal de mais, e renomearemos isso para opção D. Para renomear, clique no pequeno círculo, destacar o texto, e renomear. Clique em reproduzir. Clique no menu suspenso, e permite que você selecione uma opção. Pare de jogar. O elemento de campo de entrada permite ao usuário digitar informações durante o jogo, como digitar o nome de um jogador. Painel do botão direito, interface do usuário, campo de entrada. Moveremos isso para perto da parte inferior da tela. Agora vamos apertar o play, e como é um campo de entrada, isso permite que você digite texto. Pare de jogar. Na próxima lição, aprenderemos como criar splash telas no Unity. Obrigado por assistir.

Intermediário Fornecedor : Ken Geary 4 lições · 34m em Árabe, Alemão, Inglês, Espanhol, Francês, Português, Chinese

Descrição do curso

Nestas lições, aprenderá a utilizar os componentes da interface do utilizador (IU), incluindo a criação de ecrãs iniciais, um menu principal e uma sobreposição de saúde e de recolhas.

Utilizará os componentes da interface do utilizador (IU) para melhorar o design do seu jogo de plataformas 2D, aprenderá sobre os componentes que compõem uma IU, como uma tela, um painel, botões, entradas de texto e cursores. Criará uma sequência de ecrã inicial que pode ser utilizada para apresentar o jogo.

Estas lições também explicam a estrutura de um menu principal interativo, incluindo elementos de painel em camadas, adição de botões e efeitos como sombras.

Uma parte importante de um jogo de plataformas 2D é a apresentação de informações no ecrã durante o jogo. Vai conceber um indicador de nível de saúde utilizando um elemento de IU deslizante modificado que será posteriormente ligado ao código do jogador. Também adiciona um contador de recolhas no ecrã que utiliza um elemento de texto básico, em que o texto será atualizado pelo código do jogador à medida que este recolhe pré-fabricados de recolhas.

O Que Você Vai Aprender

Identificar os diferentes tipos de componentes de UI, incluindo canvas, painel, botões, entradas de texto e controles deslizantes
Criar uma sequência de splash screen para apresentar o jogo
Construir um menu principal interativo camadas de elementos de painel, adicionar botões e aplicar efeitos como sombras projetadas
Projetar um indicador de nível de saúde usando um elemento slider de UI modificado
Adicionar um contador de coletas na tela usando um elemento de texto básico atualizado pelo código do jogador

Principais Conclusões

O curso usa componentes da Unity UI para aprimorar um design de jogo plataforma 2D.
Uma UI é composta por componentes como canvas, painel, botões, entradas de texto e controles deslizantes.
Um menu principal interativo pode ser construído camadas de elementos de painel, adicionar botões e adicionar efeitos como sombras projetadas.
O indicador de nível de saúde é um elemento slider de UI modificado que é posteriormente vinculado ao código do jogador.
O contador de coletas usa um elemento de texto básico que é atualizado pelo código do jogador conforme o jogador coleta os prefabs de coleta.

Perguntas Frequentes

O que vou aprender neste curso?

Você aprenderá sobre o uso de componentes de interface de usuário (UI), incluindo criação de splash screens, um menu principal e uma sobreposição de saúde e coletas, e como usar esses componentes para aprimorar seu design de jogo plataforma 2D.

Quais componentes de UI este curso cobre?

Ele cobre os componentes que compõem uma UI, como canvas, painel, botões, entradas de texto e controles deslizantes.

Quais lições estão incluídas?

As lições são Compreendendo os Componentes de UI, Criando Splash Screens, Criando o Menu Principal e Criando Elementos de UI de Jogo.

Quais habilidades vou construir?

Você construirá habilidades em Interface de Usuário Codificada (UI), Design de Interface, Componentes de UI, Escrita de UI/UX, Interface de Usuário (UI) e Design de Interface de Usuário (UI).

Como este curso trata informações de jogo na tela?

Você projetará um indicador de nível de saúde usando um elemento slider de UI modificado e adicionará um contador de coletas na tela usando um elemento de texto básico que é atualizado pelo código do jogador conforme o jogador coleta os prefabs de coleta.