quinta-feira, 22 de novembro de 2012

Tutorial mugen sobre intro.StoryBoards mugen para WINMUGEN por BlackCyraxCO

Tutorial sobre StoryBoards para WINMUGEN 

.===:Uma breve introdução:====

Existem alguns arquivos no MUGEN que são totalmente focados em "animaçoes" esses são as Storyboards:Alguns exemplos de StoryBoards-Logo (rodado assim que o game inicia)-A Main intro(introdução principal do jogo).                                                              
 

-A Intro do personagem(a introdução particular do char que é rodada antes da primeira luta contra o computador).                                                                                                                                         -O End do personagem(o final do personagem que é rodado quando se terminado o modo contra o computador).                                                                                                               
 

Esses arquivos são iguais quando criados e levam os mesmos parametros e a mesma estrutura. O que vai modificar no quesito "quando" eles devem rodar é onde você os coloca. A intro e o end do personagem, são colocadosdentro a pasta do personagem em questão. Enquanto os arquivos da Main intro e logo são colocados normalmente na pasta data. Não se esqueça de apos fazer o seu storyboard "chama-lo" para que assim rode no game.                                                                                                                 
Alguns exemplos de onde "chamar"(acessar) StoryBoards:                                                                                                                                                               
Os arquivos de LOGO e de MAIN INTRO são chamados no arquivo encontrado dentro da pasta data chamado      
"system.def" Bem abaixo da chave [File] no inicio do arquivo.                                            
                                                                                                         
logo.storyboard  = nome_do_arquivo_logo.def                                                                   intro.storyboard = nome_do_arquivo_intro.def                                                                                                                                                                         
Os arquivos de intro e end do personagem são chamados direto do arquivo.def do seu char logo abaixo da chave[Arcade] normalmente encontrada no fim do arquivo:                                                                                                                                                                   
                                                                                                           
intro.storyboard = nome_do_arquivo_intro.def                                                                ending.storyboard = nome_do_arquivo_end.def                                                              
                                                                                                           
Observação importante:                                                                                      Você também pode fazer Creditos, End padrão para todos o chars e game over usando essa mesma estrutura.                                                                                                    
                                                                                                           
:Indice:                                                                                                         
  I: Os arquivos necessarios e ferramentas para manipula-los.                                            
 II: caracteristicas de cada arquivo.                                                                    
III: Primeiras linhas do arquivo def.                                                                    
 IV: Adicionando as imagens e entendendo o uso dos grupos no arquivo.sff.                                
  V: Programando uma animação.                                                                               VI: Programando as Cenas.                                                                              
                                                                                                           
I: Os arquivos necessarios e ferramentas para manipula-los:                                                                                                         
StoryBoards, sejam eles qual forem, são compostas por dois arquivos, o arquivo de definições com a extenção  arquivo.def e o que guarda as imagens de extenção arquivo.sff.Os dois arquivos podem ter nomes diferentes mas pra facilitar é bom deixa-los com o mesmo nome.                                                          
                                                                                                         
Exemplo:                                                                                                    intro.def                                                                                                
intro.sff                                                                                                                                                                                                            
Para modificar, editar e criar coisas nos arquivos é preciso manipula-los.Para o aquivo de extenção .def você|precisara somente de um editor de texto comum como o bloco de notas.O arquivo de extenção .sff você precisara de um editor de sff como o fighter factory. O fighter factory pode ser baixado no site da virtualtek.                                                                                                               
II: caracteristicas de cada arquivo:                                                                                                         
Arquivo.def: Esse arquivo serve como "guia" para tudo que ira acontecer na storyboard. Tais como, quais imagens usar e como elas devem se comportar, os codigos das animações, efeitos, qual arquivo.sff chamar etc.
                                                                                                         
Arquivo.sff: Esse arquivo guarda as imagens em lots de grupos que o arquivo.def ira usar para melhor acesso
as imagens de cada animação. Falaremos mais disso no capitulo IV desse tutorial.                                                                                                                                     
III: Primeiras linhas do arquivo def:                                                                                                       
Observação: Eu assumo que você tenha um arquivo storyboard para usar como guia, mesmo assim, tentarei ser o mais claro possivel.                                                                                                                                                                                     
=================<>                                                                                
                                                                                                             
A chave [SceneDef]: Essa é a primeira coisa que é escrita no arquivo def serve para iniciar o codigo e dizer ao programa algo como "Dessa linha para baixo meu arquivo de animação começa".                                                                                                                                                  
=================<>                                                                                  
                                                                                                         
O "caller" Spr = : Você deve ter se perguntado "mas como os arquivos se "comunicam" entre si? É justamente  para isso que o caller Spr serve. Ele mostra ao arquivo def qual arquivo sff ele deve chamar. Se for no caso de uma intro por exemplo, seria algo mais ou menos assim:                                                
                                                                                                           
Spr = intro.sff                                                                                        
                                                                                                           
Nota: lembre-se que o nome deve estar exatamente como o arquivo sff esta no windows e seguido por sua extenção. no caso do exemplo é intro.sff.                                                                                                                                                                                      
=================<>                                                                                      
 
                                                                                                           
O parametro "startscene =": Esse paramentro serve para dizer oa programa por qual cena a animação começara.
Como padrão é recomendado sempre deixar assim:                                                                                                                                                                                                                                                                                  
startscene = 0(começara da cena 0, falaremos mais sobre cenas no capitulo VI desse tutorial!)            
                                                                                                         
