#DGM Aula 03 - Sprites

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

#DGM Aula 03 - Sprites

Mensagem por Alex FC em Dom 07 Fev 2010, 09:37

DESVENDANDO O  GAME MAKER



Aula 03 - Sprites



(Atualizado 08/02/2015)

Eae pessoal! Tranquilo?

Hoje estarei postando uma aula extensa sobre Sprites, mostrando como manipula-las com maestria no Game Maker.

Vamos começar criando uma nova sprite. Para isso clique com o botão direto do mouse na pasta Sprites e selecione a opção Create Sprite. Ou se preferir clique no Pacman vermelho na barra de menus. Com isso uma janela será aberta:



Agora vamos dar um novo nome à nossa sprite. Na caixa Name apague o sprite0 e escreva spr_player.

Para abrir uma sprite clique em Load Sprite e escolha a imagem abaixo:



Note que logo após carregarmos a imagem no GM, abaixo do botão Edit Sprite aparecem as seguintes informações:

Width: Largura em pixels.

Height:
Altura em pixels.

Number of subimages: Caso a imagem seja animada aqui será mostrado o numero de imagens que forma a animação.

Origin: É o eixo (x,y) da sprite, por padrão é 0. Esse eixo é muito importante quando falamos em rotação e escalonamento de Sprites.

Por isso há o botão center, para que possamos centralizar o eixo. Na animação abaixo você entenderá a o que é um eixo:

Rotação:


O circulo vermelho indica o eixo (x,y). O eixo do quadrado da esquerda é (0,0), já o da direita é (16,16).

O botão Edit Sprite abre o editor de Sprites do GM. Ele é super intuitivo e fácil de se mecher. Não necessita de uma uma explicação mais elaborada.

Na seção ao lado temos Collision Checking, que é a forma como a sprite detectará a colisão:

Precise Collision Checking (Checagem de colisão precisa): Quando ativa checa todos os pixels não transparentes da imagem. E quando desativada usa um retângulo para detectar a colisão.

Separate Collision Masks (Mascaras de colisão separadas): Habilita que cada subimagem da Sprite tenha sua própria colisão.

Logo abaixo temos o botão Modify Mask, onde configuramos as colisões da sprite.

Caso queira aprender a configurar as colisões abra o Spoiler abaixo:
CLIQUE AQUI:



1: Escolhe a subimagem. Caso só exista uma essa opção não aparece;

2: Mostra a máscara de colisão em forma de sombra, ou seja toda a região sombreada é a área de colisão;

3: Separate Collision Masks (Mascaras de colisão separadas) é ativada para criar uma área de colisão para cada subimagem. Alpha Tolerance é o valor de transparencia para que o pixel seja desconsiderado da colisão;

4: Bounding Box (Caixa de delimitação) é a área da sprite a ser considerada na colisão. Que pode ser:

- Automatic (Automática): cria uma área de delimitação automaticamente;
- Full Imagem (Imagem inteira): usa toda imagem como área de delimitação;
- Manual: configura manualmente a área de delimitação.

5: Shape é o molde de área de demilitação (que corresponde à área sombreada), pode ser:

- Precise (Preciso): usa todos os pixels com Alpha Tolerance acima do valor dado como área de colisão;
- Rectangle (Retângulo): área de demilitação em forma de retângulo;
- Disk (Disco): área de demilitação em forma de disco;
- Diamond (Diamante ou lozango): área de demilitação em forma de lozango;

Finalizamos essa parte de importar a imagem para o nosso jogo. Agora vamos aos códigos (funções e variáveis) que nos ajudaram a manipular a imagem durante o jogo.

VARIÁVEIS:


image_alpha: modifica a transparência da sprite (0, totalmente transparente; 1, totalmente visivél);
image_angle: modifica a rotação da sprite em graus (0 à 359 graus);
image_blend: cor da sprite (c_red, vermelho);
image_index: subimagem atual (0 à número total de subimagens-1);
image_number: número total de subimagens;
image_speed: velocidade de animação;
image_xscale:
Escalonamento horizontal da sprite (1, tamanho normal; 2 dobro to
tamanho; 0.5 metade do tamanho; -1 inverte a sprite na horizontal);
image_yscale:
Escalonamento vertical da sprite (1, tamanho normal; 2 dobro to
tamanho; 0.5 metade do tamanho; -1 inverte a sprite na vertical);

Exemplos:

Código:
//transparencia da imagem pela metade
image_alpha=0.5
Código:
//Guarda a rotação da imagem na variavel texto
texto="A rotação da sprite é: "+string(image_angle)
Código:
//Muda a sprite para a sprite chamada "spr_direita"
sprite_index=spr_direita

