Desenhando Arcos (Curva Bezier)

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Desenhando Arcos (Curva Bezier)

Mensagem por Neofix em Qui 27 Mar 2014, 23:45

Precisei de um sistema desses para um jogo, e vou compartilhar com vcs:

Crie um script chamado "bezier" e coloque o código:
codigo:

var x1,y1,x2,y2,x3,y3,i,qx1,qy1,qx2,qy2,m,bx,by,bxp,by
p;
x1 = argument0;
y1 = argument1;
x2 = argument2;
y2 = argument3;
x3 = argument4;
y3 = argument5;

m = 50;
bxp = x1;
byp = y1;
for(i=0; i<m; i+= 1){
qx1 = x1+lengthdir_x(point_distance(x1,y1,x2,y2)*i/m,point_direction(x1,y1,x2,y2));
qy1 = y1+lengthdir_y(point_distance(x1,y1,x2,y2)*i/m,point_direction(x1,y1,x2,y2));
qx2 = x2+lengthdir_x(point_distance(x2,y2,x3,y3)*i/m,point_direction(x2,y2,x3,y3));
qy2 = y2+lengthdir_y(point_distance(x2,y2,x3,y3)*i/m,point_direction(x2,y2,x3,y3));
bx = qx1+lengthdir_x(point_distance(qx1,qy1,qx2,qy2)*i/m,point_direction(qx1,qy1,qx2,qy2));
by = qy1+lengthdir_y(point_distance(qx1,qy1,qx2,qy2)*i/m,point_direction(qx1,qy1,qx2,qy2));
draw_line_width_color(bx,by,bxp,byp,5,c_blue,c_blue); //desenha em azul stroke 5, mude se quiser!
bxp = bx;
byp = by;
}

Depois... No Draw de um objeto qualquer coloque:

bezier(x1,y1,xcurv,ycurv,x2,y2);
onde:
x1,y1 = origem do arco (P0 imagem abaixo)
xcurv, ycurv = ponto para curvatura (P1 imagem abaixo)
x2,y2 = destino do arco (P2 imagem abaixo)

A imagem explica melhor:


Espero que seja útil.

Dan

Neofix

Ranking : Nota A
Número de Mensagens : 98
Data de inscrição : 19/01/2009
Notas recebidas : A
Reputação : 7
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 1
   : 0
   : 0

Voltar ao Topo Ir em baixo

Re: Desenhando Arcos (Curva Bezier)

Mensagem por dharrison em Qui 27 Mar 2014, 23:48

Caramba Neofix vc mesmo que produziu isso? Grande qualidade!
É uma forma de desenhar vetores direto no GM

dharrison

Ranking : Nota B
Número de Mensagens : 1243
Idade : 25
Data de inscrição : 04/02/2009
Notas recebidas : A - B
Reputação : 89
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 1
Prêmios
   : 0
   : 1
   : 0

Voltar ao Topo Ir em baixo

Re: Desenhando Arcos (Curva Bezier)

Mensagem por Neofix em Qui 27 Mar 2014, 23:58

Quem me dera dharrison!
Eu pesquisei em fóruns gringos e adaptei o código a minha necessidade...
Eu to tentando criar esse efeito aqui:

Eu não faço idéia de como vou fazer a parte azul do raio kkk

Neofix

Ranking : Nota A
Número de Mensagens : 98
Data de inscrição : 19/01/2009
Notas recebidas : A
Reputação : 7
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 1
   : 0
   : 0

Voltar ao Topo Ir em baixo

Re: Desenhando Arcos (Curva Bezier)

Mensagem por Gabreel em Sex 28 Mar 2014, 00:00

Muito bom Neofix! Porém, uma coisa que nunca consegui fazer no GM é implementar funções quadráticas a partir de um vértice. Quem sabe  um dia eu consiga. :/

Gabreel

Número de Mensagens : 2227
Idade : 20
Data de inscrição : 02/10/2009
Reputação : 52
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 0
   : 0
   : 0

Voltar ao Topo Ir em baixo

Re: Desenhando Arcos (Curva Bezier)

Mensagem por Neofix em Sex 28 Mar 2014, 00:17

Eu achei esse cara aqui, mas infelizmente não consegui rodar a extensão dele no GMS:

http://gmc.yoyogames.com/index.php?showtopic=491339

O exemplo que ele fez com tentáculos é lindo (gostando da parte matemática ou não...):


Neofix

