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

Solution

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

Comments

[tomet]

Allright, so you don't use a stage. But how can I add buttons without a stage? Or is it possible to have a stage that only covers parts of the screen?

[tomet]

Thank you for your effort. I want both a grid of Sprites and some buttons below. So I need to render both somehow.

[thetheodor]

I have school to do right now, if I try to create an answer tomorrow including the sprites and buttons? Around 5pm GMT +1?

[thetheodor]

there's not a method call setPosition, it's named translate and does the same thing. Also, instad of manually setting the camera to 0, 0, you can call setToOrtho();

[Robert P]

The cameras position is 0/0 by default as much as i know. This is actually only pseudocode to let peaople know how it works. I don'T remember exact method names, Eclipse helps me a lot :P Thanks for your comment i will edit my answer!

[Robert P]

@fritzi2000 i think the part of your question is allready answered in your other question as you now (hopefully) know how to use camera, stage and spritebatch. If not just write a comment to your other question. @thetheodor Your answer seems correct, but i would not use Gdx.graphics.getWidth(), Gdx.graphics.getHeight() as viewport. If you do so you have to do everything in pixels and you depend on the window size. If you use a default, fixed value you have your own world coordinates, which get scaled up to fit the gamewindow.

[thetheodor]

Eclipse does really help a lot, had to test code there before posting! :D

[thetheodor]

I have somehow programmed Gdx.graphics.getWidth/Height in my mind to always use it :), will edit the answer. Thanks!

[Robert P]

Haha nice :P I upvoted your answer, but please read my comment there.

[Robert P]

No problem. It just helps to have a) Resolution independent code and b) you can have your own unit (lets say meters for example) and you can calculate things in meters instead of pixels. It makes things a lot easier in my oppinion :)

[Robert P]

@thetheodor i have seen you use camera.viewportHeight/Width. camera.viewPortWidth is the current viewport width. You should set it to a value you want to have, for example 80 to have xCoordinates from 0 to 80 where 0 is left and 80 is right border of the gamewindow. Hope you understood (: