Tile System [ActionScript]

今日は皆-さん Olá pessoal dando continuidade ao nosso tutorial do tile system hoje vocês começaram a programar^^ Mas antes de começarmos a colocar o código vamos criar nosso movieclip base.

Tile Base

Abra o Flash crie um arquivo 200 x 200. Antes de criarmos o tile base vamos entender como funcionar. O movieclip Tile ele será a base da construção do cenário, cada frame desse movieclip representará um bloco colorido diferente. (vocês lembram na parte 2 que tínhamos 3 cores diferentes)

Vocês podem criar o tile de diversos tamanhos diferentes, eu optei por usar 20×20.

1.passo: vamos desenhar um quadrado 20×20 verde. Em qualquer parte do palco. Selecione–o e aperte F8 aparecerá essa tela.

Caso esteja aparecendo uma tela com menos opões clique no botão advanced. Coloque o nome do movieclip como “Tile” marque como movieclip. Em identifier coloque “Tile” marque as opções igual a imagem. Com essas opções poderemos criar um arquivo via actionscript puxando diretamente da biblioteca. Delete o quadrado do palco agora porque não iremos precisar dele ai só usaremos a da biblioteca

2.passo: Pressione F11 para aparecer a sua biblioteca.

De um duplo clique no tile para ele ser visualizado sozinho na tela. Crie mais 2 Keyframes. No segundo frame pinte o quadrado de branco e no terceiro frame pinte o quadrado de azul.

Crie um novo layer (ainda no movieclip Tile) nomeie como action. Pressione F9 para aparecer a caixa de Actions e digite:

stop();

Com isso sua tela deve ficar mais ou menos assim.

ActionScript da Parte 2

Observe a imagem acima a existência de um botão chamado Scene 1 clique nele para poder ir para o palco principal. No palco principal clique no primeiro frame e pressione F9 para abrir a janela de actions. Insira o código que aprendemos no tutorial anterior (esse código é referente ao posicionamento dos blocos).

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]
];

Funões actionScripts.

Para prosseguirmos vamos da uma pincelada rápida em 2 funções actionscripts que usaremos.

createEmpytClip(Nome,Deph); Essa função cria um movie clip vazio com o nome e índice que você definir.

_root.createEmptyMovieClip("Field", 1);

attachMovie(Link,nome, Deph);Essa função copia um movieclip da biblioteca para o palco, você se lembra quando agente criou o nosso movieclip Tile que nós definimos um nome para a propriedade Linkage, esse é o nome que usamos para o link. Resumindo se agente for chamar aquele nosso tile da biblioteca usamos assim:

_root.attachMovie("Tile","NovoTile",2);

gotoAndStop(posiçao): Envia animaçao para posição indicada. No nosso exemplo estamos enviando animçao para o frame 3

_root.gotoAndStop(3);

Loop

Vamos criar a estrutura do loop que irá gerar dinamicamente os movieclips em suas devidas posições. Recapitulando a estrutura da visualização da matriz:

arrayField[Linha][Coluna];

Então teremos que criar um loop que percorra cada linha e dentro desse loop montar um loop que percorra todas as colunas.

Loop percorrendo linha
.     loop percorrendo todas as colunas
.     .    Cria o movieclip
.     .    Posiciona o movie clip
.     .    Posiciona o frame na posição correta.
.     .
.     .fim do loop de colunas
.
.fim do loop de linhas

Essa é a nossa estrutura agora vamos converter para código Completo. (Todo código abaixo deve ser inserido no primeiro frame)

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);
for (i = 0; i < arrayField.length; i++) {
    //percorre um loop de colunas
    for (j = 0; j < arrayField.length; j++) {
        newName = "Tile_" + j + "_" + i;
        _root["Field"].attachMovie("Tile", newName, i * 100 + j * 2);
        _root["Field"][newName]._x = j * 20;
        _root["Field"][newName]._y = i * 20;
        _root["Field"][newName].gotoAndStop(arrayField[i][j]+1);
    }
}

Recapitulando o funcionamento do código.

Definimos uma Matriz para podermos criar o cenário, Criamos um movieclip vazio para inserirmos nele os moviesclips tile que está na biblioteca, Fizemos um loop para criar 1 Tile para cada posicionamento da matriz, criamos uma variável chamada “newName” para podermos manipular melhor o nome de cada objeto novo criado. Usamos uma equação para definir o dephs (indice de posicionamento de layer) de cada objeto criado i * 100 + j * 2″ com isso todo objeto criado não corre o risco de ter o mesm dephs. E por ultimo jogamos o frame de cada objeto criado para o numero da matriz +1 (não existe frame 0 né^^).

No proximo tutorial nós aprenderemos a validadar quais locais o personagem poderá andar ou não, e vamos criar também nosso personagem no cenário.

Bem pessoal espero que estejam gostando do tutorial, como eu disse no anterior qualquer duvida postem ou me procurem no msn, eu ajudarei na boa. até a proxima pessal, CYA.また見てね.

Anúncios

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: