How to create games with scrolling?

Question

In games like city story or we farm how do they implement scrolling?

1. To do scrolling using UIScrollView the EAGLView size has to be bigger. In those games EAGLView size look like more than 1024*1024. But there is limitation in viewport size in iphone devices(in 3G iphone max is 1024).

2. I played those games in 3G iphone they are working fine.

3. Any idea how they implemented their scrolling mechanism?

Answer 1

Well they don't use something like a UIScrollView, that's for sure. You would just move the camera over a stationary world or move the world under a stationary camera. I'm a little rusty on my GL, but I would guess you just push a new translation matrix before all your drawing.

For the actual dragging part, you would also implement that yourself. It would probably be something where you check to see if there was a certain amount of cursor/finger movement delta in a given amount of time to see if it's a "drag" or a "click". Or maybe you always drag unless the user clicks on a UI element or something like that. It really depends on the design of how you want that system to work.

Answer 2

A scroller is quite simple a "virtual viewport" that pushes new tiles/objects in from direction you are scrolling.

Simple example to see this, is to build a simple 1 line marquee(textscroller).

Lets for example purpose say we have a line with 20 characters/letters/chars.

We place them in an string/array like:

String viewport = "....................";
String text = "Hello World (how original!)";

now if we print this, we will only see the "dots".

Console.WriteLine(viewport);

Now to scroll it, we need to make the dots go to the left. So we can read the text comming in.

For this to happend, we remove the first letter from left and adds the next to be shown from the right.

so we say:

viewport = viewport.Substring(2);

to take the 2nd letter and forward which equals rest of viewports current content.

Now the viewport is 1 char/letter to narrow, so we need to add the next char from the scroller. Therefore we need a variable for controlling where we are in the scrolltext.

// place this outside your scroll loop
int scrollPos =0;

Now with this index, we can find the next character.

char next = text.substring(scrollPos,1);

Then add this to the viewport.

viewport += next;

And increment your position in the scrolltext.

scrollPos++;

Now we have scrolled the contents 1 char left.

Keep doing this over and over, and it will look like the "Hello World" is scrolling across your viewport.

Now imagine this trick in all directions. Instead of characters, you use your own "Tiles". Secondly, to make it go smooth, you also add a "pixel scroll" within your scroller or you just multiple your scrollpos for simplicity. Then when you need to figure out which tile to add next, then just divide your current scrollpos with tile-width, then you know if you need to move the viewport scroll contents in any direction.

if you need to scroll arrays (with tile/block data) you can do it with simple for-loops.

left scroll

for (int pos=0;pos<viewwidth;pos++)
{
    tilemap[pos] = tilemap[pos+1];
}

tilemap[width] = newTile; // from maparray.

Phew

That was a long explanation. Do you understand my point here, or do you need further explanation?

Answer 3

Scrolling doesn't necessarily mean loading everything into memory. The usual way to deal with this is to separate your content into tiles which are loaded into memory as needed. Apple has an example at http://developer.apple.com/library/ios/#samplecode/ScrollViewSuite/Introduction/Intro.html for showing big images.

Games, however, tend to do something else. Even if it is possible to use the previous technique, loading data from disk is slow and may disrupt the game experience for the user. For this reason the area to scroll is usually cut into pieces you can later reuse, giving the feeling that the whole world is bigger than it could really fit into memory.

You can learn more about tiles with a map editor like Tiled Map Editor and searching the net for tutorials on how to use it/integrate into your game. Games like Diablo are known to use tiled maps which are logically split into bigger tiles that glued together create inmense pseudo-random maps on each different game.

Answer 4

Another way to implement scrolling for a 2d game is to manipulate your projection matrix to reflect where the screen/camera is located in the game world.

What I did was implement a 2d camera class that had its position and the width/height of the viewable area.. Then before you draw the game world you set up the ortho projection matrix.

e.g.

float left = camera->X - (camera->Width / 2.0f);
float bottom = camera->Y - (camera->Height / 2.0f);
float right = left + camera->Width;
float top = bottom + camera->Height;

glMatrixMode(GL_PROJECTION);
glLoadIdentity();

glOrthof(left, right, bottom, top, -50.0f, 1.0f);

I hope this helps. Oh, and you would reset the projection matrix to something else if you wanted to draw UI elements afterwards etc.

Of course, all of this applies only if your writing your game in openGL.

Answer 5

refer this tutorial:- http://www.raywenderlich.com/2343/how-to-drag-and-drop-sprites-with-cocos2d

this tutorial contains how to scroll the view and with uipanrecogniser.

this will helps .