I'm going to develop a Kakuro (Cross-Sums) game for Android, and have got the algorithm right.

But I can't seem to get the user-interaction part right- i.e. The puzzle is very large. So only a portion is shown at a time to a user depending on their device (eg: HVGA smartphone vs XGA tablet). It should be scrollable.

To make it more clear, see the images below:

Grid as rendered on a smartphone Grid as rendered on a tablet

So what I'm asking for: Do you know a suitable method to approach this? I mean, like a design or a structure that will achieve this kind of behavior?

Please note that I'm completely new to game programming and do not know anything about canvases, etc (but have got experience in application development). So any help really appreciated.

  • Make the grid scrollable and perhaps also allow zooming. Otherwise, fit as much as you can on the device display being used.
    – Bernard
    Commented Feb 17, 2012 at 13:56
  • @Bernard Can you please post your comment as an Answer with some more details?
    – Roshnal
    Commented Feb 17, 2012 at 14:31
  • I would if I was an Android developer, but alas I am not. Just giving you some free advice. :)
    – Bernard
    Commented Feb 17, 2012 at 14:35
  • I think you should rename the question to include more specific stuff like 'how to map the visible part of game on different size devices', because that's exactly what's being asked. Commented Apr 20, 2013 at 11:59

1 Answer 1


In order to solve your problem, you need to think about your game in terms of different "spaces".

First, lets talk about "worldspace". If you pretend that you have an suitably wide and tall device upon which you can do your rendering, you can render the entire grid of cells.

For a more concrete example, if your grid is 100x100 cells, and each cell is 16x16 pixels, you'd need a screen that is 1600x1600 pixels.

If you had such a device, you could easily render the whole thing.

You don't, which is why you are here. The device is only a particular number of pixels wide and tall. This is your "devicespace". A smartphone screen will have a different devicespace than a tablet.

If you are ONLY dealing with scrolling, then you need only keep track of a single point that maps one corner (typically the upper left corner) of devicespace into worldspace. This is an anchor point.

If using something like OpenGL, you can accomplish this quite easily with matrices, but knowing how to do in using just 2d algebra doesn't hurt either.

When you are scrolling around the worldspace, you simply change the anchor point, and re-render the area covered by devicespace, not the whole world (that would be wasteful). Fortunately, with a square grid, it is pretty easy to determine which grid cells need to be rendered, since you take the anchor point, divide by the cell height and widths, and start rendering there, stopping at the opposite corner.

The anchor point has some definite bounds. If it is (0,0) and the upper left corner is being used, the lower right corner is at (devicewidth,deviceheight).

When scrolling, the anchor point needs not go further than (worldwidth-devicewidth,worldheight-deviceheight), and so as a result, this and (0,0) are the bounds for a different type of space called "anchorspace".

To add zooming, there is slightly more to it, but it builds off of the basics here, there is simply one more intermediate space, but for now I'll leave you with the basic of scrolling.

Good luck.

  • Thanks a lot for your answer! It was really informative and helpful.. :) Now got a real clear idea of the design!
    – Roshnal
    Commented Feb 17, 2012 at 15:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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