Creando un diseño de juego de mesa usando JLayeredPane

5 minutos de lectura

Tengo una tarea que requiere que cree el diseño que ven en la imagen como parte del desarrollo de un juego. Nunca antes había trabajado con Java para aplicaciones de escritorio, así que soy un completo novato cuando se trata de usar las bibliotecas Swing y AWT. La imagen sugiere que usemos un JLayeredPane como nuestro contenedor raíz y luego agreguemos el resto encima. Mi problema es que he intentado comenzar con la imagen de fondo y el gridLayout, pero parece que no puedo hacer que aparezca nada más que el fondo. La cuadrícula no aparece en absoluto (sin línea de borde, sin fondo de las celdas) y cualquier otro componente que le haya agregado ha fallado. ¿Puede alguien señalarme en la dirección correcta aquí? Leí los documentos y vi algunos ejemplos de varios diseños, contenedores y componentes, pero parece que no puedo hacer que todos funcionen juntos.

Aquí está mi código hasta ahora:

public class BoardView  extends JFrame{


// Constructor
public BoardView() {
    JFrame window = new JFrame("Sorry Game"); // create a new Jwindow instance
    ImageIcon appIcon = new ImageIcon(getClass().getClassLoader().getResource("res/icon.png")); // create the icon for the app
    window.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); // when the 'X' button is clicked, the app stops
    window.setSize(new Dimension(1000, 700)); // setting the size of the window
    window.setResizable(false); // Window won't be resizable
    window.setIconImage(appIcon.getImage()); // set the icon for the app
    window.setLayout(new BorderLayout());
    JLayeredPane layeredPane = new JLayeredPane();
    JLabel background = new JLabel();
    background.setSize(1000,700);
    background.setIcon(new ImageIcon(getClass().getClassLoader().getResource("res/background.png")));  for the JLabel
    layeredPane.add(background,0);

    JPanel gridPanel = new JPanel(new GridLayout(16,16));
    gridPanel.setSize(650,700);
    layeredPane.add(gridPanel);

    for(int i = 0; i < 256; i++) {
        JLabel tile = new JLabel();
        tile.setBackground(Color.red);
        tile.setBorder(new LineBorder(Color.black));
        gridPanel.add(tile);
    }

    JLabel logo = new JLabel();
    logo.setIcon(new ImageIcon(getClass().getClassLoader().getResource("res/sorryImage.png")));
    layeredPane.add(logo);
    window.add(layeredPane);
    window.setLocationRelativeTo(null); // centers the window to the screen
    window.setVisible(true); // make the window visible
}
}

Mi proceso de pensamiento fue que podría configurar el diseño de JFrame en un BorderLayout para poder dividir el diseño final en dos partes, la occidental y la oriental. El Oeste contendría la Cuadrícula y los varios JLabels y Botones y el Este contendría el resto de los componentes. He intentado usar el BorderLayout.WEST & EAST parámetros al agregar componentes al JFrame pero ninguno ha funcionado o cambiado una sola cosa. También intenté usar un índice para la profundidad al agregar componentes al JLayeredPane según los documentos, pero nuevamente nada cambia.

PD Tenga en cuenta que no estoy buscando a alguien para que cree el diseño por mí. Quiero que alguien me ayude a entender qué estoy haciendo mal y cuál es la mejor manera de crear tales diseños.

Bosquejo

  • Comenzaría leyendo la sección del tutorial de Swing sobre Cómo usar paneles en capas para un ejemplo básico. El código le mostrará cómo estructurar mejor su clase (no debería extender JFrame por un lado). Un panel en capas utiliza un diseño nulo, por lo que debe establecer los límites de cada componente. Por lo general, cuando usa un BorderLayout, agrega el componente principal al CENTRO para que pueda ocupar el espacio disponible para el marco.

    – camickr

    23 de noviembre de 2019 a las 17:39

  • @camickr esto realmente ayudó, ¡gracias! He progresado. Una pregunta más para estar seguros. Para inicializar las celdas de la cuadrícula en la que quiero tener imágenes, ¿no necesito agregarlas manualmente en esas posiciones?

    – Stelios Papamichail

    24 de noviembre de 2019 a las 12:31

Para inicializar las celdas de la cuadrícula en la que quiero tener imágenes, ¿no necesito agregarlas manualmente en esas posiciones?

Si usas un GridLayout cada celda debe tener un componente y los componentes deben agregarse en orden secuencial. Es decir, a medida que se agregan componentes, se ajustarán automáticamente a la siguiente fila según sea necesario.

Entonces, incluso si no desea una imagen en una celda, deberá agregar un componente ficticio, digamos un JLabel sin texto/icono.

Un enfoque más fácil podría ser usar un GridBagLayout. los GridBagLayout se puede configurar para “reservar” espacio para celdas que no tienen componentes. Entonces puede agregar un componente a una celda específica.

import java.awt.*;
import java.util.*;
import javax.swing.*;
import javax.swing.border.*;

public class GridBagLayoutSparse extends JPanel
{
    public GridBagLayoutSparse()
    {
        setBorder( new LineBorder(Color.RED) );

        GridBagLayout gbl = new GridBagLayout();
        setLayout( gbl );
/*
    //  Set up a grid with 5 rows and columns.
        //  The minimimum width of a column is 50 pixels
        //  and the minimum height of a row is 20 pixels.

        int[] columns = new int[5];
        Arrays.fill(columns, 50);
        gbl.columnWidths = columns;

        int[] rows = new int[5];
        Arrays.fill(rows, 20);
        gbl.rowHeights = rows;
*/
        //  Add components to the grid at top/left and bottom/right

        GridBagConstraints gbc = new GridBagConstraints();
        gbc.fill = GridBagConstraints.BOTH;

        gbc.gridx = 0;
        gbc.gridy = 0;
        addLabel("Cell 0:0", gbc);

        gbc.gridx = 3;
        gbc.gridy = 4;
        addLabel("Cell 3:4", gbc);
    }

    private void addLabel(String text, GridBagConstraints gbc)
    {
        JLabel label = new JLabel(text);
        label.setBorder( new LineBorder(Color.BLUE) );

        add(label, gbc);
    }

    private static void createAndShowGUI()
    {
        JFrame frame = new JFrame("GridBagLayoutSparse");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setLayout( new GridBagLayout() );
        frame.add(new GridBagLayoutSparse());
        frame.setSize(300, 300);
        frame.setLocationByPlatform( true );
        frame.setVisible( true );
    }

    public static void main(String[] args) throws Exception
    {
        java.awt.EventQueue.invokeLater( () -> createAndShowGUI() );
    }
}
  1. Ejecute el código tal como está y los componentes se agruparán en el centro.
  2. Descomente el comentario del bloque y ejecútelo de nuevo. Los componentes se colocarán en la celda apropiada.

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad