Tile System [Player part 1]

今日は皆-さんOlá pessoal! Dando continuidade ao nosso tutorial Tile System. No capitulo de hoje estaremos criando nosso personagem, pelou menos os princípios básicos de movimentação estaremos aprendendo hoje.

Antes de criarmos nosso personagem vamos dar uma leve pincelada em Objetos e editar um pouco o código do tutorial anterior.

Objetos

Acho que o nome resume tudo, objetos são objetos. Vamos pegar como exemplo um MovieClip qualquer.
Um MovieClip é um objeto que possui propriedades como _alpha, _x, _y, _rotate…etc..
Agora vamos ver como seria criar um objeto na pratica. Vamos criar nosso objeto logo no começo do código junto com a arrayField para não termos problemas futuros.

char={};
char.xtile = 1;
char.ytile = 1;
char.speed=2

Acabei de usar o construtur {} para poder mostrar para o Flash que eu estou criando o objeto char. E logo em seguida eu defini 3 propriedades para esse objeto objeto: xtile, ytile e speed

Outra maneira de se criar esse objeto seria:

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

Com esse objeto saberemos qual será a posição de nosso char no cenário e sua velocidade de movimento.

Criaremos mais 3 objetos mais esses serão para aperfeiçoar nossos tiles

Tile0 = {walk:true, frame:1};
Tile1 = {walk:false, frame:2};
Tile2 = {walk:false, frame:3};

Definiremos walk = true todos os tiles que serão permitidos caminhar sobre eles. Com essas novas linhas de códigos vamos alterar a linha de código que dava o gotoAndStop no frame para as seguintes linhas.

_root["Field"][newName].gotoAndStop (_root["Tile" + arrayField[i][j]].frame);
_root["Field"][newName].walk = _root["Tile" + arrayField[i][j]].walk;

Criando o Player

Vamos desenhar um circulo qualquer para ser nosso personagem.
Defina o Identifier como “player” e marquer as opções “Export for actionScript” e “Export in fist frame”.

Crie no tamanho 15×15 exatamente no centro clip.

Vamos criar o código de inserção do player logo após o loop de criação de cenário. Primeiro passo é usar o attachMovie para criar o movieclip no palco, depois usaremos as propriedades do objeto char (aquele que nois criamos la em cima) para encontrarmos a posição _x e _y do nosso personagem e por últimos ainda usando as propriedades do objeto pegaremos a informação referente a velocidade do personagem.

_root["Field"].attachMovie ("Player", "Player", 5000);
_root["Field"]["Player"]._x = char.xtile * 20+10;
_root["Field"]["Player"]._y = char.ytile * 20+10;
_root["Field"]["Player"].speed = char.speed;

Detectando movimento

Para detectarmos o movimento usaremos Keydown dentro de enterframe. Mas por que Não usaremos por si só o keydown? Mas que porcaria é essa de Keydown e enterframe?

Bem como não usamos nos tutoriais anteriores não tinha necessidade de mencionar^^ Keydown e enterframe são eventos:
KeyDown: Evento acionado quando se pressiona uma tecla do teclado.
EnterFrame: Evento que ocorre mudança de frame.

Nosso objetivo aqui será montar uma estrutura para quando o jogador apertar uma das direções o personagem movimentar.

Crie um movieclip vazio no palco (pressione CTRL+ F8 para criar um movieclip vazio na biblioteca. Depois arraste o para o palco). Selecione e aperte F9 para aparecer uma tela de Actions.

Observer que eu circulei aonde esta escrito empty e tem um desenho diferente ali. Isso acontece que essa tela de actions é exclusiva para os eventos do movieclip empty.

onClipEvent (enterFrame) {
	_root.loopFrame ();
}

O código escrito diz que a toda vez que mudar um frame ele chamará a função loopFrame (escreveremos essa função no root juntos com os código de criação de cenário e player) essa função detectará qual direção o jogador apertou e vai chamar uma outra função para fazer o player se mover. Vamos escrever a função.

function loopFrame () {
	var Player = _root["Field"]["Player"];
	if (Key.isDown (Key.RIGHT)) {
		movePlayer (Player, 1, 0);
	} else if (Key.isDown (Key.LEFT)) {
		movePlayer (Player, -1, 0);
	} else if (Key.isDown (Key.DOWN)) {
		movePlayer (Player, 0, 1);
	} else if (Key.isDown (Key.UP)) {
		movePlayer (Player, 0, -1);
	}
}

