DESENHO COM LADRILHOS - TILES

Olá pessoal!!!

Estou aqui tentando fazer o meu primeiro tutorial do GM, e vamos usar GML, meu conhecimento e bem pequeno, portanto me perdoem os códigos simples, aliás, esse tutorial é tão simples que quem nunca usou Game Maker conseguirá fazê-lo.
O exemplo usado:
Imagine um sistema de ladrilhos, nós conhecemos como “tiles” só que esses ladrilhos são caracteres que usam milhões de combinações para formar desenhos especiais:
Vejam esse exemplo que fiz usando Corel Draw:




Fica mais interessante quando pintado, daí vemos os padrões diferentes de ladrilhos que são criados.


Esse padrão é formado por uma combinação simples com poucos caracteres, a fonte usada é a Knot Maker BRK. O nome da fonte faz jus ao nome da arte, “Knot” (Nó).
Eu capturei alguns caracteres e fiz uma sprite com mais de 200 subimagens, e vamos usá-la para nosso tutorial.

DOWNLOAD DA SPRITE
SEM ELA NÃO É POSSIVEL FAZER ESSE TUTORIAL


VAMOS COMEÇAR

1- Primeiro abra o Game Maker
2- Salve o documento com o nome “tiles” ou nome de sua preferência
Para compor nosso tutorial vamos Usar:
2 sprites;
1 Background;
2 Objetos;

PROCEDIMENTO:

1- Carregue a sprite “spr_tiles” clicando no botão create sprite no menu

Aparecerá uma janela parecida como esta Clique no botão Load Sprite

Selecione a spr_tiles e depois em abrir

Em Name dê o nome de spr_tiles, perceba o tamanho da sprite (60 x 60) e mais de 200 subimagens. clique em ok

2- Vamos criar nossa segunda srite: clicando no botão create sprite no menu

Dê a ela o nome de spr_mouse Clique em Edit prite

Clique em Create New Sprite


Mude os valores Width para 60 e Height pra 60, e OK


clique em Edit para abrir o editor de Sprites

Selecione a imagem que aparece de pois clique em Edit abrirá uma janela

1- Selecione o balde
2- escolha a cor branca e depois
3- clique na imagem para pinta-la de branco
4- agora clique no menu Image


Selecione Opacity

No Valor de alpha deixe 50 e OK, feche os editores confirmando OK e pronto, criamos nossa segunda sprite com propriedades transparente.
Agora vamos criar no background (plano de fundo), não é muito diferente do criador de sprites, o processo é praticamente o mesmo.

Vamos novamente no menu e escolha Create Background


A janela aparecerá:

1 Clique em Edit Background = já conhecemos essa telinha, dessa vez não queremos um fundo transparente
2 Clique em Transform:
3 Clique em Stretch para redimensionar o tamanho
4 Deixe os valores para 60 e 60 ( é o mesmo tamanho das sprites) OK
5 Selecione a ferramenta Linha
6 Selecuine a espessura da linha, nesse caso, deixe 1
7 Selecione a cor branca
7.1 Desenhe uma borda branca (superior direita) como na imagem acima
7.2 Selecione a cor cinza
7.3 Desenhe uma borda cinza (inferior esquerda) como na imagem acima
8 Selecione a ferramenta balde
9 Selecione uma cor de cinza mais claro
9.1 pinte o fundo com o cinza claro o resultado tem que parecer com a imagem acima
Feche todos os editores aceitando OK para todos. Pronto, criamos nosso background.

Agora vamos criar nossos dois objetos que serão nossos personagens nesse jogo/programa. Vamos no menu e clique em Create Object

Em Name dê o nome de obj_bloco

Repita o processo - Crie outro objeto e de o nome de bj_controle
1. Clique na caixa de sprites
2. Selecione para ele a spr_mouse
Feche o objeto OK.

OK!!! Já temos tudo!


A IDÉIA GERAL:

Vamos ver agora a idéia geral de como será nosso projeto:
Nós queremos um tabuleiro como um jogo de damas, mas com apenas quadrados brancos, onde podemos desenhar formas em cada um deles para formar uma imagem grande.
Em cada quadrado a gente coloca um desenho, se o desenho não se encaixar com o quadrado vizinho podemos girá-lo ou substituí-lo por outro veja exemplo a baixo;

Esses são desenhos colocados lado a lado, mas não estão encaixados

Agora os mesmos desenhos estão girados e se encaixam muito bem.

Vamos usar um cardápio com mais de 200 imagens, isso nos dará milhões de combinações. Esse cardápio ficará do lado esquerdo da tela, como uma barra de ferramentas ou paletas de cores de um programa, basta clicar no desenho do cardápio e clicar na grade, e criar o desenho escolhido. Se não gostar da composição basta apagar.
Nossa prancheta será uma grade, colocamos o desenho e ele se ajusta automaticamente na grade.

Mas só temos dois objetos e duas sprites, como teremos mais de 200 imagens? Precisaríamos da mesma quantidade de objetos e uma programação maluca não?
Parece!!! Mas não é tão complicado assim, na verdade, só existirá um objeto que representará todas as imagens, quando clicamos na imagem do cardápio, estaremos escolhendo a imagem que o objeto assumirá quando ele for criado.

LÓGICA: Temos um objeto controle; o controle é responsável por desenhar o cardápio de imagens, sabemos que nossa sprite tem mais de 200 subimagens, o controle divide esse total por 4 e teremos mais de cinqüenta imagens desenhadas no cardápio. Sendo que cada imagem contém 4 subimagens . mas nem todas terão quatro subimagens, algumas terão apenas duas ou até mesmo uma.

Exemplo de uma imagem contendo 4 subimagens.


