Question

I am having trouble drawing a tile-based map 🙁
the map however is only going to show what is VISIBLE to the player
I have a canvas element on which i draw one layer.
On the canvas, i use javascript to attach an image 32x32px.
The image’s position is based on: $tr $tc

as shown below:

for($tr = 0; $tr < count($mapArray)-1; $tr++) {
for($tc = 0; $tc < count($mapArray[$tr])-1; $tc++) {
    if($mapArray[$tr][$tc]!== null){
        echo "attachImage(" . $mapArray[$tr][$tc]. "," . $tc . "," . $tr . ",context);";
    }
}
}

I don’t know how I would go about making the it draw tiles from 0,0. it always starts drawing tiles from the same location on the array (ex 3,2). Maybe i’m over thinking this or im too tired… i can’t find out any way 🙁

here’s the javascript part

function attachImage(tile, x, y, canvasContext)
{
  var base_image = new Image();
  base_image.onload = function(){
    canvasContext.drawImage(base_image, 32*(x-0),32*(y-0));
  }
  base_image.src = 'Images/tiles/'+(tile-1)+'.png';
}

to reiterate, i want it to start drawing from 0px,0px because i want to only display the tiles around the player.

Answer 1

i dont know how to delete this question, but i found out the answer

$c = 0;
for($tr = $drawy; $tr < $drawy2; $tr++) {
    $r = 0;
    for($tc = $drawx; $tc < $drawx2; $tc++) {
        if($mapArray[$tr][$tc] !== null)
        {
            $tile = $mapArray[$tr][$tc];
            echo "attachImage(" . $tile . "," . $r . "," . $c . ",context);";
        }
        $r++;
    }
    $c++;
}

for($tr = 0; $tr < count($mapArrayy)-1; $tr++) {
    for($tc = 0; $tc < count($mapArrayy[$tr])-1; $tc++) {
        if($mapArrayy[$tr][$tc]!== null){
            echo "attachImage(" . $mapArrayy[$tr][$tc]. "," . $tc . "," . $tr . ",context2);";
        }
    }
}

i added $c and $r in the first loop. that’s all. now it draws from 0px,0px.