GMBR
Gostaria de reagir a esta mensagem? Crie uma conta em poucos cliques ou inicie sessão para continuar.
Entrar

Esqueci-me da senha

Últimos assuntos
» Retorno da GMBR!!!
por theguitarmester Ter 19 Mar 2024, 22:38

» Procuro Programador de game maker
por Wou Sex 15 Mar 2024, 10:27

» Mod APK
por gamerainha Qua 13 Mar 2024, 06:30

» Mudar cor de apenas uma palavra
por lunalol Sex 01 Mar 2024, 13:42

» Aceito pedidos de sprites (Com exemplos meus)
por Sevilha Qua 28 Fev 2024, 12:17

» Inventário simples
por Isquilo_Roedor Qui 22 Fev 2024, 15:18

» Problemas na programaçnao de inimigo [jogo DOOM LIKE]
por Black Mirror Dom 11 Fev 2024, 13:34

» ANDROID MULTI TOUCH
por DiegoBr Dom 04 Fev 2024, 12:13

» Servidor de Discord do fórum?
por Lighter Sáb 27 Jan 2024, 17:18

» Save e Load Json
por Klinton Rodrigues Qui 25 Jan 2024, 11:12

» Colisão com mais de um objeto
por aminaro Seg 22 Jan 2024, 15:02

» Oi sou novo aqui
por Thiago Silveira Alexandre Sáb 20 Jan 2024, 20:55

» Como acessar conteudo comprado no marketplace
por macmilam Sex 19 Jan 2024, 07:42

» Devlogs em vídeos do Block Room
por Joton Seg 15 Jan 2024, 16:56

» Alguém aqui já ganha dinheiro com seus games?
por Joton Seg 15 Jan 2024, 16:49

» ACERVO GMBR MAGAZINE
por Joton Qui 11 Jan 2024, 19:21

» como aumentar o obj sem aumentar a colisão??
por GabrielXavier Qua 10 Jan 2024, 07:21

» Asteroid Core - Early Acesse Update [0.2.0.0]
por JOZ. Seg 08 Jan 2024, 14:39

» Versionamento de código com GitHub
por GabrielXavier Seg 08 Jan 2024, 07:32

» Rio Rise - novo launcher do Gta San Andreas SAMP Brasil
por kolesovsup Sex 29 Dez 2023, 07:16

» a funçao approach ainda existe?
por PEDRINDEV Ter 26 Dez 2023, 20:05

