ProPixel Fórum
Gostaria de reagir a esta mensagem? Crie uma conta em poucos cliques ou inicie sessão para continuar.

Seu mundo de criatividade!


Você não está conectado. Conecte-se ou registre-se

A classe Sprite

5 participantes

Ir para baixo  Mensagem [Página 1 de 1]

1A classe Sprite Empty A classe Sprite Sex Abr 22, 2016 4:50 pm

Holves

Holves
Aprendiz

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:
A classe Sprite YxjhwIJ
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?:
A classe Sprite IyM5bnq
Agora devemos instanciar a classe Sprite e definir seus principais "atributos" que seriam X, Y e Z.
A classe Sprite MrtDhOr
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:
A classe Sprite YV3XgLZ
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:
A classe Sprite L1nwxBO
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:
A classe Sprite UjPXjjY
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.
A classe Sprite SOjIYYQ
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:
A classe Sprite X697l7V
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.
A classe Sprite 513zrCK
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:
A classe Sprite 1WtyiOZ
E o resultado foi:
A classe Sprite 9he82h0
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:
A classe Sprite InDJphO
E o resultado, como eu falei, será:
A classe Sprite G7EGWVr
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:
A classe Sprite Cc7HEin
E o resultado será:
A classe Sprite PrFzhUL
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:
A classe Sprite TqNbNJT
O resultado será este:
A classe Sprite ZATizoN
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:
A classe Sprite P0cqYqI
E o resultado será:
A classe Sprite 8dpOD8k
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 classe Sprite BLIjrq0
A imagem começaria a ser desenhada a partir do x 32 e y 32, como no print:
A classe Sprite Vv00ivA
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.

2A classe Sprite Empty Re: A classe Sprite Sáb Abr 23, 2016 11:32 pm

BabyLoves

BabyLoves
Administrador

Interessante, bem detalhado e com imagens.
+Reputado.

Atenciosamente,
BabyLoves D.

https://www.facebook.com/wydKandK/

3A classe Sprite Empty Re: A classe Sprite Dom Abr 24, 2016 12:23 am

Kincy

Kincy
Fundador

Bom tutorial, bem detalhado, parabéns por postar e ajudar a movimentar essa área que estava um pouco parada. +Reputação.

http://www.propixelforum.com

4A classe Sprite Empty Re: A classe Sprite Dom Abr 24, 2016 12:33 am

Teteu

Teteu
Experiente

Cara gostei do seu tuto em! Muito bom +Rep para representar

5A classe Sprite Empty Re: A classe Sprite Dom Abr 24, 2016 10:28 am

Zer0

Zer0
Ocasional

Muito legal mesmo, gostei, ainda bem ue você está movimentando a área, prabéns +Rep

Conteúdo patrocinado



Ir para o topo  Mensagem [Página 1 de 1]

Permissões neste sub-fórum
Não podes responder a tópicos