# How to make image bigger than the screen to be slideable in the screen in monogame for windows phone 8?

(Idk if my title is correct, because when I google it, there is no related result I guess)

I am not sure how to explain it correctly, but I am making a plain 2D, tile based, tactic game in windows phone 8 using monogame. I want to make my map is "slideable". With "slidable" I mean I can draw larger images (in total) than my screen and then slide it so I can view a certain area of the drawn images

Example : I have a screen which dimension is 1280x720. I have a 1500x1500px image, which consists of 15 tiles, which is 100x100px each, which each tiles is redrawn each times the "Draw" is called. If the image is larger than the screen, the displayed area will be trimmed and of course, making a 220x780px area that is unseenable. The only way to see all of it is through "sliding" the screen around, so I can see all the area.

My question is : How to make that happen? Because in default, the screen is unslideable and the image remains trimmed.

Sorry if my question and explanation is not clear enough. Clarify it as much as you like. Thank you.

You need to, of course, program such behaviour.

The simpliest way to do that is just storing coordinates of your "camera", let's say, x and y.

When you slide left, x decreases, and when you slide right, x increases. When you slide up, y decreases, and when you slide down, y increases.

When you call "Draw", you draw your screen beggining from pixel with coordinates of x and y, and end with pixel with coordinates of x + screen_width - 1, y + screen_height - 1.

As your image is divided into tiles, you just need to find which tile the x, y pixel, and which other tile contains x + screen_width - 1, y + screen_height - 1 pixel. Then do the same, just with tiles instead of pixels.

This is thecode from an old codeplex discussion:

image.position += gesture.Delta;


In my case :

I added this class level field :

Vector2 _delta;


with initial value of:

Vector2.Zero


Below is the code I added to my GameComponent update method :

while (TouchPanel.IsGestureAvailable)
{
switch (geisture.GestureType)
{
case GestureType.FreeDrag:

{
_delta += geisture.Delta;
} break;
}
}


And below is the code I added to my Game1 constructor

 TouchPanel.EnabledGestures = GestureType.FreeDrag;


Because I only want to detect FreeDrag.

I use the delta this way, in case you wanna know

object.position += _delta;

• You should copy the answer to this site in case that link dies in the future. Jun 27 '13 at 16:39