[Aula - 03] Arte gráfica e efeitos especiais para Game Maker

Extremamente rápido e funcional, ds_grid é um dos melhores e mais potentes recursos do GM pois sua utilização pode ter propósitos infinitos desde funcionar como uma simples array, se transformar em um banco de dados ou ser usado para criar efeitos especiais diversos.

Considerações iniciais

Não só a ds_grid como todas as outras datas estruturadas presentes no GM tem uma performance bastante rápida, ou seja, suas funções não pesaram na velocidade de execução do jogo e somado a alta capacidade de controle que você tem, na maioria das vezes elas se mostram muito mais eficientes do que uma array.
Nessa aulas aprenderemos a utilizar ds_grid como um banco de informações para efeitos especiais.

Esse tutorial é de nível avançado, ou seja, e para aqueles bem acostumados com o GM e questões matemáticas simples.


Assim como uma array 2D ou uma "grade" ds_grid funciona como se fosse um plano cartesiano guardando informações baseado em posições, por exemplo:

Código:

ds_grid_set(ds,8,8,10);
ds_grid_set(ds,8,20,20);
ds_grid_set(ds,30,54,30);

Com isso eu defino três valores para 3 posições (x e y) da grid, 8x8 guarda o valor 10, 8x20 guarda o valor 20, 30x54 guarda o valor 30.

Sabendo isso vamos começar.
Abra o GM, crie um objeto chamado objControle.
Nessa parte da aula vamos desenhar uma grade de círculos e colori-los com o mouse.
No evento Create vamos definir um fator para se trabalhar com as posições.

Código:

fator = 20;

Vamos desenhar círculos para cobrir a tela toda mas não precisamos criar uma ds_grid do tamanho total da view então usamos esse fator para dividir a largura e a altura e multiplicar as posições na hora de senhar, assim cada circulo ficara a 20 pixeis um do outro.

Agora criamos a ds_grid:

Código:

data = ds_grid_create(view_wview/fator,view_hview/fator);

Como pode ver ele terá o tamanho da tela dividido por 20, se está usando o padrão do GM então são 32 circulos por linha e 24 por coluna.

Vamos então definir todas as posições com uma cor e podemos fazer isso com uma única função:

Código:

ds_grid_set_region(data,0,0,(view_wview/fator)-1,(view_wview/fator)-1,c_white);

Como tinha mencionado, datas estruturas são mais eficiente que array porque você tem um controle melhor.
Essa função defini toda a região entre x1,y1,x2,y2 com o valor especificado.
Agora todas as posição da ds_grid tem o valor de c_white.
Note que diminuo 1 nos tamanhos pois, o primeiro ponto da grid começa em 0x0.

Com a lista criada e seus valores padrões definidos vamos desenha-la!
Crie um script com o nome de "draw_ds_grid":

Código:

// draw_ds_grid(id,x,y)

var i,ii;
for (i = 0; i < ds_grid_width(argument0); i += 1) // Loop para a linha
{

    for (ii = 0; ii < ds_grid_height(argument0); ii += 1) // Loop para a coluna
    {
        // definir cor
        draw_set_color(real(ds_grid_get(argument0,i,ii)));
        // se cor for branca, desenhar sem preenchimento
        if ds_grid_get(argument0,i,ii) = c_white
        {
            draw_circle(argument1+i*fator,argument2+ii*fator,10,true);
        }
        else
        {
            // se cor não for branca, desenhar com preenchimento
            draw_circle(argument1+i*fator,argument2+ii*fator,10,false);
        }
    }
}

Com a função "ds_grid_get(id,x,y)" eu retorna o valor da posição especificada, no caso a cor.
Usando esse loop duplo i retornará o valor para x e ii o valor para y, multiplicando por 20 eu tenho as posição exatas dos círculos.
Coloque isso no evento Draw do objControle, mude a cor do background da cor se quiser para ver melhor (eu coloquei um verde meio escuro) e execute o jogo para ver o resultado.

Agora vem a parte interessante.
Quando clicarmos os círculos vão mudar de cor.
No evento Draw:

Código:

if mouse_check_button_pressed(mb_left)
{
    cor = random(c_white);
}
if mouse_check_button(mb_left)
{
    ds_grid_set_disk(data,mouse_x/fator,mouse_y/fator,3,cor);
}

Quando o mouse for pressionado, todos os círculos em um raio de 3 posições vão ser coloridos com uma cor randomica.
A função ds_grid_set_disk(id,xm,ym,r,val) defini todos os pontos de forma circular a partir de uma posição e um raio.

Até aqui temos já temos algo interessante mas vamos incrementar um pouco mais.
Não há uma função para se definir os valores em forma de circulo sem preencher a parte de dentro (só as extremidades) mas podemos faze-la.
Crie um script com o nome "ds_grid_set_disk_outline" e coloque:

Código:

// ds_grid_set_disk_outline(id,x,y,distancia,valor)

for (i = 0; i < 360; i += 1)
{
    ds_grid_set(argument0,argument1+cos(degtorad(i))*argument3,argument2-sin(degtorad(i))*argument3,argument4);
}

É bem simples, ele vai percorrer 360 ângulos preenchendo só as extremidades.
Volte no evento Draw e adicione essa função ao código.

Código:

if mouse_check_button_pressed(mb_left)
{
    cor = random(c_white);
}
if mouse_check_button(mb_left)
{
    ds_grid_set_disk(data,mouse_x/fator,mouse_y/fator,3,cor);
    ds_grid_set_disk_outline(data,mouse_x/fator,mouse_y/fator,3,cor*cor mod c_white);
}

draw_ds_grid(data,fator/2,fator/2);

Cheque o resultado.

Datas estruturas tem outro ponto forte, é muito fácil salvar e carregar com as funções ds_grid_write(id) que retorna uma string com todos as informações e ds_grid_read(id,str) que as defini a partir dessa string.
No evento Draw mesmo:

Código:

if keyboard_check_pressed(vk_enter)
{
    switch (show_message_ext('O que deseja fazer?','Salvar','Carregar','Cancelar'))
    {
        case 1:
            // Salvar
            var f;
           
            f = file_text_open_write(get_open_filename('Todos os Arquivos|*.*',''));
            file_text_write_string(f,ds_grid_write(data));  // copiar a data
            file_text_close(f);
        break;
       
        case 2:
            // Carregar
            var f,str;
           
            f = file_text_open_read(get_open_filename('Todos os Arquivos|*.*',''));

            // Salvar todo o arquivo em uma string
            str = '';
            do
            {
                str += file_text_read_string(f);
                file_text_readln(f);
            }
            until file_text_eof(f);
           
            ds_grid_read(data,str); // passar a data
            file_text_close(f);
        break;
    }
}

E isso concluí o exemplo prático!
Baixe meu resultado aqui:

Código:

http://www.mediafire.com/?gi4ya818u9udx3u

Observações

ds_grid_add e ds_grid_set são diferentes!
As função com add obviamente adicionam um valor somando ao atual, ou seja, se o valor atual for 2 e você adiciona 1, então o ponto valerá 3 mas as função set definem exatamente o valor especificado. Há também as funções multiply que multiplicam o valor dado ao atual.

Lembre-se que quando você cria uma grid, altura e largura devem ser números inteiros e positivos.
Números negativos causaram erro e números fracionados são arredondados.
Na hora de trabalhar com as posições lembre-se que elas começam pelo ponto 0x0.

As grid nunca ultrapassam seu tamanho definido e qualquer função para setar ou retornar pontos que não existem não terão efeito.
Você pode usar ds_grid_resize(id,w,h) para redefinir o tamanho.

A lina do exemplo pratico onde definimos toda grid com a cor branca "ds_grid_set_region(data,0,0,(view_wview/fator)-1,(view_wview/fator)-1,c_white);" pode ser substituída por:

Código:

ds_grid_clear(data,c_white);

Isso também defini toda a grid com o valor dado mas preferi mostrar aquela função.

draw_circle é uma função razoavelmente rápida, mas você sabe não é? Não pode exagerar então é provável que o que fizemos aqui possa ser um pouco lento com FPS acima de 30 em alguns computadores.

Tem um jogo criado no Game Maker que se chama Grid Defender e serve como um ótimo exemplo da utilização das grids em efeitos especias.

Muito bem explicado, dá pra aproveitar muito desse tutorial, basta ler e seguir, eu mesmo aprendi uma coisa nova com o ds_grid, dá pra fazer muito com ele, guardar dados, efeitos especiais etc. Gostei bastante.

Bem interessante.
Eu achava que essas coisa eram mais complicadas de lidar.

Não a muitos tutoriais de brasileiros sobre os assuntos que vem mostrando nas suas aulas.
Essa iniciativa é muito boa!