🤔 Para Refletir :
"Escrever para o seu jogo já começa nas mecânicas"
- AbsoluteXandy

RPG Maker 2000 [rm2000] Editor de Paletas

Dr.XGB Masculino

O Cenourão
Administração
Administração
Jogador maluco, problemático, olho parado.
Juntou-se
21 de Julho de 2015
Postagens
570
Soluções
3
Bravecoins
2.833
Área
Programação
Motor de jogo
RPG Maker 2003
EDITOR DE PALETAS
by Dr.XGB

Autor: Dr.XGB
Plataforma: RPG Maker 2000
Nível: Avançado
Outras Ferramentas: Destiny Patcher 2.0
destiny2screenshot40mar.png

E aí, galera?
Agora eu trouxe uma engine bem cabulosa, me deu um pouco de trabalho para desenvolver um sistema desses em 3 dias. Utilizei um dos recursos do Destiny Patcher para fazer esse sistema, permitindo que eu altere as cores do charset da maneira que desejar e aplicá-lo ao seu jogo.
Para mexer na paleta de uma imagem através do Destiny Script, é muito impotante que você tenha uma noção básica sobre números hexadecimais e o conhecimento dos operadores lógicos binários (And, Or, Not, Shift Left, Shift Right...).

Como os arquivos gráficos que o RPG_RT lê são do tipo Cores Indexadas (onde tem um valor alocado em um byte, representando a cor), o Destiny consegue ler a paleta dos mesmos e editá-los alterando o seu valor numérico. Na verdade as cores são geradas por código binário, onde cada bit representa uma cor e sua tonalidade, porém a leitura se torna mais compreensível quando geramos através do sistema Hexadecimal. Quando fizemos isso, o interpretador lê o código hexadecimal, passa para o binário, gera a cor e retorna com o valor decimal:​
Hexadecimal > Binário > Decimal
Código:
0xFF > 0b11111111 > 255
[color=red]Vermelho[/color]
Ao fazer isso, você pode perceber que as cores podem ser criadas através do sistema RGB, onde você define os valores das cores primárias de 0 até 255.

Vamos fazer um teste?
Abra o RPG Maker 2000, em um evento qualquer, digite este código:​
Código:
[b][color=red]$[/color][/b]
Picture[[color=blue]1[/color]].AuroraSheet.Create([color=blue]128[/color],[color=blue]128[/color]);
Picture[[color=blue]1[/color]].AuroraSheet.Palette[[color=blue]0[/color]] = [color=blue]0xFFFFFF[/color];
Picture[[color=blue]1[/color]].AuroraSheet.FlushPalette();
Agora teste o seu jogo e verá que vai gerar um quadrado branco de 128x128 pixels. Isso porque criamos uma picture toda preta e mudamos a primeira cor da paleta para branco (0xFFFFFF). Lembre-se que quando você quer escrever um número hexadecimal, você tem que digitar 0x antes do número para que o interpretador reconheça que aquele número está no formato hexadecimal.
Agora, altere a terceira linha do código (Picture[].AuroraSheet.Palette[]) para o seguinte valor:​
Código:
[b][color=red]$[/color][/b]
Picture[[color=blue]1[/color]].AuroraSheet.Palette[[color=blue]0[/color]] = [color=blue]0xFF[/color]
Ao testar o jogo, verá que agora o quadrado está vermelho. Agora tente mudar a primeira cor da paleta desta maneira:​
Código:
[b][color=red]$[/color][/b]
Picture[[color=blue]1[/color]].AuroraSheet.Palette[[color=blue]0[/color]] = [color=blue]0xFF00[/color]
Teremos agora um quadrado verde. E, por fim, tente este:​
Código:
[b][color=red]$[/color][/b]
Picture[[color=blue]1[/color]].AuroraSheet.Palette[[color=blue]0[/color]] = [color=blue]0xFF0000[/color]
Agora o quadrado gerado na tela ficou azul. Com isso, você chegará a conclusão que a cada duas casas numéricas representa uma cor primária. São elas, respectivamente: Azul, Verde e Vermelho (neste caso é ao contrário do que a gente costuma ver num editor de imagens onde o vermelho vem primeiro)​
Exemplo
Código:
[b]0x[color=blue]FF[/color][color=limegreen]FF[/color][color=red]FF[/color][/b]
Relembrando o primeiro exemplo deste tópico onde 0xFF equivale a 255, podemos notar que num editor de imagens qualquer também funciona dessa forma, só que eles mostram cada cor primária em número decimal, mas provavelmente são convertidos em hexadecimal e feita a leitura através do código binário, retornando a cor de acordo com o que estava configurado. Assim então eu usei alguns cálculos para que o jogador possa definir cada cor primária, retornando uma nova cor para a paleta do Charset. Veja os cálculos que usei para editar cada uma das cores primárias. Antes vamos considerar as seguintes variáveis:​

0001: Vermelho
0002: Verde
0003: Azul

Colocando estas variáveis para serem determinadas cada cor primária, ou seja, o grupo de 2 duas casas do valor hexadecimal da cor, usei os seguintes cálculos:​
Código:
[b][color=red]$[/color][/b]
v[[color=blue]1[/color]] = Picture[[color=blue]1[/color]]AuroraSheet.Palette[[color=blue]0[/color]];
v[[color=blue]1[/color]] %= [color=blue]0x100[/color];
Código:
[b][color=red]$[/color][/b]
v[[color=blue]2[/color]] = Picture[[color=blue]1[/color]]AuroraSheet.Palette[[color=blue]0[/color]];
[b][color=blue]if[/color][/b](v[[color=blue]2[/color]] > [color=blue]0xFFFF[/color])
  v[[color=blue]2[/color]] /= [color=blue]0x100[/color];
  v[[color=blue]2[/color]] %= [color=blue]0x100[/color];
[color=blue][b]else[/b][/color]
  v[[color=blue]2[/color]] /= [color=blue]0x100[/color];
[b][color=blue]endif;[/color][/b]
Código:
[b][color=red]$[/color][/b]
v[[color=blue]3[/color]] = Picture[[color=blue]1[/color]]AuroraSheet.Palette[[color=blue]0[/color]];
v[[color=blue]3[/color]] /= [color=blue]0x10000[/color]
Volte ao seu projeto, onde a gente testou o quadrado na tela e aplique estes 3 cáculos acima. Teste o jogo e aperte F9 quando o quadrado aparecer e teremos a mágica:​
0001: Vermelho = 255
0002: Verde      = 255
0003: Azul          = 255

Agora tente alterar a primeira cor da paleta lá em cima para um valor qualquer para ver como as cores são distribuídas para a variável. Caso você não tenha ideia de como gerar outras cores, deixarei algumas sugestões para você testar:​
0xFFFF = Amarelo
0xA8FF = Laranja
0xFF00FF = Rosa
0xFF0064 = Roxo
0x60 = Vinho
0x480000 = Azul Marinho
0xB296 = Bege
0xFFFF00 = Azul Turquesa
0xFF82 = Verde-Limão
0xFF7EA2 = Violeta
0x3462 = Marrom
0xD474FE = Rosa Choque
0xFFB2FF = Fuchsia

Além dessas cores, tente outras combinações, procure descobrir novas cores e vai testando no projeto para ver como funciona. Da mesma forma que os número decimais são contados: 1, 2, 3, 4, 5, 6, 7, 8 e 9; no sistema hexadecimal tem mais seis algarismos antes de chegar a 10. Então a contagem ficaria: 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F, 10, 11, 12...
Na dúvida, abra a calculadora do Windows no modo de exibição "Programador", digite um número de 0 a 255 na forma decimal, converta para hexadecimal e teremos o valor. Mas faça isso de 2 em 2, se você colocar o número todo o cálculo vai dar errado pois as cores são contadas em bits.​
[box class=catbg3]
lamp.png
Importante:
Sempre que você alterar a cor da paleta, finalize o código chamando a função Picture[id].AuroraSheet.FlushPalette(). Fazendo isso, as alterações da paleta serão aplicadas à picture selecionada pela Id que você colocou nesta função. Se não colocá-la, a paleta da sua imagem não sofrerá nenhuma alteração.[/box]
Depois de separar as cores primárias, hora de mudar o valor das 3 variáveis e enviar de volta para a paleta da imagem. Neste caso, como se trata de um cálculo binário, fazer o reverso não vai adiantar. Portanto fiz mais alguns cálculos para retornar cada um deles para suas devidas casas, formando uma nova cor:​

