Developer Blog

[ cocos2d-html ] ブロック崩し -タッチ処理-

  • 0 Comments

前回に引き続き、ブロック崩しの作成について、説明していきます。
今回は、「バーを移動させる処理」の実装についてです。

バーを移動させるためにはいくつか方法がございますが
当記事のブロック崩しでは、cocos2d-htmlに用意されている
タッチイベントを使用し処理を行っていくことにします。
下記が、今回使用するタッチイベントのコールバック関数です。

・onTouchesBegan(touches, event)
　→タッチされたとき
・onTouchesMoved(touches, event)
　→ドラッグ操作中
・onTouchesEnded(touches, event)
　→指が離れたとき

まずは、タッチを有効にしたいタイミングの箇所に次の処理を追加します。

this.setTouchEnabled( true );

次に、以下をinitの下に追加します。
※現段階では、ログを出力するだけの処理です。

  1. onTouchesBegan:function (touches, event) {
  2. 　　console.log("onTouchesBegan");
  3. },
  4. onTouchesMoved:function (touches, event) {
  5. 　　console.log("onTouchesMoved");
  6. },
  7. onTouchesEnded:function (touches, event) {
  8. 　　console.log("onTouchesEnded");
  9. },

上記までを行うと、タッチが使用できるようになります。
ブラウザで動作を確認します。

Firefoxの場合はメニューバーから
「ツール」→「Web開発」→「開発ツールを表示」
の手順でwebコンソールを表示することが出来ます。

  　

コンソールメニューの「ロギング」をONにして
ブロック崩し画面内を適当にクリック又は、ドラッグしてみましょう。

各Touch関数内に記載している console.logの内容が表示されるのが確認出来ます。

  　

これでタッチに関する処理の最低限の実装が終わりました。
次に、ドラッグ動作でバーを移動させる処理を追加します。

TouchesMoved関数内に以下を記載します。

  1. //タッチポイントの取得
  2. var touch_point = touches[0].getLocation();
  4. //バーを移動する
  5. spr_bar.setPosition(cc.p(touch_point.x, BAR_Y));

Move関数が呼ばれる度にsetPositionでバーのspriteの座標を変更しています。
touches[0].getLocation()によりタッチポイントを取得することができ
上記内容は、x座標をMove時に取得した場所・y座標を固定(バーの初期配置時の高さ)にしていることにより
水平移動を実現しています。

しかし、今の状態では単純にタッチしている箇所のx座標を指定しているだけなので
ドラッグしたままマウスカーソルを画面外まで持っていくと、バー本体も消えてしまいます。

ブロック崩しとしてバーが消えてしまうのは良くないので
バーの移動限界値をそれぞれ画面の両端になるよう処理の追加が必要になります。
その一例が以下になります。
※先ほどのバー移動処理の修正ver

  1. var size = cc.Director.getInstance().getWinSize();
  3. //タッチポイントの取得
  4. var touch_point = touches[0].getLocation();
  6. if(touch_point.x < BAR_WIDTH/2){
  7. 　　spr_bar.setPosition(cc.p( BAR_WIDTH/2, BAR_Y));
  8. }
  9. else if(touch_point.x > (size.width - BAR_WIDTH/2)){
  10. 　　spr_bar.setPosition(cc.p(size.width - BAR_WIDTH/2, BAR_Y));
  11. }
  12. else{
  13. 　　spr_bar.setPosition(cc.p(touch_point.x, BAR_Y));
  14. }

バーを配置する際、アンカーポイントの変更は行っていないので
Default値である中心が設定されています。
その為
x座標が"バーの半分の値より小さい時"及び、"画面の最大サイズからバーの半分の値を引いた座標より大きい時"
にはそれ以上移動しないよう、if文によって処理を分岐させています。

今回の処理を全て追加したソースコード以下に記載します。