Observação:                                                                                                 O startscene é muito utíl na hora de testar cenas, chamando por exemplo uma cena 3 que vai rodar somente depois das duas primeiras, deixando assim o processo de visualização mais rapido.                                                                                                                                       
IV: Adicionando as imagens e entendendo o uso dos grupos no arquivo.sff:                                                                                                               
 

Imagens que podem ser usadas:                                                                                      
 
                                                                                                                 
Praticamente qualquer imagem pode ser usada pra fazer uma animação no mugen e isso se aplica a tudo não só as storyboards em si. Mas o MUGEN não aceita qualquer FORMATO de imagem, e tambémm não aceita qualquer formato de cores dos formatos em questão. Em primeiro lugar lembre-se sempre que o mugen só aceita, não importa oformato entre os aceitaveis, imagens de 8bits de cores. O que sigfica que os arquivos tem somente 256 coresindexadas.                                                                                                                                                                                                          
Vc pode fazer a conversão de um arquivo com mais cores para 8bits usando um programa de controle de imagens
de sua escolha. Eu particularmente aconselharia usar o photoshop por seu controle avançado de cores quando as mesmas são "indexadas" (passadas de uma imagem de mais de 256 de cores para uma de 8bits).Mas em sua maioria,imagens que foram "ripadas" de games originais já vem em 8bits. Os formatos aceitaveis pelo mugen são.                                                                                                                         
 
                                                                                                                 
PCX.                                                                                                              
 

BMP.                                                                                                                  PNG.                                                                                                                                                                                                                      
 

Sabendo disso tenha outra coisa em mente, tenha em mãos a animação completa e certifique-se de que a mesma  esta na sequencia certa pois ao adicionar no mugen o programa automaticamente colocara(se for colocado a animação inteira de uma vez só) as imagens na sequencia que os arquivos estão.                                                                                                                                                 
=================<>                                                                                              
 
                                                                                                                   
Adicionando as imagens usando um programa:                                                                                                                                                                                           
 

Bem, assumindo que você usara o Fighter factory para adicionar as imagens, abra-o e clique na opção "Sprites"e logo apos em "abrir" para abrir um arquivo sff já existente ou vá até a parte de sff clicando no icone de  nome "Sprites" também e clique no botão "salvar sff". Assim vc cria um arquivo vazio para começar a adicionar suas imagens. Escolha um nome pro arquivo e clique em salvar. Apos feito isso aparecera uma janela perguntando se o sff trabalhara com "paleta" individual ou global. No nosso caso, não precisa ser global então marque a opção individual.                                                                                       Feito isso, ainda na area de "Srpites" do fighter factory, clique no icone "adicionar"(pare o mouse em cima  dos incones para mostrar a função de cada um). Ao clicar em "adicionar" uma janela aparecera, vamos começar da direita para a esquerda para mostrar as funções que a mesma fornece.                                    
 
                                                                                                               
Nome da imagem ou comentario(a direita, e logo abaixo a area onde se deve escrever tal coisa):              Aqui vc coloca o nome da imagem ou comentario isso é 100% opicional.                                            
                                                                                                                 
 

*****                                                                                                    
                                                                                                                   
Paleta Compartilhada(Logo abaixo, ainda a direita):                                                              
 

Deixe esse desmarcado mesmo, não precisaremos de paletas nas imagens para fazer storyboards.                                                                                                                                             
 

Cortar automaticamente(Ainda abaixo a direita):                                                          
Essa opção tira o excesso do "fundo" da imagem que no jogo ficara tranparente no caso das storyboards normal-|mente se usa imagens que tomam a tela inteira.                                                                                                                                                                                  
Nota: Caso precisse de imagens que o fundo seja transparente visite forums sobre mugen, um tuto sobre isso éo que mais se encontra na internet. Pois aqui quero focar somente no meio de adicionar as imagens.                                                                                                                           
 

*****                                                                                                    
 
                                                                                                           
Axis(No meio):                                                                                            
 

O axis serve para configurar a posição padrão da imagem no arquivo sff, depois de adicionado ai, seja qual  for a posição, os codigos do mugen vão "pegar" essa posição padrão sempre como x = 0,y = 0. Marque a opção  centro base, se precisar alinha-las depois o Fighter factory tem a ferramenta pra isso(mas claro você vai alinhar na base do "olho" mesmo). XD                                                                      
                                                                                                             
*****                                                                                                      
 
                                                                                                           
Arquivos do tipo(Ainda no meio, logo abaixo):                                                            
Bem aqui você escolhe qual o formato do arquivo que vc ira abrir. Selecione o correto segundo o formato que
você salvou.                                                                                                      
                                                                                                           
*****                                                                                                    
 
                                                                                                             
Grupo(A esquerda):                                                                                        
Aqui você escolhe o grupo da animação o qual a imagem ira fazer parte.Falaremos mais sobre grupos nesse mesmocapitulo.                                                                                                
                                                                                                             
