{"id":249,"date":"2015-04-19T11:32:41","date_gmt":"2015-04-19T14:32:41","guid":{"rendered":"http:\/\/www.galirows.com.br\/meublog\/gideros\/?page_id=249"},"modified":"2015-04-19T11:33:11","modified_gmt":"2015-04-19T14:33:11","slug":"gerenciamento-cenas","status":"publish","type":"page","link":"http:\/\/www.galirows.com.br\/meublog\/gideros\/ampliando_desenvolvimento\/gerenciamento-cenas\/","title":{"rendered":"Gerenciamento de cenas"},"content":{"rendered":"

Elementos de interface consomem muito esfor\u00e7o na elabora\u00e7\u00e3o de um jogo, mas s\u00e3o imprescind\u00edveis. Sendo assim, \u00e9 interessante criar classes para cada tipo de elemento de interface que ser\u00e1 necess\u00e1rio no projeto. \u00c9 o caso da classe a seguir, que especifica um objeto de bot\u00e3o.<\/p>\n

O construtor da classe espera uma imagem passada como refer\u00eancia e a adiciona juntamente com ouvintes necess\u00e1rio. No c\u00f3digo abaixo, somente um ouvinte foi adicionando, mas em um bot\u00e3o \u00e9 comum adicionar mudan\u00e7a no bot\u00e3o quando o mouse est\u00e1 sobre ele (que ficar\u00e1 como tarefa para praticar).<\/p>\n

\"image072\"<\/p>\n

Observe que no evento de clique \u00e9 verificado se o clique ocorreu em cima do bot\u00e3o instanciado e se sim, a codifica\u00e7\u00e3o aciona o m\u00e9todo stopPropagation() que encerrar\u00e1 a verifica\u00e7\u00e3o do evento por parte do restante das outras inst\u00e2ncias, economizando recursos. Em seguida \u00e9 criado um novo evento, chamado de \u201cclick\u201d que poder\u00e1 ser utilizado posteriormente para qualquer ouvinte de objeto instanciado dessa classe e representando essa a\u00e7\u00e3o.<\/p>\n\n\n\n
Para praticar:<\/strong> fa\u00e7a com que o bot\u00e3o tenha 2 formas: a primeira \u00e9 sua imagem normal, a segunda de quando o bot\u00e3o for pressionado.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Gerenciamento de cenas<\/h1>\n

Um jogo pode ser visto como a composi\u00e7\u00e3o de v\u00e1rias cenas, onde cada cena representa uma parte do jogo. Por exemplo, um jogo pode ter a tela inicial, o primeiro n\u00edvel do jogo e o segundo n\u00edvel do jogo, sendo esses exemplos podendo gerar uma cena para cada um.<\/p>\n

O gerenciamento de cenas na Gideros \u00e9 facilitado pelo script Scene Manager, dispon\u00edvel no endere\u00e7o https:\/\/github.com\/gideros\/Scene-Manager<\/a>. Veremos agora como utiliz\u00e1-lo, sendo necess\u00e1rio inicialmente baixar o scritp scenemanager.lua e adiciona-lo ao projeto do jogo.<\/p>\n

Consideraremos para o jogo a exist\u00eancia de 3 cenas: uma de in\u00edcio do jogo, uma com informa\u00e7\u00f5es sobre o jogo e uma com o jogo propriamente dito. O c\u00f3digo abaixo relaciona essas tr\u00eas cenas, instanciando-as utilizando o script do Scene Manager. Esse c\u00f3digo adicionado ao arquivo main.lua adicionar\u00e1 o gerenciamento de cena no jogo e tamb\u00e9m far\u00e1 a chamada da cena identificada como \u201cinicio\u201d, indo para essa cena. As cenas ainda n\u00e3o foram criadas, mas vemos que elas j\u00e1 possuem um r\u00f3tulo e recebem o nome da classe que conter\u00e1 a cena propriamente dita.<\/p>\n

\"image073\"<\/a><\/p>\n

Como tela inicial iremos criar dois bot\u00f5es que conduzir\u00e3o para o jogo ou para a tela de cr\u00e9ditos. A tela ser\u00e1 criada a partir do arquivo inicio.lua e os bot\u00f5es ser\u00e3o estabelecidos de uma forma diferente da vista at\u00e9 o momento e faz uso da \u201cGideros texture packer\u201d, software instalado juntamente com a Gideros.<\/p>\n

Para come\u00e7ar a utilizar a aplica\u00e7\u00e3o, acesse a op\u00e7\u00e3o \u201cFile\u201d e depois \u201cnew project\u201d. Ser\u00e1 solicitado um nome de projeto e um diret\u00f3rio de armazenamento, onde recomendo escolher o mesmo local do projeto do jogo e desmarcar a op\u00e7\u00e3o “create directory for project” (a menos que voc\u00ea tenho muitos scripts e elementos gr\u00e1ficos no jogo). O nome que ser\u00e1 utilizado no projeto ilustrado nesse material \u00e9 \u201cbotoes\u201d, j\u00e1 que utilizaremos esse texture packer para armazenar todos os bot\u00f5es do jogo.<\/p>\n

\"image074\"Figura 3.1 \u2013 tela de projeto do Gideros texture packer<\/p>\n

Tendo criado o projeto do texture packer, clique com o bot\u00e3o direito do mouse no nome do projeto na janela a esquerda (assim como fazemos para adicionar elementos na Gideros) e acesse a op\u00e7\u00e3o “add existing files”, selecionando os arquivos desejados. Se algum for esquecido, n\u00e3o tem problema e ele poder\u00e1 ser adicionado posteriormente. Na \u00e1rea da direita \u00e9 mostrado o arranjo gerado com as imagens adicionadas ao projeto. N\u00e3o importa o arranjo j\u00e1 que o funcionamento ser\u00e1 igual, indiferente de como ele tenha ficado, mas \u00e9 esse arranjo que ir\u00e1 compor a imagem do texture packer.<\/p>\n

Tendo definido as imagens necess\u00e1rias, basta acessar o menu \u201cfile\u201d e a op\u00e7\u00e3o “Export texture”, que salvar\u00e1 todas as imagens relacionadas em um \u00fanico arquivo e este ser\u00e1 adicionado a pasta do projeto juntamente com um arquivo txt com especifica\u00e7\u00e3o dos elementos presentes na imagem (se voc\u00ea escolheu o loca do projeto da textura sendo o mesmo do projeto do jogo). Esses arquivos ainda precisar\u00e3o ser incorporados ao projeto, mesmo j\u00e1 estando na pasta do projeto.<\/p>\n

Vamos agora especificar esse script de in\u00edcio juntamente com as texturas geradas. O c\u00f3digo a seguir mostra a cria\u00e7\u00e3o da classe \u201cInicio\u201d e os c\u00f3digos do construtor. O construtor inicia instanciando o m\u00e9todo TexturePack.new() que precisa receber o arquivo de texto com a configura\u00e7\u00e3o da textura e a textura propriamente dita. Em seguida criamos um bitmap baseado em uma regi\u00e3o dessa textura, informando o nome da regi\u00e3o, que \u00e9 o mesmo nome da imagem que foi utilizada na cria\u00e7\u00e3o da textura. Veja que com essa t\u00e9cnica duas coisas s\u00e3o facilitadas: 1) menos arquivos de imagem s\u00e3o necess\u00e1rias no projeto; e 2) alterar qualquer arte dos bot\u00f5es exigir\u00e1 apenas alterar o projeto do texture packer<\/em>, sem contar que utilizar skins<\/em> diferentes exige apenas a defini\u00e7\u00e3o uma nova imagem com as texturas.<\/p>\n