/********** myApp.js **********/

  1. /**
  2. *ブロック関連
  3. */
  4. //ブロックのsprite
  5. var spr_block = new Array();
  6. 　
  7. /**
  8. * 弾関連
  9. */
  10. //弾の幅
  11. var BALL_WIDTH = 5;
  12. 　
  13. //弾の高さ
  14. var BALL_HEIGHT = 5;
  15. 　
  16. //弾のsprite
  17. var spr_ball = null;
  18. 　
  19. /**
  20. *バー関連
  21. */
  22. //バーのY座標位置
  23. var BAR_Y = 20;
  24. 　
  25. //バーの幅
  26. var BAR_WIDTH = 60;
  27. 　
  28. //バーの高さ
  29. var BAR_HEIGHT = 4;
  30. 　
  31. //バーのsprite
  32. var spr_bar = null;
  33. 　
  34. var Helloworld = cc.Layer.extend({
  35. 　
  36. 　　init:function () {
  37. 　　　　this._super();
  38. 　
  39. 　　　　var size = cc.Director.getInstance().getWinSize();
  40. 　
  41. 　　　　//layerの生成
  42. 　　　　var lazyLayer = new cc.Layer.create();
  43. 　　　　this.addChild(lazyLayer);
  44. 　
  45. 　　　　//背景spriteの生成
  46. 　　　　var sprite = cc.Sprite.create( "res/bg.png" );
  47. 　　　　sprite.setPosition(cc.p( size.width / 2, size.height / 2 ) );
  48. 　　　　sprite.setScale( 1.0 );
  49. 　　　　lazyLayer.addChild( sprite, 0 );
  50. 　
  51. 　　　　//バーspriteの生成
  52. 　　　　spr_bar = cc.Sprite.create( "res/bar.png" );
  53. 　　　　spr_bar.setPosition( cc.p( size.width / 2 - 5, BAR_Y ) );
  54. 　　　　this.addChild( spr_bar, 0 );
  55. 　
  56. 　　　　//ボールspriteの生成
  57. 　　　　spr_ball = cc.Sprite.create( "res/boll.png" );
  58. 　　　　spr_ball.setPosition( cc.p( size.width / 2 - 5, BAR_Y + BAR_HEIGHT + BALL_HEIGHT ) );
  59. 　　　　this.addChild( spr_ball, 0 );
  60. 　
  61. 　　　　//ブロックの生成
  62. 　　　　var h_size = 0;
  63. 　
  64. 　　　　for( var i = 0; i < 5; i++ ){
  65. 　　　　　　for( var j = 0; j < 8; j++ ){
  66. 　　　　　　　　spr_block[i * 8 + j] = cc.Sprite.create( "res/block_2.png" );
  67. 　　　　　　　　spr_block[i * 8 + j].setPosition( cc.p( 20 + ( j * 40 ), 370 - h_size) );
  68. 　　　　　　　　spr_block[i * 8 + j].setScale( 1.0 );
  69. 　　　　　　　　this.addChild( spr_block[i * 8 + j], 0 );
  70. 　　　　　　}
  71. 　　　　　　h_size += 20;
  72. 　　　　}
  73. 　　　　
  74. 　　　　//Spriteの生成
  75. 　　　　var startSprite = cc.Sprite.create("res/gamestart.png");
  76. 　　　　startSprite.setPosition(cc.p( size.width / 2, size.height / 2 ));
  77. 　　　　layer.addChild(startSprite, 7);
  78. 　
  79. 　　　　//フェードインの設定
  80. 　　　　var actionFadeIn = cc.FadeIn.create(0.5);
  81. 　
  82. 　　　　//Delayの設定
  83. 　　　　var actionDelay = cc.DelayTime.create(1);
  84. 　
  85. 　　　　//フェードアウトの設定
  86. 　　　　var actionFadeOut = cc.FadeOut.create(0.5);
  87. 　
  88. 　　　　//コールバックの設定
  89. 　　　　var actionCb = cc.CallFunc.create(function () {
  90. 　　　　　　layer.removeChild(startSprite);
  91. 　　　　},layer);
  92. 　
  93. 　　　　//シーケンスの設定
  94. 　　　　var actionSeq = cc.Sequence.create(actionFadeIn, actionDelay, actionFadeOut, actionCb);
  95. 　
  96. 　　　　//アクション開始
  97. 　　　　startSprite.runAction(actionSeq);
  98. 　
  99. 　　　　//タッチを有効にする
  100. 　　　　this.setTouchEnabled( true );
  102. 　　　　return true;
  103. 　　},
  105. 　　onTouchesBegan:function (touches, event) {
  106. 　　　　console.log("onTouchesBegan");
  107. 　　},
  108. 　　onTouchesMoved:function (touches, event) {
  109. 　　　　console.log("onTouchesMoved");
  110. 　　　　
  111. 　　　　var size = cc.Director.getInstance().getWinSize();
  112. 　　　　
  113. 　　　　//タッチポイントの取得
  114. 　　　　var touch_point = touches[0].getLocation();
  115. 　　　　
  116. 　　　　if(touch_point.x < BAR_WIDTH/2){
  117. 　　　　 spr_bar.setPosition(cc.p( BAR_WIDTH/2, BAR_Y));
  118. 　　　　}
  119. 　　　　else if(touch_point.x > (size.width - BAR_WIDTH/2)){
  120. 　　　　 spr_bar.setPosition(cc.p(size.width - BAR_WIDTH/2, BAR_Y));
  121. 　　　　}
  122. 　　　　else{
  123. 　　　　 spr_bar.setPosition(cc.p(touch_point.x, BAR_Y));
  124. 　　　　}
  125. 　　},
  126. 　　onTouchesEnded:function (touches, event) {
  127. 　　　　console.log("onTouchesEnded");
  128. 　　},
  129. });
  130. 　
  131. var HelloWorldScene = cc.Scene.extend({
  132. 　　onEnter:function () {
  133. 　　　　this._super();
  134. 　　　　layer = new Helloworld();
  135. 　　　　layer.init();
  136. 　　　　this.addChild(layer);
  137. 　　}
  138. });

以上でタッチ処理の追加及び、バーの移動実装は終了です。

<次回以降の更新について>
次回からは、物理エンジンを使用したボールの移動やその他アクションを順次、実装していきたいと思います。

コメントを残す

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

CAPTCHA

*