Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

アトリエフレームワークス 個人制作資料 ブロック崩し

218 views

Published on

同志社ローム記念館プロジェクト アトリエフレームワークスのメンバーによる個人制作第4弾!今回の作品はブロック崩しです!当たり判定などのプログラムの他にデザインにも工夫をして作りました!

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

アトリエフレームワークス 個人制作資料 ブロック崩し

  1. 1. ブロック崩し ~作り方講座~
  2. 2. セットアップ • 基本となるセットアップを行う • hファイルで 各メソッドの定義をする 今回は右の3つのメソッドを用いる • cppファイル,setupメソッドで フレームレート・背景の設定をする
  3. 3. ブロック・壁の作成 • まず、ブロックと壁を描いていく 基本的にはof勉強会資料(図形)と一緒の内容 • hファイルにブロック・壁の座標・幅・高さを定義し ていく ここですべての値が10の倍数になっているのが ポイント!(理由は後述) • 色をランダムでつけるためにofRandomを用いて RGBをランダムにとるようにする
  4. 4. ブロック・壁の作成 • hファイルで定義したものを cppのdrawメソッドで描いていく
  5. 5. ブロック・壁の作成 • 実行結果 ブロックと壁の描写が完了した
  6. 6. ボールの作成 • 次にボールを作るのに必要な要素 を定義していく • アニメーションと異なる点は速さの値 を配列で定義していること ここで速さがすべて10の約数になっ ている のもポイント!(理由は(ry)
  7. 7. ボールの作成 • cppの各メソッドでかいていく • 注意する点は速さを配列で表しているところ • 初期位置の値はブロックや壁の内部以外なら 任意の値(10の倍数)をとって良い
  8. 8. ボールの作成 • 実行結果 ボールが出現! 画面内を動くように しかし、そのまま画面外へ…
  9. 9. バーの作成 • hファイルで値の定義→ • cppファイルの各メソッドで記述していく drawメソッドでのx座標の指定はマウスの位置が バーの中心になるような計算をしている • (また、mouseYは定義しているが今回は使用しない)
  10. 10. バーの作成 • 実行結果 バーの描写が完了 マウスの位置に反応して左右に動く
  11. 11. 反射の実装(壁とバー) • cppファイルのupdateメソッドに反射の処理を書いていく • 壁の反射の値は作成したときの値を参考 • 壁はx軸方向への反射、バーではy軸方向への反射
  12. 12. 反射の実装(ブロック) • ブロックで反射し,同時にブロックが消える 処理を書いている • 上底・下底ではy軸方向に反射し 側面ではx軸方向に反射する • ここのif文が「==」で判定しているため これまで様々な値を10の倍数・約数で表した • 消える処理は当たったブロックの値をすべて0 にすることで表現している • この処理をブロックの個数分かく
  13. 13. 反射の実装 • 実行結果 これでブロック崩しは完成 ボールに当たったブロックが 消えるようになっていれば成功
  14. 14. ゲームクリア • まず、ofImageでゲームクリアの 画像ファイルを定義する • すべてのブロックを消したとき =すべての値が0になるとき 画像を表示する • 画像のx座標にsin関数を用いることで 画像を左右に動かすことができる
  15. 15. ゲームクリア • 実行結果 ゲームクリアの画像がでてくる また、同時にボールも消える

×