GUI プログラミング第 3 回演習 BlockBreaker

GUI プログラミング第 3 回演習 BlockBreaker
～かんたんブロック崩しゲーム～
パドルを左右に操作して落ちてくるボールを反射させ、上のブロックを崩していく
ブロック
ボール
パドル
＜Eclipse を起動する＞
１．eclipse.zip を D:ドライブにコピーし、右クリック→ここに解凍
２．workspace を S:ドライブから D:ドライブにコピー
３．eclipse.exe を起動
４．workspace を D:workspace に設定
＜ブロック崩しのステップ＞
ステップ 1 矢印キーで動かせるパドルを描画
ステップ 2 ボールを描画し、アニメーションで動かす＋時間表示
ステップ 3 ブロックを描画し、崩せるようにする
発展課題 1 パドルをマウスでも動くようにする
発展課題 2 ボールが当たったパドルの位置で反射の仕方を変える
発展課題 3 スコア・ハイスコア表示＋色を自由に変更
-1-
【ブロック崩し
Step1】矢印キーで左右に動かせるパドルを描画する
＜パドルの表現方法＞
パドルは java.awt パッケージの Rectangle という Java が用意しているクラスを使う。これは四角形
を表すクラスで、左上の点の座標と幅・高さをもっている。
Rectangle
height
(x, y)
width
※２D の世界では、フレームやパネルの左上が原点、右に x 座標正方向、下に y 座標正方向となる。
＜グラデーションの描画＞
ただ四角を描画するとのっぺりするので、グラデーションで少し見た目を整える。
2 色のグラデーションのパターンは、java.awt パッケージの GradientPaint クラスのオブジェクトを使
うと簡単に設定できる。
GradientPaint gp = new GradientPaint(点 1 の x 座標, 点 1 の y 座標, 色 1,
点 2 の x 座標, 点 2 の y 座標, 色 2, 循環するかどうか)
このようにオブジェクトを作ったとき、点 1 と点 2 によって指定される区間を色 1 から色 2 に補完して
いく。最後の引数を true にすると繰り返しグラデーションする。
上の図で点 1 を BLUE・点 2 を RED とすると、色 1 が青・色 2 が赤
点 1 を通る平行ライン上は青、点 2 を通る平行ライン上は赤になる
＜BlockBreakerPanel.java の作成＞
１．BlockBreaker プロジェクトを新規作成
パッケージ・エクスプローラで右クリック→新規→Java プロジェクト
プロジェクト名 BlockBreaker
２．パッケージを作成
src フォルダを選択→右クリック→新規→パッケージ
パッケージ名 animation
３．BlockBreakerPanel クラスを作成
…JPanel を継承(extends)、KeyListener を実装(implements)したクラス
animation パッケージを選択→右クリック→新規→クラス
・クラス名 BlockBreakerPanel
・スーパークラスの参照をクリック→「JPanel」とうつと、javax.swing の JPanel が出てくるので、
それを選択して OK
・インターフェースの追加をクリック→「KeyListener」で出てくるクラスを選択して OK
４．ソースを編集 ※説明のためにコメントが多くあるが、必要以上書かなくてよい
-2-
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
BlockBreakerPanel.java
package animation;
import
import
import
import
import
import
import
java.awt.Color;
java.awt.GradientPaint;
java.awt.Graphics;
java.awt.Graphics2D;
java.awt.Rectangle;
java.awt.event.KeyEvent;
java.awt.event.KeyListener;
import javax.swing.JPanel;
public class BlockBreakerPanel extends JPanel implements KeyListener{
private Rectangle paddle;
private int pWidth = 50;
private int pHeight = 10;
// パドル
// パドルの幅
// パドルの高さ
/**
* コンストラクタ
*/
public BlockBreakerPanel() {
// キーイベントを受け取れるようにする
addKeyListener(this);
}
/**
* 描画メソッド
*/
@Override
public void paintComponent(Graphics g){
// ボタンなど配置していなければいらないが、忘れずに書く習慣にする
super.paintComponent(g);
// より高度な描画を可能にするようキャスト
Graphics2D g2d = (Graphics2D)g;
// 各描画対象の初期位置を計算して設定
/* このパネルがフレームに貼り付けられないとサイズが確定しないので
* コンストラクタの中では getWidth()などに正しい値がはいらない。
* そのため、ここでパドルの初期化と初期位置の決定を行う */
if (paddle == null) {
// パドルを Rectangle オブジェクトとして使う
paddle = new Rectangle(pWidth, pHeight);
// パドルの初期位置は x 方向は中心、y 方向は下から 20 あけたところ
/* パドルの左上の x 座標、y 座標を
* getWidth(),getHeight(),pWidth, pHeight を使って埋めて下さい */
paddle.setLocation( x 座標
,
y 座標
)；
}
/* 白色背景---------------------------------------*/
// 白をセット
g2d.setColor(Color.WHITE);
// 四角で塗りつぶす fillRect(左上の x 座標, 左上の y 座標, 幅, 高さ)
g2d.fillRect(0, 0, getWidth(), getHeight());
/* パドル描画-------------------------------------*/
// グラデーションパターンを指定する（ブルー → ホワイト）
// new GradientPaint(点1のx座標, 点1のy座標, 色1, 点2のx座標, 点2のy座標, 色2, 循環するか)
GradientPaint gp = new GradientPaint(paddle.x, paddle.y, Color.BLUE,
paddle.x, paddle.y+paddle.height/2, Color.WHITE, true);
g2d.setPaint(gp);
// パドルを描画
g2d.fill(paddle);
}
-3-
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
BlockBreakerPanel.java
/**
* キーを押すと呼ばれる
* 矢印キーでパドルが左右に動く
*/
@Override
public void keyPressed(KeyEvent e) {
int pdx = 10;
// １回のキー操作でずらす量
// 押されたキーのコードを取得
int keyCode = e.getKeyCode();
// キーコードで分岐
switch (keyCode) {
// 左矢印キーだったら
case KeyEvent.VK_LEFT:
// パドルが左に 10 ずれる（壁にめりこまない）
// Rectangle クラスの位置指定メソッド setLocation(左上の点の x 座標, y 座標)
if (paddle.x < pdx)
paddle.setLocation(0, paddle.y);
else
paddle.setLocation(paddle.x-pdx, paddle.y);
// 再描画
repaint();
break;
// 右矢印キーだったら
case KeyEvent.VK_RIGHT:
// パドルが右に 10 ずれる（壁にめりこまない
if (getWidth()-paddle.x-paddle.width < pdx)
paddle.setLocation(getWidth()-paddle.width, paddle.y);
else
paddle.setLocation(paddle.x+pdx, paddle.y);
// 再描画
repaint();
default:
break;
}
}
/* 以下の 2 つのメソッドは KeyListener を
* implements したため必要だが、空でよい */
@Override
public void keyReleased(KeyEvent e) {
}
@Override
public void keyTyped(KeyEvent e) {
}
}
-4-
＜BlockBreakerFrame.java の作成＞
１．フレームを作成
animation パッケージ選択→右クリック→新規→その他を選択
GUI Forms→Swing→JFrame を選んで「次へ」
Class Name は BlockBreakerFrame として「完了」
２．Jigloo のメッセージが出てきたら「OK」
３．Look&Feel（プログラムの見た目）を設定
フレームを選択→右クリック→Set Look&Feel→Windows を選択
４．レイアウトを設定
フレームを選択→右クリック→Set Layout→BorderLayout を選択
５．フレームのサイズを大きめにする
ソースの方をみて、initGUI()の中の下の方にあるサイズ指定部分を編集
setSize(400,300); → setSize(330,500);
６．フレームのプレビューに戻り、パネルを North に追加
上部の「Containers」右から 5 番目の「JPanel」を選び、フレームに貼り付ける
名前は northPanel、Constraints の中の direction に North を選択
７．パネルを South に追加
名前は southPanel、Constraints の中の direction に South を選択
８．southPanel の高さをで適当に大きくする（ボタンが張り付けられるくらい）
↓このくらい
※厳密にしたい場合は preferredSize プロパティを数字で 40 に指定する。
９．パネルを East に追加
名前は eastPanel、Constraints の中の direction に East を選択
１０． パネルを West に追加
名前は westPanel、Constraints の中の direction に West を選択
-5-
１１． BlockBreakerPanel を Center に追加
フレームを選択（中央をクリック）→右クリック→Add…→Add Custom
→Add custom class or layout を選択
「BlockBreakerPanel」と入力して OK
名前を centerPanel とし、Constraints の中の direction が Center になっていることを確認して OK
１２． centerPanel のボーダー（境界線）を設定する
centerPanel を選択→下の「GUI Properties」ウィンドウで
「Properies」の「Basic」の中の「border」を「EtchedBorder」にする
１３． southPanel のレイアウト設定
southPanel を選択→右クリック→Set Layout→AbsoluteLayout を選択
１４． southPanel にボタンを２つ追加
Step2 以降で使うのもだが、ここで追加しておく。
Components の一番左にある「JButton」を選んで southPanel に貼り付け
1 つ目：名前「startButton」 テキスト「START」
1 つ目：名前「stopButton」 テキスト「STOP」
↓保存するとこのようになる
１５． ボタンが押されたときに実行されるメソッドのひな型を作成
startButton を選択し、Event Name のリスト中の ActionListner を開いて actionPerformed を
inline に設定する
stopButton にも同じ操作をしておく
１６． キー操作を有効にするには、centerPanel にフォーカスされている必要があるので、コンストラ
クタに以下の記述を追加する）
public BlockBreakerFrame() {
super();
initGUI();
centerPanel.requestFocus();
}
１７． 実行する
１８． 矢印キーでパドルが左右に動くことを確認（現時点ではボタン操作はしない）
-6-