Hey

I am a bit stuck with how to draw a larger tile over a grid which consists of much smaller tiles.


My base grid is drawn out like this:

var iterX     = Math.ceil(canvas.width / map.grid.widthHalf);
var iterY     = Math.ceil(canvas.height / map.grid.heightHalf); 
 
function drawGrid(context){ var minX = screen.gridX - iterX; var maxX = screen.gridX + iterX; var minY = screen.gridY - iterY; var maxY = screen.gridY + iterY;
for(var i = minX; i < maxX; i++){ if(i < 0 || i > max){ continue; } for(var j = minY; j < maxY; j++){ if(j < 0 || j > max){ continue; }
var res = gridIsoWorld(i,j,map.grid.widthHalf,map.grid.heightHalf); var x = res[0] + screen.offsetX - map.grid.widthHalf; var y = res[1] + screen.offsetY - map.grid.heightHalf; context.drawImage(gridImg,x,y); } } }

Something went wrong with your code post, it seems most of it got crammed onto a few lines instead of properly spaced out.

Anyways, the idea for larger tiles is, you have to draw the regular size tiles first or your draw calls with be overlapped in ways you don't want. You can conveniently cheat and draw them at the same time (in one iteration over your tile grid), if you offset your large tiles so they always overlap to the north and to the west, (assuming you draw from north-to-south and left-to-right) because you've already drawn those tiles earlier in your iteration.

If you draw a regular tile at (x,y), you can then position larger tiles at (x - (imageWidth-tileWidth)), and (y - (imageHeight - tileHeight)).

This can be simplified for all your tiles like this:

1) Calculate grid position, using the lower-right corners of the grid cells instead of the upper-left.

2) From the lower-right cell corner, subtract the drawn image's width and height.

That'll work for tiles of any size.

//For every tile...
for(int tileY = 0; tileY < MapHeight; ++tileY)
{
    for(int tileX = 0; tileX < MapWidth; ++tileX)
    {
        //Get the tile image.
        const TileImage &tileImage = map[(tileY * MapWidth) + tileX];
        
        //Calculate the grid position.
        Point gridPos = Point(tileX * GridCellWidth, tileY * GridCellHeight);
        
        //Offset based on the tile's size, regardless of that size.
        Point offset = Point(tileImage.width, tileImage.height);
        
        //Get the final position.
        Point tilePosition = (gridPos - offset);
        
        //Draw at the correct position.
        Draw(destination, tileImage, tilePosition);
    }
}

Oh sorry, i didn't know it was salvageable i re-submitted the post, with the full question as the above post only shows the stuff that worked, the rest of the question got cut off.

Edit: now looks like the re-submit got deleted and this broken question remains. I'm not re-writing the whole damn thing for a 3rd time.