cocos2d, Developer Blog

[ cocos2d-html ] ブロック崩し -レイアウト作成-

  • 0 Comments

前回は、scaleとrotateアクションについてご紹介させて頂きました。

cocos2d-htmlを使用しブロック崩しを作成していきます。
作成までの説明が長くなるため、記事を数回に分け説明させて頂きます。

今回は、ブロック崩しのレイアウトの作成についてです。
背景・ブロック・弾・バーの4種類の配置及び表示まで行います。
画面サイズは　320 * 380　とします。
使用する画像サイズ一覧です。

背景　　：320 * 380
ブロック： 40 * 20
弾　　　： 11 * 11
バー　　： 60 * 8

作成に入る前に、”main.js”ファイルを編集して画面サイズの変更を行います。
※Cocos2d-html-v2.2.1
　┗HelloHTML5World
　　┗main.js

以下のように変更してください。

  1. //変更前
  2. cc.EGLView.getInstance().setDesignResolutionSize(800, 450, cc.RESOLUTION_POLICY.SHOW_ALL);
  3. 　
  4. //変更後
  5. cc.EGLView.getInstance().setDesignResolutionSize(320, 380, cc.RESOLUTION_POLICY.SHOW_ALL);

これで画面サイズが　320 * 380 に変更出来ました。
それでは作成に入ります。

“myApp.js”ファイルを以下のように変更してください。
※Cocos2d-html-v2.2.1
　┗HelloHTML5World
　　┗src
　　　┗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;
  19. /**
  20. * box2d バー関連
  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. 　　　　return true;
  75. 　　},
  76. });
  77. 　
  78. var HelloWorldScene = cc.Scene.extend({
  79. 　　onEnter:function () {
  80. 　　　　this._super();
  81. 　　　　layer = new Helloworld();
  82. 　　　　layer.init();
  83. 　　　　this.addChild(layer);
  84. 　　}
  85. });

1～32行でsprite関連の変数を定義し
実際にspriteの生成や配置を行っているのは　50～72行になります。

これで全てのspriteの配置が終わりました。
実行すると以下のように表示されると思います。

  　

少し寂しいので、ゲーム感を出すために
実行時に”GameStart”を表示するよう処理を追加しましょう。

  1. //Spriteの生成
  2. var startSprite = cc.Sprite.create(“res/gamestart.png”);
  3. startSprite.setPosition(cc.p( size.width / 2, size.height / 2 ));
  4. layer.addChild(startSprite, 7);
  6. //フェードインの設定
  7. var actionFadeIn = cc.FadeIn.create(0.5);
  9. //Delayの設定
  10. var actionDelay = cc.DelayTime.create(1);
  12. //フェードアウトの設定
  13. var actionFadeOut = cc.FadeOut.create(0.5);
  15. //コールバックの設定
  16. var actionCb = cc.CallFunc.create(function () {
  17. 　　layer.removeChild(startSprite);
  18. },layer);
  20. //シーケンスの設定
  21. var actionSeq = cc.Sequence.create(actionFadeIn, actionDelay, actionFadeOut, actionCb);
  23. //アクション開始
  24. startSprite.runAction(actionSeq);

2～4行でGameStartのspriteを生成し
7～18行でアクションの設定をしています。

21行目にある cc.Sequence.create() は引数にアクションを指定すると
指定した順番にアクションを実行するように設定することが出来るCCActionです。
その後、24行目でstartSpriteが先ほど生成したSequenceを実行しています。

cc.Sequence.createを、今回を例に説明しますと
　create(actionFadeIn, actionDelay, actionFadeOut, actionCb)
となっているので

0.5秒かけてフェードイン
　↓
1秒間ディレイ
　↓
0.5秒かけてフェードアウト
　↓
コールバック関数内のremoveChildによってstartSpriteを消去

という処理フローになります。

それでは上記の処理をブロックsprite配置のfor文の後に追記します。

/********** 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;
  19. /**
  20. * box2d バー関連
  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. 　　　　return true;
  100. 　　},
  101. });
  102. 　
  103. var HelloWorldScene = cc.Scene.extend({
  104. 　　onEnter:function () {
  105. 　　　　this._super();
  106. 　　　　layer = new Helloworld();
  107. 　　　　layer.init();
  108. 　　　　this.addChild(layer);
  109. 　　}
  110. });

　
　
　

  　

以上でレイアウト作成は終了です。

<次回以降の更新について>
次回は、タッチ関連の関数及び、ドラッグによるバーの移動処理の追加を行いたいと思います。

コメントを残す

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

CAPTCHA

*