[Tutorial] A classe Sprite Hitskin_logo Hitskin.com

Isto é uma pré-visualização de um tema em Hitskin.com
Instalar o temaVoltar para a ficha do tema

Aldeia RPG
Gostaria de reagir a esta mensagem? Crie uma conta em poucos cliques ou inicie sessão para continuar.

[Tutorial] A classe Sprite

+3
Valentine
renan-vieira
Paulo Soreto
7 participantes

Ir para baixo

[Tutorial] A classe Sprite Empty [Tutorial] A classe Sprite

Mensagem por Paulo Soreto Qui maio 08, 2014 12:07 am

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:
[Tutorial] 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?:
[Tutorial] A classe Sprite IyM5bnq
Agora devemos instanciar a classe Sprite e definir seus principais "atributos" que seriam X, Y e Z.
[Tutorial] 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:
[Tutorial] 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:
[Tutorial] 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:
[Tutorial] 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.
[Tutorial] 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:
@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:
[Tutorial] 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.
[Tutorial] 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:
[Tutorial] A classe Sprite 1WtyiOZ
E o resultado foi:
[Tutorial] 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:
[Tutorial] A classe Sprite InDJphO
E o resultado, como eu falei, será:
[Tutorial] 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:
[Tutorial] A classe Sprite Cc7HEin
E o resultado será:
[Tutorial] 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:
[Tutorial] A classe Sprite TqNbNJT
O resultado será este:
[Tutorial] 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:
[Tutorial] A classe Sprite P0cqYqI
E o resultado será:
[Tutorial] 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:
@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:
@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:
[Tutorial] A classe Sprite BLIjrq0
A imagem começaria a ser desenhada a partir do x 32 e y 32, como no print:
[Tutorial] 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.

_________________
[Tutorial] A classe Sprite FwYnoXI
Paulo Soreto
Paulo Soreto
Lenda
Lenda

Mensagens : 1980
Créditos : 367

Ficha do personagem
Nível: 1
Experiência:
[Tutorial] A classe Sprite Left_bar_bleue0/0[Tutorial] A classe Sprite Empty_bar_bleue  (0/0)
Vida:
[Tutorial] A classe Sprite Left_bar_bleue30/30[Tutorial] A classe Sprite Empty_bar_bleue  (30/30)

https://www.aldeiarpg.com/

Ir para o topo Ir para baixo

[Tutorial] A classe Sprite Empty Re: [Tutorial] A classe Sprite

Mensagem por renan-vieira Qui maio 08, 2014 6:55 am

Alguns já conhecia mas tinhas uns que eu precisava que eu não fazia nem ideia do que era e.e , agora eu sei e.e

_________________
Secti MaInE - Mapa de Informações Estratégicas do Rio de Janeiro.
http://maine.rj.gov.br/

eMuseu - Museu Nacional do Esporte.
https://www.emuseudoesporte.com.br/

Memórias - Memórias de Oswaldo Cruz(App Hibrido Ionic).
Link do APP na playstore

Projetos citados acima foram produzidos com equipes no qual eu participei como programador Frontend e UI Design/UX Design.



Skype: Renan.vieiraa 
Facebook: /renandesign 
E-mail: renanvieira.webdesign@gmail.com
ou entre em contato via MP:^.^:
renan-vieira
renan-vieira
Colaborador
Colaborador

Medalhas : [Tutorial] A classe Sprite ZgLkiRU
Mensagens : 652
Créditos : 254

Ficha do personagem
Nível: 1
Experiência:
[Tutorial] A classe Sprite Left_bar_bleue0/50[Tutorial] A classe Sprite Empty_bar_bleue  (0/50)
Vida:
[Tutorial] A classe Sprite Left_bar_bleue30/30[Tutorial] A classe Sprite Empty_bar_bleue  (30/30)

Ir para o topo Ir para baixo

[Tutorial] A classe Sprite Empty Re: [Tutorial] A classe Sprite

Mensagem por Valentine Qui maio 08, 2014 7:31 am

Belo tutorial soreto, + 1 crédito
Valentine
Valentine
Administrador
Administrador

Medalhas : [Tutorial] A classe Sprite ZgLkiRU
Mensagens : 5343
Créditos : 1164

https://www.aldeiarpg.com/

Ir para o topo Ir para baixo

[Tutorial] A classe Sprite Empty Re: [Tutorial] A classe Sprite

Mensagem por GallighanMaker Qui maio 08, 2014 11:48 am

muito bom o tutorial, + 1 cred agora entendo um pouco mais como manipular isso.

_________________
[Tutorial] A classe Sprite 8dVK0ku
using C# and import Python developer || Expert in Unity Engine IDE. || [Tutorial] A classe Sprite 769_heart 2D pixel games.
GallighanMaker
GallighanMaker
Colaborador
Colaborador

Medalhas : [Tutorial] A classe Sprite ZgLkiRU
Mensagens : 985
Créditos : 102

Ficha do personagem
Nível: 1
Experiência:
[Tutorial] A classe Sprite Left_bar_bleue0/0[Tutorial] A classe Sprite Empty_bar_bleue  (0/0)
Vida:
[Tutorial] A classe Sprite Left_bar_bleue30/30[Tutorial] A classe Sprite Empty_bar_bleue  (30/30)

https://kingsland-online.com/

Ir para o topo Ir para baixo

[Tutorial] A classe Sprite Empty Re: [Tutorial] A classe Sprite

Mensagem por Adanrox Qui maio 08, 2014 12:42 pm

Parabéns pelo o ótimo tutorial, mas esse tutorial ensinando a desenhar ou colocar algo na tela é de funcionalidade de iniciante. Vai ajudar muitas pessoas que queira aprender sobre esse assunto!
+ 1 crédito

_________________
[Tutorial] A classe Sprite EiLDYSs
Adanrox
Adanrox
Diva
Diva

Mensagens : 522
Créditos : 74

Ficha do personagem
Nível: 1
Experiência:
[Tutorial] A classe Sprite Left_bar_bleue0/0[Tutorial] A classe Sprite Empty_bar_bleue  (0/0)
Vida:
[Tutorial] A classe Sprite Left_bar_bleue30/30[Tutorial] A classe Sprite Empty_bar_bleue  (30/30)

Ir para o topo Ir para baixo

[Tutorial] A classe Sprite Empty Re: [Tutorial] A classe Sprite

Mensagem por Paulo Soreto Qui maio 08, 2014 12:48 pm

Obrigado.
O tutorial não ensina a desenhar algo na tela, só exemplifica e explica os métodos da classe sprite que muitos desconhecem.

_________________
[Tutorial] A classe Sprite FwYnoXI
Paulo Soreto
Paulo Soreto
Lenda
Lenda

Mensagens : 1980
Créditos : 367

Ficha do personagem
Nível: 1
Experiência:
[Tutorial] A classe Sprite Left_bar_bleue0/0[Tutorial] A classe Sprite Empty_bar_bleue  (0/0)
Vida:
[Tutorial] A classe Sprite Left_bar_bleue30/30[Tutorial] A classe Sprite Empty_bar_bleue  (30/30)

https://www.aldeiarpg.com/

Ir para o topo Ir para baixo

[Tutorial] A classe Sprite Empty Re: [Tutorial] A classe Sprite

Mensagem por †AnjoFael† Qui maio 08, 2014 10:05 pm

Perfeito Paulo!
Seria legal ver outros tutoriais como esse!

_________________

[Tutorial] A classe Sprite 34g0n7q
[Tutorial] A classe Sprite CczuLhS
Facebook
†AnjoFael†
†AnjoFael†
Experiente
Experiente

Mensagens : 408
Créditos : 67

Ir para o topo Ir para baixo

[Tutorial] A classe Sprite Empty Re: [Tutorial] A classe Sprite

Mensagem por Gabriela D. Sex maio 09, 2014 4:32 pm

Obrigada por nos ensinar. Está tudo bem explicado. Eu vou ler depois. Estou aprendendo Ruby, e já sei um pouco. Como por exemplo isto que fiz (Uns testes meio maluco)
Spoiler:
Gabriela D.
Gabriela D.
Diva
Diva

Mensagens : 73
Créditos : 12

Ir para o topo Ir para baixo

[Tutorial] A classe Sprite Empty Re: [Tutorial] A classe Sprite

Mensagem por Conteúdo patrocinado


Conteúdo patrocinado


Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

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