Customizando Menu / Imagemaps

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Customizando Menu / Imagemaps

Mensagem por Kurotsugu-san em 26.04.15 17:48

O Básico
Essa é a parte mais simples, mudar o background do menu principal e do menu de preferências. Apenas vá no seu options.rpy e encontre essas linhas:
Código:
        ## The background of the main menu. This can be a color
        ## beginning with '#', or an image filename. The latter
        ## should take up the full height and width of the screen.
        mm_root = "#dcebff",

        ## The background of the game menu. This can be a color
        ## beginning with '#', or an image filename. The latter
        ## should take up the full height and width of the screen.
        gm_root = "#dcebff",

mm_root é o background do menu principal, e gm_root o das preferências. Por padrão, eles estão usando uma cor combinando com o tema que escolheu quando criou o projeto. Para mudar para imagens, faça o seguinte:
Código:
mm_root = "fundo.jpg",

O arquivo fundo.jpg deve estar dentro da sua pasta game. Se estiver mais fundo, como exemplo, dentro de outra pasta chamada imgs, faça o seguinte:
Código:
mm_root = "imgs/fundo.jpg",

O mesmo vale para todos os outros arquivos no Ren'Py.

Customização Completa

Imagemaps

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 geralmente são para o menu de configurações.
Agora mãos à obra:
Pegue a imagem que será o fundo do seu menu. Aqui um exemplo que criei:
Spoiler:

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!
Spoiler:

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

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:
Código:
    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 ele e substitua por:
Código:
    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.
Spoiler:

Coloque esses números no seu Screen.rpy, no código que copiou antes:
Código:
        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:
Spoiler:

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:

Código:
 activate_sound "SOM DE ATIVAÇÃO.wav" hover_sound "SOM MOUSE EM CIMA.wav"

