Developer Blog

[ cocos2d-html ] ブロック崩し -画面の境界線作成-

  • 0 Comments

前回に引き続き、ブロック崩しの作成について、説明していきます。

現時点では、物理オブジェクトとして設定しているものはブロック及びバーの２種類です。
その為、ボールが左右へ行っても画面外へ出てしまうので、上下左右にBox2dを設定し
ボールが画面内に留まるようにします。

グローバル変数の追加及び、init内Box2dワールドを生成した後に以下を追加します。
グローバル変数

  1. //画面上部の境界線
  2. var spr_disp_upper = null;
  4. //画面下部の境界線
  5. var spr_disp_bottom = null;
  7. //画面左側の境界線
  8. var spr_disp_left　= null;
  10. //画面右側の境界線
  11. var spr_disp_right = null;

init内

  1. var fixDef = new b2FixtureDef;
  2. fixDef.density = 1.0;
  4. //摩擦係数
  5. fixDef.friction = 0;
  7. //反発係数
  8. fixDef.restitution = 1;
  10. var bodyDef = new b2BodyDef;
  12. //create ground
  13. bodyDef.type = b2Body.b2_staticBody;
  14. fixDef.shape = new b2PolygonShape;
  16. //上下の境界線の幅と高さ設定
  17. fixDef.shape.SetAsBox(320.0 / PTM_RATIO, 1 / PTM_RATIO);
  19. //upper
  20. //ダミーでsprite設定
  21. //表示は行わない
  22. //CB関数用の変数となります
  23. spr_disp_upper = cc.Sprite.create( “res/boll.png” );
  25. bodyDef.position.Set(320.0 / PTM_RATIO / 2, 380.0 / PTM_RATIO);
  26. bodyDef.userData = spr_disp_upper;
  27. world.CreateBody(bodyDef).CreateFixture(fixDef);
  29. //bottom
  30. //ダミーでsprite設定
  31. //表示は行わない
  32. //CB関数用の変数となります
  33. spr_disp_bottom = cc.Sprite.create( “res/boll.png” );
  35. bodyDef.position.Set(320.0 / PTM_RATIO / 2, -1);
  36. bodyDef.userData = spr_disp_bottom;
  37. world.CreateBody(bodyDef).CreateFixture(fixDef);
  39. //左右の境界線の幅と高さ設定
  40. fixDef.shape.SetAsBox(1 / PTM_RATIO, 380.0 / PTM_RATIO);
  42. //left
  43. //ダミーでsprite設定
  44. //表示は行わない
  45. //CB関数用の変数となります
  46. spr_disp_left = cc.Sprite.create( “res/boll.png” );
  48. bodyDef.position.Set(0, 380.0 / PTM_RATIO / 2);
  49. bodyDef.userData = spr_disp_left;
  50. world.CreateBody(bodyDef).CreateFixture(fixDef);
  52. //right
  53. //ダミーでsprite設定
  54. //表示は行わない
  55. //CB関数用の変数となります
  56. spr_disp_right = cc.Sprite.create( “res/boll.png” );
  58. bodyDef.position.Set(320.0 / PTM_RATIO, 380.0 / PTM_RATIO / 2);
  59. bodyDef.userData = spr_disp_right;
  60. world.CreateBody(bodyDef).CreateFixture(fixDef);

境界線を設定するために必要なFixtureDef、b2BodyDefのインスタンスを生成します。
摩擦係数や密度の初期化を行います。

生成したFixtureDefを使用して幅と高さをしているのが
fixDef.shape.SetAsBox(320.0 / PTM_RATIO, 1 / PTM_RATIO);
になります。

前回の記事でも説明したとおり、Box2Dの世界では長さの単位にM(メートル)を使用します。
そのため、実際に指定する幅・高さを PTM_RATIO で割る形になっています。

bodyDefインスタンスのポジションセットにより、fixtureDefで設定した境界線を設置する場所を指定します。
bodyDef.position.Set(320.0 / PTM_RATIO / 2, 380.0 / PTM_RATIO);

上記までが境界線の設定となり
実際に境界線の生成を行っているのが以下になります。
world.CreateBody(bodyDef).CreateFixture(fixDef);

それぞれの引数に「bodyDef」「fixDef」を指定することによって
先ほど設定した幅高さの境界線(※１)が指定した箇所(※２)に生成されることになります。
※１.FixtureDefにより設定
※２.BodyDefにより設定

これで、ボールが画面内に収まるようになりました。
残りは当たったブロックを消去する処理が必要になります。
上記を可能にするために、衝突イベント時リスナーを登録します。
追記する場所は、init内になります。

  1. var listener = new Box2D.Dynamics.b2ContactListener;
  2. listener.BeginContact = function (contact) {
  3. 　　var contactA = contact.GetFixtureA().GetBody().GetUserData();
  4. 　　var contactB = contact.GetFixtureB().GetBody().GetUserData();
  5. 　　
  6. 　　if (contactA == spr_disp_upper　|| contactB == spr_disp_upper) {
  7. 　　　　//上の壁
  8. 　　}
  9. 　　else if (contactA == spr_disp_bottom || contactB == spr_disp_bottom) {
  10. 　　　　//下の壁
  11. 　　}
  12. 　　else if (contactA == spr_disp_left　 || contactB == spr_disp_left) {
  13. 　　　　//左の壁
  14. 　　}
  15. 　　else if (contactA == spr_disp_right　|| contactB == spr_disp_right) {
  16. 　　　　//右の壁
  17. 　　}
  18. 　　else {
  19. 　　　　//その他
  20. 　　}
  21. };
  22. listener.EndContact = function (contact) {
  23. };
  24. world.SetContactListener(listener);

ブロック衝突時処理のため、今回はその他の部分に追記することになりますが
初めに、ブロック消去処理に必要となる変数を追加しましょう。

グローバル変数定義部に追加

  1. //ブロックが存在するかどうか
  2. var appear_block = new Array();
  4. //ブロックの残数
  5. var block_count　　 = 0;

ブロック生成部に追加

  1. //ブロックが存在するかどうか
  2. appear_block[i * 8 + j] = true;
  3. block_count++;

その後、以下の処理をその他内に記載して下さい。

  1. for (var i = 0; i < spr_block.length; i++) {
  2. 　　if (contactA == spr_block[i] || contactB == spr_block[i]) {
  3. 　　　　layer.removeChild(spr_block[i]);
  5. 　　　　//gamestart対処 Start
  6. 　　　　//ブロックの数マイナス
  7. 　　　　appear_block[i] = false;
  8. 　　　　block_count–;
  10. 　　　　//破壊する
  11. 　　　　//layer.removeChild(spr_block[i]);
  12. 　　　　setTimeout(function () {world.DestroyBody(body_block[i]);}, 1);
  13. 　　　　break;
  14. 　　}
  15. }

これにより、ブロック崩しとして一通りの動作が可能になりました。
しかし現在の状態では、初回の弾を発射後でもクリックをすると
ボールの物理オブジェクトが生成されてしまいます。
それを防ぐため、次の処理を追記します。

var ball_moved　　 = false;
※グローバル変数に追加

上記変数を追加後
onTouchesEnded関数内の処理を以下のように変更します。

  1. if (ball_moved == false) {
  2. var size = cc.Director.getInstance().getWinSize();
  3. body_ball = this.addNewSpriteWithCoords(spr_ball, cc.p( size.width / 2 – 5, BAR_Y + BAR_HEIGHT / 2 + BALL_HEIGHT / 2 ), BALL_WIDTH, BALL_HEIGHT, true);
  5. var b2Vec2 = Box2D.Common.Math.b2Vec2;
  7. //弾の発射角度を調整 Start
  8. var ball_angle_work = Math.random() * 40;
  9. if (ball_angle_work < 20) {
  10. 　　 ball_angle_work = -1 * ball_angle_work – 20;
  11. } else {
  12. 　　 ball_angle_work = ball_angle_work;
  13. }
  14. ball_angle = ball_angle_work　/ 180;
  16. body_ball.SetLinearVelocity(new b2Vec2(-1 * ball_velocity * Math.sin(ball_angle), ball_velocity * Math.cos(ball_angle)));
  19. ball_moved = true;
  20. }

※上記の太字箇所を追加

以上で、本記事は終了となります。

今回の処理を追記したソースコードはこちら。

<次回以降の更新について>
次回は、プレイヤーの残機設定や速度調整等の細かな部分の修正や追加について、
引き続き説明していきます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA

*