Neste tutorial, será apresentado como se dá a criação de um jogo, neste caso o jogo da velha, no GrameStation. Para selecionarmos a opção de criar um jogo, clicamos no botão verde do menu inicial, conforme a animação abaixo.
Logo após somos direcionados para uma segunda tela, na qual podemos observar dois grafos vazios: o grafo tipo e o grafo inicial. A criação dos dois grafos ocorre de forma automática pois ambos são estruturas primordiais para as gramáticas – no grafo tipo definimos todos os elementos do jogo, bem como suas relações, e no grafo inicial definimos a organização da estrutura no começo jogo. Sendo assim, começaremos a especificação da gramática adicionando elementos ao grafo tipo. Para isso, devemos clicar no botão de símbolo +, na parte superior da janela do grafo.
Em seguida, são apresentadas três opções de elementos para criação: Vertex (vértice), Edge (aresta) e Attribute (atributo). Começaremos criando o vértice X para representar o primeiro jogador. Após selecionarmos a opção desejada, Vertex, devemos definir um nome para este vértice – X, por exemplo. O próximo passo é a escolha de um Package (pacote) para definirmos a aparência do vértice no jogo. Por padrão, o PlayGG possui o pacote System, mas há a possibilidade de incluirmos outros. Em System, escolheremos um ícone para representar o X, como, por exemplo, o Player. Após definirmos a aparência do vértice, definiremos uma cor. O PlayGG também possui pacotes de cores, como Unity, ExpPC e Custom – no último, podemos realizar a escolha das cores manualmente, utilizando o sistema de cores RGB. Para o vértice X escolheremos o pacote Unity e a cor azul. O próximo passo é a definição das posições x e y do vértice em relação à janela do grafo – a posição 0,0, por exemplo, corresponde ao centro do grafo. No entanto, é possível movermos os elementos manualmente, posicionando-os nos lugares desejados. Por último, definiremos o tamanho do vértice, sendo 50% o tamanho mínimo e 200% o tamanho máximo. Após todas as especificações, podemos visualizar a criação do X no grafo tipo.
Repetiremos este processo para os demais vértices do jogo: O, △, □ e ☆. Representaremos a O com o ícone Player na cor vermelho, o △ com o Gear cinza, o □ com Vertex branco e a ☆ com o Time amarelo.
Após a criação dos vértices, vamos para a criação das arestas. Para isso, selecionamos o mesmo botão de adição, e escolhemos a opção Edge. Para as arestas também definiremos nome, aparência e cor. Além disso, escolheremos sua origem e seu destino. No jogo da velha, o X e a O sempre são dispostos em espaços vazios, ou seja, o X possui uma relação com o □. Sendo assim, a origem (Source) da aresta é o Player azul (X) e o destino (Target) é o Vertex branco (□). Por último, definimos o tamanho da aresta em %. O grafo ficará como a imagem abaixo.
Após a especificação do grafo tipo, adicionaremos elementos ao grafo inicial. Ao clicarmos na opção de adicionar um novo elemento, podemos notar que apenas os elementos já definidos no grafo tipo estão disponíveis 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ício do jogo e definiremos o nome e a sua posição no grafo. O jogo da velha inicia com nove espaços vazios que possuem relações entre si (horizontal, vertical, diagonal esquerda e diagonal direita). Além disso, possui a estrela indicando que o jogo começa ativo. O grafo ficará como a imagem abaixo.
O terceiro passo é a criação de regras. Começaremos especificando a regra que chamaremos de Colocar X, que permite ao jogador colocar o X no tabuleiro. Para adicionar uma regra ao jogo, devemos clicar no botão verde e selecionar a opção Rule. Em seguida definimos um nome para a regra – neste caso, Colocar X – escolhemos uma aparência e uma cor. O próximo passo é a definição dos elementos do grafo esquerdo e direito. Para aplicarmos a regra Colocar X, devemos especificar que, se existir um espaço vazio (ou seja, um Gear cinza relacionado a um Vertex branco), então, o X será marcado nesse espaço (ou seja, um Player azul relacionado a um Vertex branco). Neste mapeamento o Vertex branco é preservado, o Gear cinza e a aresta são deletados do lado esquerdo, e o Player azul e a aresta são criados do lado direito. Para fazermos isso no PlayGG, selecionaremos o tipo desejado para o grafo (Element ou Gear) e uma entre as três opções: Preserve, Create e Delete. Dessa forma, como o Vertex branco, por exemplo, é preservado – ou seja, aparece em ambos os grafos –, selecionamos a opção Preserve e em seguida escolhemos o elemento, previamente definido no grafo tipo, desejado. Neste caso, o espaço vazio é representado pelo vértice denominado, no grafo tipo, como Espaço. Após selecionarmos o vértice, definimos um nome para ele na regra como, por exemplo, Espaço Regra. Por fim, escolhemos a posição x e y. O Gear cinza e a aresta são deletados do lado esquerdo da regra, portanto, especificaremos eles com a opção Delete. Por fim, o Player azul e a aresta são criados do lado direito, portanto, especificaremos eles com a opção Create. O Time amarelo que representa a estrela de jogo ativo, também é preservada nos dois grafos, portanto, a definimos com a opção Preserve. O mesmo processo será feito para a regra Colocar O. A regra definida ficará como a imagem abaixo.
As demais regras a serem definidas são utilizadas para verificar quando um dos jogadores vence o jogo. Para vencer no jogo da velha é preciso obter uma sequência de três elementos iguais em uma das quatro direções permitidas. Dessa forma, precisaremos definir oito regras: duas possibilidades de vértices (X e O) para quatro possibilidades de direções (horizontal, vertical, diagonal direita e diagonal esquerda).
Começaremos com a regra X Venceu Horizontal, que indica a vitória do jogador com o Player azul na horizontal. Assim como na anterior, definiremos o nome, a aparência e a cor da regra. Para o grafo esquerdo da regra precisaremos de três Vertex branco encadeados pelas arestas Horizontal relacionados, cada um, com um Player azul. Também precisamos do Time amarelo para indicar que o jogo deve estar ativo para a aplicação da regra. No grafo direito, todos os elementos do grafo esquerdo são preservados, com exceção do Time, pois a execução do jogo deve ser finalizada assim que um dos jogadores vencer. Sendo assim, com a opção Preserve definiremos três os Vertex, Player, e arestas e com a opção Delete definiremos o Time. A regra definida ficará como a imagem abaixo.
As sete regras restantes são especificadas de maneira semelhante a primeira, sendo preciso alterar em cada uma, o tipo das arestas (horizontal, vertical, diagonal direita e diagonal esquerda) e o vértice (Player vermelho).