Ranking : Nota A
Número de Mensagens : 98
Data de inscrição : 19/01/2009
Notas recebidas : A
Reputação : 7
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 1
   : 0
   : 0

Voltar ao Topo Ir em baixo

Re: Desenhando Arcos (Curva Bezier)

Mensagem por Kabeção em Sex 28 Mar 2014, 11:56

Neofix escreveu:Quem me dera dharrison!
Eu pesquisei em fóruns gringos e adaptei o código a minha necessidade...
Eu to tentando criar esse efeito aqui:

Eu não faço idéia de como vou fazer a parte azul do raio kkk
Isso provavelmente não é feito em tempo real.

GMS já tem um sistema para lidar com curvas, as paths.
Tanto pra desenhar uma curva quanto esse feito é mais fácil criar e manipular os pontos com path e o resto é calculado pela própria engine.

Esse script não produz o mesmo efeito que uma curva de bezier.
Elas são bem mais arredondadas.
A curva começa depois da metade entre os dois pontos, o resultado desse script é praticamente o mesmo resultado das paths.

Kabeção

Ranking : Sem avaliações
Número de Mensagens : 2314
Data de inscrição : 08/06/2008
Reputação : 100
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 3
   : 0
   : 1

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

Voltar ao Topo Ir em baixo

Re: Desenhando Arcos (Curva Bezier)

Mensagem por shatterhand2 em Sex 04 Abr 2014, 17:36

Faz com sprites, é bem mais fácil, e ainda dá pra fazer um efeito excelente.

shatterhand2

Número de Mensagens : 645
Idade : 33
Data de inscrição : 21/10/2009
Reputação : 11
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 1
   : 0
   : 0

http://shatterhand.beatthegame.net

Voltar ao Topo Ir em baixo

Re: Desenhando Arcos (Curva Bezier)

Mensagem por Neofix em Sex 04 Abr 2014, 22:45

Estou quase terminando meu GhostBusters Simulator.
ShatterHand2 não dá para fazer com sprites pq o efeito é dinamico, ele faz uma curva conforme o movimento que o cara faz com a Neutrona Blaster, "puxando" o fantasma de um lado para outro. Veja uns videos do jogo Ghostbusters para entender.
Cheguei a este resultado:

O raio azul eu tentei usar sprites com alpha mas reduziu a performance no celular...
Talvez eu mude no futuro.

Neofix

Ranking : Nota A
Número de Mensagens : 98
Data de inscrição : 19/01/2009
Notas recebidas : A
Reputação : 7
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 1
   : 0
   : 0

Voltar ao Topo Ir em baixo

Re: Desenhando Arcos (Curva Bezier)

Mensagem por Superbomber_MuyMacho em Sex 04 Abr 2014, 23:35

Eu achei muito bom, um ótimo script(Que poderia ser feito de uma maneira bem mais simples), mesmo sendo complicado atoa ainda sim é bem útil. blz

Superbomber_MuyMacho

Número de Mensagens : 103
Idade : 19
Data de inscrição : 22/03/2014
Reputação : 9
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 0
   : 0
   : 0

Voltar ao Topo Ir em baixo

Re: Desenhando Arcos (Curva Bezier)

Mensagem por cascavelo em Sab 05 Abr 2014, 15:35

É praticamente impossível fazer este efeito de relâmpago em um celular sem que a taxa de quadros caia drasticamente, em um PC até dá. O maior problema é que pra conseguir um efeito bom você vai ter que trabalhar com milhares que sprites pequenos com uso de alpha o que consome tempo de processamento.
 Dá pra fazer algo parecido usando partículas, mas vai ficar lento também.

 A única forma de funcionar rápido é com sprites grandes mesmo, você teria que desenhar o raio e animar a ondulação dele. A parte complicada é fazer a curva ao mover o raio, só daria pra fazer usando shaders. 
Estude um pouco sobre shaders, no fórum da yoyo tem bastante coisa e você pode tentar adaptar algum código  pronto que faça ondulação do desenho.

 Isto é uma coisa bem difícil de fazer, as vezes impossível. Por este motivo que você não vê este tipo de efeito em jogos 2D.

cascavelo

Ranking : Nota A
Número de Mensagens : 1011
Idade : 46
Data de inscrição : 08/12/2011
Notas recebidas : A - A - A - A - A -A -C
Reputação : 71
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 1
   : 2
   : 1

Voltar ao Topo Ir em baixo

Re: Desenhando Arcos (Curva Bezier)

Mensagem por Willy em Seg 07 Abr 2014, 00:27

Acredito ter uma solução para o seu problema... Na verdade, uma sugestão.
Você consegue fazer um efeito de raio maneiro se ao invés de curvas, usar várias retas semelhante ao que encontramos no jogo Chicken Invaders:

Não é muito complicado de fazer... Resumidamente, basta criar uma reta com vários nós (ou seja, uma ponta ligada a outra) que variam de posição aleatoriamente.

___________


Engines, tutoriais e projetos? Clique no banner!



Atenção:
Comporte-se, senão você vai levar a cintada do Willy no meio da bunda! bravo


Willy

Ranking : Nota A
Número de Mensagens : 1812
Idade : 23
Data de inscrição : 08/06/2009
Notas recebidas : C + B + A + A
Reputação : 245
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 2
   : 1
   : 1

http://willy-gmbr.blogspot.com/

Voltar ao Topo Ir em baixo

Re: Desenhando Arcos (Curva Bezier)

Mensagem por TRFN em Seg 07 Abr 2014, 17:47

Como o Willy sugeriu, a intenção seria fazer algo do gênero :
Código:
x1 = x - irandom( 5 );
x2 = x + irandom( 5 );
y1 = y;
y2 = y + irandom( 10 );

for( i = 0; i < 30; i+=1 ){
draw_line(x1, y1, x2, y2 );
x1 = x2;
x2 = x1 + irandom( 5 );
y1 = y2;
y2 = y1 + irandom( 10 );
}
Mas é claro, adaptando o código segundo a sua necessidade.

___________



TRFN

Ranking : Nota C
Número de Mensagens : 970
Idade : 21
Data de inscrição : 16/01/2012
Notas recebidas : C
Reputação : 33
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 1
   : 0
   : 2

http://trfnsite.com

Voltar ao Topo Ir em baixo

Re: Desenhando Arcos (Curva Bezier)

Mensagem por Gabreel em Seg 07 Abr 2014, 18:07

Acho que teria que fazer um script recursivo para fazer os raios, e como todos devem saber, recursividade é muito lento :/

Gabreel

Número de Mensagens : 2227
Idade : 20
Data de inscrição : 02/10/2009
Reputação : 52
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 0
   : 0
   : 0

Voltar ao Topo Ir em baixo

Re: Desenhando Arcos (Curva Bezier)

Mensagem por shatterhand2 em Ter 08 Abr 2014, 13:18

For não é recursividade, é laço. Dá pra fazer desse jeito, mas vai ficar feinho a beça.

Dá pra fazer com sprites. Faz os raios divididos em partes, cada parte se interligando com a parte seguinte. Na hora de fazer "curva", gira o sprite de acordo com a curva, e coloca o seguinte mais a esqueda (ou mais a direita) tanto quanto for o ângulo da curva, para que as extremidades continuem se tocando.

Ja fiz algo assim, funcionava relativamente bem. Só requer um pouco de matemática.

Os "blocos" raios tem "espaços" entre eles, mas era proposital, poderia coloca-los mais juntos, eu poderia girar esses raios com a nave como ponto central sem problemas. E foi feito fazendo sprite.

shatterhand2

Número de Mensagens : 645
Idade : 33
Data de inscrição : 21/10/2009
Reputação : 11
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 1
   : 0
   : 0

http://shatterhand.beatthegame.net

Voltar ao Topo Ir em baixo

Re: Desenhando Arcos (Curva Bezier)

Mensagem por chicoweb em Ter 08 Abr 2014, 13:31

Neofix escreveu:Precisei de um sistema desses para um jogo, e vou compartilhar com vcs:

Crie um script chamado "bezier" e coloque o código:
codigo:

var x1,y1,x2,y2,x3,y3,i,qx1,qy1,qx2,qy2,m,bx,by,bxp,by
p;
x1 = argument0;
y1 = argument1;
x2 = argument2;
y2 = argument3;
x3 = argument4;
y3 = argument5;

