Compartilhe
Ver o tópico anteriorIr em baixoVer o tópico seguinte
avatar
Holves
Aprendiz
Mensagens : 39
Data de inscrição : 22/04/2016
Idade : 21
Localização : Manaus

A classe Sprite

em Sex Abr 22, 2016 4:50 pm
Reputação da mensagem: 100% (2 votos)
Bom, esse tópico será totalmente voltado ao uso da classe Sprite no RPG Maker XP.
Mas enfim, o que exatamente seria uma Sprite? Quando digo "Sprite" não refiro a uma imagem bidimensional, a classe Sprite no RPG Maker é utilizada como um objeto gráfico, podendo manipula-lo da forma que desejar. Ou seja, quando quero desenhar uma hud na tela eu utilizo uma Sprite, pra desenhar um personagem, animação ou qualquer outra envolvida com Gráficos estarei utilizando esta classe.
Agora que sabemos o conceito (de forma simples e didática), vamos testar... Como criamos uma Sprite?
O primeiro passo é criar um novo script e uma nova classe:

Pronto, depois disso basta criar o método initialize, que é o primeiro método executado a partir do momento que a classe é instanciada.
O que é instanciar uma classe?:

Agora devemos instanciar a classe Sprite e definir seus principais "atributos" que seriam X, Y e Z.

Se testarmos o projeto não veremos nada de diferente, afinal ainda não fizemos praticamente nada.
Acho que já perceberam, mas irei enfatizar, a classe Sprite não possui parâmetros como Width e Height (largura e altura), esses são parâmetros do Bitmap.
Mas o que é um bitmap? Neste momento, não me refiro as imagens no formato Bitmap (bmp) e sim a classe Bitmap que é um objeto usado para trabalhar com imagens definidas por dados de pixel. Não irei me aprofundar nisso neste tutorial.
Vamos criar um bitmap para nossa sprite, isso é bem simples, basta definir a variável bitmap da classe Sprite como um objeto da classe Bitmap, ou seja:

Os dois parâmetros iniciais da classe Bitmap correspondem a largura e altura.
Ok, ainda não temos nada praticamente, então criaremos um método para desenhar o que quisermos na tela (ou melhor, no bitmap), este método é o refresh. Mas porque refresh? Bem, o método refresh está presente na maioria das classes do RPG Maker XP e por padrão, não por obrigação, também optei por utilizar um método com este nome.
O que este método faz? Bom, ele é responsável por limpar o bitmap e redesenhar tudo outra vez. Lembre-se, isso não é obrigatório, posso desenhar uma imagem ou algo na tela apenas uma vez no jogo todo e sendo assim não precisarei atualizar o bitmap novamente (limpar e desenhar).
O código ficaria mais ou menos assim:

Explicando o que fiz: No final do método initialize eu chamo o método refresh que já havia sido criado. A primeira linha, como já expliquei e como já se auto-explica limpa o bitmap.
Mas o que iremos desenhar? Bom, a primeira imagem que encontrei foi essa:

Caso queiram, podem utilizar a mesma para os testes. Mas vejamos: As dimensões dessa imagem não são 100x50 como declarei no momento em que o bitmap é instanciado, então teremos que mudar essas dimensões para a padrão da imagem que é 96x96.
Feito isso, irei utilizar o método blt do bitmap para desenhar essa imagem (como disse, não irei me aprofundar na classe Bitmap hoje).
Ps: Coloquem a imagem na pasta picture.

Pode-se notar que acrescentei uma linha no método initialize, a linha 8, ela é responsável por carregar a imagem em um bitmap (confuso mas sim).
Na linha 14 utilizei o método blt (como disse) para desenhar a imagem, porém há outra forma de obter o mesmo resultado com menos linhas que seria declarar o bitmap da classe Sprite como a imagem carregada:
Código:
Código:
@sprite.bitmap = RPG::Cache.picture('fundo')

Eu prefiro utilizar o método atual, pois assim posso adicionar algumas coisas no bitmap.
Um outro método que temos que criar é o dispose, que irá liberar o objeto da memória:

Pronto, agora irei criar uma edição na classe Scene_Map para que seja criada uma instância da nossa classe e consequentemente que seus métodos sejam executados. Peço que apenas copiem esse trecho.

