GUI プログラミング第 3 回演習 BlockBreaker ~ かんたんブロック崩しゲーム ~ パドルを左右に操作して落ちてくるボールを反射させ 上のブロックを崩していく ブロック ボール パドル <Eclipse を起動する > 1.eclipse.zip を D: ドライブにコピーし 右クリック ここに解凍 2.workspace を S: ドライブから D: ドライブにコピー 3.eclipse.exe を起動 4.workspace を D:workspace に設定 < ブロック崩しのステップ > ステップ 1 矢印キーで動かせるパドルを描画ステップ 2 ボールを描画し アニメーションで動かす + 時間表示ステップ 3 ブロックを描画し 崩せるようにする発展課題 1 パドルをマウスでも動くようにする発展課題 2 ボールが当たったパドルの位置で反射の仕方を変える発展課題 3 スコア ハイスコア表示 + 色を自由に変更 -1-
ブロック崩し Step1 矢印キーで左右に動かせるパドルを描画する < パドルの表現方法 > パドルは java.awt パッケージの Rectangle という Java が用意しているクラスを使う これは四角形を表すクラスで 左上の点の座標と幅 高さをもっている (x, y) Rectangle height width 2D の世界では フレームやパネルの左上が原点 右に 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 の作成 > 1.BlockBreaker プロジェクトを新規作成パッケージ エクスプローラで右クリック 新規 Java プロジェクトプロジェクト名 BlockBreaker 2. パッケージを作成 src フォルダを選択 右クリック 新規 パッケージパッケージ名 animation 3.BlockBreakerPanel クラスを作成 JPanel を継承 (extends) KeyListener を実装 (implements) したクラス animation パッケージを選択 右クリック 新規 クラス クラス名 BlockBreakerPanel スーパークラスの参照をクリック JPanel とうつと javax.swing の JPanel が出てくるので それを選択して OK インターフェースの追加をクリック KeyListener で出てくるクラスを選択して OK 4. ソースを編集 説明のためにコメントが多くあるが 必要以上書かなくてよい -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 java.awt.color; import java.awt.gradientpaint; import java.awt.graphics; import java.awt.graphics2d; import java.awt.rectangle; import java.awt.event.keyevent; import 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); /** * 描画メソッド */ 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 /** * キーを押すと呼ばれる * 矢印キーでパドルが左右に動く */ public void keypressed(keyevent e) { int pdx = 10; // 1 回のキー操作でずらす量 // 押されたキーのコードを取得 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 したため必要だが 空でよい */ public void keyreleased(keyevent e) { public void keytyped(keyevent e) { -4-
<BlockBreakerFrame.java の作成 > 1. フレームを作成 animation パッケージ選択 右クリック 新規 その他を選択 GUI Forms Swing JFrame を選んで 次へ Class Name は BlockBreakerFrame として 完了 2.Jigloo のメッセージが出てきたら OK 3.Look&Feel( プログラムの見た目 ) を設定フレームを選択 右クリック Set Look&Feel Windows を選択 4. レイアウトを設定フレームを選択 右クリック Set Layout BorderLayout を選択 5. フレームのサイズを大きめにするソースの方をみて initgui() の中の下の方にあるサイズ指定部分を編集 setsize(400,300); setsize(330,500); 6. フレームのプレビューに戻り パネルを North に追加上部の Containers 右から 5 番目の JPanel を選び フレームに貼り付ける名前は northpanel Constraints の中の direction に North を選択 7. パネルを South に追加名前は southpanel Constraints の中の direction に South を選択 8.southPanel の高さをで適当に大きくする ( ボタンが張り付けられるくらい ) このくらい 厳密にしたい場合は preferredsize プロパティを数字で 40 に指定する 9. パネルを East に追加名前は eastpanel Constraints の中の direction に East を選択 10. パネルを West に追加名前は westpanel Constraints の中の direction に West を選択 -5-
11. BlockBreakerPanel を Center に追加フレームを選択 ( 中央をクリック ) 右クリック Add Add Custom Add custom class or layout を選択 BlockBreakerPanel と入力して OK 名前を centerpanel とし Constraints の中の direction が Center になっていることを確認して OK 12. centerpanel のボーダー ( 境界線 ) を設定する centerpanel を選択 下の GUI Properties ウィンドウで Properies の Basic の中の border を EtchedBorder にする 13. southpanel のレイアウト設定 southpanel を選択 右クリック Set Layout AbsoluteLayout を選択 14. southpanel にボタンを 2 つ追加 Step2 以降で使うのもだが ここで追加しておく Components の一番左にある JButton を選んで southpanel に貼り付け 1 つ目 : 名前 startbutton テキスト START 1 つ目 : 名前 stopbutton テキスト STOP 保存するとこのようになる 15. ボタンが押されたときに実行されるメソッドのひな型を作成 startbutton を選択し Event Name のリスト中の ActionListner を開いて actionperformed を inline に設定する stopbutton にも同じ操作をしておく 16. キー操作を有効にするには centerpanel にフォーカスされている必要があるので コンストラクタに以下の記述を追加する ) public BlockBreakerFrame() { super(); initgui(); centerpanel.requestfocus(); 17. 実行する 18. 矢印キーでパドルが左右に動くことを確認 ( 現時点ではボタン操作はしない ) -6-