Edição de Backgrounds - Menu Select


Por Vagner Mesquita

Finalmente saiu o tão esperado tutorial de edição de backgrounds para o Super Mario Kart de SNES. Espero que isto influencie o trabalho de muitos nerds Brasil afora.

Beleza, antes de tudo iremos aos programas necessários (não precisam ser exatamente os que eu citar aqui, mas estes são os que eu utilizei para montar este tutorial).

1 - Tile Molester
2 - Paint brush (hehe)
3 - 010 Editor (google for it)
4 - Emulador de Super Nintendo
5 - Rom de Mario Kart Americano (Super Mario Kart (U) [!])
6 - Snes Pal (feito por um Nerd chamado Yousei)
7 - Lunar Compress

Ao trabalho macacada!

Em primeiro lugar você deve posicionar seus personagens no lugar onde deseja que eles fiquem no menu, pois existem algumas posições em que eles se comportam de forma teimosa e é melhor arrumar isto agora do que depois de desenhado o background.

Abram o 010 editor (ou seu editor hexadecimal) e com ele abram o seu rom de Mario Kart (coloquei o americano como exemplo pois os offsets se baseiam nele, assim com o Lunar Compress, você não terá problemas em encontrar o que quiser no meio dos códigos).

Você deve estar vendo um monte de números e letras, vá direto em GO TO marcado na imagem abaixo, ou ctrl + G, para os apressadinhos e busque o valor 594A4.
Estes numeros são obtidos nos offsets, ou seja, alguém teve as manhas de ser tão Nerd que perdeu alguns anos de sua vida mapeando todo o código do jogo e anotando, devemos isto ao grande STIFU, francês porreta que facilitou nossas vidas e está criando um dos maiores hacks de mario kart já visto.

Agora vocês devem editar (se necessário, é claro) as posições de cada personagem e testar se eles ficam realmente nos lugares desejados.

Tenha em mente que o segundo par de números é a posição horizontal e o quarto a posição vertical.
Note que os números no início representam o corredor em questão, ou seja: 10 é sempre Mario, 11 Luigi, 12 Bowser, 13 Princesa, 14 Donkey Kong, 15 Tropa Koopa, 16 Toad e 17 Yoshi.
Pra economizar tempo testando as alterações siga a dica dada por Doug no Tutorial de Makeus, programe o seu pc para abrir a rom automaticamente no seu emulador com o duplo clique.

Para montar este menu eu utilizarei os valores da figura abaixo:

Agora que os corredores estão em suas posições definitivas devemos arrumar o pointer, ou seja, a setinha que indica qual deles está selecionado.

Na figura abaixo (buque pela posição 549E5), que está logo abaixo do que estávamos editando, encontraremos os valores responsáveis por cada um dos pointers.

Depois de editado teremos os valores:

Só faltou a barrinha de confirmação (1p OK? / 2p OK?), então vamos à ela.
Ainda no editor hexadecimal dê uma busca pelo valor 4F629, então altere os valores que estão lá para que a posição da barra de confirmações mude também. Os valores originais são: barra do player 1 é 13 27 e player 2 é 18 27.

Não se esqueça de que o primeiro par é sempre a posição X do tile, enquanto o segundo é o numero do bloco de tiles, ou seja, logo após o FF 25 vêm o 00 26 (que é o tile 00 do bloco de tiles 26)

Com isto fechamos as posições e podemos partir pra edição gráfica do cenário todo. Para isso existem algumas regras que não devem ser esquecidas:

1 - Todos os Tiles devem ter 8x8 pixels, nunca mais e nunca menos, o Tile Molester já tem a grade neste tamanho, mas caso você queira desenhar em outro programa nunca esqueça esta regra;
2 - O tamanho do arquivo nunca pode exeder o tamanho E53 (o tamanho aparece na base do 010 e se for ultrapassado começa a sobrepor o código da title screen e é esta a razão por começarmos a editar pelo menu e não por lá);

Bom, a primeira coisa a fazer é abrir o seu Tile molester e com ele abrir a rom que você acabou de editar no editor Hexadecimal.
Dica: feche seu editor Hexadecimal pois caso o arquivo seja salvo novamente por acidente (ou não) as alterações feitas no Tile Molester irão desaparecer.

