🤔 Para Refletir :
"Fazer um jogo é um ótimo aprendizado para se notar que normalmente o que é bom não é por acaso e sim fruto de muito planejamento e trabalho."
- Rafael_Sol_MAKER

RPG Maker 2000 [Rm2000] Destiny Tricks #1: Variáveis na Tela

Dr.XGB Masculino

O Cenourão
Administração
Administração
Jogador maluco, problemático, olho parado.
Juntou-se
21 de Julho de 2015
Postagens
568
Soluções
3
Bravecoins
2.757
Área
Programação
Motor de jogo
RPG Maker 2003
TUTORIAL DE DESTINY #1
Variáveis na Tela


Autor: Dr.XGB
Engine: RPG Maker 2000
Ferramenta Adicional: Destiny Patcher 2.0
Dificuldade: Básico

Recurso Utilizado:
ooM39bL.png


Estou começando com uma série de tutoriais para RPG Maker 2000 onde mostrarei uma visão muito mais básica do uso do Destiny Script com o objetivo de mostrar a eficiência e a praticidade da ferramenta que vai ajudar o maker a ter seus horizontes ampliados em relação a criação de novos sistemas ou na invoação em seus próximos jogos. Para quem não conhece o Destiny, acesse estes tópicos e entenda melhor os detalhes.​

Conhecendo o Destiny Patcher Pt.1
Conhecendo o Destiny Patcher Pt.2
Aula 0 - Conceitos básicos do Destiny Patcher

Após conhecer a ferramenta, podemos começar o nosso primeiro tutorial, onde vamos aprender a manipular as pictures. Neste tutorial, faremos um simples contador, onde vai mostrar o valor de uma determinada variável na tela. Com esse esquema, você pode utilizar para colocar HP do herói, algum contador de tempo, de pontos, ou qualquer coisa que lhe vier na cabeça.
Você verá no início que poderá fazer muita coisa com as Pictures, coisas que você precisaria de mais de 10 pictures, podemos agora fazer com apenas um ou duas pictures e teremos um sistema muito mais otimizado.
Assista aula 0 no link acima para saber como aplicar o Destiny no RPG Maker 2000 para começarmos.
Depois disso, vamos ao tutorial!​



[font=tahoma, geneva, sans-serif]Passo 1 — Organizando as Pictures[/font]

Depois que você ter feito o mapa, posicionado o herói no local do mapa, a primeira coisa que faremos é criar um evento, que será aquele que vai fazer todo o processo de inicialização do sistema dentro do mapa. Eu costumo sempre chamar o primeiro evento de INIT, pois é ele que vai, como o nome já diz, iniciar o mapa. Isso é muito utilizado para HUD's, por exemplo, criar uma barra de HP, ou até mesmo para o jogo começar em uma cutscene antes do jogador começar a controlar o herói. Todo evento de inicialização de ter sua condição determinada para Auto Start, nunca use Processo Paralelo nesse caso. Auto Start ele paraliza todos os eventos para sua execução e Processo Paralelo ele vai rodando junto com os outros eventos.
Para se criar um contador, precisaremos de 2 pictures:
  • A picture dos números que será aquela utilizada no Recurso que está disponível no topo do tópico (você pode usar a sua própria imagem de números também)
  • A outra picture que mostrará o contador.
Uma coisa que você deve saber é que para colocar uma picture no Destiny não é a mesma coisa que costumamos fazer por eventos, que e a função Show Picture. Antes disso teremos que declarar os parâmetros separadamente para enfim colocar a imagem que vai ocupar a ID daquela Picture. É importante entender que as pictures no RPG Maker funcionam da mesma maneira que um armário com várias gavetas. Imagina que você tem um armário com 20 gavetas (já que o RPG Maker 2000 tem um padrão de 20 pictures na tela, sabendo que você pode alterar esse limite no Destiny), cada gaveta você vai ocupar com várias folhas separadas com dados, nessas folhas os dados devem se relacionar àquela mesma gaveta, as folhas representam os parâmetros (X,Y, tamanho, transparência, efeitos de rotação e distorção, cores, cor transparente, etc.). A diferença entre os eventos e o Destiny Script é justamente essa: nos eventos você já ajusta os parâmetros tudo no mesmo lugar. Já no Destiny você tem que ajustar os parâmetros separadamente através de códigos, embora exista um código nele que funciona da mesma forma que o evento, porém declarando os parâmetros separadamente, você vai poder ajustar só os parâmetros que você vai precisar e não todos como funciona por eventos.

A primeira picture, declaremos normalmente com o Show Picture, usando a imagem dos números (
ooM39bL.png
). Podemos deixar sua Id como 1 (primeira gaveta). As coordenadas não importam, a única coisa que será primordial ajustar é o tamanho da imagem. Essa picture não vai aparecer na tela, ela servirá como uma referência para a outra picture que faremos adiante, portanto deixe o parâmetro Magnification em 0%.
Beleza, a segunda picture faremos a declaração com o Destiny Script, pois ela será a imagem do contador que ficará na tela. Antes de tudo, vamos declarar as coordenadas:
Código:
$
Picture[2].X = 32;
Picture[2].Y = 12;
Picture[2].UseMaskColor = true;
pause;
Se você leu os tópicos dos links acima, você sabe que para iniciar um código no Destiny é abrindo a caixa de comentários dos eventos e começar utilizando um $ para indicar que está iniciando um código no Destiny.
Em seguida os comandos, ajustamos a coordenada X e Y da Picture 2, ou seja, do contador. Depois usamos UseMaskColor para determinar se a picture mostrará a cor transparente ou não. É uma variável do tipo bool, que possuem apenas dois valores: 0 e 1, que normalmente chamamos de true e false. É só você pensar nas switches: Off e On, switches não passam de variáveis do tipo bool. Se UseMaskColor estiver true, a cor de fundo não aparecerá, com false ela aparecerá.
Depois colocamos um pause para se preparar na inserção da imagem na coordenada.
Posicionadas a picture na tela, vamos agora criar uma imagem pra ela com a ajuda do Destiny:

Código:
$
Picture[2].AuroraSheet.Create(48,11);
Picture[2].AuroraSheet.CopyPalette(Picture[1].AuroraSheet.Handle);
Picture[2].AuroraSheet.FlushPalette();
Podemos perceber que estamos usando uma propriedade chamada AuroraSheet. Essa propriedade será aquela que vai trabalhar na manipulação da imagem, e dentro delas mais propriedades que vão dar os parâmetros para a AuroraSheet. Como o próprio nome diz, imagine AuroraSheet como uma folha de papel em branco em que você vai ter que decidir o que fazer com esse papel, seja desenhar, recortar, copiar, dobrar e assim por diante.
A primeira é o Create(width,height), ali será criada uma imagem em branco que você vai determinar o tamanho dela nos parâmetros. Width é a largura da imagem e Height é a altura. De acordo com o tamanho da primeira imagem que é 80x11 por ter os 10 múmeros de 0 a 9, subentende-se que cada dígito possui 8 pixels de largura. Como uma variável possui o tamanho máximo de 6 dígitos, podemos criar uma picture com 48 pixels de largura. A altura da imagem será a mesma da primeira picture, ou seja, 11 pixels.
Depois vem CopyPalette(). Ela vai pegar a paleta de cores de uma picture já existente e vai copiar a ordem das cores para a Picture que você escolheu. No código acima você pegou a paleta da picture 1 e copiou para a picture 2. Handle é um tipo de variável própria que armazena imagens. Da mesma forma que tem variáveis com números ou strings, no Destiny o Handle serve especialmente para armazenar imagens na AuroraSheet. Então esse código pede uma variável como parâmetro e você dá uma variável do tipo Handle, ou seja, uma imagem para que a função de passar as cores de uma imagem para a outra seja realizada corretamente.
Para finalizar a criação da Picture, usamos FlushPalette() para o Destiny aplicar a nova paleta copiada para a picture desejada. ela vai atualizar a formação de cores daquela imagem.
Depois disso, usamos no evento a função Clear Timer para apagar o evento que você não vai mais precisar que ele fique acionando novamente.
O evento de inicialização ficou assim:
s2UnGBD.png



[font=tahoma, geneva, sans-serif]Passo 2 — Recortando uma picture para a outra[/font]

Com as 2 pictures declaradas, vamos agora ao processo de mostrar o números na tela. O procedimento que faremos pode parecer confuso no começo porém verá que não há mistério a se fazer. O que será feito é pegar o valor da variável, transformá-la em texto, capturar dígito por dígito e recortar somente a parte do dígito da picture 1 colando na picture 2. Só que como esse procedimento será repetido o tempo todo por ele ter que atualizar o valor na tela constantemente, vamos fazer isso em um Evento Comum no tipo Processo Paralelo.
Nesse evento, terá apenas um comando de comentário com o seguinte código:
Código:
$
a[1] = Convert.String(v[3]);
if(!Picture[2].AuroraSheet.IsEmpty())
  for(v[1] = 0; v[1] < String.Length(a[1]); v[1]++)
    v[2] = String.Ord(a[1],v[1])-0x30;
    Picture[2].CopyRect(v[1]*8,0,1,v[2]*8,0,v[2]*8+8,11);
  next;
endif;
De acordo com a explicação no início deste passo, pegamos uma variável a convertemos para string, consequentemente armazenando essa conversão em uma String do Destiny que é separada pela variável a[]. Só para reforçar:
  • a = string (vem do termo Ansi-Strings)
  • d = dwords (números com um armazenamento maior que as variáveis do RM)
  • f = floats (números decimais)
  • v = variáveis do RPG Maker
  • s = switches
Neste tutorial, usamos 3 variáveis e 1 string:

a[1] = Variável convertida para string;