O objeto controle tem uma variável chamada mudar, essa variável começa com seu valor em “0”, quando clicamos na imagem 1 no cardápio, estaremos declarando que a variável “mudar” terá seu valor para “1”

O objeto bloco também tem uma variável chamada “mudar” seu valor é indefinido, quando criado, assume o valor atual da variável “mudar” do objeto controle.
Quando clicarmos na grade, o objeto bloco será criado, ele testará qual o valor da variável “mudar” do objeto controle, no caso, “1”. Então o bloco assumirá a imagem “1” que é composta por quatro subimagens. Quando giramos o desenho na grade, na verdade, estaremos alternando essas subimagens uma de cada vez, dando a impressão de girar a imagem.

Como serão desenhadas as imagens? Têm-se mais de duzentas imagens e só aparecerão 57no cardápio?

Também não é tão complicado assim!!!

LÓGICA:

O objeto controle divide todas as imagens em 58 grupos de imagens, mas só desenha no cardápio, a primeira imagem de cada grupo, veja no exemplo a baixo:

01=> 0,1,2,3
02=> 4,5,6,7
03=> 8,9,10,11
04=> 12,13,14,15

05=> 16,17,18,19
06=> 20,21,22,23
07=> 24,25,26,27
08=> 28,29,30,31

09=> 32,33,34,35
10=> 36,37,38,39
11=> 40,41
12=> 42,43,44,45

13=> 46,47,48,49
14=> 50,51
15=> 52,53,54,55
16=> 56,57,58,59

17=> 60,61,62,63
18=> 64,65
19=> 66,67,68,69
20=> 70,71,72,73

21=> 74,75,76,77
22=> 78,79,80,81
23=> 82,83,84,85
24=> 86,87,88,89

25=> 90,91,92,93
26=> 94,95,96,97
27=> 98,99,100,101
28=> 102,103,104,105

29=> 106,107,108,109
30=> 110,111,112,113
31=> 114,115,116,117
32=> 118,119,120,121

33=> 122,123,124,125
34=> 126,127,128,129
35=> 130,131,132,133
36=> 134,135,136,137

37=> 138,139,140,141
38=> 142,143,144,145
39=> 146,147,148,149
40=> 150,151,152,153

41=> 154,155,156,157
42=> 158,159,160,161
43=> 162,163,164,165
44=> 166,167

45=> 168,169,170,171
46=> 172,173,174,175
47=> 176,177,178,179
48=> 180,181,182,183

49=> 184,185,186,187
50=> 188,189,190,191
51=> 192,193
52=> 194,195, 196, 197, 198, 199, 200

53=> 201, 202, 203, 204
54=> 205, 206, 207, 208
55=> 209, 210, 211, 212
56 =>213, 214
57=> 215, 216,
58 => 217, 218

Acima nós temos o mapa dos 58 grupos de imagens mas só serão desenhadas no cardápio a primeira imagem de cada grupo


CHEGA DE PRANCHETA, VAMOS PARA A PRÁTICA

Vamos começar pelo objeto controle:
Selecione o obj_controle dando clique duplo.


A janela de propriedades abrirá
1 Clique em Add Event
2 Clique em Create // o evento create é o primeiro evento de um objeto a ser execultado
3 Agora abra a aba control
4 Selecione com o botão direito do mouse em Execute Code aparecerá uma janela:
5 Dentro dessa janela que vamos colocar nosso primeiro código, vamos criar nossa primeira variável do jogo.

Abaixo digite:

Código:

window_set_fullscreen(1);// aqui declaramos que o jogo começará em tela cheia
mudar=0; //Pronto, criamos nossa variável e declaramos seu valor para (0).

Feche o editor em OK, feche o objeto em OK e salve

Vamos fazer a mesma coisa com o objeto bloco, também vamos criar uma variável “mudar” para ele:

Clique no obj_bloco com clique duplo, Add Event / Create / aba control / Execute Code: e digite:

Código:

mudar=obj_controle.mudar;

criamos a variável “mudar” e declamos que seu valor será igual ao valor da variável “mudar” do obj_controle logo que o obj_bloco for criado

Ainda com o editor de código aberto, logo abaixo do código anterior digite:

Código:

sprite_index=spr_tiles;

Aqui nós declaramos que o objeto bloco ao ser criado chamará a “sprite tiles” para representa-lo
Feche o editor de códigos OK. E salve

IMPORTANTE SABER:

Quando declaramos uma sprite para um objeto, e executamos o jogo, a animação da sprite também é executada quadro a quadro.
Nós queremos que a imagem fique estática (parada) para resolvermos isso vamos declarar que não haja animação, vamos usar o evento step:

Ainda com as propriedades do objeto bloco aberto, Add Event / step / step/aba control / Execute Code: e digite:

Código:

image_speed=0;

// aqui declaramos que a imagem ficará parada sem animação, como se fosse apenas uma imagem sem subimagens.
Logo abaixo digite:

Código:

move_snap(60,60);

// aqui declaramos que esta imagem se ajustará na grade independente do local de sua criação Feche o editor em OK e salve

Precisamos fazer que a imagem gire quando quisermos encaixar com outra imagem. É muito fácil, vamos criar um evento de mouse para o botão direito, assim quando clicarmos na imagem ela mudará para a próxima subimagem dando a impressão de giro:
Ainda com as propriedades do objeto bloco aberto, Add Event /mouse/Right Pressed/aba control / Execute Code: e digite:

Código:

image_index+=1;

//declaramos que quando clicarmos na imagem com o botão esquerdo do mouse a imagem mudará para a próxima imagem.
Feche o editor em OK, feche o objeto em OK. E salve

