I have another problem with tables in Libgdx. I want to create a game board using it and give to user a possibility to add / remove elements from that board ( table ). So first of all I would like to know how to initialize that table so that it already has fields but invisible fields ( so that it's possible to get position of that field and put there new element ). So those are my 2 first questions :
How to create those invisible fields ( all fields have fixed static size ) ?
How to get position and change element ( actor ) in that field?
Hope someone can help me.
You can create those by adding a cell to a table and set the size of the cell.
You can then add a invisible button to that cell and if the button is clicked you can remove it and add a new element.
Here some example code:
// uiskin from libgdx tests
skin = new Skin(Gdx.files.internal("uiskin.json"));
table = new Table();
// invisible button style
final ButtonStyle bStyle = new ButtonStyle();
int colNum = 10, rowNum = 10;
for (int row = 0; row < rowNum; row++)
{
for (int col = 0; col < colNum; col++)
{
final Button l = new Button(bStyle);
l.addListener(new ClickListener()
{
#Override
public void clicked(InputEvent event, float x, float y)
{
Cell<Button> cell = table.getCell(l);
cell.clearActor();
cell.setActor(new Label("test", skin));
}
});
table.add(l).size(100, 100);
}
table.row();
}
stage = new Stage();
table.setFillParent(true);
stage.addActor(table);
Gdx.input.setInputProcessor(stage);
The skin files can be downloaded here: https://github.com/libgdx/libgdx/tree/master/tests/gdx-tests-android/assets/data
You need the uiskin.json, uiskin.atlas and uiskin.png file.
Related
I'm trying to implement a chess board with draggable pieces as seen below. However, I'm unable to keep the piece being dragged to stay in front of other nodes to below or right to it. Left and up seems to work fine.
I tried to solve this by declaring the StackPanes forming the checkered background first and all the pieces only after that, as I read Java assigns the z-index based on the order in which the Nodes are added to their Parents. This approach is reflected below. I also tried creating a Group and adding both StackPanes and ImageViews to it in order to be able to use toFront(). Resulted in only the coordinate labels being shown.
How can I achieve the functionality I'm after?
This method creates the board:
public Parent chessBoard() {
GridPane board = new GridPane();
StackPane[][] cells = new StackPane[8][8];
// Create the board first
// (For dragging pieces to work correctly, draggable pieces must be
// added after the whole board, since z-index cannot be set explicitly
// in JavaFX.
for (int row = 0; row < 10; row++) {
for (int col = 0; col < 10; col++) {
// x and y in chess coordinate system (0-indexed)
int[] invertedY = {-1,7,6,5,4,3,2,1,0,-1};
int x = col - 1;
int y = invertedY[row];
// Coordinate labels
String[] abcLabels = {"A","B","C","D","E","F","G","H"};
if (row == 9 || row == 0) {
if (col == 0 || col == 9) continue;
Label label = new Label(abcLabels[x]);
label.setTextAlignment(TextAlignment.CENTER);
board.add(label, col, row);
continue;
} else if (col == 0 || col == 9) {
Label label = new Label(Integer.toString(y + 1));
board.add(label, col, row);
continue;
}
// Cell background color
Square square = game.getBoard().getSquare(x, y);
Color color = square.getColor() == ChessColor.BLACK
? Color.PERU : Color.BLANCHEDALMOND;
StackPane cell = cells[y][x] = new StackPane();
cell.setMaxSize(60, 60);
cell.setMinSize(60, 60);
cell.setBackground(new Background(
new BackgroundFill(color, null, null)));
board.add(cell, col, row);
}
}
// Finally, add pieces to their respective cells
for (int y = 0; y < 8; y++) {
for (int x = 0; x < 8; x++) {
Square square = game.getBoard().getSquare(x, y);
Piece occupant = square.getOccupant();
if (occupant != null) {
String path = "/resources/" + occupant + ".png";
Image image =
new Image(getClass().getResourceAsStream(path));
DraggablePieceIcon imageView =
new DraggablePieceIcon(image);
imageView.setManaged(false);
cells[y][x].getChildren().add(imageView);
}
}
}
return board;
}
This class makes the draggable icons:
public class DraggablePieceIcon extends ImageView {
private double mouseX;
private double mouseY;
public DraggablePieceIcon(Image image) {
super(image);
setOnMousePressed(event -> {
mouseX = event.getSceneX();
mouseY = event.getSceneY();
});
setOnMouseDragged(event -> {
double deltaX = event.getSceneX() - mouseX;
double deltaY = event.getSceneY() - mouseY;
relocate(getLayoutX() + deltaX, getLayoutY() + deltaY);
mouseX = event.getSceneX();
mouseY = event.getSceneY();
});
}
}
And here's what I'm seeing:
You're adding the cells row by row from left to right. Since you add the pieces to the cells, the descendants of a cell cover the contents of cells in rows above or in the same row and left to the cell and will be covered by contents of all other cells.
To fix this you could make the parent of a dragged item the topmost node in the GridPane:
public DraggablePieceIcon(Image image) {
super(image);
setOnMousePressed(event -> {
mouseX = event.getSceneX();
mouseY = event.getSceneY();
// make cell containing this piece the top-most cell
this.getParent().toFront()
});
...
}
Note that this solution will require you to implement some logic that makes the pieces children of the cells they are moved to and move the pieces to the center of those cells. Otherwise a piece could be covered by other cells, if you drag the piece inside such a cell later...
An alternative would be to make the pieces children of the GridPane itself. You allow the pieces to be dragged around independent of the cells anyways; the association between cell and piece is important for the model (i.e. in this case the implementation of the chess rules) not for the view and usually these parts are kept seperate.
I want it so every time a button is pressed in my 4x4 grid, that it increments moves by 1 . This is creating a 4x4 layout of buttons. Each time any of those buttons are pressed, I want moves to increment. Basically I'm creating the memory game, where you flip cards over to match each other. I just have to keep count of the total amount of moves a player does to solve the puzzle.
private int moves = 0;
private GridPane makeGridPane(){
ConcentrationModel c = new ConcentrationModel();
GridPane grid = new GridPane();
ColumnConstraints col1 = new ColumnConstraints();
col1.setPercentWidth( 50 );
grid.getColumnConstraints().addAll(col1, col1, col1, col1);
RowConstraints row1 = new RowConstraints();
row1.setPercentHeight( 50 );
grid.getRowConstraints().addAll(row1, row1, row1, row1);
for(int row = 0; row < 4; row ++){
for(int col = 0; col < 4; col++){
Button btn = new Button();
ImageView image = new ImageView(c.getCards().get(0).getImage());
image.setFitWidth(WIDTH/4);
image.setFitHeight(HEIGHT/4);
btn.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
btn.setGraphic(image);
grid.add(btn, col, row);
}
}
return grid;
}
You can create a single event handler and reuse it for all the buttons. Since you probably want the buttons to do other things too, I would recommend adding this as an event handler, instead of using the convenience method setOnAction(...):
EventHandler<ActionEvent> incrementMovesHandler = e -> moves++ ;
for(int row = 0; row < 4; row ++){
for(int col = 0; col < 4; col++){
Button btn = new Button();
btn.addEventHandler(ActionEvent.ACTION, incrementMovesHandler);
// ...
}
}
This is actually pretty simple. All you have to do is add this bit of code just before your grid.add(...):
btn.setOnAction(new EventHandler<ActionEvent>() {
#Override public void handle(ActionEvent event) {
moves++;
}
});
Or, equivalently, the Java 8 version:
btn.setOnAction((ActionEvent e) -> {moves++;});
(I can't currently test this, but it should work. If not, lemme know and I'll try to fix it.)
If you're concerned about memory, Christian points out below that this creates a new instance of EventHandler for every button. While this may not be too terrible, it's probably a bad habit to get into. The best way to handle (no pun intended) this is by making an object before your for loop:
EventHandler<ActionEvent> eh = new EventHandler<>() {
#Override public void handle(ActionEvent event) {
moves++;
}
};
Then, for each of your buttons, instead of the top-most code, you'd simply write:
btn.setOnAction(eh);
That way, a single EventHandler is being created and used to handle all the events. You'll want to use this one if you need to create more than just a few buttons, both because it's faster (doesn't need to allocate memory for each object) and more memory-efficient (...it, uh, doesn't need to allocate the memory for each object). In this case, I think it's pretty trivial, but it's good to know nonetheless.
You need to implement the ActionListener interface in your class.
Then in the actionPerformed function, just increment the moves variable.
You just have to call btn.addActionListener(this); for each of the button that
you created.
public class Sample extends JFrame implements ActionListener {
public Sample ()
{
}
private GridPane makeGridPane()
{
ConcentrationModel c = new ConcentrationModel();
GridPane grid = new GridPane();
ColumnConstraints col1 = new ColumnConstraints();
col1.setPercentWidth( 50 );
grid.getColumnConstraints().addAll(col1, col1, col1, col1);
RowConstraints row1 = new RowConstraints();
row1.setPercentHeight( 50 );
grid.getRowConstraints().addAll(row1, row1, row1, row1);
for(int row = 0; row < 4; row ++){
for(int col = 0; col < 4; col++){
Button btn = new Button();
ImageView image = new ImageView(c.getCards().get(0).getImage());
image.setFitWidth(WIDTH/4);
image.setFitHeight(HEIGHT/4);
btn.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
btn.setGraphic(image);
btn.addActionListener(this);
grid.add(btn, col, row);
}
}
return grid;
}
public void actionPerformed(ActionEvent e)
{
moves++;
}
}
I want to make a grid with a specific amount of buttons.
I know how many buttons there are need to be because I get the number of rows and columns.
I could do a loop, but I don't know how you can place buttons next to eachother and underneath.
Secondly, the buttons need a Text and an Id, text is no problem, but how do you give them an id?
And at last, and probably most difficult, it can occur that there are a lot of rows, so that a scrollbar should be available.
At the end it should look something like this:
#Override
public void start(Stage stage) {
GridPane grid = new GridPane();
grid.setPadding(new Insets(BUTTON_PADDING));
grid.setHgap(BUTTON_PADDING);
grid.setVgap(BUTTON_PADDING);
for (int r = 0; r < NUM_BUTTON_LINES; r++) {
for (int c = 0; c < BUTTONS_PER_LINE; c++) {
int number = NUM_BUTTON_LINES * r + c;
Button button = new Button(String.valueOf(number));
grid.add(button, c, r);
}
}
ScrollPane scrollPane = new ScrollPane(grid);
stage.setScene(new Scene(scrollPane));
stage.show();
}
The best solution would be:
itemNumber starts from 0 to N:
Grid.getChildren().get(itemNumber).setId("bt"+itemNumber);
Grid.getChildren().get(itemNumber).getId();
I am trying to display a List of icons (which are referred simply by their path) in a TableView that has x-amount of columns and any number of cells that are required to display all the icons.
The plan was to display the icons in such a way that the TableView acts as a "multi-lined" ListView.. so that they go from left to the right.
It's the first time I'm using the TableView control, and I'm a bit confused of how to achieve this.
Thanks for any pointers.
So, as ItachiUchiha suggested, I ended up using a Pagination control with a GridPane, and it works very nicely.
Here's the code if anyone stumbles upon the same thing..
List<String> allEntries = Icons.getAllEntries();
int numCols = 8;
int numRows = 5;
int numPages = allEntries.size() / (numCols * numRows);
Pagination pagination = new Pagination(numPages);
Collections.sort(allEntries);
pagination.setPageFactory(pageIndex -> {
GridPane layout = new GridPane();
for (int y = 0; y < numRows; y++) {
for (int x = 0; x < numCols; x++) {
int index = numCols * y + x + (pageIndex * numCols * numRows);
String path = allEntries.get(index);
Image image = new Image(path, true);
ImageView imageView = new ImageView(image);
imageView.setFitWidth(64);
imageView.setFitHeight(64);
layout.add(imageView, x, y);
imageView.setOnMousePressed(e -> {
// Do stuff
});
}
}
return layout;
});
I am using Eclipse.org's Nebula Grid and want to access an individual cell. Not an individual GridItem, which can be accomplished by grid.select(...) but a cell. So lets say i have a grid like this:
final Grid grid = new Grid(shell,SWT.BORDER | SWT.V_SCROLL | SWT.H_SCROLL);
grid.setCellSelectionEnabled(true);
grid.setHeaderVisible(true);
GridColumn column = new GridColumn(grid, SWT.None);
column.setWidth(80);
GridColumn column2 = new GridColumn(grid, SWT.None);
column2.setWidth(80);
for(int i = 0; i<50; i++)
{
GridItem item = new GridItem(grid, SWT.None);
item.setText("Item" + i);
}
Like i said, grid.select selects the whole row, which is not what i want. I also tried grid.selectCell(...), but for some reason that wont work either. The coordinates used are with a high likeliness correct:
Button btn = new Button(shell, SWT.PUSH);
btn.setText("test");
btn.addSelectionListener(new SelectionAdapter(){
public void widgetSelected(SelectionEvent e){
Point pt = new Point(400,300);
grid.selectCell(pt);
}
});
Any Ideas?
For a Grid, the Point co-ordinates represent the intersecting column and the row item. i.e, x co-ordinate represents the index of the column and y co-ord is the row item index.
Button btn = new Button (shell, SWT.PUSH);
btn.setText ("test");
btn.addSelectionListener(new SelectionAdapter() {
#Override
public void widgetSelected(SelectionEvent e) {
// Here the x co-ordinate of the Point represents the column
// index and y co-ordinate stands for the row index.
// i.e, x = indexOf(focusColumn); and y = indexOf(focusItem);
Point focusCell = grid.getFocusCell();
grid.selectCell(focusCell);
// eg., selects the intersecting cell of the first column(index = 0)
// in the second row item(rowindex = 1).
Point pt = new Point(0, 1);
grid.selectCell(pt);
}
});