Pahto Games Desenvolvimento de Jogos www.pahto.

net

Tutorial Desenvolvendo um menu controlado pelo mouse no Game Maker

Autor: Marcos Bruno Barcellos Dias Site: www.pahto.net Desenvolvimento de Jogos Reviso: Jones Gambarine e Jaqueline Bellas ________________________________________________________________________________ Ol, Neste tutorial, vou ensinar passo a passo a criao de um menu no Game Maker, onde a interao ser feita atravs do mouse. Voc deve ter instalada em sua mquina uma verso do game maker 8.x ou html5. Nos exemplos deste tutorial utilizarei o Game Maker 8.1, mas nada impede a utilizao do novo game maker HTML5, que tambm compatvel com este tutorial e foi onde eu gravei o vdeo demonstrativo no fim do post. Siga os passos abaixo cautelosamente e, caso tenha alguma dvida, solicite ajuda no campo de comentrios.

Primeira parte Importando os recursos necessrios para o projeto Baixe este pacote de recursos e extraia em sua rea de trabalho: http://www.4shared.com/file/OUZrDDqk/Recursos.html Crie um novo projeto no Game Maker (File > New ).

Na pasta Sprites, clique com o boto direito e selecione Create Sprite.

Pahto Games Desenvolvimento de Jogos www.pahto.net

Em name digite spr_menu e em seguida clique em Edit Sprite.

Selecione agora a opo File > Create from Strip

Selecione o arquivo do pacote baixado acima(spr_menu.png), marque a opo remove Background e clique em Abrir.

Na prxima tela, deveremos cortar esta tira de imagens em partes iguais, afim de torn-las uma animao. Vamos dividir o valor da largura da imagem (3240) pelo nmero de figuras existentes dentro da imagem, que so 6, e teremos como resultado o valor 540. A alutra da imagem no ser modificada(440).

Pahto Games Desenvolvimento de Jogos www.pahto.net

Preencha os valores conforme a imagem abaixo:

Number of images = nmero de imagens. Como dito, teremos 6 imagens em nosso menu. Images per Row = o nmero de imagens que temos na mesma linha, neste caso, tambm so 6 imagens. Image Width = Largura que cada imagem vai ocupar. Como calculamos acima, a largura da imagem dividido pelo nmero de opes do menu, chegamos ao valor de 540, que ser o tamanho de cada uma das imagens dividas em "quadros" de animao. Image Height = Altura da imagem. Este valor ser a altura da imagem propriamente dita, que de 440. O resto ser explicado em um outro tutorial, rs. Clique em ok.

Clique No V:

Pahto Games Desenvolvimento de Jogos www.pahto.net

Em Origin, clique no boto Center. Deixe a opo precise colision checking marcada. Veja se as suas modificaes ficaram iguais as minha:

D ok. Na Pasta Sound, crie um novo som:

Nomeie como Escolhendo_Item

Clique em Load Sound e carregue o arquivo Escolhendo Item.wav, contido no pacote baixado no inicio do tutorial. D ok.

Pahto Games Desenvolvimento de Jogos www.pahto.net

Na pasta Objects, crie um novo objeto:

Nomeie o objeto como obj_menu , na caixa Sprite clique no cone ao lado e selecione o Sprite spr_Menu:

Marque a opo Visible. Em depth deixe o valor como zero e o resto deixe como est. Confira se o seu objeto ficou igual ao meu:

Pahto Games Desenvolvimento de Jogos www.pahto.net

Clique no boto Add Event e selcione o evento Step.

Em Actions, clique na Aba Controls, depois clique e arraste a opo Execute code:

Dentro deste bloco, vamos definir um valor image_index=0, o que significa que a imagem padro do menu ser a primeira imagem do grupo de imagens do Sprite spr_menu, e logo abaixo, vamos chamar um script que ainda no criamos, que o mouse_menu();

Pahto Games Desenvolvimento de Jogos www.pahto.net

Confira na imagem como o cdigo ficou:

Clique no cone para confirmar. No final, as propriedades do objeto devem ficar assim:

Ainda no fizemos muita coisa, a partir de agora que vamos ter o contato com a linguagem GML, que na criao do script do menu: Crie uma room chamada room_menu

Pahto Games Desenvolvimento de Jogos www.pahto.net

Dentro da room, configure conforme a imagem a seguir:

