Posts Tagged ‘Chipset’

Tile System – Tutorial [Part 3][ActionScript]

maio 30, 2008

今日は皆-さん 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.また見てね.

Tile System – Tutorial [Part 2][Matriz Cenário]

maio 24, 2008

今日は皆-さん Dando continuidade ao nosso tutorial do Tile System. Nesse tutorial vamos finalmente por a mão na massa e entender como criamos um cenário tile system baseando em uma matriz.

Esse será o nosso cenário de estudo

Mas antes vamos entender como funciona uma matriz 2×2 para isso vamos montar uma matriz letras x números.

A = [A1, A2, A3];
B = [B1, B2, B3];
C = [C1, C2, C3];

Com isso nois temos as 3 vetores diferentes cada um representando uma linha diferente agora se agruparmos eles dessa forma:

Field = [A,B,C];

Eu prefiro desenhar a matriz desse jeito:

Field = [
[A1, A2, A3],
[B1, B2, B3],
[C1, C2, C3]
];

Para acessarmos cada valor do vetor acima devemos usar os index da seguinte forma:

Field[Linha][Coluna];

Analogamente para acessarmos cada valor da matriz faremos assim^^

Field[0][0] = A1
Field[0][1] = A2
Field[0][2] = A3
Field[1][0] = B1
Field[1][1] = B2
Field[1][2] = B3
Field[2][0] = C1
Field[2][1] = C2
Field[3][2] = C3

Bem isso é algo meio complexo de se entender de começo mas logo logo você pega o jeito. Agora vem a pergunta pra que eu tive que entender isso? o que isso vai ser útil para criar o cenário. Bem muito simples por que o código abaixo será o nosso cenário^^

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

Se vocês prestarem atenção com calma nos números 1 espalhado pela matriz forma exatamente um R. ohhhhh agora vocês lembram que o nosso cenário tem um R branco exatamente aonde esta os 1 e uma borda azul que esta exatamente aonde você esta vendo o numero 2 e analogamente aonde o 0 esta verde nosso cenário. Para ficar mais claro vamos rever a figura do nosso cenário com a matriz por cima

Bem pessoal vou dar um tempo para vocês assimilarem o novo conhecimento adquirido com esse post e no próximo post nois finalizamos o nosso cenário com o desenvolvimento do actionsctipt que gerará o nosso cenário. Mas se vocês quiserem ir se adiantando vou dar a dica do que faremos no próximo post.

Próximo post:

• Criemos um movieclip aonde cada frame vai representar um quadrado de cor diferente.
• Faremos um loop que percorrera nossa matriz e no lugar de cada numero criará um movieclip diferente
• Depois mandaremos nossos movieclip exibirem a imagem correta baseado nos números da matriz

Espero que esteja sendo claro, pois eu nunca tinha escrevido nada antes para ensinar alguém^^ qualquer duvida postem aqui ou podem me procurar no msn (esta do lado direito junto o meu auto retrato^^) nos veremos no próximo post pessoal. Até mais, CYA, また見てね.

Tile System – Tutorial [Part 1]

maio 16, 2008

今日は皆さん Desculpe-me a demorar em fazer o post, mas eu perdi muito tempo tentando elaborar um desculpa convincente para o atraso e não bolei nenhuma maneira. ^^

Tenho atraído visitas de muitas pessoas que não estão aqui só para jogar, dentre outros motivos que um ser em sã consciência visita meu blog é para entender a criação de um game e hoje vou estrear a minha primeira matéria voltada a esse pessoal que quer aprender umpouco sobre construção de jogos.

No post de hoje não mencionarei nenhum código só teoria. Espero que gostem.

TILE SYSTEM (Vulgo Sistema de Azulejos)

Imagina que você precisa fazer um jogo com gráfico bonito e que seja leve. De uma olhada na nessa imagem.

Imagem 1 Imagem2

Reparem que a primeira imagem é apenas uma tela azul e a segunda é um monte de quadradinhos azuis preenchendo a tela. Agora imagine que eu vou continuar colocando vários quadradinhos na segunda imagem para ficar tudo azul igual à primeira. Eu poderia escrever diversos parágrafos para explicar o ocorrido, mas vou simplificar de uma maneira clara para todos.

É muito mais rápido você fazer uma imagem pequena e repetir em todos os lugares. Do que fazer uma imagem grande para cenário. Agora prestem atenção na próxima imagem.

É imaginação minha ou os blocos se repetem em diversas partes do mapa. Presta atenção nas cores correspondentes a cada bloco. Se você picotar a imagem você encontrar muito mais blocos repetidos.

Esse sistema também foi e ainda é muito usado em jogos de aventura. Repare como os blocos circulados repetem em um monte de lugares do cenário.

Preciso dizer mais alguma coisa para vocês entenderem o que é o tile system?

Resumindo:

Tile System: é um sistema de criação e estruturação de cenários baseando-se em junções de diversos mini blocos. Fazendo com que o game fique mais rápido para ser processado.

  • Vantagem: Rápido processamento na hora de carregar as imagens. Um simples bloco pode ser usado em diversos cenários diferentes e você não precisa redesenhar todo o cenário para mudar um pequeno detalhe.
  • Desvantagem: Complexidade de programação.

Para quem conhece RPG Maker (programa para criar jogos de rpgs simples). O sistema de cenários do programa é baseado em tile sistem. Dêem uma olhada no chipset de cenário utilizado pelo programa.

ChipSet RPG maker

Esse Chipset é baseado no game The Legend of Zelda a Link to the Past (SNES). Um bom exemplo que Tile System sempre esteve em sua vida e você nunca percebeu. Vejam essas imagens tirada do game Goof Troop (SNES) ambas as imagensforam tiradas de um emulador a diferença que eu fiquei pressionando os botões de configurações de tela.

Bem pessoal espero que tenham gostado do primeiro tutorial de desenvolvimento de jogos da HamisterTower. Na proxima parte vamus abordar a construção inicial da progamação nesse sistema. Fiquem atento virão muitos outros tutoriais de flash por ai. vlw pessoal até a próxima, CYA, また見てね.