Esse novo trecho deve ser adicionado ao fim da classe SpriteTeste. Agora podem testar XD
Esse foi meu resultado:
Spoiler:
Se não obtiveram o mesmo recomendo que releiam o tópico e procurem onde erraram.
Agora enfim iremos começar a testar os métodos da classe Sprite.
O primeiro que iremos ver é o zoom. Nem preciso explicar o que faz, certo?
Então, logo acima de "refresh" no método initialize iremos adicionar um código para dar zoom, tanto no x quanto no y:

E o resultado foi:

Ou seja, o zoom_x/y da um zoom na imagem '-' (avá?!)
Outro método legal é o color. Ele preenche toda a sprite com a cor determinada, vamos testar?
No código, ficará assim:

E o resultado, como eu falei, será:

Mas digamos que eu não queira deixar a imagem toda vermelha e sim mudar o tom para um tom avermelhado, o que eu faço? Use o método tone, da seguinte forma:

E o resultado será:

Pra quem não sabe, os três parâmetros que entram na classe Color e Tone corresponder ao RGB, ou seja: As cores Red (vermelho), Green (verde) e Blue (azul), há também um parâmetro extra que é o Alpha que corresponde a opacidade (não irei mostrar hoje).
A classe Sprite tem um outro parâmetro incrível que é o angle (ângulo), podemos definir o ângulo que a imagem será desenhada (mais ou menos isso, na verdade é o ângulo da sprite).
Se definirmos o ângulo como 40, como na imagem abaixo:

O resultado será este:

Outro método muito útil é o src_rect, ou seja, source rect, que seria basicamente o retângulo de corte da sprite, podemos utiliza-lo da seguinte forma:

E o resultado será:

Explicando: O retângulo que definimos (X: 0, Y: 0, Largura: 32, Altura: 32) corta a sprite naquelas dimensões. Não sou bom com explicações :S
Temos também o parâmetro opacity, que como o próprio nome já fala define a opacidade da sprite, podemos usar:
Código:
Código:
@sprite.opacity = 200

A sprite ficará meio transparente. Não vejo necessidade de expor uma print screen disso kkk
O visible é outro auto-explicativo, define se a sprite está visível ou não por meio de uma variável do tipo bool:
Código:
Código:
@sprite.visible = true


E por último temos o ox e oy, eles são, de uma forma simples as coordenadas de ínicio da sprite, caso definirmos ox e oy como 32 como na imagem abaixo:

A imagem começaria a ser desenhada a partir do x 32 e y 32, como no print:

Enfim, foi isso, espero que tenham gostado, não sei se expliquei bem ou não, afinal como mencionei várias vezes no decorrer do tutorial eu não sou bom com explicações, mas dei o meu melhor. Caso tenham alguma dúvida comente aqui no tópico que irei responder.
Eu tentei explicar os diversos parâmetros da classe Sprite neste tutorial, no próximo pretendo falar sobre o Bitmap.
avatar
BabyLoves
Administrador
Administrador
Mensagens : 96
Data de inscrição : 10/04/2016
Idade : 22
Localização : Armia
http://www.facebook.com/wydKandK/

Re: A classe Sprite

em Sab Abr 23, 2016 11:32 pm
Interessante, bem detalhado e com imagens.
+Reputado.

Atenciosamente,
BabyLoves D.
avatar
Kincy
Fundador
Fundador
Mensagens : 216
Data de inscrição : 31/03/2016
Idade : 26
http://www.propixelforum.com

Re: A classe Sprite

em Dom Abr 24, 2016 12:23 am
Bom tutorial, bem detalhado, parabéns por postar e ajudar a movimentar essa área que estava um pouco parada. +Reputação.


Criado com muito 
avatar
Teteu
Experiente
Mensagens : 81
Data de inscrição : 06/04/2016

Re: A classe Sprite

em Dom Abr 24, 2016 12:33 am
Cara gostei do seu tuto em! Muito bom +Rep para representar


Um por todos, e todos por um!
avatar
Zer0
Ocasional
Mensagens : 100
Data de inscrição : 03/04/2016

Re: A classe Sprite

em Dom Abr 24, 2016 10:28 am
Muito legal mesmo, gostei, ainda bem ue você está movimentando a área, prabéns +Rep
Conteúdo patrocinado

Re: A classe Sprite

Ver o tópico anteriorVoltar ao TopoVer o tópico seguinte
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum