🤔 Para Refletir :
"A verdadeira ideia criativa vem do momento mais simplório do dia."
- Yonori Akari

RPG Maker 2003 Como separar e desenha o seu próprio Battle UI Skin (System2)

DevWithCoffee

Cidadão
Membro
Membro
Juntou-se
02 de Abril de 2019
Postagens
161
Bravecoins
282
Área
Programação
Motor de jogo
RPG Maker 2000
Eu nunca me aprofundei no sistema de batalha do Rm2k3, mas depois de ler a documentação notei que ela não é muito clara de como isso pode ser personalizando apenas movendo alguns pixels, está tutorial servirá para isto.

Template: Download

Para facilitar eu fiz um template com os limites de cada parte divididos por cores:
Template-SystemBattle1.png


Parte 1: Seta para selecionar o alvo da ação
Tamanho: 3 frames com 16x16 pixels
cursor_troop.png

Estes três itens permitem criar uma animação com 3 frames na sequencia 1, 2, 3, 2 e volta à repetir, então faça algo simples como um objeto que mude de tonalidade ou um cursor que seja ligado ao tema do seu jogo

Parte 2: Seta para seleciona o membro do time que já estiver disponível
cursor_party.png

Funciona exatamente igual ao anterior, porém fica acima da cabeça

Parte 3: Números que representam HP e SP do personagem
Cada caixa tem um limite de 8x16 pixel e representa um digito decimal, começando do zero:
numbers.png

Está barra pode ser completamente removida apenas cobrindo com a cor de transparência, já que ele pode poluir um pouco as barras, e ele também está disponível apenas no Type C do Battle Screen:
2k3-BattleScreen-TypeC.png


Considerando o cursor e números removidos o template estaria nesta etapa:
Result1.png




Agora vamos à parte mais complexa e talvez a mais divertida:
000_System2-Bars.png


Left edge:
Aqui você terá um espaço de 16x16 pixels para desenhar a borda e talvez um ícone para a barra, você pode diminuir a altura para encaixar com borda acima e abaixo. Um exemplo simples:
Result2.png


Back bar:
Aqui você também tem 16x16 pixels, porém no jogo ele ficará com 25x16, que é para ter um espaço para esticar a barra dentro dele. Você deverá desenhar a parte superior e inferior da borda dentro deste limite se for o caso
(Eu não sei por que 25 e não 24 que é um valor divisível por 8)
Result3.png


Right edge:
Aqui o limite é 8x16, ou seja, o restante ficará atrás do Face/Portrait do próximo membro do time em batalha
Result4.png


Remainder of the right:
Esta parte aparece atrás da imagem do rosto do próximo membro da equipe; em outras palavras, ela só é exibida no último personagem quando o menu de batalha é ativado e há menos de quatro membros no grupo.
Assim como o anterior a largura também é de apenas 8 pixels, você pode apenas completar com a cor transparente para fazer com que tenha uma espaçamento entro o status de cada personagem na batalha.

Bar:
Este tem 16x16, este também chegará até 24x16 no jogo encaixando perfeitamente sobre o Back bar, ou seja, a altura e posição Y na imagem devem corresponder:
Result5.png


Full Bar:
Funciona exatamente como o anterior, mas ele vai substituir o anterior quando estiver cheio que corresponderá à 25x16
As barras podem simular um degradê de cima para baixo sem distorcer a imagem quando ela for esticada no jogo; escolha cores diferentes para ajudar a identificar a função de cada barra. Neste exemplo, vou manter as cores clássicas, e no Full Bar vou usar as mesmas cores mas com efeito de iluminação:
Result6.png


Agora basta remover o fundo se estiver usando um editor com suporte à camadas ou substituir cores do template não usadas, com isso você já pode testar no seu projeto, veja o resultado desta tutorial:
Result7.png


E aquela parte que parece uma grade sem nenhum propósito? Assim como a medida estranha mencionada anteriormente eu presumo que talvez algo a mais fosse ser incluído durante o desenvolvimento do sistema de batalha do Rm2k3, mas como nunca houve atualizações do estúdio original nunca saberemos.
 
Última edição:
Salve, Dev!

O tutorial resumiu muito bem as funcionalidades do System 2, só há um detalhe bem interessante que eu adicionaria. Nem eu lembro como eu descobri - já que a documentação oficial é bem superficial mesmo - mas as Bars são na verdade divididas no meio verticalmente. Em outras palavras, é como se fossem divididas em 2 colunas de 16 pixels, para todos os três casos.

O que acontece é que a metade da direita corresponde ao gráfico especificamente quando as barras estiverem cheias, enquanto a metade da direita vale para barras incompletas.

Pra ilustrar o que eu quero dizer, segue um arquivo de System 2 do meu próprio projeto:

systemParadiddle.png


Na metade da direita eu deixei as barras em tons mais claros, dando o efeito de estarem iluminadas quando completas. Aí dentro do jogo fica assim:

Modelo.png

Repare nas barras amarelas, de ATB, e do efeito bacana que fica na que está cheia em comparação às outras. O mesmo acontece com a de HP e MP, mas os números na frente dificultam enxergar.

Eu também fiquei anos tentando entender essa bendita grade e se ela serviria pra alguma coisa, mas pelo visto não. O RPG Maker 2003 tem uns detalhes bem interessantes e tinha potencial pra fazer coisas mais legais ainda, uma pena que o programa não tenha sido atualizado nunca mais nem as versões mais recentes sigam a mesma filosofia de desenvolvimento. Hoje em dia eles querem deixar cada vez mais coisas na mão do autor, dificultando a vida de quem não é programador de formação. Uma pena.
 
Voltar
Topo Inferior