Question

I’m working on my own tile bliting engine, this one is using hexagonal tiles – but I think it doesn’t differ much from regular tiles.

I have huge x,y array of tiles and they have their x,y coordinates for rendering on canvas, I iterate only the ones that should be visible on canvas in current camera position.

So I’m stuck with scaling and cant resolve this on my own.
Here is my code for drawing tiles on canvas:

public function draw():Void{
    clearCanvas(); //Clear canvas (bitmapData)
            var _m:Matrix;
            iterateTiles(function(_tile:HexTile):Void{ // loop every tile that is visible on screen
                _m = new Matrix();
                _m.translate(_tile.x + cameraPoint.x,_tile.y  + cameraPoint.y);//Get pre calculated tile x,y and add camera x,y
                _m.scale(matrixScale, matrixScale);
                drawToCanvas(_tile,_m);//Send to draw tile on canvas using Matrix
            },true);
        }

This works nice and fast but only problem is it scales tiles from left top corner (like regular scale would work)

Before scale

---

After scale

My question is how to transform tiles to always scale from center. So if tile 10:10 is in center of screen before scaling, then it should
stay there after scaling.

Answer 1

Sorry, I misunderstood the question, but I think I’ve got it now:

// Scale the distance from the original point to the center of the canvas
var xDistance:Number = ((_tile.x + cameraPoint.x) - xCenter) * matrixScale;
var yDistance:Number = ((_tile.y + cameraPoint.y) - yCenter) * matrixScale;

// Add the distances to the center of the canvas. This is where you want the tile 
// to appear.
var x:Number = xCenter + xDistance;
var y:Number = yCenter + yDistance;

// Because the coordinate is going to be scaled, you need to increase it first.
x = (1 / matrixScale) * x;
y = (1 / matrixScale) * y;

_m.translate(x, y);

I have not tested this, I’ve just drawn it out on graph paper. Let me know if it works.