2

first time poster here,

I have looked for a solution to this for days to no avail, if this has been asked I beg you to link me as I could not find it. Anyways, here goes:

I am working on a tile based canvas app and having issues with moving the camera. Essentially I want to keep the hero in the middle of the screen unless he comes near and edge. I have tried working with using translating the canvas as the hero moves but had issues with shearing. I ended up reworking my logic and now figure out where to start drawing based on the hero's coordinates and then keep my hero drawn at the center of the canvas, it works well until I go near the edges of the screen. Here is my current code for drawing the map, leoX and leoY are the absolute coordinates of the hero, the canvas is 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;

EDIT: Link to example is now dead.

Contristo
  • 315
  • 1
  • 3
  • 17
  • I think I may have solved the issue, i do not think it is pretty or elegant but essentially, i am just running checks to see if I am on a edge or corner of the map and drawing differently accordingly. I will post my solution when I actually have the hero drawn correctly. – Contristo Aug 17 '11 at 20:36
  • All right, essentially the code above does the job but it is missing a few things, for one leo's position on the canvas should only be .5width by .5height of canvas if he is not in the corner or edge, so what I did was make a variable called adjustedXPos and adjustedYPos which is set depending on his position, if he is in the top left corner for example, we actually can use just his actual x,y position . On the the side edges we want the y to stay at .5height so that the camera still scrolls up but want the x to represent Leo's position. – Contristo Aug 18 '11 at 02:23
  • just keep in mind that you need to offset on the right side since the screen is no longer scrolling. Hope this helps someone out in the future who is as noob as me. – Contristo Aug 18 '11 at 02:24
  • Would you say you've answered this question yourself now? Can it be closed? – andrewmu Sep 06 '11 at 10:40
  • If you've solved it, then submit your solution as an answer and accept it if you don't get a better answer within 2 days. – Some Guy Sep 12 '11 at 07:59
  • new thread related: [HTML5 Canvas follow object](http://stackoverflow.com/a/16973218/2252829) – Gustavo Carvalho Jun 08 '13 at 00:12

0 Answers0