-1-
GUI プログラミング第 3 回演習 BlockBreaker
～かんたんブロック崩しゲーム～ パドルを左右に操作して落ちてくるボールを反射させ、上のブロックを崩していく ＜Eclipse を起動する＞ １．eclipse.zip を D:ドライブにコピーし、右クリック→ここに解凍 ２．workspace を S:ドライブから D:ドライブにコピー ３．eclipse.exe を起動 ４．workspace を D:workspace に設定 ＜ブロック崩しのステップ＞ ステップ1 矢印キーで動かせるパドルを描画 ステップ2 ボールを描画し、アニメーションで動かす＋時間表示 ステップ3 ブロックを描画し、崩せるようにする 発展課題1 パドルをマウスでも動くようにする 発展課題2 ボールが当たったパドルの位置で反射の仕方を変える 発展課題3 スコア・ハイスコア表示＋色を自由に変更 パドル ボール ブロック-2-
【ブロック崩し
Step1】
矢印キーで左右に動かせるパドルを描画する ＜パドルの表現方法＞パドルはjava.awt パッケージの Rectangle という Java が用意しているクラスを使う。これは四角形 を表すクラスで、左上の点の座標と幅・高さをもっている。 ※２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 ４．ソースを編集 ※説明のためにコメントが多くあるが、必要以上書かなくてよい Rectangle (x, y) width he ig ht
BlockBreakerPanel.java -3- package animation; 1 2 import java.awt.Color; 3 import java.awt.GradientPaint; 4 import java.awt.Graphics; 5 import java.awt.Graphics2D; 6 import java.awt.Rectangle; 7 import java.awt.event.KeyEvent; 8 import java.awt.event.KeyListener; 9 10 import javax.swing.JPanel; 11 12
public class BlockBreakerPanel extends JPanel implements KeyListener{ 13
14
private Rectangle paddle; // パドル 15
private int pWidth = 50; // パドルの幅 16
private int pHeight = 10; // パドルの高さ 17 18 /** 19 * コンストラクタ 20 */ 21 public BlockBreakerPanel() { 22 // キーイベントを受け取れるようにする 23 addKeyListener(this); 24 } 25 26 /** 27 * 描画メソッド 28 */ 29 @Override 30
public void paintComponent(Graphics g){ 31 // ボタンなど配置していなければいらないが、忘れずに書く習慣にする 32 super.paintComponent(g); 33 // より高度な描画を可能にするようキャスト 34 Graphics2D g2d = (Graphics2D)g; 35 // 各描画対象の初期位置を計算して設定 36 /* このパネルがフレームに貼り付けられないとサイズが確定しないので 37 * コンストラクタの中では getWidth()などに正しい値がはいらない。 38 * そのため、ここでパドルの初期化と初期位置の決定を行う */ 39 if (paddle == null) { 40 // パドルを Rectangle オブジェクトとして使う 41
paddle = new Rectangle(pWidth, pHeight); 42 // パドルの初期位置は x 方向は中心、y 方向は下から 20 あけたところ 43 /* パドルの左上の x 座標、y 座標を 44 * getWidth(),getHeight(),pWidth, pHeight を使って埋めて下さい */ 45 paddle.setLocation( x 座標 , y 座標 )； 46 } 47 48 /* 白色背景---*/ 49 // 白をセット 50 g2d.setColor(Color.WHITE); 51 // 四角で塗りつぶす fillRect(左上の x 座標, 左上の y 座標, 幅, 高さ) 52
g2d.fillRect(0, 0, getWidth(), getHeight()); 53 54 /* パドル描画---*/ 55 // グラデーションパターンを指定する（ブルー → ホワイト） 56
// new GradientPaint(点1のx座標, 点1のy座標, 色1, 点2のx座標, 点2のy座標, 色2, 循環するか) 57
GradientPaint gp = new GradientPaint(paddle.x, paddle.y, Color.BLUE, 58
paddle.x, paddle.y+paddle.height/2, Color.WHITE, true); 59 g2d.setPaint(gp); 60 // パドルを描画 61 g2d.fill(paddle); 62 } 63 64
BlockBreakerPanel.java -4- /** 65 * キーを押すと呼ばれる 66 * 矢印キーでパドルが左右に動く 67 */ 68 @Override 69
public void keyPressed(KeyEvent e) { 70
int pdx = 10; // １回のキー操作でずらす量 71
// 押されたキーのコードを取得 72
int keyCode = e.getKeyCode(); 73 // キーコードで分岐 74 switch (keyCode) { 75 // 左矢印キーだったら 76 case KeyEvent.VK_LEFT: 77 // パドルが左に 10 ずれる（壁にめりこまない） 78 // Rectangle クラスの位置指定メソッド setLocation(左上の点の x 座標, y 座標) 79 if (paddle.x < pdx) 80 paddle.setLocation(0, paddle.y); 81 else 82 paddle.setLocation(paddle.x-pdx, paddle.y); 83 // 再描画 84 repaint(); 85 break; 86 // 右矢印キーだったら 87 case KeyEvent.VK_RIGHT: 88 // パドルが右に 10 ずれる（壁にめりこまない 89 if (getWidth()-paddle.x-paddle.width < pdx) 90 paddle.setLocation(getWidth()-paddle.width, paddle.y); 91 else 92 paddle.setLocation(paddle.x+pdx, paddle.y); 93 // 再描画 94 repaint(); 95 default: 96 break; 97 } 98 } 99 /* 以下の 2 つのメソッドは KeyListener を 100 * implements したため必要だが、空でよい */ 101 102 @Override 103
public void keyReleased(KeyEvent e) { 104 } 105 106 @Override 107
public void keyTyped(KeyEvent e) { 108 } 109 110 } 111
-5- ＜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 に追加
-6- １１． 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(); } １７． 実行する １８． 矢印キーでパドルが左右に動くことを確認（現時点ではボタン操作はしない）