Vamos testar o objeto bloco para ver sua funcionalidade, mas antes, vamos criar e configurar a tela do jogo:
No menu, clique em Create Room

A janela de propriedades da sala abrirá.

1. Na aba setings
2. Nome da sala para room-tiles
3. Comprimento da sala 1085 - Altura da sala 845
4. Tamanho da grade X=60 e Y=60 o mesmo tamanho das sprites, as sprites ficarão alinhadas a esta grade na sala

1. Na aba backgrouns
2. Clique na caixa de background
3. Escolha background0 ou o nome que você deu para esse background


1. Na aba view
2. Marque the use of view
3. Veja a view 0 ativada
4. Marque visible when room starts
5. Em view in room W = 1024 H = 780
6. Port on screen W 1024 H = 780
7. Marque para obj_controle // isto faz com que o tela siga o objeto
8. Hbor = 80 Vbor = 75 Hsp = 5 Vsp = 5


1. Na aba objects
2. Na caixa de objetos
3. Selecione o obj_bloco
4. Clique nos quadrados da grade para criar alguns obj_bloco como na imagem acima
Feche a propriedade de sala OK. E salve
Já podemos testar como está o andamento do nosso projeto. Mas antes, para evitar um erro teremos que editar o código do create do objeto bloco.


1. Abra o objeto bloco
2. Edite o bloco de códigos. Dentro, conterá o seguinte código;
mudar=obj_controle.mudar;
sprite_index=spr_tiles;

o que temos que fazer é colocar duas barras antes da variável mudar, isso transformará a primeira linha num comentário e o game maker irá ignorá-lo quando executar o jogo evitando um possível erro, pois o objeto controle ainda não está na sala.

Código:

//mudar=obj_controle.mudar;
sprite_index=spr_tiles;

Feche o editor em OK, feche o objeto em OK. E salve

Agora sim, podemos testa-lo. Vá no menu e clique em run the game ou pressione F5


Seu jogo deverá parecer com isso:


Clique nas imagens com o botão direito do mouse para mudar as imagens.

Já é possível fazer alguma coisa colocando mais objetos blocos na sala, mas cada objetos desse contém as 200 imagens e com muitos objetos na sala daria muito trabalho fazer uma composição de imagens.

Agora sim, o objeto controle entra em ação. Ele permitirá a gente colocar a imagem que quisermos clicando onde quisermos deixando tudo mais fácil e cada objeto com poucas imagens, não como vimos agora quanto mais clicamos mais imagens aparece.
Pressione Esc para sair.

CHEGOU A HORA DE DEIXAR O NOSSO TUTORIAL UM POUCO MAIS DIFÍCIL.

Na parte anterior nós colocamos alguns objetos bloco na sala, na verdade foi apenas para testar sua funcionalidade, pois na sala ficará apenas um objeto controle e ele se encarregará de todo o resto. Vamos agora editar o objeto controle e cria a primeira parte de nosso cardápio de imagens, para isso vamos usar o evento draw.
Só para lembrar-se da nossa lista de imagens anteriormente citada:

01=> 0,1,2,3
02=> 4,5,6,7
03=> 8,9,10,11
04=> 12,13,14,15

01 => será o valor da variável “mudar” ( 0 ) o zero é o índex da imagem a ser desenhada 1,2,3 são as outras submagens .
02 => será o valor da variável “mudar” ( 4 ) o quatro é o índex da imagem a ser desenhada 5,6,7 são as outras submagens .
03 => será o valor da variável “mudar” ( 8 ) o oito é o índex da imagem a ser desenhada 9,10,11 são as outras submagens .
04 => será o valor da variável “mudar” ( 12 ) o dze é o índex da imagem a ser desenhada 13,14,15 são as outras submagens .

Esta é apenas a primeira parte do conjunto de imagens que iremos desenhar no nosso cardápio. Na verdade essa lista representa a lógica que iremos usar como ordem de imagens.

Abra o obj_controle.

1. Add Event
2. Draw
3. Aba control
4. Execute Code e digite o seguinte código:

Código:

draw_sprite(spr_tiles,0,0,0)         
draw_sprite(spr_tiles,4,60,0)     
draw_sprite(spr_tiles,8,120,0)
draw_sprite(spr_tiles,12,180,0)

Feche o editor OK e salve

Explicação:
draw_sprite(spr_tiles,0,0,0)

draw_sprite = função para desenhar sprite
spr_tiles = nome da nossa sprite
0 = subimagem da sprite a ser desenhada, no caso a primeira imagem (0)
0 = posição de X=0 da tela onde onde será desenhada
0 = posição de Y =0 da tela onde onde será desenhada

Obs: Importante saber que: sempre que passamos a usar o evento draw, a sprite que escolhemos costuma desaparecer, nesse caso teremos que desenhar essa sprite no mesmo evento draw. Edite o evento draw e antes do código que digitamos coloque:

Código:

draw_sprite(spr_mouse,0,x+0,y+0)

// isso faz com que o objeto redesenhe a sprite na tela

Feche o editor OK e salve

Ta na hora de testar de novo, mas para evitar erros, vamos editar o objeto bloco e a sala para corrigir umas coisinhas.

Clique no obj_bloco com clique duplo.

Edite o bloco de código, vamos excluir as barras que colocamos antes da variável “mudar”;
//mudar=obj_controle.mudar;
sprite_index=spr_tiles;

Feche o editor OK e salve

Como já foi dito anteriormente, ficará apenas o objeto controle na sala, ele se encarregará de tudo, edite a sala do jogo.


Clique com o botão direito do mouse nas bolinhas azuis para remover todos os objetos bloco e coloque apenas um objeto controle.
1. Clique na caixa de objetos
2. Selecione o objeto controle
3. Aplique 1 objeto controle como mostra a imagem acima.

