Adventures in AR: Zoom In, Zoom Out, and Rotate It All About
Got a quickie for you this time around. I didn't have much time to put into development the past couple of days, but I've managed to make some headway. It's not much, but I made a nice little quality of life improvement to ARventure, and figured I'd share.
Since pretty early in development, I was under the assumption that I would not be able to implement rotation or zoom functionality to the map. This assumption is largely rooted in one quick experiment where I tried to rotate the map and the individual sprites and graphics contained rotated in place. Probably not the best sample size. When I looked over Phaser's camera class, I saw no way for it to rotate and zooming was an exercise in frustration. And so I shrugged it off and went on with other development tasks.
The thing is, the lack of zoom and rotation functionality gnawed at me constantly. I can just about Guarantee that the first thing most players would try to do upon starting the game is zoom in or rotate the map. I couldn't let my theoretical players down! So the other day I took another stab at it and had much greater success.
It was pretty simple. Turns out I could rotate the map. But that didn't really work, since the map is positioned at 0, 0 and its position is offset as the player moves around within a tile. Reworking everything so that the tiles and map are positioned relative to the screen center would be a good bit of work. So I just plopped the map inside another group. The container group is centered in the screen and the map is positioned relative to it. Just like that, the map can now be rotated about the center of the screen. The container also enabled me to zoom in and out by simply scaling it. Not all that complicated of a solution, but it killed two birds with one stone.
Now things get a bit more interesting. Both rotation and zoom create some interesting new challenges to overcome. Zoom in particular brings more than a few issues. Obviously capping the amount the map can be zoomed in or out is an issue, though it is easy enough to solve. The bigger issue, however, is that because I am using the scale of the container to control zoom, achieving a consistent zoom speed is tricky. Currently, I'm using the arrow keys to zoom in and out. They increase or decrease the scale by a set amount with each press. The max zoom out is achieved at 0.5 scale, while the max zoom in is at 4.5. The starting scale is at 1.0. See the problem? By incrementing or decrementing the scale at a fixed amount, going from 1.0 to 0.5 is a whole lot faster than going from 1.0 to 4.5. It creates a sort of 'acceleration' as you zoom all the way in or out. This isn't a very intimidating problem, but it is one I hadn't dealt with before, which is always fun.
The other major issue is what happens when zoom and rotation get together to try and ruin my day. As you may have noticed in the picture above, in the upper and lower left corners the edge of the map is visible. It seemed simple enough to cap the max zoom out so that the edge stays off screen. The kicker is that the necessary cap is dependent on the aspect ratio of the game. And since the canvas simply fills the browser window, this can vary wildly. Oh well, looks like I'm going to have to do some extra math to cap the max zoom out based on the diagonal of the screen. Again, not a biggie, just a new challenge.
That's about all I've got for now. I need to fix the problems I've rattled off here, plus a few more, before this functionality is ready. After that, I think I'll work on the pinch and rotate gestures for mobile and give the 'game' its first field test. Stay tuned for that.
Since pretty early in development, I was under the assumption that I would not be able to implement rotation or zoom functionality to the map. This assumption is largely rooted in one quick experiment where I tried to rotate the map and the individual sprites and graphics contained rotated in place. Probably not the best sample size. When I looked over Phaser's camera class, I saw no way for it to rotate and zooming was an exercise in frustration. And so I shrugged it off and went on with other development tasks.
The thing is, the lack of zoom and rotation functionality gnawed at me constantly. I can just about Guarantee that the first thing most players would try to do upon starting the game is zoom in or rotate the map. I couldn't let my theoretical players down! So the other day I took another stab at it and had much greater success.
It was pretty simple. Turns out I could rotate the map. But that didn't really work, since the map is positioned at 0, 0 and its position is offset as the player moves around within a tile. Reworking everything so that the tiles and map are positioned relative to the screen center would be a good bit of work. So I just plopped the map inside another group. The container group is centered in the screen and the map is positioned relative to it. Just like that, the map can now be rotated about the center of the screen. The container also enabled me to zoom in and out by simply scaling it. Not all that complicated of a solution, but it killed two birds with one stone.
 |
| Rotatey Scaley |
Now things get a bit more interesting. Both rotation and zoom create some interesting new challenges to overcome. Zoom in particular brings more than a few issues. Obviously capping the amount the map can be zoomed in or out is an issue, though it is easy enough to solve. The bigger issue, however, is that because I am using the scale of the container to control zoom, achieving a consistent zoom speed is tricky. Currently, I'm using the arrow keys to zoom in and out. They increase or decrease the scale by a set amount with each press. The max zoom out is achieved at 0.5 scale, while the max zoom in is at 4.5. The starting scale is at 1.0. See the problem? By incrementing or decrementing the scale at a fixed amount, going from 1.0 to 0.5 is a whole lot faster than going from 1.0 to 4.5. It creates a sort of 'acceleration' as you zoom all the way in or out. This isn't a very intimidating problem, but it is one I hadn't dealt with before, which is always fun.
The other major issue is what happens when zoom and rotation get together to try and ruin my day. As you may have noticed in the picture above, in the upper and lower left corners the edge of the map is visible. It seemed simple enough to cap the max zoom out so that the edge stays off screen. The kicker is that the necessary cap is dependent on the aspect ratio of the game. And since the canvas simply fills the browser window, this can vary wildly. Oh well, looks like I'm going to have to do some extra math to cap the max zoom out based on the diagonal of the screen. Again, not a biggie, just a new challenge.
That's about all I've got for now. I need to fix the problems I've rattled off here, plus a few more, before this functionality is ready. After that, I think I'll work on the pinch and rotate gestures for mobile and give the 'game' its first field test. Stay tuned for that.