Você deve estar vendo uma imagem borrada e sem nexo algum, mas não se preocupe, isto não é algum clipe do Pink Floyd, é só a parte de códigos da rom tentando ser interpretada visualmente pelo Tile Molester:

Para corrigir isto entre no menu View (visualizar) e escolha o codec (formato) 2bpp planar.
Lá no meio da barra de rolagem você vai encontrar os gráficos do menu original.

Agora é a parte mais legal, a hora de desenhar o nosso próprio menu.

Caso você seja um ALIEN e consiga fazer isso diretamente no Tile Molester meus parabéns, mas lembre-se que apesar do tile possuir as mesmas ferramentas do Paint Brush, ele não permite que você visualize muito bem o que está fazendo, ainda mais quando se trata de coisas modulares como os gráficos que iremos construir neste tutorial.

Eu aconselho que você seleciona a área retangular e exporte como PNG, assim você poderá editar mais livremente no software que preferir e importar aqui de nolta depois de terminar.

Um macete legal é desenhar uma área quadriculada (18x32 pixels) em cores clarinhas e fazer o menu por cima, testando os encaixes entre Tiles e a modularidade de modo a economizar gráfico e memória.

repare que neste exemplo os tiles definitivos são os marrom escuro, e os clarinhos são desnecessários, pois os escuros conseguem ser todos eles ao mesmo tempo, economizando muitos tiles.

Aqui tem mais um, na verdade eu guardo tudo, caso alguém queira os arquivos é só me mandar um e-mail.

Uma das coisas mais chatinhas aqui é memorizar o valor de cada Tile, pois isso será necessário na hora de montar o código do background, para isso montei um esquema que mostra que para esta situação (menu select) os gráficos vão de 00 até 4F. Por exemplo: a interrogação (1p/2p ok?) seria o gráfico de numero 43.

Depois que eu desenhei o menu no Paint Brush, eu salvo somente a parte do arquivo que eu usarei NAS MESMAS CORES QUE EU EXPORTEI e importo ele de volta no Tile Molester, tomando o cuidado de colar ele exatamente no lugar do antigo, sem sobrepor o código.

O que eu quero é que vocês desenhem seu próprio cenário, uma vez que este aqui eu fiz para o projeto Super Mario Jets, do Mário, um Nerd lá do Ceará. Mas para que este tutorial dê certo eu peço que baixem a imagem pronta para substituir a original do jogo.
Download aqui. Caso o link não baixe automaticamente tente usar o recurso salvar como com o botão direito do mouse.

As cores aqui não importam muito esteticamente, o que você tem que ter em mente é o que quer fazer com cada parte do seu desenho, para que depois não fique impossível de pintá-lo. Cada tile pode ter no máximo 4 cores, mas isto não implica que os objetos tenham só isto, uma vez que os objetos podem ter tamanhos maiores que um tile e cada tile ter sua própria paleta.

O que precisamos fazer agora é extrair a parte do jogo que corresponde ao menu de seleção, para isso usaremos o Lunar Compress, programa criado por FuSoYa, um japa porreta que também é Nerd.

Abra o Lunar Compress e digite decomp.exe smk.smc menuselect.smc 70d29 4 0, com seu arquivo do jogo na mesma pasta e renomeado para smk.smc.

Depois que aparecer as informações do arquivo vai aparecer a palavra done, e à esta hora um arquivo chamado menuselect.smc deve ter aparecido nesta pasta. ele não é jogável, mas contem tudo o que precisamos para editar o cenário.

Agora é a hora mais temida por muitos, vamos à parte braçal.
Pra começar temos que ter em mente o numero que corresponde cada Tile (00, 01, 02, 03.... 4F) e pensar em que cor cada um será pintado. Para isso teremos oito paletas de cores, que são: 00, 04, 08, 0C, 10, 14, 18 e 1C. Cada paleta contem 4 cores, sendo que a primeira é sempre invisível.
Aqui está o exemplo de como é o jogo originalmente:

A cada 4 linhas no programa editor de Hexa corresponde a uma linha de gráficos na tela horizontalmente, ou seja, 32 tiles.

