I'm developing a Android board game and have a question regarding creating a board that is zoomable and scrollable. The board contains a static background, characters (players) and the actual "level" which is drawn using tiles.

My solutions is to have a collection of elements (tiles, figures, all game elements - all have x,y coordinates and width + height), a camera and a renderer that draws the collection according to cameraX,cameraY, cameraWidth and cameraHeight. So if a user would scroll to the right, the camera would just set the cameraX appropriately - and the surface is scrollable. And if a user would zoom in/out the renderer would just scale every element image appropriately.

Example code for the renderer with scrollable surface and zoom in/out

    protected function draw(Canvas c){
      Collection elements = collection.getElements(cameraX,cameraY,cameraWidth,cameraHeight);
      if(elements.size() > 0) {
         for(int i = 0; i < elements.size(); i++) {
    // element class drawElement function
    protected drawElement function(Canvas c) {
        if(this.image != null) {            
          int w = this.width;
          int h = this.height;
          if(this.zoomFactor < 1) {
  • Is this the best solutions?
  • Could it be achived somehow else?
  • Could scrolling be achived using a ScrollView?

I dont wanna use any engine, because this is for a school project.

  • \$\begingroup\$ first c.drawBitmap(...) should be changed to c.drawBitmap(this.image,(this.x - camera.x) / camera.width, (this.y - camera.y) / camera.height,w,h) and besides that, it seems in that code you are relying on cpu power too much, I think it would be faster if you try opengl and gpu power. besides that you code should work fine. \$\endgroup\$ – Ali1S232 Jun 3 '11 at 16:40
  • \$\begingroup\$ The code i wrote is basicly just a an example, so it is not the actual code. The game isn't really that demanding (gpu wise) it's almost a turn based game with animations.. that's why i chose android canvas over opengl. If the game wont be as responsive as i want it to be i will switch to opengl. \$\endgroup\$ – Jernej Jun 3 '11 at 18:35

Good logic but use Matricies with scale transformations to implement zoom, do not try and calculate it everywhere yourself.

That way you could write the following code:


// TODO write the rest of the drawing code here using map co-ordinates


Where myMapMatrix is the matrix that lets you go from the screen viewport to the board game map. And if you get the inverse matrix then you can transform a map co-ordinate into a screen co-ordinate. I know because this is the way that I am currently doing it in my game.

I will leave how to create the Matrix as an exercise for you but let me give you a hint.


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.