1
\$\begingroup\$

I have a 2D, tile-based map. I want to be able to control the number of visible tiles on the screen vertically and horizontally, regardless of resolution. I want the player to be able to move the camera one tile width at a time until it hits the edge.

I do not understand how to manipulate the Unity camera in order to accomplish this. I have read the documentation, and Googled, but there is just something that is not clicking for me.

So, let's say I have a 100x100 map. A 32x24 portion of the map is shown at a resolution of 1024x768, each tile has a size of 1x1 Unity unit. The bottom-left of the visible area of the map starts at the bottom-left of the map (0, 0). The player then clicks the right arrow key and the map moves one tile to the right (1, 0).

How do I accomplish this, given that I am using the latest version of Unity in 2D mode?

\$\endgroup\$
  • \$\begingroup\$ Set the camera width to x times your tile width. And move the camera each time the distance of your tile width. \$\endgroup\$ – Madmenyo Jan 2 '16 at 21:06
  • \$\begingroup\$ @MennoGouw How would one do that in Unity? \$\endgroup\$ – Tim Metcalfe Jan 2 '16 at 21:13
  • \$\begingroup\$ Don't know exactly, been a while since I used unity. Camera size perhaps in camera properies? Move the cam with basic input code which you can find any where and changw it to the size of your tiles I guess. But if you don't know these basic things you should focus on some basic tutorials. \$\endgroup\$ – Madmenyo Jan 2 '16 at 22:38
  • \$\begingroup\$ @MennoGouw To refresh your mind, the camera can either be ortho or perspective, each of which have one size/FOV setting, respectively. I've done some research and found this library from LudumDare, but it uses a static PPU which allows the number of tiles on screen to change as the screen size changes. Thank you for your response, but I imagine somebody with working knowledge of Unity might be able to give the answer I'm looking for. \$\endgroup\$ – Tim Metcalfe Jan 2 '16 at 22:49
  • \$\begingroup\$ My question has been solved on Reddit. Turns out the ortho projection is based on the height of the view and Unity units, rather than pixels as I had originally attempted. \$\endgroup\$ – Tim Metcalfe Jan 2 '16 at 23:50
3
\$\begingroup\$

Taken from Reddit, where I also posted the question. Full credit to /u/EmeraldScales.

First, change the Orthographic Camera Size to the number of tiles you'll want to have displayed vertically. Since each tile is 1 Unity unit, what you put there will translate to how many tiles are displayed. It will be easier if you put an odd number there. If you put an even number, you will have to add some sort of offset, or you'll be displaying the bottom half of your top tiles and the upper half of your bottom tiles.

For the horizontal limit, if you wish one, you'll have to put a black bar covering the tiles outside the range you wish to display. That is because the horizontal size of the orthographic camera changes with screen resolutions, so it likely won't translate nicely to a rounded number of tiles. A 10x10 plane that covers all tiles say 15 units away from the center should be placed 15 + (10/2) = 20 units to the left and another the right. Stick it to the camera.

With this, changing the camera's X and Y position in full increments of 1 when the player presses a button should translate the camera exactly one tile on the desired direction.

I opted to alter the viewport rectangle of the camera, instead of the black bar solution /u/EmeraldScales had. The code I wrote to do so only works properly when the desired on-screen map size sticks to the 4:3 ratio, otherwise it shows portions of neighboring tiles. It adjusts the viewport to a 4:3 ratio, even when the screen isn't.

function resizeCamera() {
    PrevWidth = Screen.width;
    PrevHeight = Screen.height;

    var screenRatio : float = PrevWidth / PrevHeight;
    var relativeWidth = HardcodedRatioWidth / PrevWidth;
    var relativeHeight = HardcodedRatioHeight / PrevHeight;

    if(screenRatio < HardcodedRatioWidth / HardcodedRatioHeight) {
        var hAdjustment = relativeHeight / relativeWidth;
        var yAdjustment = (1 - hAdjustment) / 2;
        thisCamera.rect = Rect(0, yAdjustment, 1, hAdjustment);
    } else {
        var wAdjustment =  relativeWidth / relativeHeight;
        var xAdjustment = (1 - wAdjustment) / 2;
        thisCamera.rect = Rect(xAdjustment, 0, wAdjustment, 1);
    }
}
| improve this answer | |
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.