Feche o editor OK e salve
Pode testar o jogo. O resultado deverá parecer com isso:


Veja que não tem nenhuma interação com mouse e nem as imagens mudam como no teste anterior. Claro, estamos apenas desenhando a primeira parte de nosso cardápio de imagens.
Cada imagem dessas representará um objeto na grade.

LÓGICA:
A idéia é usar o mouse, quando clicarmos na primeira imagem, o valor da variável “mudar” do controle será (1) Ex:
Imagem 1 mudar=1
Imagem 2 mudar=2
Imagem 3 mudar=3
Imagem 4 mudar=4

Vamos agora criar nossas interações com mouse para objeto controle. Abra o obj_controle,

1. Add Event
2. Mouse
3. Left Pressed
4. Aba Control
5. Execute Code e digite o seguinte código:

Código:

if mouse_x<60&&mouse_y<60    {mudar=1}
if mouse_x>60&&mouse_x<120&&mouse_y<60  {mudar=2}
if mouse_x>120&&mouse_x<180&&mouse_y<60  {mudar=3}
if mouse_x>180&&mouse_x<240&&mouse_y<60  {mudar=4}

Feche o editor OK e salve

EXPLICALÇÃO:

1ª linha = Declaramos que: se o mouse for clicado nas posições X menor que 60 e Y menor 60, ou seja, exatamente em cima da primeira imagem desenhada na sala, O valor da variável “mudar” será (1)


2ª linha = Declaramos que: se o mouse for clicado nas posições X maior que 60 e X menor que 120 e Y menor que 60, ou seja, exatamente em cima da segunda imagem = O valor da variável “mudar” será (2)


Se executar o jogo agora ainda não veríamos nada de alteração, pois apenas mudamos o valor de uma variável, mas ainda conteria um erro, quando colocamos o obj_controle na sala, o posicionamos no canto superior esquerdo, ou seja, só mudamos a variavel quando clicamos na primeira imagem que corresponde ao local do objeto, clicado nas outras imagens não ocorreria efeito algum pois o clique seria fora do objeto como mostra a imagem abaixo.


Para corrigir esse erro, o obj_controle teria que seguir o mouse, já que teremos mais imagens no cardápio de cima até em baixo e também quando formos criar os obj_blocos pelo resto do espaço da sala.

Abra o obj_controle .

1. Add Event
2. Step
3. Step
4. Aba control
5. Execute Code e digite o seguinte:

Código:

x = mouse_x-30;
y = mouse_y-30;

Feche o editor OK e salve

Com isso o obj_controle passa a seguir o mouse onde ele for, os valores finais x-30 e y-30 representam o centro da sprite que tem o tamanho 60 por 60. Vamos testar o jogo e ver o que fizemos.


Está saindo tudo como queremos, ficou muito legal, mas lembrando que o obj_bloco está alinhado à grade, vamos alinhar o obj_controle a grade também. Edite novamente o evento step do obj_controle, e logo abaixo do código anterior digite:

Código:

move_snap(60,60);

Feche o editor OK e salve

Igualmente como o obj_bloco, o obj_controle também está alinhado a grade. Teste o jogo novamente.

OK. Tudo certo.

Agora vamos fazer com que: quando clicarmos na grade se, nela seja criada uma instancia do obj_bloco. Para isso vamos editar o evento de mouse do obj_controle
acima do código já existente e digite:

Código:

instance_create(x+0,y+0,obj_bloco)

// agora quando clicamos em qualquer lugar na sala será criada uma imagem Feche o editor OK e salve

Vamos testar de novo.
YES!!!!!!! Agora em qualer lugar que clicamos criamos uma instância.
Mas note que na área do cardápio também é criada instancias e não é bem isso que queremos, então vamos limitar esse espaço, apenas numa determinada área da tela se pode criar instâncias . vamos editar o ultimo evento de mouse do objeto controle e criarmos uma condição para criarmos instância. Nosso código deverá ficar assim...

Código:

if mouse_x>300&&mouse_x<1080&&mouse_y>60&&mouse_y<840&&mudar>0
{
instance_create(x+0,y+0,obj_bloco)
}

// isso significa que a instancia só será criada quando o mouse estiver nas posiçãos: X maior que 300 e X menor que 1080 e y maior que 60 e y menor que 840 Como no exemplo abaixo:

Tudo certo, mas observe que as imagens criadas são sempre as mesmas e quando giramos ainda mostra mais de quatro imagens por objeto, vamos corrigir isso também. Abra o obj_bloco e no evento create edite o código existente e logo abaixo digite:

Código:

if obj_controle.mudar==1 // se a "variavel mudar do obj_controle for = a 1
{image_index=0;}  // a imagem "index" da sprite será a primeira "0"
if obj_controle.mudar==2
{image_index=4;}  // a imagem "index" da sprite será a segunda "1"
if obj_controle.mudar==3
{image_index=8;}
if obj_controle.mudar==4
{image_index=12;}

Esse código significa que quando o obj_bloco for criado na sala ele pergunta ao obj_controle qual o valor de sua variável “mudar”, o valor atual será o mesmo para a variável “mudar do obj_bloco
Feche o editor OK e salve

No step do ob_bloco edite o código existente e logo abaixo digite:

Código:

if mudar==1 and image_index>3
{image_index=0}
if mudar==2 and image_index>7
{image_index=4}
if mudar==3 and image_index>11
{image_index=8}
if mudar==4 and image_index>15
{image_index=12}

Feche o editor OK e salve

Vamos ver esse código com clareza, a partir de agora vamos trabalhar com as subimagens restantes.
lembramos que cada instancia na grade é composta por 4 submagens. Abaixo temos o exemplo do nosso cardápio de imagens

