Game Design - Inserindo com o personagem

Postado: na M.Cassab
Estado: falta muito para as 17h30 ?

Atribuição: Uso Não-Comercial

O conteúdo desta página foi baseado nos tutoriais contidos no site Tile based games, autorizado sob a licença Creative Commons e não pode ser utilizado para fins comerciais.

A tradução e adaptação dos textos, códigos ActionScripts e todas as outras obras originais criadas por Tonypa foram autorizada é são de propriedade dele.

Attribution: Noncommercial

The content on this page was based tutorials in the site Tile based games, licensed under a Creative Commons License and you may not use this work for commercial purposes.

The translation and adaptation of text, ActionScripts codes and all other original works created by Tonypa were authorized is are his property.

Agora que você já consegue fazer um cenário (eu espero), vamos ao coitado que terá que caminhar sobre ele.

Mais uma vez, vou ser preguiçoso e utilizar o mesmo exemplo que o Tony disponibilizou no site dele. No caso, o personagem é o quadrado vermelho.

Esse SFW foi criado pelo Tony para o site Tile based games e está sendo utilizado sob sua autorização.

Por uma questão de preguiça, vamos chamar o personagem simplesmente como PC.

A primeira coisa que você deve fazer é desenhar seu PC na mesma escala das peças do cenário. É importante que você o faça menor do que a imagem, pois é mais interessante deixar visível o que está embaixo dele quando estiver parado. Isso facilita muito o senso de localização do jogador.

No nosso caso, cada imagem que compõe o cenário possui 30px de altura e largura. Logo, seu desenho deverá ser menor do que isso.

Porém, isso dependerá muito do estilo de sua arte. Fiz um PC com 23px e achei que ficou bom. Mas dependendo do estilo, as vezes é preciso fazer um pouco menor do que isso. Você só saberá a medida ideal testando.

Depois que terminar o desenho, transforme seu PC em um movieClip e o registro precisa ficar no centro. Conforme o exemplo da ilustração.

Essa imagem foi criada pelo Tony para o site Tile based games e está sendo utilizado sob sua autorização.

Agora, abra a biblioteca e altere sua propriedade, nomeando-o, assim como fez com os outros. Vou chamar o meu de char.

Por enquanto, vamos apenas tratar de uma imagem para o nosso PC. Depois discutiremos a questão das diferentes posições que ele assumirá de acordo com a movimentação.

Com o PC criado, vamos para as ActionsScripts. Digitaremos o comando para indicar a posição inicial de nosso PC no cenário. Para isso, declare a posição logo após ter declarado as propriedades de todas as imagens.

char={xtile:2, ytile:1};

Na linha de cima, foi declarada uma variável com dois parâmetros, indicando a posição de nosso PC. O parâmetro xtile indica a posição na linha e o parâmetro ytile a posição na coluna.

Lembra do nosso cenário? Temos quadrados brancos e pretos. Se executarmos o comando completo (ainda chegaremos lá), o nosso PC seria inserido no segundo quadrado (xtile:2) da primeira linha (ytile:1), que seria exatamente a imagem "t_1_2".

Tá, se você contar o número de quadrados perceberá que não é exatamente assim, pois o PC foi inserido no terceiro quadrado da segunda linha. Porém, não se esqueça de que estamos trabalhando com matrizes que, por padrão, a contagem sempre começa pelo 0.

Chega de conversa e vamos logo para a prática. Incluiremos algumas linhas dentro da função construtora (buildMap), depois de ter fechado o for que constrói o cenário.

game.clip.attachMovie("char", "char", 10000);

A primeira incluirá o movieClip do PC (que chamamos de char) e declarará um nome para o novo objeto anexado, que será o mesmo. Note que, no último parâmetro, há um “pequeno” valor. Ele indica em qual Level o novo objeto será anexado.

Aqui caímos na questão do planejamento. Se você tiver feito todo planejamento antes de começar a desenvolver, conforme havia aconselhado, você saberá exatamente esse número.

Caso tenha resolvido pular o planejamento (por ter ficado ansioso demais), provavelmente, terá dificuldades em definir o Level do PC. Nesse caso, o jeito é chutar o maior valor que achar melhor, evitando que o cenário encubra dele.

Da mesma forma como criamos um objeto chamado “games” só para agrupar os parâmetros do jogo e “tiles” para o cenário, vamos criar um novo objeto para agrupar os parâmetros do PC.