A seguir o c\u00f3digo cria um novo bot\u00e3o (fazendo uso do script visto na sess\u00e3o anterior), posiciona-lo e adiciona-o efetivamente na cena. Para finalizar o bot\u00e3o, \u00e9 associado um evento de clique que ao acontecer, executar\u00e1 uma fun\u00e7\u00e3o que chamar\u00e1 a cena do jogo, cena onde pretendemos ter o jogo efetivamente.<\/p>\n

Logo em seguida \u00e9 criado outro bot\u00e3o que \u00e9 posicionado logo abaixo do anterior e que ao ser clicado conduzir\u00e1 para a cena que conter\u00e1 informa\u00e7\u00f5es do jogo.<\/p>\n

\"image076\"<\/a><\/p>\n

Um detalhe importante \u00e9 que os elementos gr\u00e1ficos est\u00e3o sendo criados na pr\u00f3pria classe e se for criado um elemento gr\u00e1fico no stage, esse persistir\u00e1 na tela independente da troca de cenas.<\/p>\n

Na elabora\u00e7\u00e3o da cena com informa\u00e7\u00f5es sobre o jogo, criamos uma nova classe e posicionamos nela uma \u00e1rea de texto e depois um novo bot\u00e3o, segundo visto na elabora\u00e7\u00e3o da tela inicial, e que conduzir\u00e1 para a p\u00e1gina de in\u00edcio ao ser clicado.<\/p>\n

\"image078\"<\/a><\/p>\n

Nossa \u00faltima cena conter\u00e1 o jogo propriamente dito e esse iniciar\u00e1 com a codifica\u00e7\u00e3o j\u00e1 vista anteriormente, onde termos uma bola que ir\u00e1 descendo na tela. Nesse jogo \u00e9 esperado que o jogador clique na bola, contabilizando pontos e fazendo a bola voltar para o topo.<\/p>\n

\"cod_cena\"<\/a><\/p>\n

Nosso pr\u00f3ximo passo consistir\u00e1 em criar um bot\u00e3o que realizar\u00e1 um rein\u00edcio no jogo, um bot\u00e3o de reload. Iniciaremos com o posicionamento do bot\u00e3o no canto inferior esquerdo da tela. Esse bot\u00e3o est\u00e1 presente na texture pack mostrada anteriormente. O c\u00f3digo abaixo adiciona o bot\u00e3o e na \u00faltima linha adiciona um evento no bot\u00e3o que, quando clicado, chama novamente a cena que estamos atrav\u00e9s do scenemanager. Isso basta para trazer os recursos de reiniciar para o jogo, fazendo a cena ser novamente chamada para a execu\u00e7\u00e3o.<\/p>\n