» Inimigo ataca até por trás! >:(
por saim Sex 22 Dez 2023, 08:55

» [RESOLVIDO]Spawn após morte
por Deception_1999 Dom 17 Dez 2023, 16:39

» Remunerado $$$ - Procuro programador para ajudar a "montar" um jogo
por theguitarmester Sáb 02 Dez 2023, 16:28

» Game maker nao abre
por Cerf Dom 26 Nov 2023, 12:01


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

+3
Kyuubi
CRP-Max
Kabeção
7 participantes

Ir para baixo

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

Mensagem por Kabeção Ter 31 Ago 2010, 11:00

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

Introdução

A partir da versão 6.0 o Game Maker se firmou como uma ferramenta excepcional se tratando da produção de efeitos especiais aliada a programação relativamente fácil e rápido. Desde então é comum ver um jogo feito no GM em um “top mais” de games independentes.
Nestas aulas pretendo ensinar não apenas tudo que aprendi até hoje mas também buscar exemplos de terceiros, estudá-los e repassar para nossa comunidade.

Encontre seu estilo

Existem diversos estilos e técnicas para se trabalhar com imagens 2D não só no que diz respeito ao desenho em si mas também aos efeitos especiais.
Uma olhada na galeria de jogos do site da YoYo Games mostra os diversos estilo gráficos que podemos seguir ou nos basear para desenvolver o nosso.

  • Jogo onde o movimento das imagens passam uma impressão frenética:
    http://www.yoyogames.com/games/123578-perpetual-run-2
  • Um pixel art bem trabalhado:
    http://www.yoyogames.com/games/127865-not-so-massive-action-game
  • Vetor rasterizado e texturizado:
    http://www.yoyogames.com/games/121764-ninjammin-beat-jitsu
  • Simples quadrados e círculos:
    http://www.yoyogames.com/games/2358-clean-asia
  • Abstrato e repleto de efeitos:
    http://www.yoyogames.com/games/33006-ad-nauseam-2

Você tem uma infinidade de opções para escolher e aliado a uma boa criatividade seu jogo será fantástico.

Pixel art
[Aula - 01] Arte gráfica e efeitos especiais para Game Maker Pixel1

Pintura digital
[Aula - 01] Arte gráfica e efeitos especiais para Game Maker 23443553

Vector art
[Aula - 01] Arte gráfica e efeitos especiais para Game Maker Vetor

Gráficos e programação são dois lados da mesma moeda

Conhecimento básico sobre o Game Maker não será o suficiente para seguir estas aulas. Apenas aqueles já habilidosos com GML e o modo como ele executa os jogos poderão desfrutar das informações aqui discutidas.
Bons efeitos especiais exigem ótimos programadores e o foco dessas aulas não é ensinar GML, mas sim como aplicar o que você já sabe.
Então, estando ciente disso, vamos começar.

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

Nem pense em pular esse capítulo antes de aprender como usar trigonometria básica em seus jogos, principalmente o modo de se trabalhar com ângulos.
Procure por mais informaçãoes sobre trigonometria em outros lugares pois aqui irei direto ao ponto.

Trabalhando com ângulos
Cosseno e seno são o foco deste capítulo. Entre suas diversas funcionalidades para nós programadores esta a possibilidade de movimentar objetos a partir de determinado ângulo e distancia.
Abra o GM e crie um objeto chamado “objPlayer”, no evento Create:

Código:
ang = 45;    // angulo
d  = 50;  // distancia

// Centralizar
x = room_width/2;
y = room_height/2;

Nesse exercício vamos entender como cosseno e seno funcionam.
Primeiro vamos desenhar um ponto:

Código:
// Ponto 1
draw_circle(x,y,15,1);

Este ponto está exatamente na posição xy do objPlayer, agora vamos desenhar um ponto 2 a 45° (variável ang) a uma distancia de 50 pixeis (variável d) do ponto 1:
Código:
// Ponto 2
draw_circle(x+cos(degtorad(ang))*d,y-sin(degtorad(ang))*d,10,1);
Primeiro degtorad converte ângulos em radianos para poder se trabalhar com cos e sin.
cos retorna o número correspondente a x de acordo com o ângulo em uma distancia de 1 pixel e por ultimo multiplicamos esse valor pela distância para achar o x do ponto 2.
sin retorna o número correspondente a y de acordo com o ângulo em uma distancia de 1 pixel e por ultimo multiplicamos esse valor pela distância para achar o y do ponto 2.
Ou seja, para 45° cos vai retornar 0.7 e 0.7 * 50 = 35, 35 é a distancia x para o ponto 2. sin também vai retornar 0.7 e 0.7 * 50 = 35, 35 é a distancia y para o ponto 2. Assim, somando a distancia x com a posição x do ponto 1 e a distancia y com a posição y do ponto 1 temos a posição do ponto 2.

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

Se o ângulo fosse 0 cos retornaria 1, 1 * 50 = 50 e sin retornaria 0, 0 * 50 = 0; como 0 é o ângulo padrão, isso apenas faria o objeto ficar em linha horizontalmente. Se o ângulo fosse 90 cos seria 0 e sin 1, o que faria o objeto apenas ficar em linha reta verticalmente
Pode ser difícil de entender mas preste atenção nos exemplos, não é difícil de perceber a lógica nisso.

Criando o primeiro efeito

Agora vamos criar um simples efeito usando o conceito acima.
Crie um novo jogo, coloque a velocidade da room em 60 e adicione essa sprite no GM, nomeie como “sprPonta” e coloque a origem no centro:

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

Crie um “objPlayer” e no evento Create:
Código:
// Primeiro circulo de pontas
ang1 = 0;  // angulo
d1 = 50;  // distancia
n1 = 6;    // número de pontas no circulo
sp1 = 2;    // velocidade de rotação

// Segundo circulo de pontas
ang2 = 0    // angulo
d2 = 100;  // distancia
n2 = 8;    // número de pontos no circulo
sp2 = 1    // velocidade de ratação
Vamos usar um único sprite para criar dois círculos de pontas em torno do objPlayer.
Observe as variáveis. ang é o ângulo do circulo como um todo, d é a distancia que as pontas vão ficar em relação ao objPlayer, n é o número de pontas que o circulo terá e sp é a velocidade em que eles vão girar.
No evento Draw vamos fazer o objPlayer seguir o mouse e desenhar um circulo para representá-lo:
Código:
x = mouse_x;
y = mouse_y;

draw_circle(x,y,15,1);
Ainda no evento Draw vamos criar o primeiro circulo de pontas:
Código:
var a;
ang1 += sp1;

for (i = 0; i < n1; i += 1)
{
    a = ang1+(360/n1*i);
    draw_sprite_ext(sprPonta,-1,x+cos(degtorad(a))*d1,y-sin(degtorad(a))*d1,-0.8,0.8,a,c_white,0.75);
}

Observe essa linha: “a = ang1+(360/n1*i);”.
O que isso faz e porque funciona?

Kabeção escreveu:Divido o valor máximo para o angulo que quero (360) pelo número total de objetos que quero criar e no final multiplico pelo número do objeto atual (i).

Por exemplo:
Quero que 8 objetos sejam criados.
360/8 = 45
45 é o angulo exato entre cada um deles.

No loop for o i representa o numero do objeto atual, então:
obj0: 45*0 = 0;
obj1: 45*1 = 45;
obj2: 45*2 = 80;
obj3: 45*3 = 135;
obj4: 45*4 = 180;
obj5: 45*5 = 225;
obj6: 45*6 = 270;
obj7: 45*7 = 315;

Assim, as direções são definidas uniformemente 45° entre cada objeto.
Adicionando o resultado de (360/n1*i) a ang1 eu consigo fazer o circulo rodar com um todo.
Depois faça o mesmo para o segundo círculo só que mudando as variáveis:
Código:
ang2 -= sp2;
for (i = 0; i < n2; i += 1)
{
    a = ang2+(360/n2*i)
    draw_sprite_ext(sprPonta,-1,x+cos(degtorad(a))*d2,y-sin(degtorad(a))*d2,-1,1,a,c_white,0.9);
}
Note também nos scripts anteriores que mexo um pouco com o xscale, yscale e alpha para dar uma incrementada no resultado final que será este:

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


Primeira fase concluída!
Na próxima vou mostrar como montar cenários com gráficos clean que é um estilo cada vez mais popular graças ao crescimento da arte vetorial na internet.
São formas simples com gradientes, transparências, texturas e outros efetos.
Os resultados são satisfatórios e não precisa ser um mestre em desenho para faze-los, acredito que todos vão gostar.

Clique aqui para acessar a próxima aula


Última edição por Kabeção em Sex 03 Set 2010, 18:59, editado 4 vez(es)
Kabeção
Kabeção

Games Ranking : Sem avaliações

Data de inscrição : 08/06/2008
Reputação : 100
Número de Mensagens : 2314
Prêmios : [Aula - 01] Arte gráfica e efeitos especiais para Game Maker Empty

Medalhas x 0 Tutoriais x 7 Moedas x 0

Ouro x 3 Prata x 0 Bronze x 1

Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0

http://blackcapapps.blogspot.com.br/

Ir para o topo Ir para baixo

[Aula - 01] Arte gráfica e efeitos especiais para Game Maker Empty Re: [Aula - 01] Arte gráfica e efeitos especiais para Game Maker

Mensagem por CRP-Max Ter 31 Ago 2010, 11:50

Grande "Kabeção".
Ótimo tutorial, achei só dois probleminhas ai...
x = mouse_x;
Y = mouse_y;

draw_circle(x,y,15,1);

O "y" esta em maiusculo, mude para minusculo.

var a;

for (i = 0; i < n1; i += 1)
{
a = ang1+(360/n1*i);
draw_sprite_ext(sprPonta,-1,x+cos(degtorad(a))*d1,y-sin(degtorad(a))*d1,-0.8,0.8,a,c_white,0.75);
}

Não sei, mas tive a impressão que você queria um movimento no primeiro circulo de pontas certo?
se sim, faltou uma variavel para movimenta-lo que seria esta
ang1 += sp1;
Assim ele rodara no sentido contrario ao circulo de fora.

Estou aguardando mais tutoriais.
Nota:10
Very Happy
CRP-Max
CRP-Max

Games Ranking : Nota C

Notas recebidas : C
Data de inscrição : 28/10/2008
Reputação : 29
Número de Mensagens : 822
Prêmios : [Aula - 01] Arte gráfica e efeitos especiais para Game Maker Empty

Medalhas x 0 Tutoriais x 0 Moedas x 0

Ouro x 0 Prata x 0 Bronze x 0

Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0

Ir para o topo Ir para baixo

[Aula - 01] Arte gráfica e efeitos especiais para Game Maker Empty Re: [Aula - 01] Arte gráfica e efeitos especiais para Game Maker

Mensagem por Kyuubi Ter 31 Ago 2010, 12:19

Nossa cara eu to esperando o outro tuto,pois esse é 10!!!!eu gosto de jogar seus games que eles são cheios de efeitos,como o coletor de estrelas,eu tbm vi aquele seu game do concurso[003],nuss o promeiro lugar deve ser seu!!!
vc é profissional!!!
flws!!!!
Kyuubi
Kyuubi

Data de inscrição : 28/11/2009
Reputação : 0
Número de Mensagens : 443
Prêmios : [Aula - 01] Arte gráfica e efeitos especiais para Game Maker Empty

Medalhas x 0 Tutoriais x 0 Moedas x 0

Ouro x 0 Prata x 0 Bronze x 0

Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0

http://animeworldmugen.forumeiros.com/forum

Ir para o topo Ir para baixo

[Aula - 01] Arte gráfica e efeitos especiais para Game Maker Empty Re: [Aula - 01] Arte gráfica e efeitos especiais para Game Maker

Mensagem por Kabeção Ter 31 Ago 2010, 12:34

CRP-Max escreveu:Grande "Kabeção".
Ótimo tutorial, achei só dois probleminhas ai...
x = mouse_x;
Y = mouse_y;

draw_circle(x,y,15,1);

O "y" esta em maiusculo, mude para minusculo.

var a;

for (i = 0; i < n1; i += 1)
{
a = ang1+(360/n1*i);
draw_sprite_ext(sprPonta,-1,x+cos(degtorad(a))*d1,y-sin(degtorad(a))*d1,-0.8,0.8,a,c_white,0.75);
}

Não sei, mas tive a impressão que você queria um movimento no primeiro circulo de pontas certo?
se sim, faltou uma variavel para movimenta-lo que seria esta
ang1 += sp1;
Assim ele rodara no sentido contrario ao circulo de fora.

Estou aguardando mais tutoriais.
Nota:10
Very Happy
Obrigado por avisar, foi de grande ajuda.
Erros concertados.

Kyuubi escreveu:Nossa cara eu to esperando o outro tuto,pois esse é 10!!!!eu gosto de jogar seus games que eles são cheios de efeitos,como o coletor de estrelas,eu tbm vi aquele seu game do concurso[003],nuss o promeiro lugar deve ser seu!!!
vc é profissional!!!
flws!!!!
Obrigado, espero que goste dos próximos também. Happy

Para a aula 2 vamos montar um cenário mais um menos assim:
[Aula - 01] Arte gráfica e efeitos especiais para Game Maker Cenriof
Vai ser uma tela de seleção de planetas como o do Coletor de estrelas II.
Vou usar o Photoshop CS3 e explicar passo a passo então será um tutorial longo.
Kabeção
Kabeção

Games Ranking : Sem avaliações

Data de inscrição : 08/06/2008
Reputação : 100
Número de Mensagens : 2314
Prêmios : [Aula - 01] Arte gráfica e efeitos especiais para Game Maker Empty

Medalhas x 0 Tutoriais x 7 Moedas x 0

Ouro x 3 Prata x 0 Bronze x 1

Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0

http://blackcapapps.blogspot.com.br/

Ir para o topo Ir para baixo

[Aula - 01] Arte gráfica e efeitos especiais para Game Maker Empty Re: [Aula - 01] Arte gráfica e efeitos especiais para Game Maker

Mensagem por mutte Ter 31 Ago 2010, 13:08

tá ai uma coisa q sempre quis saber vlw mesmo cara
estou ansioso pela segunda parte do tutorial

muito bom cara eu sou seu maior fã ;]
mutte
mutte

Data de inscrição : 08/08/2010
Reputação : 1
Número de Mensagens : 48
Prêmios : [Aula - 01] Arte gráfica e efeitos especiais para Game Maker Empty

Medalhas x 0 Tutoriais x 0 Moedas x 0

Ouro x 0 Prata x 0 Bronze x 1

Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0

http://gamemaisarte.blogspot.com/

Ir para o topo Ir para baixo

[Aula - 01] Arte gráfica e efeitos especiais para Game Maker Empty Re: [Aula - 01] Arte gráfica e efeitos especiais para Game Maker

Mensagem por DS Santos Ter 31 Ago 2010, 13:10

Kabeção escreveu:Para a aula 2 vamos montar um cenário mais um menos assim:
[Aula - 01] Arte gráfica e efeitos especiais para Game Maker Cenriof
Vai ser uma tela de seleção de planetas como o do Coletor de estrelas II.
Vou usar o Photoshop CS3 e explicar passo a passo então será um tutorial longo.
Hum, criativo como sempre. Very Happy
Gosto muito desse seu estilo, é bonito e bem feito.

Esse tipo de tutorial é muito útil. Além de ensinar a fazer efeitos ainda mostra um pouco de programação para não-iniciantes.
Se o estilo visual que você pretende usar for mesmo o dessa imagem essas aulas vão ser algo raro pois nunca vi nada igual especificamente voltado para jogos e em português.
DS Santos
DS Santos

