Clash Royale CLAN TAG#URR8PPP

HTML5 Canvas Move TiledMap Background

At first, sorry for my English :(

I'm having fun with canvas element and i'm trying to make a gamebrowser but i can't solve this problem.

I get the map tiles in two dimension array.

I get the position player, i translate the context (to draw it in center of the canvas) and then i redraw the map considering the absolute position in the map. But when i move the player, the map dissappear about 1 second (clearRect canvas i think) and after the map appears.

So, my problem is this annoying second with the canvas in black.

The code.

function pinta()
var mirror = renderToCanvas(canvas.width, canvas.height, function (ctx)
ctx.clearRect(0,0,canvas.width,canvas.height);

//antes de pintar debemos calcular la traslacion
////////////////////////////////////////////////
var moverX=canvas.width/2-players[yo].x;
var moverY=canvas.height/2-players[yo].y;
ctx.translate(moverX,moverY);
pinta_terreno();
pinta_players();

function pinta_players()

for( var player in players )
var i=player,
x=players[i].x;
y=players[i].y;
var img=new Image(25,25);
if(i==2)img.src="/img/player2.png";
else img.src="/img/player1.png";
ctx.drawImage(img,x,y);



function pinta_terreno()

// donde estoy en tiles
var min_x=(-canvas.width+players[yo].x)/TAM_TILE;
var max_x=(canvas.width+players[yo].x)/TAM_TILE;
var min_y=(-canvas.width+players[yo].y)/TAM_TILE;
var max_y=(canvas.width+players[yo].y)/TAM_TILE;
///////////////////////
for(var i=min_x;i<=max_x;i++)
for(var j=min_y;j<=max_x;j++)

var x=i*TAM_TILE;
var y=j*TAM_TILE;

try

if(mapa[i][j]!=null && mapa[i][j]!="undefined")

var terreno=new Image(25,25);
terreno.src="/img/terrain/"+mapa[i][j]+".png";
ctx.drawImage(terreno,x,y);

catch(e)



// del for(var j=0;j<(canvas.height/TAM_TILE);j++)

// del pintaterreno
);

context.clearRect(0,0,canvas.width,canvas.height);
context.drawImage(mirror, 0, 0);



this can help me i think... batiste.dosimple.ch/blog/2011-06-27-1
– user1886506
Dec 7 '12 at 22:14

1 Answer
1

I have never done animation with canvases (only static graphs), but I think there is a couple of tips you should review (and don't worry, mi inglés tampoco es perfecto).

console.log()

ctx.clearRect()

ctx.translate()

pinta_players()

pinta_terreno()

pinta_terreno()

ctx.clearRect()

mirror()

ctx.drawImage(player1,x,y);

ctx.drawImage(img,x,y);

ctx.drawImage(terreno[i,j],x,y);

ctx.drawImage(terreno,x,y);

paint

context.drawImage()

drawImage

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.