O editor do Unreal Motion Graphics (UMG) é usado para a criação de elementos de interface com o usuário como telas e HUDs na Unreal Engine 4. Para mostrar o uso básico do UMG vamos criar uma tela de título para um jogo. Neste artigo vamos montar apenas a parte visual da tela e no próximo artigo vamos criar as Ações Blueprints necessárias para fazê-la funcionar.
Acesse o menu "File->New Project" para criar um projeto novo usando o template "Vehicle". Se preferir você pode utilizar um projeto seu ou qualquer outro template. A imagem abaixo mostra a criação do novo projeto.
 |
| Clique para aumentar |
Vamos criar um novo nível que será responsável pela Tela de Título. Para criar o Nível acesse o menu "File->New Level" e escolha a opção "Empty Level" (Nível Vazio). Salve este Nível com o nome "TitleScreen" e depois mova-o para a pasta "VehicleBP/Maps" do projeto.
Este novo Nível deve se tornar o nível padrão do projeto para que ele seja o primeiro Nível carregado quando o jogo iniciar. Para fazer esta mudança acesse o menu "Edit->Project Settings" e selecione a opção "Maps & Modes". Na categoria "Defaults Maps" selecione o novo Nível "TitleScreen" para o Editor e para o Jogo.
 |
| Clique para aumentar |
Na imagem acima, na categoria "Default Modes", observe que o "Default GameMode" está definido com "VehicleGameMode" e que o valor de HUD Class é "VehicleHUD". Isto significa que os novos níveis vão usar estas configurações se não modificarmos estas propriedades no Nível. Se não mudarmos em nosso exemplo, a tela de Título irá exibir a velocidade e a marcha do carro por causa do blueprint "VehicleHUD", e não é isso que queremos.
No editor principal, clique no botão "Settings", que fica na barra de ferramentas superior, e escolha a opção "World Settings" para acessarmos as configurações do Nível "TitleScreen".
Na categoria "Game Mode", item "GameMode Override" selecione a opção "GameMode", desta forma não usaremos na tela de título as modificações que foram feitas para o template "Vehicle".
Finalmente vamos começar a utilizar o UMG. O primeiro passo é criar um "Widget Blueprint" onde iremos desenhar a nossa tela. Para isso, clique no botão "Add New" do "Content Browser", escolha o submenu "User Interface" e depois a opção "Widget Blueprint", como mostra a imagem abaixo. Coloque o nome "UMG_TitleScreen" para este widget.
A tela que vou criar neste exemplo é a seguinte:
Esta tela consiste de uma Imagem com o título "Blueprints Race" e três botões que usam imagens para a sua representação visual. Fique a vontade para usar qualquer imagem para o título e para os botões.
Agora vamos importar as imagens para o editor. No "Content Browser" selecione a pasta "VehicleBP->Textures", para que as imagens sejam salvas nesta pasta. Depois pressione o botão "Import" e selecione as imagens que você deseja utilizar. Estas imagens serão importadas como "Texturas".
Para abrir o editor UMG, dê duplo clique no widget "UMG_TitleScreen" que criamos. A imagem abaixo mostra o editor UMG no modo "Designer" já com as imagens e botões que vamos criar neste exemplo.
 |
| Clique para aumentar |
A área onde colocamos os elementos que serão desenhados é conhecido como "Canvas". Vamos adicionar o Título que consiste apenas de uma imagem. Para adicionar uma imagem ao Canvas, clique e arraste o item "Image" que está na aba "Palette" no lado esquerdo do editor e solte no local desejado dentro do Canvas.
Precisamos agora escolher a Textura ou o Material que será usado por esta imagem no Canvas. No lado direito, existe uma aba "Details" com informações do elemento que estiver selecionado no Canvas.
Na categoria "Appearance", tem um item "Brush" com uma propriedade Image. Clique no Combobox da propriedade Image e selecione a Textura que foi importada para representar o título do jogo. Marque a opção "Size To Content" caso você queira manter o tamanho original da imagem.
Para organizarmos os botões na tela, vamos usar um "Vertical Box", que está na categoria "Panel" da aba "Palette".
Depois de colocar o "Vertical Box", adicione um botão (Common->Button) dentro do "Vertical Box" e depois arraste uma imagem (Common->Image) e solte em cima do botão. Faça isso mais duas vezes para que fique o total de 3 botões.
Para cada uma das imagens adicionadas, selecione a textura que será usada, da mesma forma que fizemos com a imagem de título. Eu recomendo que a opção "Size To Content" seja marcada para todos estes elementos para que eles mantenham os tamanhos das imagens.
Vamos agora renomear os principais elementos. Isto pode ser feito na aba "Details". A imagem de título se chamará "imageTitle" e os três botões terão os nomes: "btnStart", "btnAbout" e "btnExit". A imagem abaixo mostra como ficou a hierarquia dos elementos deste "Canvas":
Vamos criar uma nova tela "About" que conterá informações sobre a criação do jogo. Para isso crie um novo "Widget Blueprint" com o nome "UMG_About". Abra o "UMG_About" e adicione textos e imagens com informações do seu projeto. O meu exemplo de Canvas ficou com este conteúdo:
O artigo "As Ações Blueprints da Tela de Título" mostrará as Ações Blueprints necessárias para carregar estas telas, iniciar o jogo a partir do menu, sair do jogo, carregar a tela About e depois retornar ao menu.
