Obrigado por visitar a The Game Makers Brasil 😁 Use o fórum de Dúvidas para fazer perguntas. Se está em busca de aprender dê uma olhada nos tutoriais.

[PROG]#DGM Aula 03 - Sprites

Tutoriais, videoaulas, guias e downloads para te ajudar nos estudos.
Avatar do usuário
All-x
Administrador
Administrador
Reações: 8
Mensagens: 620
Localização: Dourados-MS

Contato:

[PROG]#DGM Aula 03 - Sprites

Mensagem por All-x » Sex Abr 29, 2016 4:04 pm

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:

Imagem

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:

Imagem

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:
Imagem

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: Clique para ver o conteúdo
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: Selecionar todos

//transparencia da imagem pela metade
image_alpha=0.5

Código: Selecionar todos

//Guarda a rotação da imagem na variavel texto
texto="A rotação da sprite é: "+string(image_angle)

Código: Selecionar todos

//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: Selecionar todos

//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
Imagem

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:

Imagem

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

Exemplos:

Código: Selecionar todos

//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: Selecionar todos

//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: #DGM Aula 04 - Backgrounds

FLWS!
Começando com o Game Maker? Olhou para assinatura certa!

Imagem

Tutoriais e vídeo aulas de programação! Clique no Banner e confira!

Responder

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado e 7 visitantes