29/06/2019 Tutorial MUGEN 1

Como é que eu...? Um primer MUGEN

Tutorial Parte 1 - Introdução: sprites
MUGEN, Elecbyte (c) 1999-2009
Atualizado em 17 de setembro de 2009

Tutorial 1 | 2 | 3 | 4

Introdução

Se você quiser criar um personagem para o MUGEN, você precisará de um bom entendimento de
como cada componente de um personagem funciona. Como entrar diretamente na documentação
técnica pode ser confuso, escrevemos um tutorial para ajudá-lo a começar. À medida que você ganha
mais compreensão, não se esqueça de consultar os documentos com frequência. Você pode tropeçar
ou ficar preso várias vezes ao criar seu primeiro personagem, mas como qualquer outra coisa, quando
você sabe o básico, fica mais fácil e mais rápido progredir.

Neste tutorial você aprenderá como fazer uma paleta para seu personagem e como montar os sprites
do seu personagem. Além disso, você verá como fazer uma ação de animação simples. Na Parte 2 do
tutorial, você verá como definir caixas delimitadoras para suas animações e, nas Partes 3 e 4,
definiremos um ataque simples. Para este tutorial, você precisará de um programa de edição de
imagens, como GIMP, PhotoShop ou PaintShop Pro.

Vamos supor que você tenha pelo menos conhecimentos básicos de editores de texto, edição de
gráficos, conceitos de jogos e como navegar em um prompt de comando. Se você não estiver
familiarizado com tudo isso, recomendamos que você leia alguns livros ou sites para iniciantes. Se
você tiver algum conhecimento em linguagens de programação, poderá achar muito mais fácil
entender nossos documentos. Tudo bem, agora vamos começar.

1. Fazendo uma paleta

Todos os sprites pertencentes a um personagem precisam ser arquivos PNG de 256 cores. Cada
sprite deve ter a mesma paleta de 256 cores para que elas sejam exibidas corretamente no jogo. Se
você tiver experiência com o Photoshop, a parte a seguir será simples. Vamos supor que você está
começando com uma imagem de cor verdadeira (chamada RGB no Photoshop).

Ao converter sprites em 256 cores (também conhecido como Indexed Color), a maioria dos programas
de pintura fará a paleta da maneira que eles quiserem, e farão de forma diferente para cada sprite.
Aqui vamos cobrir como fazer uma paleta padrão e como aplicá-la a cada sprite.

Com o Photoshop, vá para Image-> Mode-> Indexed Color.

[Link]/mugendocs-11b1/[Link] 1/8
29/06/2019 Tutorial MUGEN 1

Uma janela se abrirá. Nesta janela, defina a paleta como Exata. Se você estiver usando o Photoshop
5 ou superior, não clique em OK ainda. Para versões anteriores do Photoshop, clique em OK e, em
seguida, converta para RGB (Imagem-> Modo-> Cor RGB), depois clique novamente em Imagem->
Modo-> Cor Indexada.

Agora, selecione Personalizar na lista suspensa da paleta para exibir a janela Tabela de cores. O
próximo passo é garantir que a cor de fundo do seu sprite tenha um índice de cor de 0 (chamaremos
isso de "cor 0"). Em MUGEN, cor 0 é a cor de máscara. Isso significa que todas as partes de um sprite
que são de cor 0 não serão desenhadas.

O índice de cor 0 deve ser sempre a cor de fundo. A cor real

(não o valor do índice) depende de você.

No editor de tabela de cores do Photoshop, defina a cor superior esquerda (que é o índice de cor 0 no
Photoshop) para ser a cor de fundo do sprite. Você desejará certificar-se de que a cor 0 seja uma cor
[Link]/mugendocs-11b1/[Link] 2/8
29/06/2019 Tutorial MUGEN 1

exclusiva em sua paleta, caso contrário, o Photoshop não definirá corretamente os índices de cor.
Para fazer isso, você pode pegar a cor 0 antiga e colocá-la onde a cor bg costumava estar (troque as
duas cores essencialmente).

Nota: Se você usou versões do MUGEN anteriores a 1.0, o formato de arquivo preferido costumava
ser PCX em vez de PNG. No Photoshop, os arquivos PCX têm a cor inferior direita como índice 0.
Com arquivos PNG, é a cor superior esquerda.

Exemplo de uma paleta correta com cor de fundo como cor 0 (verde no corder superior esquerdo).

Resultado da utilização da paleta incorreta. Resultado do uso da paleta correta.

Clique no botão Salvar para salvar esta paleta (vamos chamá-lo [Link] para o propósito deste
tutorial). Agora clique em OK para aplicar a paleta a esta imagem e salve o arquivo como um arquivo
PNG.

O próximo passo é converter todas as outras imagens para esta paleta que você acabou de criar
([Link]). Você pode usar o seguinte método:

Abra a primeira imagem e clique em Image -> Mode -> Indexed Color.
Selecione Personalizar na lista Paleta e clique em Carregar para selecionar o arquivo de paleta
que você acabou de criar ([Link]). Clique em OK até voltar à janela principal.
Agora salve-o como um arquivo PNG e repita para o resto de suas imagens.

O design da paleta é muito importante no início ao criar seus sprites. Embora o MUGEN permita usar
até 255 cores para cada sprite, um personagem com uma paleta bem projetada não precisa
necessariamente usar todos os índices de cores disponíveis. Trabalhar com um número limitado de
cores não apenas diminui o tamanho dos arquivos PNG, mas também facilita a criação de paletas
alternativas (esquemas de cores diferentes) mais tarde. Pixel sprite art feito à mão é mais fácil com
um pequeno conjunto de cores (16 a 32), mas pode se tornar tedioso quando você tem uma paleta
grande para trabalhar. Por outro lado, os sprites pré-renderizados podem parecer melhores com uma
gama maior de cores, ao custo de pouco trabalho extra. Mantenha esses pontos em mente ao projetar
a paleta do seu personagem.

[Link]/mugendocs-11b1/[Link] 3/8
29/06/2019 Tutorial MUGEN 1

2. Como eu começo a fazer um personagem?

Vá para o diretório chars / e crie um novo diretório para o seu personagem. Vamos chamar esse
personagem de "Jogador", por exemplo (substitua "jogador" pelo nome que você quiser chamar seu
personagem). Neste caso, crie um diretório chamado chars / player.

3. O que esse personagem precisa?

Você precisará ter estes no diretório chars / player:

[Link]
[Link]
[Link]
[Link]
[Link]
[Link]
Para ver o que cada um desses arquivos é, leia a Visão geral incluída no diretório docs / do arquivo
zip do MUGEN.
Neste tutorial, você criará o [Link], o arquivo sprite.

4. Como eu começo a fazer esses arquivos?

Você pode fazê-los todos a partir do zero ... Ou, você pode começar usando nosso personagem de
exemplo Kung Fu Man (KFM). O diretório de caracteres do KFM está localizado em chars / kfm /, e
seus arquivos de trabalho estão em work / kfm /.

5. OK, eu tenho KFM. O que agora?

A primeira coisa a fazer é copiar e renomear os arquivos necessários para o seu personagem.
Supondo que o nome do diretório do seu player seja "player", esses são os arquivos que você deve
copiar:

chars/kfm/[Link] -> chars/player/[Link]

chars/kfm/[Link] -> chars/player/[Link]
chars/kfm/[Link] -> chars/player/[Link]
chars/kfm/[Link] -> chars/player/[Link]
Quais são esses arquivos? Esses 4 arquivos estão todos em formato de texto, que você pode editar
em um editor de texto, como o MS-DOS EDIT ou o Windows WordPad. Aqui está uma lista de cada
um desses arquivos, o que eles fazem e seus arquivos de documentação técnica correspondentes.

.air - dados de animação. Isso descreve como seus sprites serão animados. ( Formato AIR )
.cns - constantes e estados. É aqui que você define a máquina de estado do seu personagem. É
o núcleo de como um personagem se comporta. ( Formato CNS , Expressões )
.cmd - Mover definições de comando. O .cmd define quais comandos de movimentação de
entrada acionam quais estados de ataque. Ele funciona com o arquivo .cns para definir como
seu personagem reage ao teclado ou à entrada do joystick. (veja os comentários em [Link])
.def - Arquivos e informações básicas sobre um personagem (veja os comentários em [Link])