char.clip = game.clip.char;

O comando de cima pode parecer redundante, mas só parece. O objeto char.clip será responsável por agrupar todos os parâmetros do nosso PC. Porém, não se esqueça de que ele está inserido no cenário. Logo, devemos informar também a sua localização (game.clip.char).

Agora nós vamos calcular a posição de nosso PC. Lá em cima, declaramos a posição inicial dele. Porém, para realizar as verificações durante a movimentação será preciso descobrir sua posição atual (x e y). Será com base nessa propriedade que descobriremos se ele está ocupando o mesmo espaço de um outro objeto.

A primeira coisa a fazer é capturar o posicionamento do PC. Para isso, utilizaremos o conceito do baricentro. O que... não lembra o que é isso ?

Eu avisei que tem coisas no universos dos jogos que fazemos questão de esquecer... Bem, vamos respirar fundo porque a coisa vai ficar punk.

char.x = (char.xtile * game.tileW)+game.tileW/2;
char.y = (char.ytile * game.tileH)+game.tileH/2;

O código acima está utilizando o conceito do baricentro. Informo a altura e a largura da imagem e divido por dois para encontrar o seu centro. Alias, é importante tomar cuidado com a posição dos registros justamente por causa disso, pois sem isso não dá para centralizar corretamente os objetos.

Depois que encontramos a metade, é bom registrarmos isso em algum canto, caso seja preciso no futuro.

char.width = char.clip._width/2;
char.height = char.clip._height/2;

Com a posição definida, bata declarar as coordenadas no objeto do PC:

char.clip._x = char.x;
char.clip._y = char.y;

Conclusão

Se você fez tudo certo, você continuará apenas um único frame vazio em sua timeline contendo exatamente a seguinte ActionScript:

myMap = [
[1, 1, 1, 1, 1, 1, 1, 1],
[1, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 1, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 1, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 1],
[1, 1, 1, 1, 1, 1, 1, 1]
];

game = {tileW:30, tileH:30};

game.TileClass = function () {};
game.TileClass.prototype.walkable=false;
game.TileClass.prototype.frame=2;

game.Tile0 = function () {};
game.Tile0.prototype.__proto__ = game.TileClass.prototype;
game.Tile0.prototype.walkable=true;
game.Tile0.prototype.frame=1;

game.Tile1 = function () {};
game.Tile1.prototype.__proto__ = game.TileClass.prototype;

char = {xtile:2, ytile:1};

function buildMap (map) {
     _root.attachMovie("empty", "tiles", ++d);
     game.clip=_root.tiles;
     var mapWidth = map[0].length;
     var mapHeight = map.length;
     for (var i = 0; i < mapHeight; ++i) {
         for (var j = 0; j < mapWidth; ++j) {
             var name = "t_"+i+"_"+j;
             game[name]= new game["Tile"+map[i][j]];
             game.clip.attachMovie("tile", name, i*100+j*2);
             game.clip[name]._x = (j*game.tileW);
             game.clip[name]._y = (i*game.tileH);
             game.clip[name].gotoAndStop(game[name].frame);
         }
     }

     game.clip.attachMovie("char", "char", 10000);

     char.clip = game.clip.char;

     char.x = (char.xtile*game.tileW)+game.tileW/2;
     char.y = (char.ytile*game.tileH)+game.tileH/2;

     char.width = char.clip._width/2;
     char.height = char.clip._height/2;

     char.clip._x = char.x;
     char.clip._y = char.y;
}

buildMap(myMap);

Sendo que, o resultado final ao publicar o SWF, será esse:

Esse SFW foi criado pelo Tony para o site Tile based games e está sendo utilizado sob sua autorização.

Considerações

Note que, até agora, não chegamos a falar exatamente sobre Game Design.

Até agora, vimos apenas conceitos básicos de inserção de objetos dinamicamente. Isso é algo nativo do Flash e pode ser aplicado para qualquer fim, incluindo desenvolvimento de sites.

Pense sobre o assunto: utilizar a função construtora de cenário para montar o fundo do site e a inclusão do PC para posicionar menus e outros elementos.

O importante é explorar as possibilidades. Quanto mais você experimentar, mais entenderá o funcionamento de tudo.

A partir de agora, vamos entrar realmente de cabeça no principal aspecto do Game Design: a interatividade.

Se quiser, volte ao índice para ver a lista completa do conteúdo.

Próximo assunto:
Movimentando o personagem