Imagemaps - Personalizando Menu Principal

O que são imagemaps? São 'lugares' que você pode clicar na tela, como os botões do menu principal ou qualquer outro que você queira criar.
Bem, primeiro de tudo, você precisa aprender que as imagemaps são divididas em 5 imagens:















Ground: Pode-se dizer que é a imagem base, quando não há interação nenhuma com o mouse. Também é assim que vai aparecer quando essa opção não puder ser acessada.
Idle: É assim que seu botão irá aparecer quando não estiver selecionado.
Hover: Quando o mouse está em cima.
Selected Idle: Ativado mas sem o mouse em cima.
Selected Hover: Ativado e com o mouse em cima.


Essencialmente, para fazer um menu, só são necessários o Idle e o Hover. Os outros são para o menu de opções.
 Agora mãos à obra:
Pegue a imagem que será o fundo do seu menu. Aqui um exemplo que criei:
















Agora, crie os botões em algum programa, eu geralmente uso o photoshop. Ex:
Esse é o Ground, como os botões ficam normalmente. Lembre-se: O fundo deve ser transparente!















E aqui o Hover, como os botões irão ficar quando o mouse estiver em cima.  Lembre-se: O fundo deve ser transparente!















Agora coloque essas três imagens na pasta game do seu projeto.
Vá no Options.rpy, edite o mm_root para o nome da sua imagem de fundo. (Ver mudar imagem de fundo)

Agora, abra o Screen.rpy do seu jogo, aperte CTRL + F e procure por screen main_menu .
Vai encontrar esse código:

screen main_menu():

    # This ensures that any other menu screen is replaced.
    tag menu

    # The background of the main menu.
    window:
        style "mm_root"

    # The main menu buttons.
    frame:
        style_group "mm"
        xalign .98
        yalign .98

        has vbox

        textbutton _("Start Game") action Start()
        textbutton _("Load Game") action ShowMenu("load")
        textbutton _("Preferences") action ShowMenu("preferences")
        textbutton _("Help") action Help()

        textbutton _("Quit") action Quit(confirm=False)

Apague toda a parte que coloquei em vermelho e substitua por:
    imagemap:
        ground "ground.png"
        hover "hover.png"
        
        alpha False
       
        hotspot (#, #, #, #) action Start()
        hotspot (#, #, #, #) action ShowMenu("load")
        hotspot (#, #, #, #) action ShowMenu("preferences")
        hotspot (#, #, #, #) action Quit(confirm=False)

Substitua o nome das imagens com as correspondentes que colocou na pasta do seu jogo. NÃO SALVE AINDA!

Agora, inicie o seu jogo, quando estiver no menu principal ou qualquer outra parte, aperte SHIFT + D e clique em Image Location Picker. Vai surgir uma lista com todas as imagens que tem na pasta do seu projeto, selecione a Ground ou Hover que criou.
Selecione o primeiro botão e veja que irão aparecer alguns números lá embaixo.















Coloque esses números no seu Screen.rpy, no código que copiou antes:
        hotspot (#, #, #, #) action Start()
Faça o mesmo com os outros, só selecionar o outro botão e pegar suas coordernadas. Vai ficar algo parecido com isso:





Depois de ter ajeitado as coordenadas de todos os seus botões, salve e teste!

Caso queira colocar sons neles, só adicione isso depois do código de cada botão:

 activate_sound "SOM DE ATIVAÇÃO.wav" hover_sound "SOM MOUSE EM CIMA.wav"

Ficando algo assim:

        hotspot (#, #, #, #) action Start() activate_sound "select1.wav" hover_sound "select.wav"

Para mudar a música do menu:

Vá até seu Options.rpy e procure por config.main_menu_music substitua o que está entre aspas pelo nome do arquivo de música que está na pasta do seu projeto e salve.

6 comentários:

  1. Este comentário foi removido pelo autor.

    ResponderExcluir
  2. Quando você pois selecionar isso dá a impressão que é so clicar então eu fiquei confusa, mas procurando em inglês ve que você desenha com a ponta do mouse um retângulo em volta do botão, ai você obtêm as coordenadas. Ajudou muito mesmo assim ah.
    O forum está morto?

    ResponderExcluir
  3. Oi, muito boas suas explicações, mas....ajuda com uma duvida?
    Como movo os botões do menu que já vem no programa para o centro inferior da tela ao invés da direita?

    ResponderExcluir
  4. Este comentário foi removido pelo autor.

    ResponderExcluir