[Carlos - Tutorial] Personalizando Menu e Controlando com o Mouse.

Nome: Personalizando Menu e Controlando com o Mouse.
Descrição: Ensina como personalizar um menu e controla-lo com o mouse.
Nível de dificuldade: Iniciante.
Requerimentos: Game Maker 8.

Antes de mais nada "Oi, Como vai você?", vou começar mais um tutorial onde explicarei como controlar um menu pelo mouse, e personaliza-lo com sprites e funções de desenho, onde no final iremos ter o seguinte resultado.


Então vamos deixar de papo e começar.
Antes de mais nada vamos colocar as variáveis que nos serão necessárias para criar nosso menu.

Código:

opc = 1; // Opção que estará selecionada ao começar o jogo.
men_opc = 3; // Número de Opções que terá nosso menu.

Agora iremos primeiramente controlar nosso menu pelo teclado.

Código:

// Controlando menu pelo 'Teclado'.
if (keyboard_check_pressed(vk_up)) then
{
    opc -= 1;
}
if (keyboard_check_pressed(vk_down)) then
{
    opc += 1;
}
if (opc > men_opc) then
{
    opc = 1;
}
if (opc < 1) then
{
    opc = men_opc;
}
if (keyboard_check_pressed(vk_enter)) then
{
    if (opc = 1) then
    {
        show_message('Você iniciou o jogo.');
    }
    if (opc = 2) then
    {
        show_message('Você entrou no menu opções.');
    }
    if (opc = 3) then
    {
        show_message('Você optou por sair do jogo.');
    }
}

Pronto a primeira parte do tutorial já está pronta mais essa parte devo creditar ao tutorial do fUzEnRaD [Tutorial] Menu Principal , e agora sim vou mostrar como controlar pelo mouse e personaliza-lo então vamos lá.

No menu que criei acima usei três sprites para as opções vocês poderão utilizar sprites ou então desenhar as opções na tela com a função draw_text, mas aqui nós não iremos utiliza-lá.
Como já criamos a seleção então primeiro vou ensinar como criar a personalização do menu, vamos lá.
Eu particularmente como já havia dito usei três sprites então o que eu fiz primeiramente desenhei essas sprites na room então vamos desenhar as nossas.

Código:

background_color = c_black; // Define a cor do background como sendo a cor preta.
draw_sprite(SprIniciar,0,16,165); // Desenha a sprite Iniciar na posição definida.
draw_sprite(SprOpcoes,0,16,205);// Desenha a sprite Opções na posição definida.
draw_sprite(SprSair,0,16,245);// Desenha a sprite Sair na posição definida.

Agora que já desenhamos nossas sprites na tela se executarmos nosso jogo e pressionarmos para cima ou para baixo não terá como saber qual opção estamos escolhendo, logo teremos que personalizar esse menu para poder saber que opção estamos escolhendo, então iremos desenhar um retângulo que vai de ponta a ponta da room e que será desenhado de acordo com a opção escolhida, vamos aos códigos, logo abaixo de onde desenhamos nossas sprites digite o seguinte código.

Código:

background_color = c_black; // Define a cor do background como sendo a cor preta.
draw_sprite(SprIniciar,0,16,165); // Desenha a sprite Iniciar na posição definida.
draw_sprite(SprOpcoes,0,16,205);// Desenha a sprite Opções na posição definida.
draw_sprite(SprSair,0,16,245);// Desenha a sprite Sair na posição definida.
switch(opc)
{
    case 1: draw_rectangle_color(0,160,room_width,200,c_red,c_red,c_white,c_white,0); break;
    case 2: draw_rectangle_color(0,200,room_width,240,c_red,c_red,c_white,c_white,0); break;
    case 3: draw_rectangle_color(0,240,room_width,280,c_red,c_red,c_white,c_white,0); break;
}

Para quem não conhece a função switch e um if mais 'chique' onde ela pode executar uma série de situações dependendo do valor de seu caso. Acima fizemos o seguinte citamos a variável opc que é nossa var que controla que opção estamos escolhendo e informamos ao computador que caso o valor dessa var seja 1 ela desenhará um retângulo de largura x e altura y na posição escolhida que no nosso caso e uma posição onde fica totalmente atrás de nossa opção, mas se você testar o jogo verá que nosso retângulo desenhado ficou na frente de nossa opção.
O porque disso é que o Game Maker executa seus códigos de acordo como eles foram escritos e como desenhamos nossa sprite antes do nosso retângulo ela ficará por trás do mesmo, para contornar isso e só inverter a ordem dos códigos, deixando-os assim.

Código:

switch(opc)
{
    case 1: draw_rectangle_color(0,160,room_width,200,c_red,c_red,c_white,c_white,0); break;
    case 2: draw_rectangle_color(0,200,room_width,240,c_red,c_red,c_white,c_white,0); break;
    case 3: draw_rectangle_color(0,240,room_width,280,c_red,c_red,c_white,c_white,0); break;
}
background_color = c_black;
draw_sprite(SprIniciar,0,16,165);
draw_sprite(SprOpcoes,0,16,205);
draw_sprite(SprSair,0,16,245);

Pronto resolvido, mas antes que eu possa começar a ensinar como controlar nosso menu pelo mouse vale lembrar que também poderíamos usar o if para desenhar nosso retângulo, mais não irei colocar esse código aqui para que vocês possam exercitar um pouco seu raciocino, então agora vamos ao controle do menu pelo mouse.

O que iremos fazer é simples pois iremos fazer o seguinte: Caso o ponteiro do mouse esteja no eixo y entre uma certa posição ele irá selecionar uma certa opção, e como iremos definir essa posição do nosso mouse é simples pois ela será a altura do nosso retângulo desenhado, sendo assim temos as seguintes delimitações para o mouse.
- Para ele selecionar a primeira opção ele terá que está entre a posição (160, 200);
- Para ele selecionar a segunda opção ele terá que está entre a posição (200, 240);
- Para ele selecionar a terceira opção ele terá que está entre a posição (240, 280).
Como já sabemos as delimitações do mouse e só fazer nosso código.

Código:

// Controlando menu pelo 'Mouse'.
if (mouse_y <= 200 and mouse_y >= 160) then // Se a posição do mouse no eixo y for entre 200, 160;
{
    opc = 1; // A var opc e igual a 1;
    if (mouse_check_button_pressed(mb_left)) then // E se ele clicar com o botão esquerdo enquanto estiver nessa posição ele executará o Código abaixo.
    {
        show_message('Você iniciou o jogo.');
    }
}
if (mouse_y <= 240 and mouse_y >= 200) then
{
    opc = 2;
    if (mouse_check_button_pressed(mb_left)) then
    {
        show_message('Você entrou no menu opções.');
    }
}
if (mouse_y <= 280 and mouse_y >= 240) then
{
    opc = 3;
    if (mouse_check_button_pressed(mb_left)) then
    {
        show_message('Você optou por sair do jogo.');
    }
}

Pronto Terminamos, caso você não tenha conseguido fazer pelo tutorial e só baixar a engine desse logo abaixo.
Pronto era isso que eu queria passar para o pessoal, espero que gostem e qualquer dúvida e só falar.