*****                                                                                                    
Imagem e suceção do numero das imagens(logo abaixo a esquerda):                                          
Aqui você configura o numero no grupo que a imagem tera, no caso de adicionar mais de uma imagem de uma vez, os parametros abaixo te ajudarão a configurar em que sequecia isso vira.                                
                                                                                                           
O parametro unidade a unidade:                                                                                   O parametro de cima move unidade a unidade ou seja 1 a 1. Suponhamos que você está adicionando uma animação
com 4 imagens e nesse paramentro vc deixa 0(zero), quando você clicar em salvar os arquivos serão adicionadosno 0,1,2,3 sendo que o zero é a primeira imagem. Mas se você adicionar começando pelo numero 3 por exemplo, usando esse paramentro 1 a 1, os arquivos vão ficar em uma sequecia de 1 a 1 começando do 3 assim: 3,4,5,6.  Isso é otimo para adicionar images de uma mesma animação depois que algumas já foram adicionadas, assim seguindo a sequencia da animação em questão.                                                                                                                                                                         
O parametro dezena a dezena:                                                                                  Esse paramentro segue o mesmo padrão do paramentro unidade a unidade mas como o proprio nome diz, ele adiciona o numero que a imagem vai ter no grupo de dez em dez. O mesmo exemplo com uma animação com 4 imagens adicionadas apartir de 0 ficaria assim: 0,10,20,30.                                                                                                                                                                    
==============<>                                                                                          
 

Entendendo o uso dos grupos no arquivo sff:                                                                       Os grupos são muito importantes na parte da animação, é muito importante tentar sempre deixar os elementos(as|imagens) de uma mesma animação em um mesmo grupo e sempre tentar deixar "uma animação por grupo" para não
confundir depois. Nos grupos as imagens geralmente sempre começam do numero 0(zero) mas você também pode começar do 1 para facilitar se você quiser. Mas como o padrão é sempre começar do zero(como no exemplo usado  acima em "o parametro unidade a unidade") vamos aqui também usar esse padrão.                              
                                                                                                         
No codigo, o mugen precisa chamar uma certa imagem ele usa um "numero" seguido de uma "virgula" que por sua  vez e seguido por um segundo numero.                                                                    
                                                                                                         
exemplo: 1,2                                                                                                                                                                                                               
 

Esse numero da esquerda representa o GRUPO no qual a imagem foi adicionada enquanto o numero da direita representa o "elemento do grupo"(imagem) contido no grupo em questão. Suponhamos que você tenha duas animações ambas com hipoteticamente 4 imagens. As duas rodam animações diferentes e vc quer coloca-las em lugares separados para saber qual é qual na hora do codigo. Vamos nomea-las de Anim1 e Anim2.                                                                                                                                     
 

Anim1(usa o grupo 1)                                                                                    
1,0 <-- Grupo 1,imagem 0                                                                                         1,1 <-- Grupo 1,imagem 1                                                                                                
1,2 <-- Grupo 1,imagem 2                                                                                    1,3 <-- Grupo 1,imagem 3                                                                                                                                                                                                                                                              
 

Anim2(Usa o grupo 2)                                                                                        2,0 <-- Grupo 2,imagem 0                                                                                  
 

2,1 <-- Grupo 2,imagem 1                                                                                    2,2 <-- Grupo 2,imagem 2                                                                                
2,3 <-- Grupo 2,imagem 3                                                                                  
 
                                                                                                           
Assim, ao animar você terá em mãos o "Lugar" correto de onde chamar a animação e de qual grupo ela pertence.Podendo até mesmo intercalar as imagens trocando sua ordem na animação se assim for necessario ou até mesmo
chamar imagens de grupos diferentes se assim você precisar.                                              
                                                                                                         
Nota: Todo codigo nesse caso é escrito, logicamente, no arquivo.def.                                                                                                                                                 
                                                                                                           
: Programando uma animação:                                                                                                         
Bem, agora que já sabemos como "chamar" nosso arquivo.sff e como guardar nossas imagens no sff vamos voltar
ao aquivo.def para programar as animações. Você pode usar o fighter factory que tem uma area totalmente voltada para animaçao deixando essa tarefa ainda mais facil. Mas eu achei por bem ensinar como uma animação somente com os codigos funciona assim você tem como animar sem precisar abrir o Fighter factory e claro conhecimento sempre é bom.                                                                                    
                                                                                                         
Pois bem, vamos a lista de caracteristicas dos codigos de uma animação.                                    
                                                                                                         
Nota: a nivel de curiosidade colocarei parametros adicionais de um codigo de animação. Irei comenta-los mas
não explica-los. Vou explicar somente aqueles que iremos precisar segundo o intuito desse tutorial.      
                                                                                                                 
As caracteristicas são:                                                                                                                                                                                               
 

-A chave:                                                                                                       A chave é composta das "keywords" Begin Action entre colchetes "[]" mais o ID da mesma que serve para que outros codigos chamem-na por esse ID.                                                                      
                                                                                                           