mudar=1...... mudar=2...... mudar=3...... mudar=4


vamos relembrar o código que fizemos para girar com o botão direito do mouse ara o obj_bloco. ( image_index+=1) é agora que ele faz efeito de verdade, abaixo temos quatro subimagens, a primeira aparece quando o objeto é criado, as outras aparecem quando clicamos com o botão direito do mouse uma por uma. Veja o código abaixo que usamos anteriormente.

Código:

if mudar==1 and image_index>3  //  se “mudar” for igual a 1 e o índice da subimagem for maior que 3
{image_index=0} //  o índice da imagem volta para 0

0 1 2 3

Código:

if mudar==2 and image_index>7    //  se “mudar” for igual a 2 e o índice da subimagem for maior que 7
{image_index=4}//  o índice da imagem volta para 4 

4 5 6 7

Código:

if mudar==3 and image_index>11  // se “mudar” for igual a 3 e o índice da subimagem for maior que 11
{image_index=8} //  o índice da imagem volta para 8 

8 9 10 11

Código:

if mudar==4 and image_index>15      // se “mudar” for igual a 4 e o índice da subimagem for maior que 15
{image_index=12}  //  o índice da imagem volta para 12 

12 13 14 15

Para entender na prática, execute o jogo e observe as mudanças.
Funciona perfeitamente.

Vamos desenhar no cardápio nossa segunda linha de imagens. Abra o obj_controle, edite o evento draw, abra o bloco de código existente e acrescente o seguinte:

Código:

draw_sprite(spr_tiles,16,0,60)
draw_sprite(spr_tiles,20,60,60)
draw_sprite(spr_tiles,24,120,60)
draw_sprite(spr_tiles,28,180,60)

feche o editor OK

Ainda no obj_controle, edite o evento de mouse, abra o bloco de código existente e acrescente o seguinte:

Código:

if mouse_x<60&&mouse_y>60&&mouse_y<120
{mudar=5}
if mouse_x>60&&mouse_x<120&&mouse_y>60&&mouse_y<120
{mudar=6}
if mouse_x>120&&mouse_x<180&&mouse_y>60&&mouse_y<120
{mudar=7}
if mouse_x>180&&mouse_x<240&&mouse_y>60&&mouse_y<120
{mudar=8}

feche o editor OK e salve

Agora abra o obj_bloco, no evento create, abra o bloco de código existente e acrescente o seguinte:

Código:


if mudar==5 and image_index>19
{image_index=16}
if mudar==6 and image_index>23
{image_index=20}
if mudar==7 and image_index>27
{image_index=24}
if mudar==8 and image_index>31
{image_index=28}

Feche oeditor OK

Ainda no obj_bloco, no evento step, abra o bloco de código existente e acrescente o seguinte:

Código:

if mudar==5 and image_index>19
{image_index=16}
if mudar==6 and image_index>23
{image_index=20}
if mudar==7 and image_index>27
{image_index=24}
if mudar==8 and image_index>31
{image_index=28}

Feche o editor OK e salve.

Vamos executar o jogo para ver as novidades.
Muito legal, surgiu mais uma linha de imagens no cardápio e já deu até para fazer uma pequena composição.

Vamos desenhar nossa terceira linha de imagens no nosso cardápio.
Abra o obj_controle, evento draw, abra o bloco de código existente e acrescente o seguinte:

Código:

draw_sprite(spr_tiles,32,0,120)
draw_sprite(spr_tiles,36,60,120)
draw_sprite(spr_tiles,40,120,120)
draw_sprite(spr_tiles,42,180,120)

Feche o editor OK

Ainda no obj_controle, no evento de mouse, abra o bloco de código existente e acrescente o seguinte:

Código:

if mouse_x<60&&mouse_y>120&&mouse_y<180
{mudar=9}
if mouse_x>60&&mouse_x<120&&mouse_y>120&&mouse_y<180
{mudar=10}
if mouse_x>120&&mouse_x<180&&mouse_y>120&&mouse_y<180
{mudar=11}
if mouse_x>180&&mouse_x<240&&mouse_y>120&&mouse_y<180
{mudar=12}

Feche o editor OK

Agora abra o obj_bloco, no evento create, abra o bloco de código existente e acrescente o seguinte:

Código:

if obj_controle.mudar==9
{image_index=32;}
if obj_controle.mudar==10
{image_index=36;}
if obj_controle.mudar==11
{image_index=40;}
if obj_controle.mudar==12
{image_index=42;}

Feche o editor OK

Agora no evento step, abra o bloco de código existente e acrescente o seguinte:

Código:

if mudar==9 and image_index>35
{image_index=32}
if mudar==10 and image_index>39
{image_index=36}
if mudar==11 and image_index>41
{image_index=40}
if mudar==12 and image_index>45
{image_index=42}

Feche o editor OK e salve.

Teste o jogo novamente e veja as alterações.

CERTO, agora já deu para entender o processo. Abra o obj_controle, no evento draw, abra o bloco de código existente e acrescente o restante do códogo:

Código:

draw_sprite(spr_tiles,46,0,180)
draw_sprite(spr_tiles,50,60,180)
draw_sprite(spr_tiles,52,120,180)
draw_sprite(spr_tiles,56,180,180)

draw_sprite(spr_tiles,60,0,240)
draw_sprite(spr_tiles,64,60,240)
draw_sprite(spr_tiles,66,120,240)
draw_sprite(spr_tiles,70,180,240)

draw_sprite(spr_tiles,74,0,300)
draw_sprite(spr_tiles,78,60,300)
draw_sprite(spr_tiles,82,120,300)
draw_sprite(spr_tiles,86,180,300)