m = 50;
bxp = x1;
byp = y1;
for(i=0; iqx1 = x1+lengthdir_x(point_distance(x1,y1,x2,y2)*i/m,point_direction(x1,y1,x2,y2));
qy1 = y1+lengthdir_y(point_distance(x1,y1,x2,y2)*i/m,point_direction(x1,y1,x2,y2));
qx2 = x2+lengthdir_x(point_distance(x2,y2,x3,y3)*i/m,point_direction(x2,y2,x3,y3));
qy2 = y2+lengthdir_y(point_distance(x2,y2,x3,y3)*i/m,point_direction(x2,y2,x3,y3));
bx = qx1+lengthdir_x(point_distance(qx1,qy1,qx2,qy2)*i/m,point_direction(qx1,qy1,qx2,qy2));
by = qy1+lengthdir_y(point_distance(qx1,qy1,qx2,qy2)*i/m,point_direction(qx1,qy1,qx2,qy2));
draw_line_width_color(bx,by,bxp,byp,5,c_blue,c_blue); //desenha em azul stroke 5, mude se quiser!
bxp = bx;
byp = by;
}

Depois... No Draw de um objeto qualquer coloque:

bezier(x1,y1,xcurv,ycurv,x2,y2);
onde:
x1,y1 = origem do arco (P0 imagem abaixo)
xcurv, ycurv = ponto para curvatura (P1 imagem abaixo)
x2,y2 = destino do arco (P2 imagem abaixo)

A imagem explica melhor:


Espero que seja útil.

Dan

eSSE script do bezier tá com um defeito.
Ele não respeita o x2 que seria o ponto onde a curva reverte (P1).
Podem colocar qualquer valor como x2 que a posição continuar a mesma.

Eu creito que a melhor solução é a do chiken invaders, aquilo ali é um sprite (ou varios com larguras diferentes, mas um do lado do outro).
Ele vai subindo na tela dá uma sensação de raio se mexendo, mas na verdade é um sprite estático que vai subindo na tela so isso.

chicoweb

Ranking : Nota C
Número de Mensagens : 666
Idade : 40
Data de inscrição : 15/05/2012
Notas recebidas : B+C
Reputação : 49
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 1
   : 0
   : 0

Voltar ao Topo Ir em baixo

Re: Desenhando Arcos (Curva Bezier)

Mensagem por cascavelo em Ter 08 Abr 2014, 13:32

Que tal um concurso relâmpago? Tema: Crie o raio dos caça fantasmas.

cascavelo

Ranking : Nota A
Número de Mensagens : 1011
Idade : 46
Data de inscrição : 08/12/2011
Notas recebidas : A - A - A - A - A -A -C
Reputação : 71
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 1
   : 2
   : 1

Voltar ao Topo Ir em baixo

Re: Desenhando Arcos (Curva Bezier)

Mensagem por shatterhand2 em Ter 08 Abr 2014, 13:51

Ah, e se alguém realmente acha que não dá pra fazer raios com curvas complexas em 2D:

https://www.youtube.com/watch?v=Xe_5zxXiQAs

Em qualquer momento depois de 1 minuto dá pra ver.

Aquilo são sprites que giram e se posicionam de acordo com a necessidade do raio.

shatterhand2

Número de Mensagens : 645
Idade : 33
Data de inscrição : 21/10/2009
Reputação : 11
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 1
   : 0
   : 0

http://shatterhand.beatthegame.net

Voltar ao Topo Ir em baixo

Re: Desenhando Arcos (Curva Bezier)

Mensagem por Mateus O de Andrade em Ter 08 Abr 2014, 14:14

Realmente o efeito ficou bem bacana.
O único problema que notei foi que quando atinge um alvo, os sprites não fizeram uma curva exata (problemas na animação talvez?). Em certos momentos fica evidente (demais) que são sprites sequenciais.

Por falar nisso, é muito complexo fazer esse efeito?
Tenho em mente um inimigo que vai usar esse efeito para ligar a cabeça dele ao pescoço e ao corpo. Gostaria de saber se tem um tutorial bom e fácil sobre isso.

Mateus O de Andrade

Ranking : Nota D
Número de Mensagens : 399
Idade : 31
Data de inscrição : 25/03/2014
Reputação : 37
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 0
   : 0
   : 0

Voltar ao Topo Ir em baixo

Re: Desenhando Arcos (Curva Bezier)

Mensagem por Kabeção em Ter 08 Abr 2014, 14:34

shatterhand2 escreveu:Ah, e se alguém realmente acha que não dá pra fazer raios com curvas complexas em 2D:

https://www.youtube.com/watch?v=Xe_5zxXiQAs

Em qualquer momento depois de 1 minuto dá pra ver.

Aquilo são sprites que giram e se posicionam de acordo com a necessidade do raio.
Nem é algo tão difícil.
Fiz algo parecido no meu projeto CoaS anos atrás.