Data de inscrição : 19/05/2010
Reputação : 2
Número de Mensagens : 98
Prêmios : [Aula - 01] Arte gráfica e efeitos especiais para Game Maker Empty

Medalhas x 0 Tutoriais x 0 Moedas x 0

Ouro x 0 Prata x 0 Bronze x 0

Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0

Ir para o topo Ir para baixo

[Aula - 01] Arte gráfica e efeitos especiais para Game Maker Empty Re: [Aula - 01] Arte gráfica e efeitos especiais para Game Maker

Mensagem por Lucca Qua 13 Out 2010, 11:31

Estou trabalhando
avatar
Lucca

Data de inscrição : 13/10/2010
Reputação : 0
Número de Mensagens : 1
Prêmios : [Aula - 01] Arte gráfica e efeitos especiais para Game Maker Empty

Medalhas x 0 Tutoriais x 0 Moedas x 0

Ouro x 0 Prata x 0 Bronze x 0

Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0

Ir para o topo Ir para baixo

[Aula - 01] Arte gráfica e efeitos especiais para Game Maker Empty Re: [Aula - 01] Arte gráfica e efeitos especiais para Game Maker

Mensagem por Isaque Onix Qua 04 Set 2013, 02:42

Olá Kabeção, será que tem como "renovar" os links? estou interessado em aprender a desenhar de modo diferente de pixel art! se possivel, claro! obrigado!
Isaque Onix
Isaque Onix

Games Ranking : Nota C

Notas recebidas : C
Data de inscrição : 15/08/2010
Reputação : 147
Número de Mensagens : 1625
Prêmios : [Aula - 01] Arte gráfica e efeitos especiais para Game Maker Empty

Medalhas x 0 Tutoriais x 0 Moedas x 0

Ouro x 0 Prata x 0 Bronze x 0

Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Plataformas :
  • Game Maker 8.0 ou 8.1
  • Game Maker Studio 1.4
  • Game Maker Studio 2.0
  • Unity
  • C#
  • Outros


http://spyreserver.16mb.com

Ir para o topo Ir para baixo

[Aula - 01] Arte gráfica e efeitos especiais para Game Maker Empty Re: [Aula - 01] Arte gráfica e efeitos especiais para Game Maker

Mensagem por Conteúdo patrocinado


Conteúdo patrocinado


Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

 
Permissões neste sub-fórum
Não podes responder a tópicos