Vamos expandir a explicação sobre as variáveis image_xscale e image_yscale. Elas mudam o tamanho da nossa sprite. Elas podem ser usadas para um ótimo propósito que é reduzir o número de sprites que usamos para criar nosso jogo. Normalmente quando criamos um personagem que anda tanto para esquerda quanto para direita, nós criamos uma imagem para cada lado, é a mesma imagem só que invertida. Mas se quisermos, podemos usar apenas uma imagem e inverte-la usando image_xscale. 1 seria a imagem na posição normal. -1 seria ela invertida. Exemplo:

Código:
//Se apertar a seta direita
if keyboard_check(vk_right)
{
    //muda para sprite anda
    sprite_index=spr_anda
    
    //deixa o tamanho horizontal normal
    image_xscale=1
}

//Se apertar a seta esquerda
if keyboard_check(vk_left)
{
    //muda para sprite anda
    sprite_index=spr_anda
    
    //deixa o tamanho horizontal invertido
    image_xscale=-1
}
Isso também depende do eixo (x,y) da imagem que vimos no inicio da aula. Logo, se quisermos inverter a imagem sem que ela "saia do lugar" devemos centralizar o eixo x. Para entender melhor olhe a animação abaixo:

Escala


O circulo vermelho indica o eixo (x,y). O eixo do quadrado da esquerda é (16,0), já o da direita é (16,0).

À direita o eixo x está 0, já à esquerda o eixo x está centralizado. Os círculos vermelhos simbolizam o eixo (x,y). Veja que nesses exemplos só alteramos o eixo x logo, o mesmo se aplica ao eixo y.

FUNÇÕES e VARIÁVEIS:



Essas cinco variáveis retornam valores em relação a sprite que está sendo utilizada pelo objeto no momento.

Exemplos:

Código:
//Se a sprite spr_carro existir
if sprite_exists(spr_carro)
{
    //A sprite spr_carro é deletada e não poderá mais ser usada durante o jogo
    sprite_delete(spr_carro)
}
Código:
//grava a largura da sprite na variável ll
ll=sprite_width

Enfim mais uma aula chega ao fim. Espero vocês na próxima. Vlw?

Perguntas? Só postar nos comentários.

Próxima aula: Backgrounds.



FLWS!


Última edição por Alex FC em Dom 22 Fev 2015, 20:25, editado 18 vez(es) (Razão : Atualização)

Alex FC

Ranking : Nota A
Número de Mensagens : 2503
Idade : 23
Data de inscrição : 20/12/2008
Notas recebidas : B A
Reputação : 174
Insignia 1 x 1 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 2
   : 1
   : 1

http://redscreensoft.blogspot.com

Voltar ao Topo Ir em baixo

Re: #DGM Aula 03 - Sprites

Mensagem por Gsa2134 em Dom 07 Fev 2010, 11:14

mt bom o tuto mas lembre se d colocar q eh algumas coisas pra PRO eskeceu dnovo hein?
flws

Gsa2134

Número de Mensagens : 229
Idade : 20
Data de inscrição : 27/01/2010
Reputação : 0
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 0
   : 0
   : 0

Voltar ao Topo Ir em baixo

Re: #DGM Aula 03 - Sprites

Mensagem por Mystery_boy_maker em Dom 07 Fev 2010, 11:34

Muito boa a aula ... cara parabens . grande AlexFC de novo
uma otima explicação

Mystery_boy_maker

Número de Mensagens : 908
Idade : 23
Data de inscrição : 25/01/2010
Reputação : 16
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 0
   : 0
   : 1

http://recursos-mania.forumeiros.com

Voltar ao Topo Ir em baixo

Re: #DGM Aula 03 - Sprites

Mensagem por lucas mendes em Dom 07 Fev 2010, 17:05

Agora entendi pra que algumas engines temo mask...
boa aula Alex FC.. Very Happy

lucas mendes

Número de Mensagens : 416
Idade : 21
Data de inscrição : 04/05/2009
Reputação : 0
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   :
   :
   : 1

Voltar ao Topo Ir em baixo

Re: #DGM Aula 03 - Sprites

Mensagem por Suadao em Dom 07 Fev 2010, 18:10

Alex sempre nos surpreendendo...

Muito bom, bem elaborado, com imagens, bem explicado...

Aguardo a proxima aula Smile

Suadao

Número de Mensagens : 1035
Idade : 26
Data de inscrição : 22/11/2009
Reputação : 4
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   :
   :
   :

http://www.recursos-mania.forumeiros.com

Voltar ao Topo Ir em baixo

Re: #DGM Aula 03 - Sprites

Mensagem por _riqueikki_ em Seg 08 Fev 2010, 16:55

Os engimes foram os mais dificis para eu criar os jogos de Game Maker,valeu Alex FC

_riqueikki_

Número de Mensagens : 79
Idade : 21
Data de inscrição : 11/01/2010
Reputação : 0
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   :
   :
   :

http://www.essb-nero.blogspot.com

Voltar ao Topo Ir em baixo

Não entendi.

Mensagem por kkwebmaster em Ter 10 Ago 2010, 15:22

Cara to acompanhando suas aulas.E em todas venho compreendendo tudo. Mas nesta aula 15, vc pede pra gente baixar um arquivo é o arquivo é de um executavel, porem você pede pra gente inserir uns codigos no step e tal. mas como eu vou inserir esses codigos no step de um executavel, pq no arquivo so veio ele.

kkwebmaster

Número de Mensagens : 3
Data de inscrição : 30/07/2010
Reputação : 0
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0

Voltar ao Topo Ir em baixo

Re: #DGM Aula 03 - Sprites

Mensagem por Assassino em Qua 01 Set 2010, 17:58

Ajudou bastante Alex pois eu tinha duvida de como funciona os sprites.

Assassino

Número de Mensagens : 390
Idade : 20
Data de inscrição : 13/08/2010
Reputação : 6
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 0
   : 0
   : 0

http://rockstarfamilies.blogspot.com/

Voltar ao Topo Ir em baixo

Re: #DGM Aula 03 - Sprites

Mensagem por Alex FC em Seg 22 Out 2012, 00:07

Aula atualizada - 20/10/12:

- Aula refeita do zero com uma explicação mais simples e objetiva, além de vários exemplos adicionados.

Ps: As próximas aulas serão atualizadas em breve.

FLWS!

Alex FC

Ranking : Nota A
Número de Mensagens : 2503
Idade : 23
Data de inscrição : 20/12/2008
Notas recebidas : B A
Reputação : 174
Insignia 1 x 1 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 2
   : 1
   : 1

http://redscreensoft.blogspot.com

Voltar ao Topo Ir em baixo

Re: #DGM Aula 03 - Sprites

Mensagem por Nivaldo2000 em Seg 04 Fev 2013, 08:43

tenho uma duvida
Código:
 if keyboard_check_direct(change_key_0) {vspeed = -5}
 if keyboard_check_direct(change_key_1) {hspeed = 7sprite_index=sonic_walk_r}
 if keyboard_check_direct(change_key_2) {vspeed = 5}
 if keyboard_check_direct(change_key_3) {hspeed = -7 sprite_index=sonic_walk_l}
esse é o codigo mas eu quero saber como faço para ele para de animar de acordo com o sprite e fazer ele subir com a sprite de conforme a direção que ele olha

Nivaldo2000

Número de Mensagens : 35
Idade : 19
Data de inscrição : 03/02/2013
Reputação : 0
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 0
   : 0
   : 0

Voltar ao Topo Ir em baixo

Re: #DGM Aula 03 - Sprites

Mensagem por Alex FC em Seg 04 Fev 2013, 11:03

Bom, basta usar o mesmo exemplo. Olhe como funciona:
Código:
//Se segurar tecla direita
if keyboard_check (vk_right)
{
    //muda sprite
    sprite_index = spr_direita

    //velocidade de animação
    image_speed = 0.25

    //vai pra direita
    hspeed = 5
}
Usa esse exemplo para as demais direções. Qualquer dúvida, só perguntar.

FLWS!

Alex FC

Ranking : Nota A
Número de Mensagens : 2503
Idade : 23
Data de inscrição : 20/12/2008
Notas recebidas : B A
Reputação : 174
Insignia 1 x 1 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 2
   : 1
   : 1

http://redscreensoft.blogspot.com

Voltar ao Topo Ir em baixo

Re: #DGM Aula 03 - Sprites

Mensagem por Nivaldo2000 em Seg 04 Fev 2013, 19:02

bom tentei adicionar um codigo para quando parar de apertar o botão ele mudar a animação mais acabou n indo só deu pra alterar a velocidade da animação
e eu quero fazer mais ou menos assim ele olha pra > quando aperta up down ou right ele vai com a animação right e quando ele olha para< quando aperta up down ou left ele animasse para left
enquanto niguem respondia fiz isso:
Código:
if keyboard_check (vk_right)
{
    sprite_index = sonic_walk_r

    image_speed = 0.25

    hspeed = 5
   
}

if keyboard_check_released (vk_right)
{
    sprite_index = sonic_stop_r
   
    image_speed = 0.25
   
    hspeed = 0
   
}

if keyboard_check (vk_left)
{
    sprite_index = sonic_walk_l

    image_speed = 0.25

    hspeed = -5
   
}

if keyboard_check_released (vk_left)
{
    sprite_index = sonic_stop_l
   
    image_speed = 0.25
   
    hspeed = 0
   
mas falta o up e down

Nivaldo2000

Número de Mensagens : 35
Idade : 19
Data de inscrição : 03/02/2013
Reputação : 0
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 0
   : 0
   : 0

Voltar ao Topo Ir em baixo

Re: #DGM Aula 03 - Sprites

Mensagem por Conteúdo patrocinado Hoje à(s) 04:01


Conteúdo patrocinado


Voltar ao Topo Ir em baixo

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

 
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum