Dois Problemas Nenhuma Solução

[MafnGamer 13]

Eu em meus estudos sobre html5 me deparei com dois problemas :upset:. Primeiro o requestAnimationFrame está parecendo um setInterval com um lag danado. Segundo o FireFox não reconhece esse parte do código

context.clearRect(hero.width, hero.height)

esse eu uso para limpar o canvas, no chrome funciona mas no FF não. Alguma solução para os meus problemas?

[JCMais 75]

Se está dando lag no Firefox, tente desativar alguns plugins, aqui o motivo do lag que tava dando era esse. Agora se for na maioria dos navegadores, o problema está no seu PC.

 

Referente ao metódo, clearRect precisa de 4 parametros, e não dois.

 

clearRect( xInicial, yInicial, xFinal, yFinal );

[MafnGamer 13]

JCMais você se interessa por desenvolvimento de jogos ou só animações?

[JCMais 75]

Os dois, e mais um pouco. :lol:

[MafnGamer 13]

JCMais resolvi esse problema :clap: , mas só que estou com outro eu tenho uma image(hero) e preciso usar o clear nele para desenhar ele denovo mas o background da imagem está ficando branco sem mostrar meu background do canvas tem solução para isso?

[JCMais 75]

Você não deve utilizar o mesmo Canvas para renderizar o background, é boa prática deixar um outro elemento apenas para isso, assim você evita ter que desenhar todo o bg (que geralmente é estático) à cada frame, além de evitar o problema que você acabou de citar.

[MafnGamer 13]

Mas eu uso outro canvas?

[JCMais 75]

Sim, dois canvas, um pro bg, e o outro para o primeiro plano do jogo.

[MafnGamer 13]

Mas usando dois canvas eu consigo fazer detectação de colisão entre os objetos?

[JCMais 75]

No primeiro canvas vai ficar apenas o bg, eu não vejo nenhum motivo para efetuar detecção de colisão entre um objeto que está no primeiro plano e algo que esteja no bg. O.o

 

Mas se for apenas curiosidade, sim, dá para detectar.

[MafnGamer 13]

Ai eu uso css para colocar um em cima do outro ou tem alguma maneira com javascript?

[JCMais 75]

Use CSS para posicionar um sobre o outro.

[MafnGamer 13]

Resolvi esse problema mas agora surgiu outro :pinch:.

Eu tava pegando a posição do mouse e passando com x e y do meu hero mas só que ele tá indo muito rápido e nem tá parecendo que ele está andando alguma solução? :cry:

[JCMais 75]

Posta o código referente à movimentação, se tiver online melhor ainda. =]

[MafnGamer 13]

Certo aki vai a movimentação:

       canvas.addEventListener('click', function(event) {
           console.log("mouse click em X: " + event.pageX + " e em Y: " + event.pageY);
           posX = event.pageX - hero.width;
           posY = event.pageY - hero.height;
       }, false);

Ai para eu fazer ele ir para a posição do mouse eu uso o window.requestAnimationFrame redesenhando ele em posX e posY.

[JCMais 75]

A forma que você verifica pelas coordenadas do mouse não está correta, pois você não leva em consideração a posição do canvas, faça o seguinte, cria um objeto Utils, e dentro crie o metódo captureMouse, esse metódo você passa como parâmetro o elemento do canvas, e ele retorna um objeto contendo a posição mais recente do mouse (ou seja, possui as proprieadades x e y).

 

Segue a implementação que utilizo:

 

utils.captureMouse = function( element ) {

var mouse = { x : 0, y : 0 };

element.addEventListener( 'mousemove', function( event ) {

	var x, y;

	if( event.pageX || event.pageY ) {

		x = event.pageX, y = event.pageY;

	} else {
		x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft,
		y = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
	}

	x -= element.offsetLeft, y -= element.offsetTop;

	mouse.x = x, mouse.y =  y;

}, false );

return mouse;
};

[MafnGamer 13]

Eu uso desse jeito por causa do livro Foundation HTML5 animations with javascript. Mas o meu problema não é o mouse. Meu problema é que quando eu clico em algum lugar do canvas o hero vai direto para o lugar sem fazer caminho nenhum(animação de andar) ai eu queria fazer isso. Desculpe se não expliquei direito da primeira vez mas esse é meu problema

[JCMais 75]

Posta o código completo, para isso você tem que medir a distância e aplicar uma velocidade relativa à mesma.

 

Mas o teu metódo de identificar o mouse está diferente da do livro, a do livro é exatamente a que eu lhe passei.

[MafnGamer 13]

É o meu método tá diferente mas eu já consegui fazer esse dá distancia. Vlw cara :thumbsup: .