Exemplo:                                                                                                                                                                                                          [Begin Action 0]                                                                                    
 
                                                                                                           
As chaves servem para mostrar ao programa que uma animação foi declarada ali, uma animão começa pela chave
mais não existe uma chave que a "feche". Podemos entender que O CODIGO de uma animação termina onde outro codigo de animação começa ou simplesmente quando não tem mais nada abaixo dela.                              
                                                                                                           
******                                                                                                    
-A frame line:                                                                                              A frame line é onde todos as informação e parametros de UM FRAME(quadro) são colocados. Iremos falar mais sobre como cada elemento da frame line mais adiante. Por hora, devemos ter em mente que a sequencia de como as
imagens devem aparecer em uma animação é aplicado pela posição que você colocou a tal imagem usando a frame
line. E é sempre de cima para baixo ou seja, vai rodar a animação de cima para baixo veja o exemplo abaixo.
                                                                                                           
 

Exemplo simplificado 1(segundo o que já aprendemos sobre grupos):                                        
     [Begin Action 0]                                                                                             1,0 <--:essa imagem rodara primeiro(primeiro frame line).                                                   1,1 <--:essa imagem rodara sucedendo a primeira(segundo frame line)                                         1,2 <--:essa imagem rodara sucedendo a segunda(terceiro frame line)                                                                                                                                             
 

O numero da imagem ou grupo não importa e sim a sequencia, de cima para baixo, que você as colocou.      
                                                                                                           
Exemplo simplificado 2(Agora com elementos intercalados):                                              
     [Begin Action 0]                                                                                           1,2 <--:essa imagem rodara primeiro(primeiro frame line).                                          
     1,0 <--:essa imagem rodara sucedendo a primeira(segundo frame line)                                         1,1 <--:essa imagem rodara sucedendo a segunda(terceiro frame line)                                    
                                                                                                         
Conclusão:                                                                                                
Sempre mantenha em mente que a suceção das imagens na animação depende da frame line que vc as colocou sempre de cima para baixo.                                                                                    
                                                                                                         
*****                                                                                                      
 

Parametros adicionais:                                                                                                -Clsn1:                                                                                                  
 

Esse é usado no char em si para colocar um bloco de "ataque" em uma certa area de uma imagem. Só assim um ataque pode ser programado.                                                                                
 

-Clsn2:                                                                                                  
Esse também é usado no char em si para colocar um blobo de "acerto" em uma certa area de uma imagem. Só assima animação podera, literalmente, "ser atacada".                                                          
                                                                                                               
Observação: Esses parametros não irei explicar uma vez que são a nivel de curiosidade e creio que o intuito  do leitor mais a frente seja programar um char também.                                                                                                                                                               
====================<>                                                                                      Conhecendo os parametros que contem uma frame line:                                                      
                                                                                                         
Uma frame line contem parametros que configuram coisas como posição da imagem, o tempo que a imagem deve ficar rodando e alguns outros parametros que irei explicar.                                                                                                                                                            
Uma frame line "real"(ou seja como é mostrada no codigo) é assim:                                                                                                                                                   
1,3,0,0,4,H,S (logico que todos os parametros aqui colocados são hipoteticos).                                                                                                                                             
Veja agora a caracterisca de cada parametro(na ordem real do codigo acima):                              
                                                                                                         
grupo, elemento_do_grupo, Posição_x, Posição_y, Tempo_da_imagem, giro(opcional), efeito(opcional)      
                                                                                                         
###                                                                                                          -Grupo: Como já foi dito o mugen chama uma imagem de um grupo.O primeiro numero aqui na lista de parametros
representa o grupo da animação encontrada no arquivo.sff que esta sendo chamada.                                                                                                                                       
 

###                                                                                                         -Elemento do grupo: Esse, como também já foi dito, chama o elemento do grupo que foi chamado, sendo assim o  segundo parametro na lista chama o elemento do grupo.                                                                                                                                                               
 

###                                                                                                           -Posição X(horizontal): Esse parametro configura uma posição horizontal pra imagem chamada nesse frame line. |Independente da posição que foi inicialmente colocada quando a imagem foi adicionada ao SFF. O padrão é 0(se mantem na posição colocada no SFF). Valores positivos(1, 2, 3...etc) levam a imagem para a direita enquanto
valores negativos(-1, -2, -3...etc) levam a imagem para esquerda. sendo assim o terceiro parametro na lista
move a imagem horizontalmente.                                                                                                                                                                                      
###                                                                                                         -Posição Y(vertical): Esse parametro configura uma posição vertical pra imagem chamada nesse frame line. Independente da posição que foi inicialmente colocada quando a imagem foi adicionada ao SFF. O padrão é 0(se  mantem na posição colocada no SFF). Valores positivos(1, 2, 3...etc) levam a imagem para a baixo enquanto valores negativos(-1, -2, -3...etc) levam a imagem para cima. Sendo assim o quarto parametro na lista move a i-|magem verticalmente.                                                                                                                                                                                                     
 

###                                                                                                            -Tempo: Como o propio nome diz esse parametro é responsavel por "dar" a imagem um tempo de execução. 1 no
tempo da imagem é 1 centesimo de segundo. Sendo assim o quinto parametro na lista da a imagem um tempo de
execução.                                                                                            
                                                                                                             