Para configurar as informações básicas do seu personagem, abra o [Link] usando um editor de
texto. Altere os campos para os valores apropriados. Por exemplo:

[Link]/mugendocs-11b1/[Link] 4/8
29/06/2019 Tutorial MUGEN 1

; Player information
[Info]
name = "Player" ;Name of character
displayname = "Player" ;Name of character to display
versiondate = 09,09,2009 ;Version date of character (MM-DD-YYYY)
mugenversion = 1.0 ;Version of M.U.G.E.N character works on
author = "My Name" ;Character author name
[Link] = 1,2,3,4 ;Default palettes in order of preference (up to 4)
;Numbering starts from 1
localcoord = 320,240 ;Local coordinate space width and height

; Files for the player

[Files]
cmd = [Link] ;Command set
cns = [Link] ;Constants
st = [Link] ;States
stcommon = [Link] ;Common states (from data/ or motif)
sprite = [Link] ;Sprite
anim = [Link] ;Animation
sound = ;Sound (leave blank if none) *** Set to blank for now ***
ai = [Link] ;AI hints data (not used)

; Arcade mode
[Arcade]
[Link] = ;*** Set to blank for now ***
[Link] = ;*** Set to blank for now ***

Fazendo o arquivo sprite

Agora vamos fazer o [Link], o arquivo sprite do personagem. Ele conterá todos os gráficos usados
pelo seu personagem. O arquivo sprite é chamado de SFF, e a ferramenta que o gera é chamada
sprmake2 (abreviação de Sprite Maker 2 - é uma versão mais nova de uma ferramenta usada antes
do MUGEN 1.0).

Vamos nos concentrar em apenas fazer animação permanente por enquanto. Se você já tem os
sprites que deseja usar, prepare-os. Digamos que as animações que você quer usar sejam chamadas
de [Link] - [Link] e estejam no diretório work / player /. Agora, crie um arquivo de texto
dentro de work / player / e chame o arquivo [Link]. Aqui está o início do arquivo de texto que
você usaria (as linhas de comentário começam com um ponto e vírgula).

[Output]
;Filename of the SFF file to create (required).
filename = chars/player/[Link]

[Option]
;Leave all these options at default. Don't worry about what they do for now.
[Link].5 = lz5
[Link].8 = rle8
[Link].24 = none
[Link] = 0
[Link] = 0
[Link] = 1
[Link] = 1
[Link] = 1
[Link] = 0
[Link] = 0
[Link]/mugendocs-11b1/[Link] 5/8
29/06/2019 Tutorial MUGEN 1

[Pal]
;This is where you specify color palettes that the character has.
;1,1 maps to color scheme 1; 1,2 to color scheme 2 and so on.
;You can have up to 6.
1,1, [Link]

[Option]
;This option forces all sprites you add to use palette 1,1.
;It helps ensure your SFF file is built correctly.
[Link] = 1,1

[Sprite]
;This is where you specify all your sprites.
;The first two numbers on each line are the group and image number.
;That is a pair of numbers you use to uniquely identify each sprite.
;The filename is specified next.
;Following that, the last two numbers are the X and Y axis. You'll
;need to change the axis numbers for your own sprites.
0, 0, [Link], 18,105
0, 1, [Link], 18,104
0, 2, [Link], 18,104
0, 3, [Link], 18,104
; end of file

O número do grupo e o número da imagem que você digita para cada sprite é usado para acessá-lo
no arquivo .air (animação). É apenas um par de números que você irá associar ao sprite. Por
exemplo, em vez de se referir a [Link], você se referirá a 0,2.

O número do grupo 0 é usado para quadros em pé. Você pode verificar posteriormente os
documentos do AIR em busca de números recomendados para outras ações de animação. O número
da imagem apenas especifica qual imagem está dentro de um determinado número de grupo. Você
tem que ter seu próprio eixo X e Y do seu sprite. Para quadros em pé, é geralmente na parte inferior
do meio do sprite. Para sprites de salto, o eixo é geralmente no lugar onde os pés do personagem
ficariam se estivessem de pé. Isso geralmente está no centro abaixo do sprite. Você pode verificar os
sprites do KFM rodando o MUGEN e pressionando Ctrl-C enquanto toca. Isso trará as caixas
delimitadoras e os eixos dos personagens. Aqui estão alguns exemplos de posições dos eixos.