Note que no jogo original as 4 primeiras linhas (em hexa) são compostas pelo mesmo gráfico (4B) e com a mesma paleta de cores (04). Isso coloca a primeira linha inteira do jogo com o mesmo tipo de desenho e as mesmas cores.

Caso trocássemos o 4B pelo valor da interrogação (43 como visto anteriormente) nas 4 linhas de hexa, teríamos um teto de interrogações... tá, isso é inútil, mas é só um exemplo para demonstrar onde fica cada coisa...

Agora que já entendemos como funciona isso temos que esclarecer umas coisinhas simples e importantes:

1 - O código é dividido em camadas (layers) e estes podem ser visualisados pressionando o botão 1, 2, 3, 4 ou 5 no jogo.
2 - A primeira camada começa no 0000 e acaba no 07FF. Esta camada é a principal, então deixe as outras pra fazer cenários ou letreiros.
3 - Para testar as façanhas mirabolantes que você faz salve o arquivo no editor hexadecimal, depois abra o lunar compress e digite: recomp.exe menuselect.smc smk.smc 70d29 4 0. Isso colocará o arquivo que você extraiu de volta no lugar e você poderá rodar o seu smk.smc para ver como ficou.
Dica: Deixe o lunar compress aberto e pra cada mudança (ou ctrl+z) que você salvar apenas digite pra cima nas setas do teclado que o comando reaparece e você não precisa digitar tudo de novo.

Supondo que vocês já pegaram o espírito da coisa, então eu passarei os códigos do layer 1 aqui:

Agora vamos acertar as cores dos objetos, que estão no lugar (tudo isso que fizemos é apenas no layer 1) porém estão bizarramente coloridos.

Abra o snes pal, mas antes feche o editor hexa e tudo mais, conflitos existem o tempo todo.
Mande abrir o arquivo extraído pelo Lunar Compress(menuselect.smc) e vá até a posição 2800, agora começa a parte legal.

Repare que a primeira cor é sempre um azul clarinho sem graça, não importa, esta é a cor invisível

O que vc tem que fazer é ir contando as paletas, em valores de de 4 em 4, que é o número de cores de cada uma.
Quando você chegar à paleta 1C saiba que ela é a última deste Layer. Vamos contar as paletas para poder pintar sossegadamente sem interferir no resto do jogo:

Para economizar processos iremos pintar aqui as cores dos layers restantes (no desenvolvimento natural do menu você deve fazer isso só depois de montar o layout), passarei as paletas dos outros layers para ir adiantando.

O layer 2 começa a partir da posição 2840 do seu snespal, mãos a obra:

O layer 3 começa logo na sequencia, na posição 2880:

Se tudo está saindo como o planejado o seu menu deve estar como a imagem abaixo (desative todos os outros Layers com os botões 1, 2, 3, 4 e 5).

COISAS IMPORTANTES QUE VOCÊS TÊM QUE SABER

1 - Somando-se 20 na paleta de cor de um Tile faz com que ele apareça sobre o Layer que está acima dele. Este é o efeito mais útil para se trabalhar em camadas e criar efeitos inusitados. Exemplo 1C + 20 = 3C.
2 - Somando-se 40 faz com que o tile se inverta horizontalmente, ou seja, é possivel economizar tiles quando se tem algo simétrico na tela, e no nosso menu, por exemplo, não seria necessário desenhar o tile 46, bastaria inverter o 49 somando 40 à sua paleta de cores. Somando 60 é o mesmo que inverter e subir um layer ao mesmo tempo.
3 - Somando-se 80 faz com que o tile se inverta verticalmente, o que nos faria economizar o tile 48 se somássemos 80 à paleta do tile de número 49. Somando mais vinte, ou A0 no total, fará com que ele se inverta verticalmente e suba 1 layer ao mesmo tempo.
4 - Somando-se C0 faz com que o tile se inverta verticalmente e horizontalmente ao mesmo tempo, ou seja, com isso economiza-se muitos tiles. Somando-se mais 20 (no total E0) fará com que ele se inverta da mesma forma e ainda suba 1 layer. Observe que nenhum destes recursos foi utilizado neste menu e mesmo assim ele é abundante graficamente. Isso nos mostra que o limite ainda está longe de ser alcançado.

