Камера на холсте HTML 5 - PullRequest
Новая
       15

Камера на холсте HTML 5

2 голосов
/ 17 августа 2011

здесь первый постер,

Я искал решение этой проблемы в течение нескольких дней, но безрезультатно, если об этом попросили, я прошу вас связать меня, так как я не смог его найти. В любом случае, здесь идет:

Я работаю над основанным на плитке приложением холста и испытываю проблемы с перемещением камеры. По сути, я хочу держать героя в центре экрана, если только он не приблизится к краю. Я пробовал работать с использованием перевода холста по мере движения героя, но у меня были проблемы со стрижкой. В итоге я переработал свою логику и теперь выяснил, с чего начать рисовать, основываясь на координатах героя, а затем держать моего героя в центре холста, это будет работать хорошо, пока я не подойду к краям экрана. Вот мой текущий код для рисования карты, leoX и leoY - абсолютные координаты героя, холст 600X600 

var topLeftX = Math.floor((leoX - 300)/33);
var topLeftY = Math.floor((leoY - 300)/33);


//draw map
for(var rowCtr=topLeftY;rowCtr<mapRows;rowCtr++){
for(var colCtr=topLeftX;colCtr<mapCols;colCtr++){

  var tileId = tileMap[rowCtr][colCtr]+ mapIndexOffset;
  var mapSourceX = Math.floor(tileId % 8 )*33;
  var mapSourceY = Math.floor(tileId / 8 )*33;
  context.drawImage(map, mapSourceX, mapSourceY,33,33,(colCtr-topLeftX)*33,(rowCtr-        topLeftY)*33,33,33);

 }
}
//code to draw leo
context.drawImage(tilesheet, sourceX,sourceY,32,48,300,300,32,48);

//update leo's position                 
leoX += leoDeltaX;
leoY += leoDeltaY;

РЕДАКТИРОВАТЬ: ссылка на пример уже не работает.

...