O TEMA DO FÓRUM ESTÁ EM MANUTENÇÃO. FEEDBACKS AQUI: ACESSAR

Title Mouse Sample

Iniciado por Kvothe, 19/02/2014 às 14:57


É necessário que você tenha a versão do Dax Core de i1.8 para cima. Caso não tenha Clique Aqui.

Iremos aprender neste tutorial a criar uma Tela de Título que interage com o Mouse!

Requisitos de conhecimento para prosseguir: É necessário você ter um conhecimento médio em RGSS para poder prosseguir.

Bom iremos aprender a criar uma tela de título simples, com uma imagem de fundo, uma logo e as três opções básicas que seriam Novo Jogo, Continuar e Sair. Abaixo você irá poder conferir uma imagem de como irá ficar, com o design disponibilizado para podermos fazer a tela de título.



Cole as imagens que estão no arquivo abaixo, na pasta dum projeto qualquer para poder prosseguir com a aula.
Download do arquivo com as imagens :Aqui

• Planejando a base • Imagens • Conhecendo os comandos • Criando as opções • Ações das opções

• Planejando a Base :

Bom o primeiro de tudo e planejar a base do script, a casca dele. Iremos começar primeiro registrando o script, usando o comando 'Dax.register', e nesse comando há três opções, a primeira e a mais fundamental, que seria o nome que iria identificar que o script está registrado, o nome deve ser em símbolo, o segundo e o nome do autor e o terceiro e a versão do script. Veja abaixo como é e como eu pôs.

Dax.register(:name, "Autor", versão)
Dax.register(:title_mouse, "Dax", 1.0)


Agora iremos, planejar uma classe Scene, que irá ter três métodos essenciais que seria start, terminate, update, e a classe será herdeira da classe Scene_Base. É o nome dessa Scene, será Scene_Title e em todos os métodos ela irá herdar os seus elementos. E antes disso tudo para não dar incompatibilidade com a Scene_Title já existente, iremos usar o comando 'Dax.remove(:Nome_Classe)', esse comando irá desabilitar tal classe, usaríamos ele assim: Dax.remove(:Scene_Title), de resto veja abaixo como está e tem que ficar.


• Imagens :

Bom agora iremos implantar as imagens estáticas que não terá função nenhuma na Scene_Title, que seria a imagem de fundo e a logo. Para isso iremos mexer em dóis métodos que seria o método start e terminate. Veja abaixo por etapa!
start : Neste método iremos criar as variáveis que irá portar as imagens. Iremos criar duas variáveis e elas se chamarão background e logo. Elas serão variáveis locais e o valor delas será a classe Sprite. Como estamos usando o Dax Core ficará mais fácil e rápido de se fazer isso. Há classe Sprite recebeu alguns Add-Ons do Dax Core, um deles é a opção de já criar um bitmap, ao chamar a classe, podendo ser uma imagem direta ou já definir propriedades de largura e altura da classe Bitmap. E a opção de definir uma imagem direto, tem alguns atalhos, um deles e pegar uma imagem direta da pasta System. Veja abaixo como e:

Chamando a classe Sprite e definindo a classe Bitmap com um arquivo de uma imagem: Sprite.new("")
Chamando a classe Sprite e definindo a classe Bitmap com largura e altura: Sprite.new([width, height])
Chamando a classe Sprite e pegando uma imagem da pasta System: Sprite.new("S: Nome da Imagem")


Como podem ver para que isso acontece, dentro das aspas haverá de ter uma Sigla(S) acompanhado de dóis pontos e um espaço para o nome da Imagem. Sabendo disso vamos definir as duas variáveis, chamando as suas respectivas imagens. Veja abaixo como deve estar.


terminate : Neste método iremos apenas dar 'dispose — Comando usado para deletar os componentes da classe Sprite.' das duas variáveis que agregam a classe Sprite. Veja abaixo.


• Conhecendo os Comandos

Agora iremos conhecer os comandos do Mouse que iremos usar para as opções. As opções que iremos usar serão os métodos if_mouse_over & if_mouse_click. Abaixo você segue uma explicação sobre eles.

if_mouse_over : O que esse método trata? Trata-se de que quando o Mouse estiver por cima de determinado objeto.. algo irá acontecer. Importante saber que ele só funciona em variáveis que tem o valor da classe Sprite.
Como eu configuro a ação que irá ocorrer caso o Mouse esteja por cima de determinado objeto? Bom, o método só irá funcionar com objetos que são da classe Sprite, e ele retorna a um bloco(somente se definir)! Exemplo:

sprite.if_mouse_over # Chamou o método.. Mais agora para definir o bloco basta usar as {chaves} e dentro da chave o bloco que irá ser executado. Ex:
sprite.if_mouse_over {
  Comando que irá se executar caso o Mouse esteja por cima do determinado objeto.
 }


Certo, mais agora como faço uma condição para fazer uma ação de que.. Se o Mouse esteja por cima de determinado objeto acontece algo, e quando ele não estiver ele executa outra coisa? Simples basta chamar a variável 'over', como chamar? Após o '{' usa-se |over| .. Essa variável retorna caso o Mouse esteja por cima ou não de um objeto com os valores true or false.. Um exemplo abaixo.