Ficando algo assim:
Código:
        hotspot (#, #, #, #) action Start() activate_sound "select1.wav" hover_sound "select.wav"

Mudando 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.

_________________
Tatsuhiko Takimoto escreveu:Quando leio minha história nos dias em que estou de bom humor, penso. “Incrível! Sou um gênio!”
E nos dias que estou deprimido, é sempre, “Sou uma desgraça por ter escrito algo assim! Morra agora mesmo!”
avatar
Kurotsugu-san
Criador do Ren'Py Brasil

Masculino Mensagens : 100
Data de inscrição : 28/03/2015
Localização : Porto-Alegre - RS

Ver perfil do usuário http://renpybrasil.blogspot.com.br/

Voltar ao Topo Ir em baixo

Re: Customizando Menu / Imagemaps

Mensagem por kaitofelipe em 15.06.15 18:46

Coloquei botões in-game no VN, mas notei que da pra continuar a história mesmo sem clicar em tudo, tem como "bloquear" a história até clicar em todas as opções marcadas?

kaitofelipe
Iniciante
Iniciante

Masculino Mensagens : 15
Data de inscrição : 27/05/2015

Ver perfil do usuário http://ixjun.com

Voltar ao Topo Ir em baixo

Re: Customizando Menu / Imagemaps

Mensagem por Kurotsugu-san em 15.06.15 21:32

Usou esse aqui? http://renpybrasil.blogspot.com.br/2015/03/imagemaps-botoes-in-game.html

Se a resposta for sim, criei um código aqui, que talvez resolva o seu problema:
Depois que você clicar em um dos botões, ele é desativado, e após os três serem desativados, vai pular pra uma nova label, caso contrário volta pra tela até clicarem em todos.

Código:
screen NOME:
    imagemap:
        ground "IMAGEM"
        hover "IMAGEM"

        if not clicado1:
            hotspot (#, #, #, #) action Return("LUGAR1")
        if not clicado2:
            hotspot (#, #, #, #) action Return("LUGAR2")
        if not clicado3:
            hotspot (#, #, #, #) action Return("LUGAR3")

init python:
    $ clicado1 = False
    $ clicado2 = False
    $ clicado3 = False
    $ continuar1 = 0

label tela1:
    call screen NOME
    if _return == "LUGAR1":
        "Fui para a loja!"
        $ continuar1 += 1
        $ clicado1 = True
        jump loja
    elif _return == "LUGAR2":
        "Fui para as escadas!"
        $ continuar1 += 1
        $ clicado2 = True
        jump escadas
    elif _return == "LUGAR3":
        "Vou embora!"
        $ continuar1 += 1
        $ clicado3 = True
        jump irembora

label loja:
    "ola"
    if continuar1 >= 3:
        jump parte2
    else:
        jump tela1

label irembora:
   "ola"
    if continuar1 >= 3:
        jump parte2
    else:
        jump tela1

label escadas:
    "ola"
    if continuar1 >= 3:
        jump parte2
    else:
        jump tela1

label parte2:
   "A história continua aqui."

Se funcionar tudo bem, se não, tentamos de novo.

_________________
Tatsuhiko Takimoto escreveu:Quando leio minha história nos dias em que estou de bom humor, penso. “Incrível! Sou um gênio!”
E nos dias que estou deprimido, é sempre, “Sou uma desgraça por ter escrito algo assim! Morra agora mesmo!”
avatar
Kurotsugu-san
Criador do Ren'Py Brasil

Masculino Mensagens : 100
Data de inscrição : 28/03/2015
Localização : Porto-Alegre - RS

Ver perfil do usuário http://renpybrasil.blogspot.com.br/

Voltar ao Topo Ir em baixo

Re: Customizando Menu / Imagemaps

Mensagem por tainapsilva em 29.04.16 10:52

Eu tentei mudar as imagens do menu inicial como o exemplo mas não hora de localizar os Hotspots, só aparece dois e não aparece "Retangulo" coma na sua imagem e sim, posição do mouse. Poderia me dizer aonde estou errando.

Ps: Ja mudei a caixa de texto e os fundos tanto do menu como do inicio, bem foi mais parar teste ja que anda não fiz a imagem de abertura do jogo, quero configurar tudo que poder antes.
avatar
tainapsilva
Regular
Regular

Feminino Mensagens : 22
Data de inscrição : 30/06/2015
Localização : Rio de janeiro
Projetos : Um Otome visual novel

Ver perfil do usuário http://visualnoveleoutrosgames.blogspot.com.br/

Voltar ao Topo Ir em baixo

Re: Customizando Menu / Imagemaps

Mensagem por Kurotsugu-san em 29.04.16 12:05

Apenas clique e arraste o mouse até formar um quadrado ou retângulo onde deseja tornar a área.

_________________
Tatsuhiko Takimoto escreveu:Quando leio minha história nos dias em que estou de bom humor, penso. “Incrível! Sou um gênio!”
E nos dias que estou deprimido, é sempre, “Sou uma desgraça por ter escrito algo assim! Morra agora mesmo!”
avatar
Kurotsugu-san
Criador do Ren'Py Brasil

Masculino Mensagens : 100
Data de inscrição : 28/03/2015
Localização : Porto-Alegre - RS

Ver perfil do usuário http://renpybrasil.blogspot.com.br/

Voltar ao Topo Ir em baixo

Re: Customizando Menu / Imagemaps

Mensagem por tainapsilva em 03.05.16 19:39

Kurotsugu-san escreveu:Apenas clique e arraste o mouse até formar um quadrado ou retângulo onde deseja tornar a área.

Eu vi que era assim, depois obrigada pela resposta
graças a seu tutorial fiz meu menu inicial personalizado
avatar
tainapsilva
Regular
Regular

Feminino Mensagens : 22
Data de inscrição : 30/06/2015
Localização : Rio de janeiro
Projetos : Um Otome visual novel

Ver perfil do usuário http://visualnoveleoutrosgames.blogspot.com.br/

Voltar ao Topo Ir em baixo

Re: Customizando Menu / Imagemaps

Mensagem por Conteúdo patrocinado


Conteúdo patrocinado


Voltar ao Topo Ir em baixo

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

 
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum