COMO FAZER UM CANVAS DE DESENHO

2

Stats

1,744 visits, 2,347 views

Tools

License

This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Published on 6 Jul, 2019.

Neste tutorial, mostrarei como fazer uma tela que você pode desenhar usando o Construct 2. Se você já tentou criar uma superfície de desenho, provavelmente fez isso ao gerar objetos a cada marca na posição do mouse. Embora funcione, ele tem dois problemas principais: se você desenha muito rápido, seu desenho pode ficar assim:

Porque o jogo não está rodando rápido o suficiente para gerar todos os objetos e cobrir a linha. O outro problema é que, se você gerar muitos objetos se sobrepondo, a tela poderá ficar sobrecarregada e isso levará a problemas de desempenho. Este procedimento não vai funcionar. Se você já viu algum aplicativo de desenho, como o Microsoft Paint, talvez saiba como esses programas funcionam. Eles geram linhas entre os objetos que já criamos e, se o sistema pular uma seção, ele será preenchido com a linha. Mas como nós fazemos isso? É realmente muito simples. Usamos dois pontos temporários e uma linha que será gerada repetidas vezes.

[Vou referenciar o objeto como "linha" e o desenho como "linha desenhada".] Nós transportamos o primeiro ponto para o início da linha traçada. Então, (com o movimento do mouse) nós transportamos o segundo ponto para o mouse. Ggeramos a linha no primeiro ponto (a origem da linha é no final). Em seguida, fazemos a linha do jeito certo e fazemos quanto tempo quanto deve ser. Então, movemos o primeiro ponto para a posição correta para continuar. Então, repetimos cada tick, certificando-nos de que, quando soltamos o mouse, transportamos o primeiro ponto para ele, de modo que ele esteja sempre no lugar certo quando começamos a desenhar uma nova linha.

Você pode inverter as condições clicando com o botão direito do mouse e selecionando Inverter. Eu configurei os dois pontos para inicialmente serem invisíveis em suas propriedades. O desenho final será assim:

Obrigado pela leitura!

  • 1 Comments

  • Order by
Want to leave a comment? Login or Register an account!