Renpy: Menu com imagenmaps ou imagebuttons

 Existem dois jeito de se fazer menu no renpy com imagem maps, um que ele fica bem parecido com aquele menu que fizemos no tutorial de antes e o outro bem mais legal que ele fica bem mais divertido, isso é pode por ele torto.

Vocês podem fazer qualquer formato com esse jeito, basta fazer as imagens de vocês. Por exemplo poderiam fazer cada palavra num canto da tela e torta ainda. 

O que vamos precisar:

Imagens individuais de cada item do nosso menu
Uma Imagem para nosso menu

Imagens Individuais:

Porque vamos precisar de imagens Individuais? 
- Simples, como queremos que as palavras fiquem tortas, só vamos conseguir esse efeito se fizermos cada item separado. E temos que renomeá-las da seguinte forma: XXXX_hover, XXXX_Idle, isso porque vamos usar o comando (eu não sei o nome técnico) IMAGEMAPS AUTO.

Vamos esclarecer duas coisas aqui:

HOVER - Quando o mouse passa por cima da palavra. Pode ser qualquer efeito, como a palavra ficar reta, virar de cabeça pra baixo, ficar mais claro.

IDLE- Quando a palavra (pode ser imagens, etc.), não estiver selecionada, ou seja sem tocar, sem passar o mouse.

Como isso aqui foi outro teste que fiz, eu escolhi para ser o Hover, a palavra com uma linha escura em volta.

Configurando o menu na Screen:

- Se acharem melhor (atualmente eu acho), criem uma screen para isso, e só lá naquela linha use trocar pelo nome da sua nova screen (veja como criar screen aqui)

Eu escolhi comentar todas as linhas do menu com # na frente.

DICA: Por # na frente de linhas no Atom anula essa linha, elas ficam desligadas.

Como desligar várias linhas no Atom:

Selecione as linhas e clique Ctrl e +, juntos ou vá em edit e selecione Toggle coments. (Ele liga ou desliga)

Eu sugiro que comente off as linhas se for fazer direto na screen main menus, se puderem façam em outra screen acho que vai funcionar super bem.

O VBOX aqui assegura que nossas imagens fiquem em uma caixa transparente vertical.
O XALIGN determina onde nossas imagens se posicionam (eu sempre esqueço se esse determina o lado ou altura, desculpem.)

O YALIGN determina onde nossas imagens ficam. 

Mexendo nesses atributos vão mudar o local onde as palavras estão podem brincar com isso, recomendo para aprenderem.

imagembutton auto é o comando que você usa junto com %, como podem perceber na imagem. 
Lembrando o nome das imagens para usar com esse comando devem ser: start_hover.png

A parte dentro das aspas são o endereço da sua imagem.

Ou seja. "gui/start_%s.png" significa que minhas imagens a start_hover e a start_idle, estão dentro da minha pasta gui.

Código do menu renpy imagembutton:

 add gui.main_menu_background  
    
   vbox:  
     xalign 0.9  
     yoffset -50  
     yalign 0.6  
     
     imagebutton auto "gui/start_%s.png" action Start()  
     imagebutton auto "gui/load_%s.png" action ShowMenu("load")  
     imagebutton auto "gui/op_%s.png" action ShowMenu("preferences")  
     imagebutton auto "gui/extra_%s.png" action ShowMenu("extras")  
     imagebutton auto "gui/exit_%s.png" action Quit(confirm=False)  

Baixe o projeto - Itch-io

Acho que não esqueci de nada dessa vez, enfim, podem usar esse recurso para outras coisas. falta só o jeito mais fácil, trago em breve, já que não tenho nenhum desse feito vou ter que fazer.