Observações:                                                                                              
1°: Ao declarar 0(zero) como tempo a imagem simplesmente será pulada e não sera mostrada na animação em questão.                                                                                                       2°: Ao declarar -1 como tempo a imagem tera tempo infinito, isso é muito usado em imagens que a animação para|no ultimo frame(quadro).                                                                                                                                                                                              
###                                                                                                        -Giro(opcional): Esse parametro gira a imagem em questão horizontalmete, verticalmente ou ambos. Sendo assim |o sexto parametro na lista gira a imagem.                                                                
                                                                                                             
Parametros usados:                                                                                                                                                                                                     
H = Gira horizintalmente a imagem chamada.(Se era assim "▼►" fica assim "◄▼" e vice-e-versa).            
V = Gira verticalmente a imagem chamada.(Se era Assim "▼►" fica assim "▲►" e vice-e-versa).              
HV = Gira em ambas direções a imagem chamada.(Se era assim "▼►" fica assim "◄▲" e vice-e-versa).                                                                                                                       
###                                                                                                         -Efeito(opcional): Esse parametro aplica alguns efeitos de cores e transparencia na imagem atual. Sendo assimo setimo parametro na lista aplica efeitos de imagem no frame atual.                                    
                                                                                                           
 

Parametros usados:                                                                                                                                                                                                   
A = Adiciona 100% de "Alpha" a imagem chamada(ela fica clara e transparente perfeito para efeito de luz por  exemplo).                                                                                                
 
                                                                                                             
A1 = Adiciona 50% de "Alpha" a imagem chamada(ela fica 50% menos clara comparada a o parametro A1 e transparente)                                                                                                      S = Subtrai as cores deixando a imagem escura e transparente.                                            
                                                                                                           
 

AS???D??? = Esse é o mais completo, onde os dois primeiros parametros(A e A1) acima podem ser vistos somentecomo "atalhos" rapidos para os valores encontrados aqui. As "?" são numeros que vão de 0 até 256(AS0D0 a    AS256D256). Com esse parametro você adiciona exatamente a transparencia ou a "escuridão" que vc quiser. AS256confgirura a transparencia e o D256 a claridade.Os dois sempre tem que estar justos como mostrado no exemplo.                                                                                                         
===============<>                                                                                           Nota:Apartir de agora os aparametros opicionais ficaram de fora por motivos obvios. vc pode omiti-los em seuscodigos sem problema algum.                                                                                
 
                                                                                                                                                                                                                 
Codigo real de uma animação:                                                                                   Bem, com todo esse conhecimento vamos agora fazer uma animação real? Como já vimos a estrutura de uma animação se comporta assim em ordem real:                                                                      
 
                                                                                                           
Chave begin action e ID                                                                                  
frame line representando o primeiro quadro                                                                 frame line representando o segundo quadro                                                                   ... e assim sucessivamente.                                                                                
                                                                                                           
Exemplo real:                                                                                            
                                                                                                           
[Begin Action 1]                                                                                          
 

1,0,0,0,5,,                                                                                                
 

1,1,0,0,5,,                                                                                                
 

1,2,0,0,5,,                                                                                                
1,3,0,0,5,,                                                                                              
                                                                                                             
No exemplo acima foi usado uma animação que foi adicionada ao grupo 1. A animação tem 4 imagens e a mesma roda em sequencia normal (1,2,3,4) sem intercalar sprites. As imagems em todos os frame lines continuam nos
seus eixos x e y padrão que é 0 e a cada um foi dado o tempo de 5(5 centesimos de segundo). E o mais importante o ID dessa animação leva o numero 1 e é por esse ID que a "cena" programada chamará essa animação. Ascenas serão melhores discultidas no capitulo VI desse tutorial.                                          
                                                                                                         
O tempo total de uma animação:                                                                                                                                                                                       
O tempo total de uma animação é muito importante para o nosso alvo aqui pois sabendo o tempo total de uma animação podemos chama-las com eficiência nas "cenas". Para saber o tempo total de uma animação é bem simplesbasta somar o tempo aplicado a cada quadro da animação. Usando ainda o exemplo acima teremos:                                                                                                                        
[Begin Action 1]                                                                                          
 

1,0,0,0,5,,                                                                                                
 

1,1,0,0,5,,                                                                                                
1,2,0,0,5,,                                                                                              
1,3,0,0,5,,                                                                                              
                                                                                                           
Nesse caso temos uma animação com 4 quadros, onde cada quadro leva o tempo de 5 sendo assim:                                                                                                                         
5+5+5+5 = 20                                                                                                                                                                                                         
Agora sabemos que a animação de ID 1 do nosso exemplo tem 20 de tempo que no mugen chamamos de "tick".portanto, a animação de ID 1 do nosso exemplo tem 20 ticks(ou 20 centesimos de segundo).                            
                                                                                                           
