开发者

How to maintain camera position while zooming out?

I have a container full of tiles and other assets that serves as the map. On top of that container is a mask that serves as the camera the player sees through. In order to move the camera around I move the container around.

I'm able to center on a tile within the container using the following formula:

container.x = ( ( (tile.x + (tile.width / 2) ) * container.scaleX) * -1) + (mask_width / 2);
container.y = ( ( (tile.y + (tile.height / 2) ) * container.scaleY) * -1) + (mask_height / 2);

This moves the container into position relative to the mask such that the center of the mask will be the tile in question.

I recently added the ability to zoom, which just adjusts the scaleX/scaleY of the container to make it bigger or smaller. I've already fixed the centering code above to account for it, but I'm having trouble making it so the "camera" doesn't appear to move around as the view shrinks. Basically, when zooming out everything 开发者_Python百科appears to move to the left, because the container shrinks. It's all fine once I center on something with the code above, but I need a way to bump the container over to the right a bit based upon the difference in scaleX and scaleY to keep everything looking like it's in the same position while zooming. I've tried a few things already, but I can't quite wrap my head around the math of it.


comment out this code

container.x = ( ( (tile.x + (tile.width / 2) ) * container.scaleX) * -1) + (mask_width / 2);
container.y = ( ( (tile.y + (tile.height / 2) ) * container.scaleY) * -1) + (mask_height / 2);

on load do this code

cam.x = container.width/2
cam.y = container.height/2

on resize/scale do something like this

container.x =  container.x + amountOfWidthChanged/2
container.y = container.y + amountOfHeightChanged/2


I managed to figure it out on my own by doing some research into various as3 helper classes. So here it is in the hopes that someone else with this problem stumbles here:

The movieclip.transform.matrix allows you to to change the point it zooms from when changing scaleX/Y. MatrixTransformer contains a function that lets you match two points together for your registration point. Here's the code I used:

var mat:Matrix = container.transform.matrix.clone();
var externalCenter:Point = new Point(stage.mouseX, stage.mouseY);
var internalCenter:Point = new Point(container.mouseX, container.mouseY);

// container.scaleX and container.scaleY change here

MatrixTransformer.matchInternalPointWithExternal(matrix, internalCenter, externalCenter);
roomContainer.transform.matrix = matrix;
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