![\"\"](\"https:\/\/wp.ufpel.edu.br\/pensamentocomputacional\/files\/2021\/02\/01.gif\")
<\/a><\/p>\nLogo ap\u00f3s somos direcionados para uma segunda tela, na qual podemos observar dois grafos vazios: o grafo tipo e o grafo inicial. A cria\u00e7\u00e3o dos dois grafos ocorre de forma autom\u00e1tica pois ambos s\u00e3o estruturas primordiais para as gram\u00e1ticas \u2013 no grafo tipo definimos todos os elementos do jogo, bem como suas rela\u00e7\u00f5es, e no grafo inicial definimos a organiza\u00e7\u00e3o da estrutura no come\u00e7o jogo. Sendo assim, come\u00e7aremos a especifica\u00e7\u00e3o da gram\u00e1tica adicionando elementos ao grafo tipo. Para isso, devemos clicar no bot\u00e3o de s\u00edmbolo +<\/strong>, na parte superior da janela do grafo.<\/p>\n Em seguida, s\u00e3o apresentadas tr\u00eas op\u00e7\u00f5es de elementos para cria\u00e7\u00e3o: Vertex<\/strong> (v\u00e9rtice), Edge<\/strong> (aresta) e Attribute<\/strong> (atributo). Come\u00e7aremos criando o v\u00e9rtice X para representar o primeiro jogador. Ap\u00f3s selecionarmos a op\u00e7\u00e3o desejada, Vertex<\/strong>, devemos definir um nome para este v\u00e9rtice \u2013 X<\/strong>, por exemplo. O pr\u00f3ximo passo \u00e9 a escolha de um Package <\/strong>(pacote) para definirmos a apar\u00eancia do v\u00e9rtice no jogo. Por padr\u00e3o, o PlayGG possui o pacote System<\/strong>, mas h\u00e1 a possibilidade de incluirmos outros. Em System<\/strong>, escolheremos um \u00edcone para representar o X, como, por exemplo, o Player<\/strong>. Ap\u00f3s definirmos a apar\u00eancia do v\u00e9rtice, definiremos uma cor. O PlayGG tamb\u00e9m possui pacotes de cores, como Unity<\/strong>, ExpPC<\/strong> e Custom<\/strong> \u2013 no \u00faltimo, podemos realizar a escolha das cores manualmente, utilizando o sistema de cores RGB. Para o v\u00e9rtice X escolheremos o pacote Unity e a cor azul. O pr\u00f3ximo passo \u00e9 a defini\u00e7\u00e3o das posi\u00e7\u00f5es x e y do v\u00e9rtice em rela\u00e7\u00e3o \u00e0 janela do grafo \u2013 a posi\u00e7\u00e3o 0,0, por exemplo, corresponde ao centro do grafo. No entanto, \u00e9 poss\u00edvel movermos os elementos manualmente, posicionando-os nos lugares desejados. Por \u00faltimo, definiremos o tamanho do v\u00e9rtice, sendo 50% o tamanho m\u00ednimo e 200% o tamanho m\u00e1ximo. Ap\u00f3s todas as especifica\u00e7\u00f5es, podemos visualizar a cria\u00e7\u00e3o do X no grafo tipo. Repetiremos este processo para os demais v\u00e9rtices do jogo: O, \u25b3, \u25a1 e \u2606. Representaremos a O com o \u00edcone Player<\/strong> na cor vermelho, o \u25b3 com o Gear<\/strong> cinza, o \u25a1 com Vertex <\/strong>branco e a \u2606 com o Time <\/strong>amarelo.<\/p>\n Ap\u00f3s a cria\u00e7\u00e3o dos v\u00e9rtices, vamos para a cria\u00e7\u00e3o das arestas. Para isso, selecionamos o mesmo bot\u00e3o de adi\u00e7\u00e3o, e escolhemos a op\u00e7\u00e3o Edge<\/strong>. Para as arestas tamb\u00e9m definiremos nome, apar\u00eancia e cor. Al\u00e9m disso, escolheremos sua origem e seu destino. No jogo da velha, o X e a O sempre s\u00e3o dispostos em espa\u00e7os vazios, ou seja, o X possui uma rela\u00e7\u00e3o com o \u25a1. Sendo assim, a origem (Source<\/strong>) da aresta \u00e9 o Player azul (X) e o destino (Target<\/strong>) \u00e9 o Vertex branco (\u25a1). Por \u00faltimo, definimos o tamanho da aresta em %. O grafo ficar\u00e1 como a imagem abaixo. Ap\u00f3s a especifica\u00e7\u00e3o do grafo tipo, adicionaremos elementos ao grafo inicial. Ao clicarmos na op\u00e7\u00e3o de adicionar um novo elemento, podemos notar que apenas os elementos j\u00e1 definidos no grafo tipo est\u00e3o dispon\u00edveis para o grafo inicial. Isso ocorre porque tanto os elementos do grafo inicial, quanto os dos demais grafos do jogo, derem ser declarados, previamente, no grafo tipo. Dessa forma, escolheremos os elementos que devem aparecer no in\u00edcio do jogo e definiremos o nome e a sua posi\u00e7\u00e3o no grafo. O jogo da velha inicia com nove espa\u00e7os vazios que possuem rela\u00e7\u00f5es entre si (horizontal, vertical, diagonal esquerda e diagonal direita). Al\u00e9m disso, possui a estrela indicando que o jogo come\u00e7a ativo. O grafo ficar\u00e1 como a imagem abaixo. O terceiro passo \u00e9 a cria\u00e7\u00e3o de regras. Come\u00e7aremos especificando a regra que chamaremos de Colocar X<\/strong>, que permite ao jogador colocar o X no tabuleiro. Para adicionar uma regra ao jogo, devemos clicar no bot\u00e3o verde e selecionar a op\u00e7\u00e3o Rule<\/strong>. Em seguida definimos um nome para a regra \u2013 neste caso, Colocar X<\/strong> \u2013 escolhemos uma apar\u00eancia e uma cor. O pr\u00f3ximo passo \u00e9 a defini\u00e7\u00e3o dos elementos do grafo esquerdo e direito. Para aplicarmos a regra Colocar X<\/strong>, devemos especificar que, se existir um espa\u00e7o vazio (ou seja, um Gear<\/strong> cinza relacionado a um Vertex<\/strong> branco), ent\u00e3o, o X ser\u00e1 marcado nesse espa\u00e7o (ou seja, um Player<\/strong> azul relacionado a um Vertex<\/strong> branco). Neste mapeamento o Vertex<\/strong> branco \u00e9 preservado, o Gear<\/strong> cinza e a aresta s\u00e3o deletados do lado esquerdo, e o Player<\/strong> azul e a aresta s\u00e3o criados do lado direito. Para fazermos isso no PlayGG, selecionaremos o tipo desejado para o grafo (Element<\/strong> ou Gear<\/strong>) e uma entre as tr\u00eas op\u00e7\u00f5es: Preserve<\/strong>, Create<\/strong> e Delete<\/strong>. Dessa forma, como o Vertex <\/strong>branco, por exemplo, \u00e9 preservado \u2013 ou seja, aparece em ambos os grafos \u2013, selecionamos a op\u00e7\u00e3o Preserve<\/strong> e em seguida escolhemos o elemento, previamente definido no grafo tipo, desejado. Neste caso, o espa\u00e7o vazio \u00e9 representado pelo v\u00e9rtice denominado, no grafo tipo, como Espa\u00e7o<\/strong>. Ap\u00f3s selecionarmos o v\u00e9rtice, definimos um nome para ele na regra como, por exemplo, Espa\u00e7o Regra<\/strong>. Por fim, escolhemos a posi\u00e7\u00e3o x e y. O Gear<\/strong> cinza e a aresta s\u00e3o deletados do lado esquerdo da regra, portanto, especificaremos eles com a op\u00e7\u00e3o Delete<\/strong>. Por fim, o Player<\/strong> azul e a aresta s\u00e3o criados do lado direito, portanto, especificaremos eles com a op\u00e7\u00e3o Create<\/strong>. O Time<\/strong> amarelo que representa a estrela de jogo ativo, tamb\u00e9m \u00e9 preservada nos dois grafos, portanto, a definimos com a op\u00e7\u00e3o Preserve<\/strong>. O mesmo processo ser\u00e1 feito para a regra Colocar O<\/strong>. A regra definida ficar\u00e1 como a imagem abaixo.<\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n