Logicamente, após esses 20 ticks a animação "desaparecera" por isso se deve colocar o tempo certo para cadacena. Mas e se por exemplo você tiver um fundo com somente algumas imagens(quadros) e quer que a mesma se repita ao londo de uma cena bem mais longa que essa animação desse fundo, será que você deveria fazer uma animação enorme repetindo varias vezes? Claro que não para isso usaremos uma função chamada"loop"(laço) onde uma|certa parte ou toda a animação se repete até que a cena mude(o codigo da cena ira configurar o tempo real queas animações que a cena chama terão, falaremos mais sobre cenas e seus parametros em breve).                                                                                                                         
Usando a função "loop":                                                                                                                                                                                             
Como já foi dito, essa função cria uma repetição de toda ou parte de uma animação assim evita animações enormes simplesmente para repetir uma animação menor que a cena em questão.                                  
 
                                                                                                           
==================<>                                                                                      
 

Função loop repetindo uma animação inteira:                                                                                                                                                                          
Para que uma animação interia se repita usando o loop basta colocar a keyword loopstart antes da primeira
frame line como no exemplo abaixo:                                                                        
 
                                                                                                           
[Begin Action 1]                                                                                          
 

loopstart                                                                                                
1,0,0,0,5,,                                                                                              
1,1,0,0,5,,                                                                                              
1,2,0,0,5,,                                                                                              
1,3,0,0,5,,                                                                                              
                                                                                                           
Assim o loop começa do primeiro quadro da animação e fica repetindo até que o tempo da cena que chamou a ani-|mação termine.                                                                                              ==================<>                                                                                      
 

Função loop repetindo somente uma parte isolada da animação:                                                                                                                                                         
 

Para que uma parte isolada da animação rode em loop coloque o keyword loopstart em cima do frameline desejado|como no exemplo abaixo.                                                                                  
                                                                                                           
[Begin Action 1]                                                                                        
 

1,0,0,0,5,,                                                                                              
 

loopstart                                                                                                
1,1,0,0,5,,                                                                                            
1,2,0,0,5,,                                                                                              
1,3,0,0,5,,                                                                                              
                                                                                                           
Nesse caso o primeiro quadro da animação rodara somente uma vez e os quadros 2, 3 e 4 ficaram em "loop" repetindo até que o tempo da cena que chamou a animação termine.                                              
 
                                                                                                           
Algo que já abordamos mas é bom abordar aqui também é o valor -1 dado a uma imagem que deixa a mesma com tempo infinito.                                                                                                                                                                                                         
Nota importante:                                                                                          
 

Para melhor entendimento deixe as animação sempre no "fim" do arquivo.def do seu storyboard(E os codigos dascenas em cima).Assim fica organizado e é esse o padrão usado.                                                                                                                                              
 

===========================================VI: Programando as Cenas:=========================================Depois de tanto conhecimento, chegou a hora de aprender a programar as cenas que são a parte que"ditam"as rEgras em uma StoryBoard. As cenas são responsaveis por coisas como chamar a animação, tocar a musica, configu-rar quais layers(camadas) aparecerão e em que ordem de profundidade etc. Vamos agora mostra todos os pametros que uma cena contem e para que serve cada um deles.                                                                                                                                                                 
 

Um exemplo de uma cena(scene) e seus parametros comuns:                                                  
                                                                                                         
[Scene 0]                                                                                                 fadein.time = 0                                                                                          
fadein.col = 0,0,0                                                                                         fadeout.time = 0                                                                                          
 

fadeout.col = 0,0,0                                                                                         clearcolor = 0,0,0                                                                                          layerall.pos = 0,0                                                                                        
 

layer0.anim = 0                                                                                             layer0.offset = 0,0                                                                                      
layer0.starttime = 0                                                                                        bgm = musica.mp3                                                                                            bgm.loop = 0                                                                                              
 

end.time = 0                                                                                                                                                                                                         
###([Scene 0])                                                                                            
 

-Chave:                                                                                                     Como você pode ver, assim como uma animação uma cena também começa com uma chave que contem uma keyword Scenetambém leva um ID para indentificação e tanto a keyword scene quanto a ID estão entre colchetes [].      
                                                                                                           
Exemplo:                                                                                                        [Scene 0]                                                                                                                                                                                                        
Cena de ID 0(zero).                                                                                                                                                                                                  
###(fadein.time =)                                                                                          Parametro tempo de "fade in":                                                                               "Fade in" é uma expressão bem conhecida pelos usuarios de PC trata-se daquele efeito onde a tela esta com uma|só cor(geralmente preta) e gradualmente aparece a proxima cena ou imagem estatica. Muito usado em edições de videos por exemplo. Aqui você configura quanto tempo o fade in ira durar(o fade in acontece, obviamente no   inicio da cena).                                                                                          
 
                                                                                                           
Exemplo:                                                                                                       fadein.time = 10                                                                                                                                                                                                  
O fade in dura 10 ticks(ou 10 centisimos de segundo).                                                                                                                                                                
###(fadein.Col =)                                                                                           Parametro Cor do fade in:                                                                                   Nesse parametro vc atribui que cor que o seu fade in terá. Existem 3 valores R,G,B(Vermelho,Verde,Azul) e vão|de 0 até 255.                                                                                                                                                                                                        
Exemplo:                                                                                                       fadein.Col = 33,145,205                                                                                                                                                                                           
Cor atribuida com 33 de vermelho, 145 de verde e 205 de azul.                                            
                                                                                                         
###(fadepout.time =)                                                                                      
 

