Boas!
Tenho uma imagem (64px por 32px) com uma sombra meio transparente que não posso corta-la directamente no *.png... E fica sobreposta quando faço o clip.
Aquela parte para onde aponta a seta vermelha. (só não acontece na ultima imagem desenhada)
![Imagem Colocada]()
No meu projecto também aparece o resto da imagem (onde estão as setas azuis) quando passo com o rato nos tiles que fazem fronteira...
fica aqui o codigo para desenhar a imagem de cima:
Código (Javascript):
Alguém sabe como resolver isso??
É um jogo isométrico, o ideal seria ordenar "topológicamente" todos os items/objectos na cena (para não ficarem sobrepostos quando se desenha objectos com mais de um tile) mas tive a ver como se fazia e perdi tempo a mais e não consegui fazer... decidi dividir os objectos grandes e desenha-los tile por tile... mas tem esse tem esse problema que me fez abrir este tópico...
Obrigado desde já!
Tenho uma imagem (64px por 32px) com uma sombra meio transparente que não posso corta-la directamente no *.png... E fica sobreposta quando faço o clip.
Aquela parte para onde aponta a seta vermelha. (só não acontece na ultima imagem desenhada)
No meu projecto também aparece o resto da imagem (onde estão as setas azuis) quando passo com o rato nos tiles que fazem fronteira...
fica aqui o codigo para desenhar a imagem de cima:
Código (Javascript):
window.onload = function () {
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var myImage = new Image();
myImage.src = "http://s24.postimg.org/4szaj728x/test.png";
myImage.onload = function () {
context.save();
context.translate(100, 100);
context.moveTo(0, 0);
context.lineTo(myImage.width / 2, myImage.height / 2);
context.lineTo(0, myImage.height);
context.lineTo(-myImage.width / 2, myImage.height / 2);
context.closePath();
context.clip();
context.drawImage(myImage, -myImage.width / 2, 0);
context.restore();
context.save();
context.translate(100 + myImage.width / 2, 100 + myImage.height / 2);
context.moveTo(0, 0);
context.lineTo(myImage.width / 2, myImage.height / 2);
context.lineTo(0, myImage.height);
context.lineTo(-myImage.width / 2, myImage.height / 2);
context.closePath();
context.clip();
context.drawImage(myImage, -myImage.width / 2, 0);
context.restore();
};
};
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var myImage = new Image();
myImage.src = "http://s24.postimg.org/4szaj728x/test.png";
myImage.onload = function () {
context.save();
context.translate(100, 100);
context.moveTo(0, 0);
context.lineTo(myImage.width / 2, myImage.height / 2);
context.lineTo(0, myImage.height);
context.lineTo(-myImage.width / 2, myImage.height / 2);
context.closePath();
context.clip();
context.drawImage(myImage, -myImage.width / 2, 0);
context.restore();
context.save();
context.translate(100 + myImage.width / 2, 100 + myImage.height / 2);
context.moveTo(0, 0);
context.lineTo(myImage.width / 2, myImage.height / 2);
context.lineTo(0, myImage.height);
context.lineTo(-myImage.width / 2, myImage.height / 2);
context.closePath();
context.clip();
context.drawImage(myImage, -myImage.width / 2, 0);
context.restore();
};
};
Alguém sabe como resolver isso??
É um jogo isométrico, o ideal seria ordenar "topológicamente" todos os items/objectos na cena (para não ficarem sobrepostos quando se desenha objectos com mais de um tile) mas tive a ver como se fazia e perdi tempo a mais e não consegui fazer... decidi dividir os objectos grandes e desenha-los tile por tile... mas tem esse tem esse problema que me fez abrir este tópico...
Obrigado desde já!