libGDX: Create grid for board game

Question

I am trying to create a simple board game using libGDX. Just that you have a rough idea of what I'm trying to do, imagine Bejeweled (though mine of course is not as complex).

The game involves a board with cells as squares. Depending on the level, this grid has a different number of cells, like 6x6 or 8x8. I also want to include some nice animation for switching the position of two neighboring cells (like in Bejeweled). Of course there also need to be some buttons on the screen.

My question is: What is the best way to do this? Shall I use a stage and then tables for the grid? Can I then still easily make an animation (using the Universal Tween Engine)? Or is it better to draw the Sprites individually? Or is there another completely different way of approaching this?

Thank you for your answers,

Cheers,

Tony

Answer 1

Sprite square = new Sprite(new Texture("texture"));

Render

float squareWidth = camera.viewportWidth / squaresOnWidth;
float squareHeight = camera.viewportHeight / squaresOnHeight;
square.setWidth(squareWidth);
square.setHeight(squareHeight);
batch.begin(); `
for(int y = 0; y < squaresOnHeight; y++){
    for(int x = 0; x < squaresOnWidth; x++){
        square.setX(x * squareWidth);
        square.setY(y * squareHeight);
        square.draw(batch);
     }
 }
 batch.end();

This should output a grid of textures, not tested.

If you want to create smooth animation you should definitely look into UniveralTweenEngine, here's a demo of what it can do : http://www.aurelienribon.com/universal-tween-engine/gwt/demo.html

If you want the grid in buttons instead.

OrthoGraphicCamera camera = new OrthoGraphicCamera();
camera.setToOrtho(false, yourViewportWidth, yourViewportHeight);
camera.translate(xPos, yPos);
Stage stage = new Stage(your wanted stage width, your wanted stage height, false, batch);
stage.setCamera(camera); 
for(int y = 0; y < buttonsOnHeight; y++){
    for(int x = 0; x < buttonsOnWidth; x++){
       stage.addActor(new TextButton("" + x + y * buttonsOnWidth, textButtonStyle); 
    }
 }

The render

float buttonWidth = camera.viewportWidth / buttonsOnWidth;
float buttonHeight = camera.viewportHeight / buttonsOnHeight;
for(int y = 0; y < buttonsOnHeight; y++){
    for(int x = 0; x < buttonsOnWidth; x++){
        TextButton button = stage.getActors().get(x + y * buttonsOnWidth);
        button.setX(x * buttonWidth);
        button.setY(y * buttonHeight);
        button.setWidth(buttonWidth);
        button.setHeight(buttonHeight);
     }
 }

Then draw the stage, note that you should stop any batch that's currently running because stage has it's own batch.begin() and batch.end(). You could start your batch again after stage.draw();

 stage.act(delta);
 stage.draw();

Answer 2

To have a grid you could and should use camera:

OrthographicCamera cam = new OrthographicCamera(8,8);

You tell the camera to have a viewport of 8 x and 8 y. The cameras (0,0) point is in the middle of the screen.

To have it at the left bottom you need to set its position to

cam.translate(camWidth / 2, camHeight / 2); 

Now you can add your sqares at sqare.setX(0) for sqares on the bottom line or sqare.setY(3) to add it on the 4rd row from left to right. For the animations you could also use Actions, which allow you to add different movements to an actor and let him perform them over time. Example:

actor.addAction(Actions.parallel(Actions.moveTo(float x, float y, float duration), Actions.rotateTo(float rotation, float duration)));

With this code sample you tell your actor to move from his position to (x,y) in duration seconds and while he moves to this position he rotates from his current rotation to rotation in duration seconds. Hope this helps