draw_sprite(spr_tiles,90,0,360)
draw_sprite(spr_tiles,94,60,360)
draw_sprite(spr_tiles,98,120,360)
draw_sprite(spr_tiles,102,180,360)

draw_sprite(spr_tiles,106,0,420)
draw_sprite(spr_tiles,110,60,420)
draw_sprite(spr_tiles,114,120,420)
draw_sprite(spr_tiles,118,180,420)

draw_sprite(spr_tiles,122,0,480)
draw_sprite(spr_tiles,126,60,480)
draw_sprite(spr_tiles,130,120,480)
draw_sprite(spr_tiles,134,180,480)

draw_sprite(spr_tiles,138,0,540)
draw_sprite(spr_tiles,142,60,540)
draw_sprite(spr_tiles,146,120,540)
draw_sprite(spr_tiles,150,180,540)

draw_sprite(spr_tiles,154,0,600)
draw_sprite(spr_tiles,158,60,600)
draw_sprite(spr_tiles,162,120,600)
draw_sprite(spr_tiles,166,180,600)

draw_sprite(spr_tiles,168,0,660)
draw_sprite(spr_tiles,172,60,660)
draw_sprite(spr_tiles,176,120,660)
draw_sprite(spr_tiles,180,180,660)

draw_sprite(spr_tiles,184,0,720)
draw_sprite(spr_tiles,188,60,720)
draw_sprite(spr_tiles,192,120,720)
draw_sprite(spr_tiles,194,180,720)

draw_sprite(spr_tiles,201,0,780)
draw_sprite(spr_tiles,205,60,780)
draw_sprite(spr_tiles,209,120,780)
draw_sprite(spr_tiles,213,180,780)

draw_sprite(spr_tiles,215,0,840)
draw_sprite(spr_tiles,217,60,840)

Feche o editor OK.

Agora, no evento de mouse, abra o bloco de código existente e acrescente o restante do códogo:

Código:

if mouse_x<60&&mouse_y>180&&mouse_y<240
{mudar=13}
if mouse_x>60&&mouse_x<120&&mouse_y>180&&mouse_y<240
{mudar=14}
if mouse_x>120&&mouse_x<180&&mouse_y>180&&mouse_y<240
{mudar=15}
if mouse_x>180&&mouse_x<240&&mouse_y>180&&mouse_y<240
{mudar=16}

if mouse_x<60&&mouse_y>240&&mouse_y<300
{mudar=17}
if mouse_x>60&&mouse_x<120&&mouse_y>240&&mouse_y<300
{mudar=18}
if mouse_x>120&&mouse_x<180&&mouse_y>240&&mouse_y<300
{mudar=19}
if mouse_x>180&&mouse_x<240&&mouse_y>240&&mouse_y<300
{mudar=20}

if mouse_x<60&&mouse_y>300&&mouse_y<360
{mudar=21}
if mouse_x>60&&mouse_x<120&&mouse_y>300&&mouse_y<360
{mudar=22}
if mouse_x>120&&mouse_x<180&&mouse_y>300&&mouse_y<360
{mudar=23}
if mouse_x>180&&mouse_x<240&&mouse_y>300&&mouse_y<360
{mudar=24}

if mouse_x<60&&mouse_y>360&&mouse_y<420
{mudar=25}
if mouse_x>60&&mouse_x<120&&mouse_y>360&&mouse_y<420
{mudar=26}
if mouse_x>120&&mouse_x<180&&mouse_y>360&&mouse_y<420
{mudar=27}
if mouse_x>180&&mouse_x<240&&mouse_y>360&&mouse_y<420
{mudar=28}

if mouse_x<60&&mouse_y>420&&mouse_y<480
{mudar=29}
if mouse_x>60&&mouse_x<120&&mouse_y>420&&mouse_y<480
{mudar=30}
if mouse_x>120&&mouse_x<180&&mouse_y>420&&mouse_y<480
{mudar=31}
if mouse_x>180&&mouse_x<240&&mouse_y>420&&mouse_y<480
{mudar=32}

if mouse_x<60&&mouse_y>480&&mouse_y<540
{mudar=33}
if mouse_x>60&&mouse_x<120&&mouse_y>480&&mouse_y<540
{mudar=34}
if mouse_x>120&&mouse_x<180&&mouse_y>480&&mouse_y<540
{mudar=35}
if mouse_x>180&&mouse_x<240&&mouse_y>480&&mouse_y<540
{mudar=36}

if mouse_x<60&&mouse_y>540&&mouse_y<600
{mudar=37}
if mouse_x>60&&mouse_x<120&&mouse_y>540&&mouse_y<600
{mudar=38}
if mouse_x>120&&mouse_x<180&&mouse_y>540&&mouse_y<600
{mudar=39}
if mouse_x>180&&mouse_x<240&&mouse_y>540&&mouse_y<600
{mudar=40}

if mouse_x<60&&mouse_y>600&&mouse_y<660
{mudar=41}
if mouse_x>60&&mouse_x<120&&mouse_y>600&&mouse_y<660
{mudar=42}
if mouse_x>120&&mouse_x<180&&mouse_y>600&&mouse_y<660
{mudar=43}
if mouse_x>180&&mouse_x<240&&mouse_y>600&&mouse_y<660
{mudar=44}

if mouse_x<60&&mouse_y>660&&mouse_y<720
{mudar=45}
if mouse_x>60&&mouse_x<120&&mouse_y>660&&mouse_y<720
{mudar=46}
if mouse_x>120&&mouse_x<180&&mouse_y>660&&mouse_y<720
{mudar=47}
if mouse_x>180&&mouse_x<240&&mouse_y>660&&mouse_y<720
{mudar=48}

if mouse_x<60&&mouse_y>720&&mouse_y<780
{mudar=49}
if mouse_x>60&&mouse_x<120&&mouse_y>720&&mouse_y<780
{mudar=50}
if mouse_x>120&&mouse_x<180&&mouse_y>720&&mouse_y<780
{mudar=51}
if mouse_x>180&&mouse_x<240&&mouse_y>720&&mouse_y<780
{mudar=52}

if mouse_x<60&&mouse_y>780&&mouse_y<840
{mudar=53}
if mouse_x>60&&mouse_x<120&&mouse_y>780&&mouse_y<840
{mudar=54}
if mouse_x>120&&mouse_x<180&&mouse_y>780&&mouse_y<840
{mudar=55}
if mouse_x>180&&mouse_x<240&&mouse_y>780&&mouse_y<840
{mudar=56}

if mouse_x<60&&mouse_y>840&&mouse_y<900
{mudar=57}
if mouse_x>60&&mouse_x<120&&mouse_y>840&&mouse_y<900
{mudar=58}

Feche o editor OK

Agora abra o obj_bloco, no evento create, abra o bloco de código existente e acrescente o restante do códogo:

Código:

if obj_controle.mudar==13
{image_index=46;}
if obj_controle.mudar==14
{image_index=50;}
if obj_controle.mudar==15
{image_index=52;}
if obj_controle.mudar==16
{image_index=56;}

if obj_controle.mudar==17
{image_index=60;}
if obj_controle.mudar==18
{image_index=64;}
if obj_controle.mudar==19
{image_index=66;}
if obj_controle.mudar==20
{image_index=70;}

if obj_controle.mudar==21
{image_index=74;}
if obj_controle.mudar==22
{image_index=78;}
if obj_controle.mudar==23
{image_index=82;}
if obj_controle.mudar==24
{image_index=86;}

if obj_controle.mudar==25
{image_index=90;}
if obj_controle.mudar==26
{image_index=94;}
if obj_controle.mudar==27
{image_index=98;}
if obj_controle.mudar==28
{image_index=102;}

if obj_controle.mudar==29
{image_index=106;}
if obj_controle.mudar==30
{image_index=110;}
if obj_controle.mudar==31
{image_index=114;}
if obj_controle.mudar==32
{image_index=118;}

if obj_controle.mudar==33
{image_index=122;}
if obj_controle.mudar==34
{image_index=126;}
if obj_controle.mudar==35
{image_index=130;}
if obj_controle.mudar==36
{image_index=134;}

if obj_controle.mudar==37
{image_index=138;}
if obj_controle.mudar==38
{image_index=142;}
if obj_controle.mudar==39
{image_index=146;}
if obj_controle.mudar==40
{image_index=150;}

if obj_controle.mudar==41
{image_index=154;}
if obj_controle.mudar==42
{image_index=158;}
if obj_controle.mudar==43
{image_index=162;}
if obj_controle.mudar==44
{image_index=166;}

if obj_controle.mudar==45
{image_index=168;}
if obj_controle.mudar==46
{image_index=172;}
if obj_controle.mudar==47
{image_index=176;}
if obj_controle.mudar==48
{image_index=180;}

if obj_controle.mudar==49
{image_index=184;}
if obj_controle.mudar==50
{image_index=188;}
if obj_controle.mudar==51
{image_index=192;}
if obj_controle.mudar==52
{image_index=194;}

if obj_controle.mudar==53
{image_index=201;}
if obj_controle.mudar==54
{image_index=205;}
if obj_controle.mudar==55
{image_index=209;}
if obj_controle.mudar==56
{image_index=213;}

if obj_controle.mudar==57
{image_index=215;}
if obj_controle.mudar==58
{image_index=217;}

Feche o editor OK

Edite o evento step, abra o bloco de código existente e acrescente o restante do códogo:

Código:

if mudar==13 and image_index>49
{image_index=46}
if mudar==14 and image_index>51
{image_index=50}
if mudar==15 and image_index>55
{image_index=52}
if mudar==16 and image_index>59
{image_index=56}

if mudar==17 and image_index>63
{image_index=60}
if mudar==18 and image_index>65
{image_index=64}
if mudar==19 and image_index>69
{image_index=66}
if mudar==20 and image_index>73
{image_index=70}

if mudar==21 and image_index>77
{image_index=74}
if mudar==22 and image_index>81
{image_index=78}
if mudar==23 and image_index>85
{image_index=82}
if mudar==24 and image_index>89
{image_index=86}

if mudar==25 and image_index>93
{image_index=90}
if mudar==26 and image_index>97
{image_index=94}
if mudar==27 and image_index>101
{image_index=98}
if mudar==28 and image_index>105
{image_index=102}

if mudar==29 and image_index>109
{image_index=106}
if mudar==30 and image_index>113
{image_index=110}
if mudar==31 and image_index>117
{image_index=114}
if mudar==32 and image_index>121
{image_index=118}

if mudar==33 and image_index>125
{image_index=122}
if mudar==34 and image_index>129
{image_index=126}
if mudar==35 and image_index>133
{image_index=130}
if mudar==36 and image_index>137
{image_index=134}

if mudar==37 and image_index>141
{image_index=138}
if mudar==38 and image_index>145
{image_index=142}
if mudar==39 and image_index>149
{image_index=146}
if mudar==40 and image_index>153
{image_index=150}

if mudar==41 and image_index>157
{image_index=154}
if mudar==42 and image_index>161
{image_index=158}
if mudar==43 and image_index>165
{image_index=162}
if mudar==44 and image_index>167
{image_index=166}

if mudar==45 and image_index>171
{image_index=168}
if mudar==46 and image_index>175
{image_index=172}
if mudar==47 and image_index>179
{image_index=176}
if mudar==48 and image_index>183
{image_index=180}

if mudar==49 and image_index>187
{image_index=184}
if mudar==50 and image_index>191
{image_index=188}
if mudar==51 and image_index>193
{image_index=192}
if mudar==52 and image_index>200
{image_index=194}

if mudar==53 and image_index>204
{image_index=201}
if mudar==54 and image_index>208
{image_index=205}
if mudar==55 and image_index>212
{image_index=209}
if mudar==56 and image_index>214
{image_index=213}

if mudar==57 and image_index>216
{image_index=215}
if mudar==58 and image_index>218
{image_index=217}

Feche o editor OK e salve.
Execute mais uma vez e vejamos todo o cardápio de imagens com milhares de opções de combinações.

Muito bem, agora todo o nosso cardápio de imagens deverá estar completo, mas veja o cardápio fica muito parecido com os desenhos que montamos, vamos desenhar um quadrado um pouco transparente por cima do cardápio para que ele apresente um aspecto diferente dos desenhos:

Abra o obj_controle, no evento draw, a baxo dos do ultimo código, digite:

Código:

draw_set_alpha(0.2) // transparencia dos desenhos
draw_set_color(5655854) //pinta uma cor
draw_rectangle(0,0,240,910,0) // desenha o retângulo
draw_sprite(spr_mouse,0,x+0,y+0); // este é o código que desenha a sprite do mouse, deixe ele abaixo de todos os códigos

Teste o jogo mais uma vez.

Está tudo uma beleza. Mas tem uma pequena lógica para corrigirmos:
Quando escolhemos uma imagem no cardápio e criamos ela na grade, depois escolhemos outra imagem no cardápio e criamos essa nova imagem em cima da imagem anterior, na verdade não estamos substituindo a imagem anterior, apenas criando imagem sobre imagem e elas vão se acumulando uma sobre a outra, e isso pode deixar o sistema pesado. Vamos criar uma forma para que a nova imagem substitua a imagem anterior na grade.

Primeiro vamos comprovar essa lógica, criando um contador de imagens:

Abra o obj_controle, no evento create, abaixo da variável “mudar” digite:

Código:

Contador=0;  // acabamos de criar a variável contador com seu valor = 0

Feche o editor OK.

No evento draw, acima do código anterior digite:

Código:

draw_set_alpha(1)  // tira a transparencia
draw_set_halign(fa_center)  // alinha o texto centralizado
draw_text(270,10,"Tiles#"+string(contador))  // desenha a variável contador na tela

draw_set_alpha(0.2 )
draw_set_color(5655854)             
draw_rectangle(0,0,240,910,0)
draw_sprite(spr_mouse,0,x+0,y+0);

Feche o editor OK.

Teste mais uma vez e veja que surgiu um contador de imagens no topo da tela próximo ao cardápio, mas ele ainda não tem efeito algum.

Vamos agora criar as condições para que quando criarmos uma imagem seja somada +1 no contador:

Abra o obj_bloco, no evento create, antes de todos os código existentes digite:

Código:

obj_controle.contador+=1  // quando o obj_bloco é criado, é acrescentado 1 no contador

Feche o editor OK

Teste de novo, veja que o contador aumenta a contagem conforme vamos criando imagens, escolha novas imagens no cardápio e crie novas imagens sobre as existentes, veja que a nova imagem surge, mas o contador aumenta, significa que as imagens se acumulam umas sobre as outras.

Agora vamos fazer com que a nova imagem substitua a imagem anterior, vamos criar um novo evento de mouse:

Abra o obj_bloco, Add Event, mouse, Left Pressed, Aba Control, Execute Code: e digite:

Código:

Instance_destroy();  // quando uma imagem existente for clicada ela irá ser destruída

Feche o editor OK

Agora vamos fazer com que: quando uma imagem for destruída, ela dê baixa no contador, subtraindo, -1 no seu valor:

Ainda no obj_bloco, vamos criar mais um evento:

Add Event, Destroy, Aba Control, Execute Code: e digite:

Código:

obj_controle.contador-=1;  // quando o objeto é destruído, subtrai 1 no contador

Feche o editor OK e salve. Execute mais uma vez E OBSERVE O CONTADOR.

COMO FAÇO PARA APAGAR???.

Vamos fazer um pequeno esquema de borracha, o ultimo código que fizemos apaga a imagem, vamos aproveitá-lo, só precisamos zerar a variável “mudar” do obj_controle, que continuaremos apagando, e para criar imagem novamente... Basta clicar no cardápio.

Vamos criar um delete, abra o obj_controle, Add Event, Key Press, Others, Delete, Aba Control, Execute Code: e digite:

Código:

Mudar=0;

Feche o editor OK e salve

TESTE NOVAMENTE.

AGORA SÓ FALTA SALVAR E ABRIR SEUS TRABALHOS. No site www.gmbr.forumeiros.com pesquise sobre salvar e abrir jogo tem muitas dicas legais, também tem uma engine minha.

Agora é com você. Use e abuse das opções de tiles, deixe sua criatividade fluir e faça belos trabalhos. DICA LEGAL. Depois de um trabalho pronto, tire uma print screen da tela, cole no paint ou o de sua preferência e pinte-o como quiser, o colorido fica muito mais bonito. Faça sua própria galeria e mostre para seus amigos que você é um(a) artista e poste um trabalho seu.

Vou encerrando o tutorial por aqui. Espero que tenham conseguido fazê-lo e gostado também.
Personalize este projeto como quiser para melhorá-lo.
Muito Obrigado por usar este tutorial.

FIM DO TUTORIAL