Parametro "Fade out":                                                                                    
Fade out funciona exatamente o contrario do fade in. O fade out acontece no fim da cena.                                                                                                                             
Exemplo:                                                                                                       fadepout.time = 10                                                                                    
                                                                                                           
O fade in dura 10 ticks(ou 10 centisimos de segundo).                                                                                                                                                               
###(fadeout.Col =)                                                                                      
Parametro Cor do fade out:                                                                                 Nesse parametro vc atribui que cor que o seu fade out terá.Existem 3 valores R,G,B(Vermelho,Verde,Azul) e vão|de 0 até 255.                                                                                                                                                                                                        
Exemplo:                                                                                                       fadeout.Col = 100,21,38                                                                                                                                                                                           
 

Cor atribuida com 100 de vermelho, 21 de verde e 38 de azul.                                                                                                                                                             
###(ClearColor =)                                                                                           O controlador cor padrão para as camadas da cena:                                                           Esse controlador atrubui uma cor padrão para os layers(camadas) que a cena chama. Os parametros são os mesmos|citados acima R,G,B que tbm vão de 0 a 255.                                                                                                                                                                          
Exemplo:                                                                                                      ClearColor = 105,66,199                                                                                
 
                                                                                                           
Cor atribuida com 105 de vermelho, 66 de verde e 199 de azul.                                              
                                                                                                         
 

###(layerall.pos =)                                                                                      
O parametro posição padrão das camadas da cena:                                                             Em uma cena é possivel chamar mais de uma camada esse parametro serve para configurar uma posição padrão paratodos os layers chamados na cena.                                                                        
                                                                                                           
Exemplo:                                                                                                       layerall.pos = 5,12                                                                                                                                                                                                                                                                                             
 

O padrão dos layers é 5 no eixo X(horizontal) e 12 no eixo Y(vertical).                                  
                                                                                                         
Observação:                                                                                                 O padrão para layerall.pos é 0,0 e esse padrão é o que você configurou na animação. Se vc deixou 0,0 na animação obviamente a cena ira pegar o padrão de coordenadas do SFF uma vez que animação não mecheu na posição  da imagem.                                                                                                                                                                                                           
###(layer#.anim =)                                                                                          O caller "layerX.anim":                                                                                  
Esse caller(chamador) serve para acessar uma animação que foi criada pelo ID da mesma(vide captulo V para inFormações sobre o ID de uma animação). Logicamente uma animação chamada aqui tem que existir dentro do arquivo.def.Em uma cena é possivel chamar até 10 layers e para diferenciar um do outro coloca-se o numero do layer|depois da palavra"LAYER"(layer1.anim).Outro fator importante é a posição de um layer em relação ao outro issoé configurado apartir do numero da camadas.Por exemplo uma animação chamada pelo "layer0.anim" ficara em baixo de uma animação chamada "layer1.anim" e assim sucessivamente.                                        
                                                                                                           
Exemplo:                                                                                                       layer1.anim = 20                                                                                      
 
                                                                                                           
Layer 1 chama animação 20.                                                                                                                                                                                           
Nota:                                                                                                       Como foi dito, é possivel colocar até 10 layers em uma mesma cena. Os numeros vão de 0 a 9(layer0.anim a layer9.anim).                                                                                                                                                                                                          
###(layer#.offset =)                                                                                      
 

O parametro que manipula a posição do layer:                                                                Esse parametro configura uma nova posição independente do parametro layerall.pos para o layer chamado. Se faz| necessario também colocar o numero do layer que, segundo o que já falamos, vai de 0 a 9.O padrão é 0,0 se deixando assim o layer obviamente ficara com o padrão configurado no parametro layerall.pos.                                                                                                                           
 

Exemplo:                                                                                                       layer5.anim = 30                                                                                      
   layer5.offset = -30,25                                                                                                                                                                                            
 

Layer 5 chama a animação de ID 30 enquanto o parametro de manipulação de posição logo abaixo que contem o numero do layer indentico ao caller, configura uma nova posição que é -30 no eixo X e 25 no eixo Y.                                                                                                                   
Nota:                                                                                                       No storyboard, usando layers essa é a ultima vez que é possivel configurar a posição.Como é possivel perceber|ao longo desse tutorial varias vezes é possivel mudar a posição e a cada vez um se torna padrão do outro. Só |
para deixar registrado vou colocar aqui a "herança dos padrões".                                                                                                                                                     
  LayerX.pos = 0,0(padrão)┐ = (parametro de uma cena aplicado a um layer)                                
                          │                                                                                                      [Herda de]                                                                                                       │                                                                                 Layerall.pos = 0,0(padrão)┤ = (parametro de uma cena)                                                    
                          │                                                                                                      [Herda de]                                                                                                      │                                                                                        #,#,0,0,#,,(padrão)┤ = (Lineframe)                                                                
                          │                                                                                                      [Herda de]                                                                                                       │                                                                                       Pos X = #, Pos Y = #┘ = (Posição aplicada quando a imagem foi adicionada)                          
                                                                                                         
###(layer#.starttime =)                                                                                     Parametro que manipula a inicialização de um layer:                                                      
Esse parametro configura quando um layer(animação ou imagem estatica) deve começar em uma cena. Assim como o
layerX.offset esse parametro necessita levar o numero do layer que será manipulado.                                                                                                                                 
Exemplo:                                                                                                       layer3.anim = 10                                                                                      
   layer3.starttime = 50                                                                                  
 
                                                                                                           