Agora que as cartas estão todas na mesa passarei os códigos do Layer 2. No editor hexadecimal, abra novamente seu menuselect.smc e atribua a todo o espaço entre 0800 e 10BF o tile 14 repetidamente (com a paleta 10), isso deixará o layer todo invisível e meu tutorial mais curto, pois agora só preciso colar aqui a parte do código que tem os detalhes do cenário, hehe. Você pode copiar e colar o código hexadecimal, mas tome cuidado para não aumentar ou diminuir o total de códigos, pois isso significa perder tudo, ok?! Um bom jeito de fazer isso é selecionar um bloco de códigos e copiar, então cole-o sobre outro bloco de códigos selecionado do mesmo tamanho.

Começa com a nuvenzinha (repare só no mapa de tiles que você baixou nos gráficos 1B, 1C, 4D, 4E e 4F) e vai mexendo até o chão:

Feito isso vá ao lunar e recomp.exe novamente seu arquivo de volta ao smk.smc, só pra testar. Desativando os layers restantes você deve ter obtido algo assim:

Vamos ao layer 3, que é a mesma coisa do layer 2, portanto pode ir enchando de 14 10 desde o 1800 até o 25FF.

Eis os códigos:

Terminamos toda a parte difícil, agora só faltam detalhezinhos e seu menu deve estar assim:

Agora tudo o que faremos será direto no smk.smc, usando o editor hexa (salvo alguma possível correção de cores), então fica bem mais fácil daqui pra frente.

Em primeiro lugar consertaremos essa barrinha que está no meio da confirmação. Este erro ocorre pois no original o Tile de fundo para a pergunta de confirmação é o 05, mas aqui usaremos o 00, pois o 05 já está sendo usado na base dos gráficos de aceleração de cada um. A paleta é a 08, e neste caso não é necessário mudar o valor.

Vá até o valor 5946B

Agora Vamos arrumar o fundo, que está azulado e trash, para isso vá até o valor 5937F, um pouco acima do editado anteriormente.

Note que o primeiro valor representa o Tile 34 e sua paleta, que é o mesmo para todo o layer 4, e o último valor é o tamanho deste layer. Configurado assim ele encherá a tela e dará um aspecto muito melhor ao nosso trabalho.

Agora seu menu já deve estar lindo, mas continuaremos a arrumação:

Colocando os valores a seguir fará com que as setinhas de 1p e 2p fiquem certinhas, com seus tiles respectivos e suas paletas também.
Dá pra fazer muita coisa com esses valores, deixei todos marcados para que vocês possam experimentar e criar novas soluções.
O primeiro é referente ao espaço por onde passam os pointers, o segundo e terceiro são posições de 1p e 2p respectivamente, o quarto tiles do 1p e quinto o brilho. O sexto é relacionado ao "com" mas eu deixei os gráficos do 2p para este projeto, os dois últimos são os tiles do 2p e o brilho.

Agora é a parte mais doida de se entender, mas é a mais fácil de fazer. Arrumaremos aquele bug que acontece quando selecionamos alguém e, de quebra, o transformaremos em algo bem legal, vejamos:

O que tem de estranho aqui é que as coordenadas funcionam de um jeito diferente do resto inteiro do jogo, mas não é difícil, poe exemplo, 07 é a largura e 01 a altura da primeira camada de tiles, que deve cobrir toda a área do gráfico, e a segunda camada tem 02 tiles e também 07 de largura. Os tiles como sempre são definidos depois de um A9.

A última coisa é posicionar estes "boards" em seus devidos lugares, here we go!

Repare que estamos no meio de onde tudo começou... todos estes números vermelhos de fora dos quadrados já foram editados hoje, basta fazer estes que eu marquei com retângulos e estaremos terminado o menu do Super Mario Jets.

Baixe a velocidade do scroll na posição 59557 de 01 para 00 e CONGRATULATIONS!

Duvidas ou sugestões

lordvag@yahoo.com.br

  • Comunidade do orkut