LoopFrame: Esta função verifica qual direção está sendo pressionada passando parâmetros diferentes para cada direção pessionada.

function movePlayer (ob, dx, dy) {
	if ((dx == 1) or (dx == -1)) {
		ob._x += ob.speed * dx;
	}
	if ((dy == 1) or (dy == -1)) {
		ob._y += ob.speed * dy;
	}
}

MovePlayer: Esta função pede 3 parâmetros:
ob: é o objeto que sofrerá ação (com isso essa função não fica só limitada ao player)
dx: nesse parametro definimos se o personagem vai para direita 1 ou esquerda -1
dy: mesmo esquema do parâmetro anterior so que dessa vez é 1 para baixo e -1 para cima.
A função funciona numa formula muito simples. Ela pega o valor da velocidade multiplica por dx (ou dy) para saber se ela vai incrementar no seu posicionamento ou redizir. Com isso a primeira parte de nosso tutorial tile sistem player se encerra. (O tópico já esta grande^^) e no próximo estaremos validando a função para deixar o personagem só andar nos blocos marcados com walk true. Agora vamos ver o nosso código como ficou na integra.

stop ();
arrayField = [[2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
              [2, 0, 0, 0, 0, 0, 0, 0, 0, 2],
              [2, 0, 1, 1, 1, 1, 1, 0, 0, 2],
              [2, 0, 1, 0, 0, 0, 0, 1, 0, 2],
              [2, 0, 1, 0, 0, 0, 0, 1, 0, 2],
              [2, 0, 1, 1, 1, 1, 1, 0, 0, 2],
              [2, 0, 1, 0, 0, 0, 0, 1, 0, 2],
              [2, 0, 1, 0, 0, 0, 0, 1, 0, 2],
              [2, 0, 0, 0, 0, 0, 0, 0, 0, 2],
              [2, 2, 2, 2, 2, 2, 2, 2, 2, 2]];
_root.createEmptyMovieClip ("Field", 1);
//Objetos
char = {xtile:1, ytile:1, speed:2};
Tile0 = {walk:true, frame:1};
Tile1 = {walk:false, frame:2};
Tile2 = {walk:false, frame:3};
//Objetos
for (i = 0; i < arrayField.length; i++) {
   for (j = 0; j < arrayField.length; j++) {
      newName = "Tile_" + j + "_" + i;
      _root["Field"].attachMovie ("Tile", newName, i*100 + j*2);
      _root["Field"][newName]._x = i * 20;
      _root["Field"][newName]._y = j * 20;
      newFrame =_root["Tile" + arrayField[i][j]].frame;
      newWalk =_root["Tile" + arrayField[i][j]].walk;
      _root["Field"][newName].gotoAndStop (newFrame);
      _root["Field"][newName].walk = newWalk;
   }
}
//Criando Player
_root["Field"].attachMovie ("Player", "Player", 5000);
_root["Field"]["Player"]._x = char.xtile * 20+10;
_root["Field"]["Player"]._y = char.ytile * 20+10;
_root["Field"]["Player"].speed = char.speed;
//Criando Player
//Acontecimentos do EnterFrame
function loopFrame () {
	var Player = _root["Field"]["Player"];
	if (Key.isDown (Key.RIGHT)) {
		movePlayer (Player, 1, 0);
	} else if (Key.isDown (Key.LEFT)) {
		movePlayer (Player, -1, 0);
	} else if (Key.isDown (Key.DOWN)) {
		movePlayer (Player, 0, 1);
	} else if (Key.isDown (Key.UP)) {
		movePlayer (Player, 0, -1);
	}
}
//Acontecimentos do EnterFrame
//Movimento do Player
function movePlayer (ob, dx, dy) {
	if ((dx == 1) or (dx == -1)) {
		ob._x += ob.speed * dx;
	}
	if ((dy == 1) or (dy == -1)) {
		ob._y += ob.speed * dy;
	}
}
//Movimento do Player
//esse codigo abaixo é colado no script do movieclip vazio não se esqueça
onClipEvent (enterFrame) {
	_root.loopFrame ();
}

Bem espero que eu não demore muito para postar a segunda parte desse tutorial^^ Até a próxima, CYA また見てね.

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s


%d blogueiros gostam disto: