Aldeia RPG

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

Suporte ao desenvolvimento de jogos


+3
Valentine
renan-vieira
Paulo Soreto
7 participantes

    [Tutorial] A classe Sprite

    Paulo Soreto
    Paulo Soreto
    Lenda
    Lenda


    Mensagens : 1980
    Créditos : 367

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

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


    _________________
    sprite - [Tutorial] A classe Sprite FwYnoXI
    renan-vieira
    renan-vieira
    Colaborador
    Colaborador


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

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

    sprite - [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:^.^:
    Valentine
    Valentine
    Administrador
    Administrador


    Medalhas : sprite - [Tutorial] A classe Sprite ZgLkiRU
    Mensagens : 5345
    Créditos : 1164

    sprite - [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
    GallighanMaker
    GallighanMaker
    Colaborador
    Colaborador


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

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

    sprite - [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.


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


    Mensagens : 522
    Créditos : 74

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

    sprite - [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


    _________________
    sprite - [Tutorial] A classe Sprite EiLDYSs
    Paulo Soreto
    Paulo Soreto
    Lenda
    Lenda


    Mensagens : 1980
    Créditos : 367

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

    sprite - [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.


    _________________
    sprite - [Tutorial] A classe Sprite FwYnoXI
    †AnjoFael†
    †AnjoFael†
    Experiente
    Experiente


    Mensagens : 408
    Créditos : 67

    sprite - [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!


    _________________

    sprite - [Tutorial] A classe Sprite 34g0n7q
    sprite - [Tutorial] A classe Sprite CczuLhS
    Facebook
    Gabriela D.
    Gabriela D.
    Diva
    Diva


    Mensagens : 73
    Créditos : 12

    sprite - [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:

    Conteúdo patrocinado


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

    Mensagem por Conteúdo patrocinado


      Data/hora atual: Qui Nov 21, 2024 10:13 am