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:

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.

Aula AnteriorPróxima Aula

FLWS!

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

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

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

Alex sempre nos surpreendendo...

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

Aguardo a proxima aula

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

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.

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

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!

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

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!

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