Take the 2-minute tour ×
Game Development Stack Exchange is a question and answer site for professional and independent game developers. It's 100% free, no registration required.

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++) {
              elements.get(i).drawElement(c);
         }
      }
    }
    .
    .
    .
    // 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) {
             w*=this.zoomFactor;
             h*=this.zoomFactor;
          }
          c.drawBitmap(this.image,this.x,this.y,w,h);
        }
    }
  • 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.

share|improve this question
    
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. –  Ali.S Jun 3 '11 at 16:40
    
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. –  Jernej Jun 3 '11 at 18:35

1 Answer 1

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:

canvas.save();
canvas.setMatrix(myMapMatrix);

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

canvas.restore();

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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