O posicionamento dos seus eixos é muito importante. Se eles estão um pouco fora entre sprites, você
vai notar seus sprites "jittering" ao redor. Se você cometer erros maiores, seus sprites podem acabar
aparecendo em lugares completamente errados.

Uma vez que você tenha o [Link] pronto, vá para o diretório onde você tem o [Link] e
[Link], etc e faça o [Link] digitando no prompt de comando:

sprmake2 work\player\[Link]
Se você receber erros ou o [Link] não foi feito, verifique se há erros no arquivo [Link].

[Link]/mugendocs-11b1/[Link] 6/8
29/06/2019 Tutorial MUGEN 1

6. Eu fiz o SFF. Qual é o próximo?

Ok, agora que você tem os sprites em pé no [Link], é hora de animar seu personagem. Para fazer
a animação permanente, você precisa criar uma ação para ela (uma ação é um bloco de texto que
descreve uma sequência de sprites para exibir). Abra [Link] em um editor de texto e vamos nos
preparar para adicionar uma ação de animação permanente. Se o seu [Link] é uma cópia do
[Link], você pode simplesmente editar o grupo de ação apropriado (ação 0 para animação
permanente).

É hora de fazer [Link]. Se você leu os documentos do AIR, saberá que o formato para .air é:

Group number, image number, X offset, Y offset, game-ticks, [options]

Não se preocupe com as linhas que começam com Clsn2 e Clsn2Default por enquanto.

; Standing Animation
[Begin Action 0] ;Action 0 is the standing animation
Clsn2Default: 2
Clsn2[0] = -10, 0, 10,-79
Clsn2[1] = -4,-92, 6,-79
0,3, 0,0, 7
;The above line means to use sprite (0,3) (ie. group 0, image number 3) and
;display it for 7 game-ticks. 1 game-tick is 1/60 of a sec, so 60
;ticks is 1 second. Group 0 Image 3 is [Link].
0,2, 0,0, 7
0,1, 0,0, 7
0,0, 0,0, 7
0,1, 0,0, 7
0,2, 0,0, 7
;end of file

Agora, salve este arquivo e você estará pronto para ver como seu personagem está!

7. Verificando suas ações

Se todos os arquivos estiverem no lugar certo, você pode carregar diretamente seu personagem com
MUGEN digitando no prompt de comando:

mugen player player

Este é um atalho para o modo versus. Por enquanto, não se preocupe se vir avisos no topo da tela.
Os avisos são um sinal de que há algo errado ou faltando em seu personagem. Nesse caso, seu
personagem pode estar perdendo sprites ou ações de animação necessárias.

Se você encontrar um sprite muito alto, como se estivesse flutuando acima do solo, você terá que
mover o eixo mais para cima. Basta lembrar que o eixo está no nível do solo quando o personagem
está no chão. Da mesma forma, se seu personagem estiver muito longe, mova o eixo para a direita.
Uma vez que você tenha ajustado os eixos para todos os sprites corretamente, seu personagem não
deve estar deslizando ou mexendo durante a animação.

Se você acidentalmente inseriu um grupo de sprites + um número de imagem que não existe, então
nada será desenhado. Então, se você vir seu personagem piscando, você deve voltar e checar seu
arquivo .air para ver se os números correspondem aos usados para construir seu .sff.
[Link]/mugendocs-11b1/[Link] 7/8
29/06/2019 Tutorial MUGEN 1

8. Continuando com Ações e Sprites

Depois de fazer os quadros em pé, você pode caminhar e depois pular. Agora que você sabe o básico
sobre como criar sprites e ações, você deve continuar fazendo as sprites necessárias a partir de
[Link] e as ações necessárias dos números de ação reservados nos documentos do AIR . Quando
estiver pronto, todos os avisos no topo da tela devem desaparecer.

Na parte 2 do tutorial, você poderá definir as caixas delimitadoras do seu personagem para que elas
possam ser atingidas e acertar outros personagens. Finalmente, mostraremos como definir alguns
ataques no .cns.

Tutorial 1 | 2 | 3 | 4

A próxima é a parte 2 do tutorial

[Link]/mugendocs-11b1/[Link] 8/8