sprite.if_mouse_over { |over|
  if over
sprite.opacity = 255
else
sprite.opacity = 128
 } 
O Exemplo acima.. Quando o Mouse estiver por cima.. a opacidade ficará com o
valor de '255'.. e quando não estiver ficará em '128'.


if_mouse_click : O que esse método trata? Trata-se de que quando o Mouse estiver por cima de determinado objeto e a clicar nele (com o botão direito/esquerdo). algo irá acontecer
Como eu configuro a ação que irá ocorrer caso o Mouse esteja por cima de determinado objeto ao ser clicado? O mesmo método do if_mouse_over. Bom, o método só irá funcionar com objetos que são da classe [Sprite], e ele retorna a um bloco(somente se definir)! Exemplo:

sprite.if_mouse_click(button) {
  Comando que irá se executar caso o sprite seja clicado com o Mouse.
 }
 * button * O button naturalmente e o botão esquerdo.. Então se quiser não
precisa o configurar.. Mais caso queira olhe abaixo os valores a por em ()
 button : Button : (:right - botão direito do mouse | :left - botão esq.)
 Um Exemplo abaixo :
 sprite.if_mouse_click { msgbox("Você clicou em mim!") }

# O Exemplo a cima.. Quando o Mouse clicar no sprite irá aparecer uma mensagem dizendo "Você clicou em mim!"


• Criando as opções :

Agora iremos criar as opções básicas que são Novo Jogo, Continuar e Sair. Para isso iremos criar uma variável para cada, no total serão três variáveis e elas serão variáveis locais e se chamarão novo_jogo, continuar e sair. E elas irão agregar uma Sprite que irá chamar as suas respectivas imagens. Iremos também definir as posições X e Y que elas irá ter no mapa. Tudo isso no método start. Veja abaixo como deve estar/ser :


Também vamos já definir a opacidade das imagens das opção. Pois o efeito será de que quando o Mouse estiver por cima não fique opaco, mas quando não estiver fique opaco. Veja abaixo:


Agora para terminamos essa etapa basta apenas irmos no método terminate e declarar dispose nessas três variáveis.


• Ações das opções :

  Está e a etapa final e nela iremos mexer no método update. Iremos usar os comandos if_mouse_over e if_mouse_click em cada variável. Então vamos por partes:

@novo_jogo : Iremos primeiro definir tudo nesta variável. Primeiro começaremos com o if_mouse_over, essa será bem simples, iremos apenas definir no bloco que se caso estiver por cima a imagem não ficará opaca e caso esteja por cima ficará opaca, veja abaixo:

@novo_jogo.if_mouse_over { |over| 
       if over
         @novo_jogo.opacity = 255
       else
         @novo_jogo.opacity = 128
       end
    }


Agora iremos usar o if_mouse_click, este também será bem simples, iremos apenas definir no bloco que se caso clicar na imagem irá iniciar o jogo, como iremos fazer isso? qual o comando para iniciar o jogo? Bom no script da tela de título padrão do Rpg Maker tem esse comando e ele se chama command_new_game, usaremos ele, então basta você ir no script Scene_Title padrão do maker e copiar o método inteiro e depois passa-lo para o nosso Script, deixando o método abaixo do método update. Porém a algo nesse método que não nos sera útil.. que se chama close_command_window, para que não dê nenhum erro ou algo do tipo você pode deleta-lo. Veja abaixo como ficará esse método em nosso script:


Certo, com esse método agora iremos definir o bloco do if_mouse_click, na qual o bloco dele será executar esse método, veja abaixo:

@novo_jogo.if_mouse_click { command_new_game }


@continuar : Iremos agora definir tudo nesta variável, bom essa variável irá passar pela mesma etapa do método if_mouse_over da variável @novo_jogo, então seria assim :

@continuar.if_mouse_over { |over| 
       if over
         @continuar.opacity = 255
       else
         @continuar.opacity = 128
       end
    }


Agora iremos definir o bloco do método if_mouse_click, bom essa variável trata-se de chamar a tela de carregamento de arquivos salvos do progresso do jogo certo? Então para isso basta nos chamar essa Scene usando o SceneManager.call, veja abaixo:

@continuar.if_mouse_click { SceneManager.call(Scene_Load) }


@sair : Iremos agora definir tudo nessa variável, o processo dessa variável com o método if_mouse_over e o mesmo que os dá variável @novo_jogo e @continuar, veja abaixo :

@sair.if_mouse_over { |over| 
       if over
         @sair.opacity = 255
       else
         @sair.opacity = 128
       end
    }


Agora iremos definir o bloco do método if_mouse_click, bom essa variável trata-se de sair do jogo certo? Então para isso basta usar o comando da SceneManager, o comando exit. É para dar um efeito legal podemos usar também o método fadeout_all da classe Scene_Base, veja abaixo como deve ficar :

@sair.if_mouse_click {
      fadeout_all
      SceneManager.exit
    }


• FINAL :

Bom agora e só salvar todo o Script e testar, e você verá a sua nova tela de título com integração com o Mouse. Bom abaixo você segue algumas opções de Download.

Script da aula : Veja todo o código da tela de título.
Script da aula optimizado : Veja todo o código da tela de título de forma optimizada e simplificada.