Código:
[b][color=red]$[/color][/b]
Picture[[color=blue]1[/color]].AuroraSheet.Palette[[color=blue]0[/color]] -= Picture[[color=blue]1[/color]]AuroraSheet.Palette[[color=blue]0[/color]]%[color=blue]0x100[/color];
Picture[[color=blue]1[/color]].AuroraSheet.Palette[[color=blue]0[/color]] += v[[color=blue]1[/color]]
Código:
[b][color=red]$[/color][/b]
Picture[[color=blue]1[/color]].AuroraSheet.Palette[[color=blue]0[/color]] %= [color=blue]0x100[/color];
Picture[[color=blue]1[/color]].AuroraSheet.Palette[[color=blue]0[/color]] += v[[color=blue]2[/color]] << [color=blue]8[/color];
Picture[[color=blue]1[/color]].AuroraSheet.Palette[[color=blue]0[/color]] += v[[color=blue]3[/color]] << [color=blue]16[/color];
Código:
[b][color=red]$[/color][/b]
Picture[[color=blue]1[/color]].AuroraSheet.Palette[[color=blue]0[/color]] %= [color=blue]0x10000[/color];
Picture[[color=blue]1[/color]].AuroraSheet.Palette[[color=blue]0[/color]] += v[[color=blue]3[/color]] << [color=blue]16[/color];
E assim eu desenvolvi o sistema para alterar a cor da imagem através das cores primárias.​

Para mostrar como tudo isso funciona, eu montei um aplicativo que lhe permite alterar a cor dos charsets da maneira que você quiser. Não use apenas os que estão na pasta do jogo, mas coloque outros charsets que você tem na pasta e veja como deve ser aplicado o sistema às imagens. Por enquanto não coloque charsets com acento porque eu ainda não terminei a fonte do aplicativo, senão vai dar erro na hora de ler os nomes dos arquivos. Considere, por enquanto, como um teste. Aos poucos farei atualizações, aprimorando o aplicativo.
Também fiz com que criasse um faceset para o charset com cada um deles na hora que você testar o jogo no editor. Espero que gostem e que utilizem este beta para o conhecimento de vocês.​
Imagens
destiny2screenshot47mar.png

destiny2screenshot40mar.png

destiny2screenshot41mar.png

destiny2screenshot42mar.png

destiny2screenshot43mar.png

destiny2screenshot44mar.png

destiny2screenshot46mar.png

destiny2screenshot50mar.png

destiny2screenshot52mar.png

destiny2screenshot53mar.png

destiny2screenshot55mar.png

destiny2screenshot57mar.png
Teclas de AtalhoCtrl+O - Abrir um novo Charset;
Ctrl+S - Salvar Charset Atual;
Setas - Controlam as cores primárias e seus valores;
F2 - Reiniciar o aplicativo;
F4 - Mudar tamanho da janela.

Teclas no jogo de TesteSetas: - Move o personagem;
Shift - Correr;
Enter - Ação;
Esc - Cancelar/Abrir menu de pausa

Disponibilizei 2 versões diferentes, seria recomendável que você tenha um bom processador e uma memória de, no mínimo 4GB para um funcionamento completo. Caso contrário, baixe a versão minimal que limpa os lags ocorridos durante o editor com um Wait.​


Versão Recomendada:
[NOVO] Editor de Paletas 0.2.1
Editor de Paletas 0.1

Versão para computadores mais antigos:
[NOVO] Editor de Paletas 0.2.1
Editor de Paletas 0.1

Este aplicativo está sujeito a alterações e também estará aberta às sugestões para que eu possa acrescentar a ele. Até mais  :ok:​


Log das versões:
Versão 0.2.1
---------------------

Novidades:

-> Agora você pode clicar no Charset para selecionar
    a cor que deseja editar de acordo com a posição
    do mouse sobre o pixel.

Bugs corrigidos:

-> O Gerador de Faceset agora detecta se a cor de
    fundo é transparente é preta para gerar o
    texto com a cor branca e vice-versa;
-> Erro do nome do Charset que muda mesmo quando
    abre o quadro de abrir um charset e não escolher
    nenhum.

Versão: 0.1
------------

-> Demonstração inclusa para testes;
-> Gerador de Faceset;
-> Teclas de atalho:
   
    Ctrl+O = Abrir Charset;
    Ctrl+s = Salvar Charset;
    F2 = Reiniciar o editor;
    F4 = Alterar tamanho da janela;
    Setas = Alterar as cores primárias da index
              da paleta selecionada.
 
Simplesmente mííííítico!

Quanto mais a gente conhece esse mundo maker, mais vemos que a máxima de Sócrates é realmente inquestionável, – só sei que nada sei.

Abraço!
 
Voltar
Topo Inferior