\"image086\"<\/a><\/p>\n

Al\u00e9m do bot\u00e3o de rein\u00edcio, vamos adicionar um bot\u00e3o abrir\u00e1 um menu que poderia oferecer op\u00e7\u00f5es de configura\u00e7\u00e3o do jogo ou simplesmente anunciar a pausa do jogo (o recurso de pausa \u00e9 solicitado com exerc\u00edcio para praticar ao final dessa sess\u00e3o). O c\u00f3digo abaixo adiciona o bot\u00e3o de menu juntamente com o de rein\u00edcio e o evento de clique dele chama a fun\u00e7\u00e3o openMenu() que ser\u00e1 especificada a seguir.<\/p>\n

\"image088\"<\/a><\/p>\n

A fun\u00e7\u00e3o openMenu() \u00e9 respons\u00e1vel por verificar se o menu existe na tela. Inicialmente \u00e9 estado se o objeto \u201cmenu\u201c j\u00e1 existe, se existir ele ser\u00e1 apenas adicionado na tela, aparecendo efetivamente. Caso ele n\u00e3o exista, significa que \u00e9 a primeira vez que o bot\u00e3o de menu \u00e9 clicado, \u00e9 criado um menu atrav\u00e9s da fun\u00e7\u00e3o createMenu(), definida a seguir.<\/p>\n

\"image090\"<\/a><\/p>\n

A fun\u00e7\u00e3o createMenu() utiliza a cria\u00e7\u00e3o de formas gr\u00e1ficas atrav\u00e9s de c\u00f3digo. Poderia ser utilizada uma imagem, forma utilizada anteriormente, mas nesse caso foi optado pela cria\u00e7\u00e3o assim. O c\u00f3digo inicia com a instancia\u00e7\u00e3o de uma classe Shape e que \u00e9 seguida da especifica\u00e7\u00e3o de qual formato de linha ser\u00e1 utilizado para contornar a forma, sendo configurado um formato s\u00f3lido, na cor preta e uma espessura de 0.5. A seguir s\u00e3o especificados pontos que ser\u00e3o utilizados para tra\u00e7ar linhas e formar a forma pretendida s\u00e3o especificados 4 pontos atrav\u00e9s da passagem de suas coordenadas. O m\u00e9todo closePath() completa a forma unindo o \u00faltimo ponto especificado ao primeiro e o m\u00e9todo endPath() \u00e9 quem especifica a finaliza\u00e7\u00e3o da especifica\u00e7\u00e3o da forma.<\/p>\n

Ap\u00f3s criar a forma, s\u00e3o adicionados dois eventos vinculados ao MOUSE_DOWN e ao MOUSE_UP, onde eles realizar\u00e3o a parada da propaga\u00e7\u00e3o desses eventos, retirando os ouvintes existentes para esses dois eventos. Sendo assim, ao criar o menu esses eventos n\u00e3o mais funcionar\u00e3o, ent\u00e3o os outros elementos (no nosso caso, o clique no reiniciar e na bola do jogo, n\u00e3o mais funcionar\u00e3o para essas a\u00e7\u00f5es.<\/p>\n

O c\u00f3digo finaliza adicionando dentro da forma do menu, um bot\u00e3o para fechamento do menu. Ele tamb\u00e9m adiciona um evento nesse bot\u00e3o, tornando-o ent\u00e3o o \u00fanico item clic\u00e1vel na interface. O c\u00f3digo encerra retornando o objeto de menu rec\u00e9m criado.<\/p>\n

\"image092\"<\/a><\/p>\n

A op\u00e7\u00e3o de fechar do menu chama a fun\u00e7\u00e3o closeMenu() \u00e9 mostrada abaixo e simplesmente retira o menu da cena. A fun\u00e7\u00e3o tamb\u00e9m altera a vari\u00e1vel que controla se o jogo est\u00e1 pausado, marcado que ele deixa de estar pausado. Essa vari\u00e1vel \u00e9 marcada como true<\/em> quando o menu \u00e9 aberto.<\/p>\n

\"image094\"<\/a><\/p>\n\n\n\n
Para praticar:<\/strong> implemente no jogo o recurso de pausar, fazendo com que a bola n\u00e3o se desloque enquanto jogo estiver pausado.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

<\/h1>\n","protected":false},"excerpt":{"rendered":"

Elementos de interface consomem muito esfor\u00e7o na elabora\u00e7\u00e3o de um jogo, mas s\u00e3o imprescind\u00edveis. Sendo assim, \u00e9 interessante criar classes para cada tipo de elemento de interface que ser\u00e1 necess\u00e1rio no projeto. \u00c9 o caso da classe a seguir, que especifica um objeto de bot\u00e3o. O construtor da classe espera uma imagem passada como refer\u00eancia […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":4,"menu_order":1,"comment_status":"open","ping_status":"open","template":"","meta":{"footnotes":""},"class_list":["post-249","page","type-page","status-publish","hentry"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t