サイズ変更可能なチェスの GUI を作成するにはどうすればよいでしょうか?
弊社はチェス ゲームの作成を任されています。Windows、OS X、Linux/Unix マシンで動作する必要があり、共通のコード ベースを維持しながらこれを実現するために Java を選択しました (メンテナンスとコスト削減の両方に便利です)。
私の仕事はGUIを作成することです。ユーザーデザインチームはクライアントと以下の仕様をクリアしました。
チェス ゲーム (Chess Champ) はサイズ変更に対して堅牢でシンプルで、次の機能を備えています。
- 上部のツールバーには UI コンポーネントがあります。
- Newボタン
- Saveボタン
- Restoreボタン
- Resignボタン
- プレイヤーにメッセージを提供するためのラベル。
ゲームの左側には、将来の使用のために予約される領域が必要です。これには次のようなものが含まれる可能性があります。
- 捕獲した作品のリスト
- ポーンを昇格させるときに駒を選択するセレクター
- ゲーム統計
- ヒントなど
この詳細については、クライアントとロジック チームとの間でまだ調整中です。そのため、現時点では、
?
テキストを含むラベルでマークするだけです。GUI の残りの部分はチェス ボード自体で構成されます。次のものが含まれます。
- チェス盤のメイン領域。ユーザーがチェスの駒をポイントすると、枠線でフォーカスが表示されます。キーボードからもアクセスできます。クライアントは、チェスの駒のスプライト シート (さまざまなサイズ、スタイル、色) を複数提供し、ユーザーがゲームの外観を変更できるようにします。
- チェス盤には、列 (左から右へ: A、B、C、D、E、F、G、H) と行 (上から下へ: 8、7、6、5、4、3、2、1) を示すラベルが付いています。
- チェス盤と列/行のラベルは 1 ピクセルの黒い枠で囲まれ、その周囲に 8 ピクセルのパディングが配置されます。
- プレイヤーがゲームのサイズを大きくするにつれて、チェス盤は四角のまま、それ以外の場合利用可能なスペースを埋めます。
- チェス盤の背景色は黄土色であるべきですが、以下のモックアップでは、サイズ変更の動作を強調するために、チェス盤の後ろの領域を緑色にしています。
ゲーム開始前の最小サイズのチェス チャンプ
新規ゲームボタンがアクティブ化された後の最小サイズのチェス チャンプ
チェス チャンプが最小サイズより広く伸びました
チェスチャンプは最小サイズよりも背が高くなった
ベストアンサー1
ノート
左側と上部に列があるチェス盤は、 9x9 で提供されます
GridLayout
。グリッド レイアウトの最初のセルは、テキストのないラベルです。ただし、ゲーム ロジックを簡素化するために、ボタンの 8x8 配列を別に用意しています。
キーボード機能を有効にするために、チェス ボードの場所にボタンを使用します。これにより、組み込みのフォーカス表示も提供されます。ボタンの余白は削除され、アイコンのサイズに縮小できるようになります。
ActionListener
ボタンに を追加すると、キーボード イベントとマウス イベントの両方に応答します。正方形のボードを維持するために、ちょっとしたトリックを使います。チェスボードは、指定の
GridBagLayout
ない唯一のコンポーネントとしてに追加されますGridBagContraints
。こうすることで、常に中央に配置されます。必要なサイズ変更動作を取得するために、チェスボードは実際のサイズを照会します。親コンポーネント、正方形のままで、親の幅または高さの小さい方のサイズを超えない、最大の推奨サイズを返します。チェスの駒の画像は以下から入手しましたコードとマークアップのQ&Aのサンプル画像は、ラベルに Unicode 文字を「入力」する画像を使用する方
が簡単ですが、Unicode 文字を入力すると汎用性が高く、軽量になります。IE で 3 つの異なるチェスの駒のスタイルと 3 つの異なるサイズで 4 つの異なる色をサポートするには、36 個のスプライト シートが必要になります。
import java.awt.*;
import java.awt.event.*;
import java.awt.image.BufferedImage;
import javax.swing.*;
import javax.swing.border.*;
import java.net.URL;
import javax.imageio.ImageIO;
public class ChessGUI {
private final JPanel gui = new JPanel(new BorderLayout(3, 3));
private JButton[][] chessBoardSquares = new JButton[8][8];
private Image[][] chessPieceImages = new Image[2][6];
private JPanel chessBoard;
private final JLabel message = new JLabel(
"Chess Champ is ready to play!");
private static final String COLS = "ABCDEFGH";
public static final int QUEEN = 0, KING = 1,
ROOK = 2, KNIGHT = 3, BISHOP = 4, PAWN = 5;
public static final int[] STARTING_ROW = {
ROOK, KNIGHT, BISHOP, KING, QUEEN, BISHOP, KNIGHT, ROOK
};
public static final int BLACK = 0, WHITE = 1;
ChessGUI() {
initializeGui();
}
public final void initializeGui() {
// create the images for the chess pieces
createImages();
// set up the main GUI
gui.setBorder(new EmptyBorder(5, 5, 5, 5));
JToolBar tools = new JToolBar();
tools.setFloatable(false);
gui.add(tools, BorderLayout.PAGE_START);
Action newGameAction = new AbstractAction("New") {
@Override
public void actionPerformed(ActionEvent e) {
setupNewGame();
}
};
tools.add(newGameAction);
tools.add(new JButton("Save")); // TODO - add functionality!
tools.add(new JButton("Restore")); // TODO - add functionality!
tools.addSeparator();
tools.add(new JButton("Resign")); // TODO - add functionality!
tools.addSeparator();
tools.add(message);
gui.add(new JLabel("?"), BorderLayout.LINE_START);
chessBoard = new JPanel(new GridLayout(0, 9)) {
/**
* Override the preferred size to return the largest it can, in
* a square shape. Must (must, must) be added to a GridBagLayout
* as the only component (it uses the parent as a guide to size)
* with no GridBagConstaint (so it is centered).
*/
@Override
public final Dimension getPreferredSize() {
Dimension d = super.getPreferredSize();
Dimension prefSize = null;
Component c = getParent();
if (c == null) {
prefSize = new Dimension(
(int)d.getWidth(),(int)d.getHeight());
} else if (c!=null &&
c.getWidth()>d.getWidth() &&
c.getHeight()>d.getHeight()) {
prefSize = c.getSize();
} else {
prefSize = d;
}
int w = (int) prefSize.getWidth();
int h = (int) prefSize.getHeight();
// the smaller of the two sizes
int s = (w>h ? h : w);
return new Dimension(s,s);
}
};
chessBoard.setBorder(new CompoundBorder(
new EmptyBorder(8,8,8,8),
new LineBorder(Color.BLACK)
));
// Set the BG to be ochre
Color ochre = new Color(204,119,34);
chessBoard.setBackground(ochre);
JPanel boardConstrain = new JPanel(new GridBagLayout());
boardConstrain.setBackground(ochre);
boardConstrain.add(chessBoard);
gui.add(boardConstrain);
// create the chess board squares
Insets buttonMargin = new Insets(0, 0, 0, 0);
for (int ii = 0; ii < chessBoardSquares.length; ii++) {
for (int jj = 0; jj < chessBoardSquares[ii].length; jj++) {
JButton b = new JButton();
b.setMargin(buttonMargin);
// our chess pieces are 64x64 px in size, so we'll
// 'fill this in' using a transparent icon..
ImageIcon icon = new ImageIcon(
new BufferedImage(64, 64, BufferedImage.TYPE_INT_ARGB));
b.setIcon(icon);
if ((jj % 2 == 1 && ii % 2 == 1)
//) {
|| (jj % 2 == 0 && ii % 2 == 0)) {
b.setBackground(Color.WHITE);
} else {
b.setBackground(Color.BLACK);
}
chessBoardSquares[jj][ii] = b;
}
}
/*
* fill the chess board
*/
chessBoard.add(new JLabel(""));
// fill the top row
for (int ii = 0; ii < 8; ii++) {
chessBoard.add(
new JLabel(COLS.substring(ii, ii + 1),
SwingConstants.CENTER));
}
// fill the black non-pawn piece row
for (int ii = 0; ii < 8; ii++) {
for (int jj = 0; jj < 8; jj++) {
switch (jj) {
case 0:
chessBoard.add(new JLabel("" + (9-(ii + 1)),
SwingConstants.CENTER));
default:
chessBoard.add(chessBoardSquares[jj][ii]);
}
}
}
}
public final JComponent getGui() {
return gui;
}
private final void createImages() {
try {
URL url = new URL("https://i.sstatic.net/memI0.png");
BufferedImage bi = ImageIO.read(url);
for (int ii = 0; ii < 2; ii++) {
for (int jj = 0; jj < 6; jj++) {
chessPieceImages[ii][jj] = bi.getSubimage(
jj * 64, ii * 64, 64, 64);
}
}
} catch (Exception e) {
e.printStackTrace();
System.exit(1);
}
}
/**
* Initializes the icons of the initial chess board piece places
*/
private final void setupNewGame() {
message.setText("Make your move!");
// set up the black pieces
for (int ii = 0; ii < STARTING_ROW.length; ii++) {
chessBoardSquares[ii][0].setIcon(new ImageIcon(
chessPieceImages[BLACK][STARTING_ROW[ii]]));
}
for (int ii = 0; ii < STARTING_ROW.length; ii++) {
chessBoardSquares[ii][1].setIcon(new ImageIcon(
chessPieceImages[BLACK][PAWN]));
}
// set up the white pieces
for (int ii = 0; ii < STARTING_ROW.length; ii++) {
chessBoardSquares[ii][6].setIcon(new ImageIcon(
chessPieceImages[WHITE][PAWN]));
}
for (int ii = 0; ii < STARTING_ROW.length; ii++) {
chessBoardSquares[ii][7].setIcon(new ImageIcon(
chessPieceImages[WHITE][STARTING_ROW[ii]]));
}
}
public static void main(String[] args) {
Runnable r = new Runnable() {
@Override
public void run() {
ChessGUI cg = new ChessGUI();
JFrame f = new JFrame("ChessChamp");
f.add(cg.getGui());
// Ensures JVM closes after frame(s) closed and
// all non-daemon threads are finished
f.setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);
// See https://stackoverflow.com/a/7143398/418556 for demo.
f.setLocationByPlatform(true);
// ensures the frame is the minimum size it needs to be
// in order display the components within it
f.pack();
// ensures the minimum size is enforced.
f.setMinimumSize(f.getSize());
f.setVisible(true);
}
};
// Swing GUIs should be created and updated on the EDT
// http://docs.oracle.com/javase/tutorial/uiswing/concurrency
SwingUtilities.invokeLater(r);
}
}