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. Como é possível mudar a imagem do menu baseado em variável?

    ResponderExcluir
  2. eu tentei criar um menu com imagemaps mas qndo eu vou pra tela de carregar o save ou para a tela de opções, o imagemap n sai e n consigo clicar em nada

    ResponderExcluir
    Respostas
    1. Seu renpy tem o GUI? Tentei fazer este tutorial no GUI e deu tudo errado '-'

      Excluir
  3. Vocês bem que poderiam atualizar esse tutorial para o GUI,pois o renpy já foi atualizado diversas vezes...

    ResponderExcluir
  4. alguem sabe como resolver esse erro?
    File "game/script.rpy", line 20: Line is indented, but the preceding say statement statement does not expect a block. Please check this line's indentation.
    $ nomeDoProtagonista = renpy.input("Qual é o seu nome?")
    ^

    ResponderExcluir
  5. python:
    name = renpy.input('What's your name?")

    name = name.strip() or "Player"

    define P = Characther("[name]")

    ResponderExcluir