Clique na aba Objects e adicione o Objeto obj_menu no centro da tela (eixo x: 400, eixo y: 300).

Pahto Games Desenvolvimento de Jogos www.pahto.net

clique em

para confirmar.

Segunda Parte - Script: mouse_menu() Para definir a rea em que vamos clicar, necessrio saber o seu tamanho para que, ao passar o mouse por cima do item desejado, a animao mude em spr_menu dentro do objeto obj_menu atravs da varivel image_index. Para definir a rea em um item do menu: Abra a room_menu Pare com o mouse em cima do canto superior esquerdo do item Novo Jogo e atente -se aos valores de X e Y que ficam no canto inferior esquerdo da tela(Esto marcadas com um retngulo vermelho). Anote estes nmeros, pois estes so o X1 e Y1 que usaremos mais pra frente.No meu caso, os valores foram os seguintes: x1: 332 y1 = 234, conforme a figura aqui embaixo:

Agora vamos posicionar o mouse no canto inferior direito do item Novo Jogo, e vamos da mesma forma, anotar as coordenadas x e y, que sero nosso X2 e Y2. Veja como ficou:

Pahto Games Desenvolvimento de Jogos www.pahto.net

A juno dos eixos de x com os eixos de y formam um retngulo imaginrio, que ser a rea clicvel do nosso item Novo Jogo dentro do menu. OBS: As informaes em Amarelo so ilustrativas, elas no aparecero na sua room. Para colocar isso em prtica, vamos criar um Script chamado mouse_menu, dentro da pasta Scripts:

Com o editor de Scripts Aberto, vamos criar a verificao dos eixos, para identificar quando o mouse passou por cima do item Novo Jogo. Veja a lista de variveis/funes que vamos usar, e pra que cada uma delas servem: mouse_x = Essa varivel retorna a posio atual do cursor do mouse no eixo X mouse_y = Essa varivel retorna a posio atual do cursor do mouse no eixo Y image_index = Esta varivel determina qual sub-imagem do sprite ser exibida.

Pahto Games Desenvolvimento de Jogos www.pahto.net

mouse_check_button_released(mb_botao_liberado) = Checa qual boto do mouse foi liberado aps o clique. sound_play(som_a_ser_tocado) = Toca um som previamente carregado na pasta Sounds. show_message(Mensagem) = Esta funo nos exibe um pop-up com uma mensagem digitada entre aspas duplas. if(condio){expresso} = testa se uma condio verdadeira, caso o retorno seja verdadeiro a expresso executada. A finalidade do Script testar se as funes mouse_x e mouse_y esto dentro da rea estipulada pelas coordenadas x e y que anotamos. Caso esteja, ao clicarmos com o boto esquerdo do mouse, um som ser tocado e uma mensagem ser exibida. Como eu no gosto de dar o cdigo pronto pra ningum, eu printei pra evitar o Ctrl+c e Ctrl+V dos preguiosos (rsrs):

O cdigo acima lido da seguinte maneira: Se a posio x do meu mouse for maior que 332 e menor que 448 e a posio y do meu mouse for maior que 234 e menor que 248 ento muda a imagem atual para a imagem 1(que acende a opo Novo Jogo) Se eu terminar de clicar com o boto esquerdo do mouse nesta posio ento um efeito sonoro ser tocado e uma mensagem ser exibida. Fim da condio2 Fim da condio1 Salve o projeto e execute-o.

Ser uma tima prtica se voc implementar todo o menu, seguindo exatamente o mesmo processo no script mouse_menu, mudando apenas as coordenadas dos eixos x1,y1,x2 e y2. No esquea que, para cada ao, deve-se mudar o image_index ao correspondente a sua funo.(ex: image_index=0;(nenhuma animao), image_index=1(Acende a opo NOVO JOGO), image_index=2(Acende a opo Continuar), image_index=3(Acende a opo Conquistas), e por ai vai Pra quem teve dvidas durante o processo e quiser ver o vdeo com o passo a passo descrito no tutorial, s clicar neste link : http://www.youtube.com/watch?v=ceL_I72Wh5s
Um Abrao,
Marcos Bruno Barcellos Dias www.pahto.net Desenvolvimento de Jogos contato: marcosbarcellos@live.com / mbarcellos@pahto.net Texto revisado por: Jones Gambarine e Jaqueline Bellas