Layer 3 chama animação de ID 10 enquanto o Parametro que manipula a inicialização esta configurado para 50.
Sendo assim, esse layer ira começar depois de 50 ticks que a cena começou.                                                    
 
                                                                                                           
###(bmg =)                                                                                                
 

O caller "bmg":                                                                                          
Esse caller acessa a musica que você quer que rode na cena em questão. O MUGEN aceita alguns formatos de arquivos de som, entre eles estão WAV e MP3. Quando adicionar a musica sempre coloque o nome do arquivo seguido por sua extenção(musica.MP3 se for mp3). Tente também nomear o arquivo de musica com o nome da categoria do storyboard que você esta fazendo. Por exemplo se a musica for usada em um logo nomeie-o como logo.MP3(se a  extenção for MP3 obviamente). Assim fica mais facil de organizar!                                        
                                                                                                           
Exemplo:                                                                                                       bmg = intro.WAV                                                                                        
 
                                                                                                           
O caller bmg acessa um arquivo chamado intro de extenção WAV.                                            
                                                                                                         
Nota:                                                                                                       Coloque o arquivo de musica desejado na mesma pasta que os arquivos def e sff de sua storyboard estão.                                                                                                               
###(bmg.loop =)                                                                                          
O parametro para "bmg" chamado "loop":                                                                      Bem, como você deve lembrar loop é um comando que faz com que certa coisa repita infinitamente até que um fim|seja posto. Nesse caso, ele faz com que a musica chamada pelo caller "bgm" se repita até o fim da cena. Esseparametro e seguido por um argumento "booleano" que retorna somente falso ou verdadeiro. Nesse caso se o retorno for verdadeiro, a musica ira ficar em loop, se falso o parametro é simplesmente ignorado. Numeros acimade 0 são considerados verdadeiros, enquanto 0 é considerado falso pelo MUGEN.                            
                                                                                                         
Exemplo:                                                                                                      bmg = intro.WAV                                                                                        
 

   bmg.loop = 1                                                                                            
                                                                                                           
O caller bmg acessa um arquivo chamado intro de extenção WAV e o parametro bmg.loop leva valor 1, portanto é |considerado verdadeiro e a musica chamada ficara em loop até que a cena termine.                                                                                                                                     
###(end.time =)                                                                                             O parametro de duração de uma cena:                                                                      
Esse parametro configura quantos ticks a imagem ira durar. Leva um argumento que é um inteiro(numero real e  não flutuante).                                                                                          
                                                                                                           
Exemplo:                                                                                                     end.time = 3000                                                                                                                                                                                                   
A cena vai durar 3000 ticks.                                                                              
 
                                                                                                           
==================<>                                                                                      
 

Parametros opcionais avançados:                                                                                                                                                                                      
###                                                                                                         Window:                                                                                                  
                                                                                                           
Exemplo:                                                                                                       window = x1,y1,x2,y2                                                                                  
                                                                                                           
Esse parametro define o "desenho" da janela do storyboard. x1,y1 são as coordenadas X e Y da parte de cima aesquerda da janela, enquanto x2,y2 representão a parte de baixo a direita. Qualque coisa fora dessa "janela"não será mostrada. Note que esse parametro não funciona se o parametro bg.name estiver sendo usado. Se omitido na primeira cena, os valores serão padronizados segundo o tamnha da tela. Se forem omitido nas cenas sucessivas, os valores serão padronizados segundo os valores aplicados nas cenas anteriores.              
                                                                                                         
###                                                                                                         bg.name = (nome atribuido ao arquivo)                                                                       Se esse parametro é especificado, você pode fazer uso de "objetos de uma background". O que significa que é   possivel atribuir o modo de como se programa um stage ao seu storyboard usando esse parametro. O que significa bem mais parametros para que o seu storyboard seja bem mais incrementado.                                                                                                                                     
 

Nota: No site da elecbyte existe um tutorial sobre como criar sua background e também existe uma versão tra duzida antiga desse arquivo que estarei tambem colocando junto desse tuto. É bom sempre ir até o site da elecbyte pois qualquer upgrade que os codigos sofram é postado lá.                                          
                                                                                                         
Nota:                                                                                                      Mais de uma cena podem ser colocadas no seu storyboard e a sucessão delas também depende da posição que foram|colocadas assim como acontece com as framelines.                                                        
                                                                                                           
[Scene 1]                                                                                                
parametros                                                                                                                                                                                                           
[scene 2]                                                                                                
parametros                                                                                                                                                                                                           
[Scene 3]                                                                                                   parametros                                                                                                                                                                                                           
... e assim sucessivamente!                                                                              
                                                                                                           
Uma cena começa quando o tempo da anterior acaba, e obviamente se não existem mais cenas para serem "lidas"
pelo mugen o storyboard acaba.                                                                            
 

============================================================================================================Tutorial concluido em: 22/11/2012                                                                           ============================================================================================================= por BlackCyraxCO thiagocanal youtube>>Thiagonando2009

x