v[1] = Usada para indicar a posição do dígito da string;
v[2] = Dígito da String;
v[3] = Variável que será mostrada na tela.

Depois disso usaremos uma condição onde ela só acontecerá se a Picture 2 tiver sua AuroraSheet armazenada, ou seja, se há alguma imagem nessa picture (se há alguma folha com a imagem dentro daquela gaveta) para que possamos recortar as pictures. Então usamos a condição !Picture[2].AuroraSheet.IsEmpty(). Como essa propriedade é usada para verificar uma condição, podemos usar o prefixo ! para inverter a lógica da condição. Quando sem ! ele verifica se a AuroraSheet está vazia, com ! ela verifica se a AuroraSheet NÃO está vazia, ou seja, a condição será confirmada se tiver alguma imagem armazenada na Picture 2.
Continunando, criaremos um loop do tipo for.
Código:
for(início do loop, condição para o loop acontecer, novo valor para repetir o loop)
Interpretando: quando o loop começa, ele mudará o valor de v[1] para 0, o segundo parâmetro diz que o loop acontece enquanto v[1] for menos que String.Length(a[1]) e o terceiro parâmetro vai somar v[1] por 1. Lembre-se que v[1]++ é a mesma coisa que v[1] += 1, que nem na linguagem C++. Quando v[1] passar do valor do String.Length(a[1]), o loop termina e o código continua. String.Length() serve para encontrar a quantidade de caracteres da string selecionada no parâmetro (no caso, a[1]). Nesse caso, estamos usando v[1] para indicar cada dígito da string, ou seja, o loop vai acontecer até v[1] capturar todos os dígitos daquela string.
Iniciando o loop, vamos capturar dígito por dígito e mandando o valor do dígito para uma variável, que será v[2]. Então usamos a propriedade Ord(string,posição da string) para capturar o dígito de acordo com o mapa de caracteres do Windows. O primeiro parâmetro vai escolher a string que vamos usar e o segundo parâmetro vai capturar a posição da string que escolhemos a variável que está sendo utilizada no loop. Daí subtraimos por 0x30 para poder sobrar o número do dígito, já que o número 0 fica posicionado em 0x30 do mapa. Por exemplo: para capturar o número 5. No mapa, o 5 está em 0x35, subtraindo por 0x30, teremos o número 5. Você pode testar isso no Mapa de Caracteres do Windows. Vá em Iniciar\Acessórios\Ferramentas do Sistema\, abra o mapa de veja você mesmo:
l7xrI2E.png

Vale lembrar que o mapa de caracteres trabalha com o sistema de numeração hexedecimal. Para que o Destiny reconheça que estamos trabalhando com número hexadecimal, usamos o prefixo 0x nos números.

Agora vamos enfim para a parte em que recortaremos as pictures para montar o contador, já que sabemos como fazer o sistema reconhecer os números da variável. Com isso chamamos a função CopyRect(x,y,Picture-Id,esquerda,topo,direita,fundo), que serve para recortar um pedaço uma picture e cola em cima de uma outra picture. Com os parâmetros você vai montar um retângulo na picture e colar esse retângulo na posição que você também vai escolher. Escolhemos uma picture que vai receber o recorte, dentro dos parâmetros faremos o recorte considerando o código abaixo:

Código:
$
Picture[2].CopyRect(v[1]*8,
                    0,
                    1,
                    v[2]*8,
                    0,
                    v[2]*8+8,
                    11
                   );
Em4Pcks.png

Daí é só fechar o loop usando o next e fecha a condição que verifica a existência da picture com endif.


Pronto!
Temos um sistema de contador na tela, mesmo complexo, é um sistema otimizado. Muito diferente de incluir números e dividir com variáveis e encher de condições para colocar uma picture, coisa que tomaria muito tempo e estresse da parte do programador, uma vez que com Destiny pode ser muito mais rápido e muito simples.
É óbvio que essas funções que passamos aqui não é feito somente para este caso. Podemos recortar pictures também para formar textos, big charsets ou até fazer animações e efeitos com essas funções. Esse tutorial é apenas o começo para desfrutar a utilidade dos códigos para mais pra frente vocês possam criar coisas mais trabalhosas baseando-se nas funções trabalhadas. Vale lembrar que isso não é quase nada do que o Destiny oferece a você. Ainda temos muita coisa pra conhecer desta ferramenta maravilhosa!
Caso queira conferir melhor como funciona o sistema, disponibilizo aqui a demo deste tutorial. Vocês podem baixar clicando aqui.

Espero que tenha sido útil o meu tutorial, estava meio enferrujado no RPG Maker, então ainda não to naquele meu ritmo de 2013 ainda onde fazia tutoriais freneticamente, estou voltando e isso aqui é só o começo do que eu tenho planejado daqui para frente aqui no fórum, inclusive nesta área que é aquela que tenho mais afinidade na comunidade.

Até o próximo tutorial! o/
 
Voltar
Topo Inferior