A direção inicial do lazer é predefinida e então eu vou acrescentando para mais ou menos de acordo com a direção entre o lazer e o alvo, e isso gera uma curva precisa até o destino.
Para a imagem eu usei uma sprite com 1px de largura esticada com image_xscale na distancia de um ponto ate o outro, ou seja, um loop que percorre cada ponto chave da curva e desenha um draw_sprite_ext.

Kabeção

Ranking : Sem avaliações
Número de Mensagens : 2314
Data de inscrição : 08/06/2008
Reputação : 100
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 3
   : 0
   : 1

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

Voltar ao Topo Ir em baixo

Re: Desenhando Arcos (Curva Bezier)

Mensagem por Rodrigo Santiago em Ter 08 Abr 2014, 22:28

Eu estava vendo o tópico e me lembrei de uma coisa. Eu estava procurando um efeito de raio no unity, mas todos eram uma negação.
Então eu criei meu próprio efeito, só que em 3D, ele consiste em determinar o ponto inicial e o final, criar e cortar uma linha reta(apenas no algoritimo) , mover esses pontos em uma circunferência(por delimitar distancia máxima da reta central) e depois traçar uma reta entre eles.
Vou refazer em 2D e colocar no game maker, mas vai demorar um pouco. Quando eu terminar eu posto aki.

Rodrigo Santiago

Ranking : Nota B
Número de Mensagens : 1281
Idade : 20
Data de inscrição : 28/07/2012
Notas recebidas : C + C + B
Reputação : 73
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 3
   : 1
   : 3

Voltar ao Topo Ir em baixo

Re: Desenhando Arcos (Curva Bezier)

Mensagem por Neofix em Qua 09 Abr 2014, 14:52

Publiquei o jogo na Google Play:

https://play.google.com/store/apps/details?id=com.BrainGames.GhostBustersSim

Neofix

Ranking : Nota A
Número de Mensagens : 98
Data de inscrição : 19/01/2009
Notas recebidas : A
Reputação : 7
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 1
   : 0
   : 0

Voltar ao Topo Ir em baixo

Re: Desenhando Arcos (Curva Bezier)

Mensagem por shatterhand2 em Qui 10 Abr 2014, 08:50

Cara, o Google Play é tão leniente assim com uso de marcas registradas sem autorização?

Eu vejo uma penca de games utilizando marcas de terceiros lá, e sempre tenho a impressão que não existe autorização pra isso.

shatterhand2

Número de Mensagens : 645
Idade : 33
Data de inscrição : 21/10/2009
Reputação : 11
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 1
   : 0
   : 0

http://shatterhand.beatthegame.net

Voltar ao Topo Ir em baixo

Re: Desenhando Arcos (Curva Bezier)

Mensagem por cascavelo em Qui 10 Abr 2014, 09:19

Cara, o Google Play é tão leniente assim com uso de marcas registradas sem autorização?

 Na Googleplay não existe uma "pré" qualificação pra entrar na loja, a responsabilidade é do autor do app.
 Mas os jogos que infligem direitos autorais acabam sendo suspensos, não sei se por denúncia ou por reclamação dos donos da marca.
 Um amigo do fórum fez 2 jogos com pokemon, já tinha mais de 50.000 downloads e foi retirado.
 Não compensa, porque você acaba por não receber o valor que foi gerado e fica avisado que na próxima será banido. Dependendo da franquia você recebe e-mails dos advogados ameaçando e se tiver ganhando muito dinheiro com o app pode acabar processado.

 Apartir de  28 de janeiro as regras da loja ficaram mais rígidas, acho que a fiscalização vai aumentar.

 Estou sempre avisando aqui no fórum para que não percam tempo usando personagens e franquias existentes se pretendem lançar o jogo de forma comercial, mesmo sendo gratuito ele será considerado comercial se for publicado em alguma loja online.

 Jogos baseados em idéias e personagens existentes (clones) são permitidos, é a melhor opção.

cascavelo

Ranking : Nota A
Número de Mensagens : 1011
Idade : 46
Data de inscrição : 08/12/2011
Notas recebidas : A - A - A - A - A -A -C
Reputação : 71
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 1
   : 2
   : 1

Voltar ao Topo Ir em baixo

Re: Desenhando Arcos (Curva Bezier)

Mensagem por Conteúdo patrocinado Hoje à(s) 10:28


Conteúdo patrocinado


Voltar ao Topo Ir em baixo

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

 
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum