# How to create games with scrolling?

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?

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.

• Even i thought that they are using OpengGL translation... Dec 2, 2010 at 6:00
• It's just a matter of making it so you don't do a hard clamp when you get to the edges of the world. If you can move the camera around you can figure out how to mimic the bounce. Dec 2, 2010 at 6:09

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?

• Nice way to show the viewport/camera concept, will use it in future explanations =D Dec 2, 2010 at 0:25
• Nice explanation... It means they are fixing the size of view and they use translations to show scrolling. Dec 2, 2010 at 5:58
• I didnt invent this. I come from back in time in the old Commodore 64 days (8-bit with 64 KB ram), so I learned it the hard way. There wasnt any fancy viewport or GUI, so you had to develop some way to do a scrolling. Its the same for Super Mario and many-many-many other old tilebased games. But it can also be used for 3D vector games. The "tiles" are just a bit different. have a look at this one 3d.d9.dk/biplane/?test-scroller Dec 5, 2010 at 23:21
• Just change the "view" on one of the buttons and you can see the "tiles" being added in the horizon, and if you change the campos to infront of plane, you can also see them getting removed behind plane. Dec 5, 2010 at 23:26

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.

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);