Aula Extra 1 - Criando Escolhas por Imagens (Menus)

Essa é a primeira aula extra que eu fasso, essa irá tratar sobre escolhas por imagens (veja os exemplos nas imagens abaixo), aconselho a ler as aulas 2, 4, 5, 7 antes de continuar.
Bom, para começar, ai vão alguns exemplos do que eu vou ensinar a fazer:



Bom, vamos começar. Em um sistema como esses, a primeira coisa a se fazer, é criar as variaveis e switchs a serem utilizadas. Nós vamos utilizar 2 switchs e 4 váriaveis, será assim:

1 switch para ativar todo o sistema.
1 switch para desativar todo o sistema.

---

1 variável para armazenar o Id do mapa em que o herói está antes de ativar o sistema.
1 variável para armazenar a posição X em que o herói está antes de ativar o sistema.
1 variável para armazenar a posição Y em que o herói está antes de ativar o sistema.
1 variável para armazenar a posição do cursor.

---

Salve essas duas imagens:

---

O sistema será todo feito por eventos comuns, então va até o banco dados (F9) e va até a aba "Eventos Comuns". Para quem não sabe o que são e para que servem os eventos comuns, ai vai uma breve explicação sobre eles:
Os eventos comuns funcionam como eventos normais, porém eles não tem gráficos e podem ser chamados através de outros eventos, até mesmo sendo ativados por switchs.
Indo a aba "Eventos Comuns", no 1º evento da lista, será feita a posição do cursor, vamos imaginar que cada uma dessas pokébolas (essas bolas vermelhas) tem um ID, apesar de estarem na mesma imagem, cada uma terá o seu ID, começando de 0 (por ser o valor de uma variavel que nao teve seu valor modificado), também imagine que esses IDs serão armazenados em uma variavel, no nosso caso, na variavel que armazena a posição do curso, veja a imagem de exemplo:



Então criaremos a movimentação do cursor, que será feita da seguinte forma:

Código:


Caso precione tecla direita:
   esperar 2 frames (imagens não se movimentarão muito rapidamente)
   opções de variaveis: cursor += 1
   caso variavel cursor >= numero máximo de IDs + 1 (no caso, 3)
      opções de variavel: cursor == 0 (volta o cursor a posição inicial)
   fim
fim

Caso precione tecla esquerda:
   esperar 2 frames (imagens não se movimentarão muito rapidamente)
   opções de variaveis: cursor -= 1
   caso variavel cursor <= numero mínimos de IDs - 1 (no caso, -1)
      opções de variavel: cursor == 2 (volta o cursor a posição máxima)
   fim
fim


Abaixo desses comandos, você pode colocar um "Mostrar Imagem", para mostrar a imagem de fundo, o ID dessa imagem pode ser qualquer um (eu usei 1, por exemplo).

Esse evento Comun deve estar em processo paralelo, e deve ser ativado caso a switch de ativação esteja ligada.

Veja nessa imagem como ficou:

---

Feito isso, o cursor irá se movimentar sobre a tela quando precinarmos a tecla Direita e Esquerda (que podem ser substituidas por qualquer outra). Agora podemos criar um evento comum que mostra a imagem do cursor (seta) sobre cada pokébola quando a variavel que armazena a posição do cursor estiver com seu valor igual ao valor do ID de cada imagem. Isso será feito da seguinte forma:

Código:


Caso variavel cursor == 0
   mostrar imagem : Cursor - Posição X e Y da imagem de ID 0, no caso 22 e 165
fim

Caso variavel cursor == 1
   mostrar imagem : Cursor - Posição X e Y da imagem de ID 1, no caso 268 e 270
fim

Caso variavel cursor == 2
   mostrar imagem : Cursor - Posição X e Y da imagem de ID 2, no caso 513 e 165
fim


Esse evento Comun deve estar em processo paralelo, e deve ser ativado caso a switch de ativação esteja ligada.

Veja como ficou, nessa imagem:

---

Com isso, criaremos um evento de aceitação, ou seja, ele irá fazer as coisas acontecerem quando precionar a tecla C (Enter, Espaço e C). Também usaremos a variável que armazena a posição do cursor. Será feito da seguinte maneira:

Código:


Caso precionar tecla C
   caso variavel cursor == 0
      Coloque o que acontece caso o cursor esteja na imagem de ID 0
      Ativa a switch que desliga o sistema.
   fim
   caso variavel cursor == 1
      Coloque o que acontece caso o cursor esteja na imagem de ID 1
      Ativa a switch que desliga o sistema.
   fim
   caso variavel cursor == 2
      Coloque o que acontece caso o cursor esteja na imagem de ID 2
      Ativa a switch que desliga o sistema.
   fim
fim


No meu caso, eu coloquei um comando que muda o grupo, e outro que mostra uma mensagem dizendo o membro que entrou no grupo, veja as imagem:



Mudar Grupo, e Mensagem:



Esse evento Comun deve estar em processo paralelo, e deve ser ativado caso a switch de ativação esteja ligada.

---

E agora criaremos o evento que desliga o sistema, esse evento Comun deve estar em processo paralelo, e deve ser ativado caso a switch que desliga o sistema esteja ligada, ele será bem simples, ele apenas irá deletar as imagens, desligar o sistema, teletransportar o personagem para onde ele estava antes de ligar o sistema, e desligar a si próprio, será feito dessa maneira:

Código:


Opção de switch que ativa o sistema - desligar
Teletransportar - por variaveis, 1 de mapa, 1 de cordenada x, e 1 de cordenada y. (aula 9)
Deleta as imagens (no caso, as de ID 1 e 2)
Opção de switch que desliga o sistema - desligar


Veja como ficou na imagem:

---

Pronto, o sistema está feito, agora basta criar um evento que ativa ele, no meu caso, ele foi ativdo por um NPC, mas você poderá ativa-lo por um evento em processo paralelo, como quizer, porém o evento deve conter os seguintes comandos para ativar o sistema:

Código:


Opção de variavel: variavel que armazena o ID do mapa == ID do mapa (na caixa "Outros")
Opção de variavel: variavel que armazena a cordenada X do herói == Cord. X (na caixa "Evento">>"Personagem">>"Cord. X"
Opção de variavel: variavel que armazena a cordenada Y do herói == Cord. Y (na caixa "Evento">>"Personagem">>"Cord. Y"
Esperar 2 frames
Opção de switch: Switch que ativa o sistema == On (ligada)
Local de movimento: algum mapa TOTALMENTE vazio (teletransporte)


Veja a imagem:



Agora o sistema está completo, você pode modifica-lo a seu gosto, adicionando mais opções, colocando para mostrar alguma imagem, caso a posição do cursor seja igual ao ID imaginário da imagem.

Downloads:
Clique aqui para baixar o sistema feito