Isto é uma pré-visualização de um tema em Hitskin.com
Instalar o tema • Voltar para a ficha do tema
[Tutorial] A classe Sprite
+3
Valentine
renan-vieira
Paulo Soreto
7 participantes
Aldeia RPG :: RPG Maker :: Rpg Maker XP :: Tutoriais
Página 1 de 1
[Tutorial] A classe Sprite
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.
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:
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:
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:
O visible é outro auto-explicativo, define se a sprite está visível ou não por meio de uma variável do tipo bool:
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.
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?:
- Quando digo "instanciar uma classe", quero dizer que um foi criado um objeto daquela determinada classe, ou seja, um objeto cujo os métodos, variáveis e demais são de uma determinada 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:
@sprite.bitmap = RPG::Cache.picture('fundo')
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:
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:
@sprite.opacity = 200
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:
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.
_________________
Re: [Tutorial] A classe Sprite
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/
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.
Re: [Tutorial] A classe Sprite
muito bom o tutorial, + 1 cred agora entendo um pouco mais como manipular isso.
_________________
using C# and import Python developer || Expert in Unity Engine IDE. || 2D pixel games.
Re: [Tutorial] A classe Sprite
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
+ 1 crédito
_________________
Adanrox- Diva
- Mensagens : 522
Créditos : 74
Ficha do personagem
Nível: 1
Experiência:
(0/0)
Vida:
(30/30)
Re: [Tutorial] A classe Sprite
Obrigado.
O tutorial não ensina a desenhar algo na tela, só exemplifica e explica os métodos da classe sprite que muitos desconhecem.
O tutorial não ensina a desenhar algo na tela, só exemplifica e explica os métodos da classe sprite que muitos desconhecem.
_________________
Re: [Tutorial] A classe Sprite
Perfeito Paulo!
Seria legal ver outros tutoriais como esse!
_________________
Facebook
†AnjoFael†- Experiente
- Mensagens : 408
Créditos : 67
Re: [Tutorial] A classe Sprite
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:
- Código:
class Teste_4 < Game_Player
def jogo
aleatório = rand(3)
if aleatório == 0
print "BOM"
return jogo unless Input.press?(Input::C)
elsif
aleatório == 1
print "RUIM"
return jogo unless Input.press?(Input::C)
elsif
aleatório == 2
print "EXCELENTE"
return jogo unless Input.press?(Input::C); end; end; end
a = Teste_4.new
a.jogo
Gabriela D.- Diva
- Mensagens : 73
Créditos : 12
Tópicos semelhantes
» [TFE] Mudando a sprite de cada classe
» Apêndice 4 - Funções da Classe Sprite e Plane
» [Tutorial]Sistema de classe igual ao ragnarok
» [Tutorial]Simples tutorial de bloquear areá por grupo
» [PEDIDO] Sistema de descrição de classe / Habilidades por Classe
» Apêndice 4 - Funções da Classe Sprite e Plane
» [Tutorial]Sistema de classe igual ao ragnarok
» [Tutorial]Simples tutorial de bloquear areá por grupo
» [PEDIDO] Sistema de descrição de classe / Habilidades por Classe
Aldeia RPG :: RPG Maker :: Rpg Maker XP :: Tutoriais
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos