公式サイトのチュートリアルをやってみる その２ - Cocos Studio 2で画面作成：Cocos2d-x v3.7（JavaScript）

　
　下記の記事の続きです。
　
公式サイトのチュートリアルをやってみる その１ - タイルマップの作成：Cocos2d-x v3.7（JavaScript） - モーリーのメモ

　
　今回は画面の作成を行います。
　公式サイトのチュートリアルは、画面もすべてコードで作成しているのですが、せっかく『Cocos Studio 2』という画面作成ツールがあるので、『Cocos Studio 2』を使って作成したいと思います。

目次

画面の構成

　作成する画面は下記の２つです。

• タイトル画面

　背景とスタートボタンだけの画面です。

• プレイ画面

　ゲームのメインとなる画面です。
　背景、ランナー（プレイヤー）、スコア表示、ゲームオーバー表示で構成されています。

プロジェクトの作成

1. 『Cocos Studio2』を起動
2. アプリケーションメニューの『File』-『New Project...』をクリック
3. 開いたウィンドウで『All』の『Cocos Project』を選択し、『Next』をクリック
4. 次のように設定を行った後、『Finished』をクリック
   • 『Project Name（プロジェクト名）』：HelloCocos-Parkour（任意のプロジェクト名）
   • 『Orientation（画面の向き）』：『横向きの画面のアイコン』を選択
   • 『Engine Version（cocos2d-xのバージョン）』：『cocos2d-x-3.7』を選択
   • 『Project Language（使用するプログラミング言語）』：『JavaScript』を選択

画面サイズの設定

1. 画面左上のサイズ選択で、『iPhone3GS(480 * 320)』を選択

プロジェクトへの画像の追加

1. 『Cocos Studio 2』の画面左下の『Resources』ウインドウ内で右クリックし、『Import Resources...』をクリック
2. 下記のファイルを選択し、『Open』をクリックしてインポート
   • 前回ダウンロードした『Parkour/res』フォルダ内のファイル
     • background.plist
     • helloBG.png
     • playBG.png
     • restart_n.png
     • restart_s.png
     • runner.plist
     • start_n.png
     • start_s.png
   • 前回作成したマップファイル
     • map00.tmx
     • map01.tmx

スプライトシートを追加

　インポートした画像をスプライトシートにまとめます。

1. アプリケーションメニューの『File』-『New File...』をクリック
2. 開いたウインドウで、下記のように設定し、『New』をクリック
   • 『Type』：SpriteSheet
   • 『Name』：Plist
3. 『Resources』ウインドウで下記の画像ファイルを選択し、『Canvas（画面を編集するウインドウ）』の『Plist.csi』にドラッグアンドドロップ
   • restart_n.png
   • restart_s.png
   • start_n.png
   • start_s.png

MainSceneの作成

背景画像の差し替え

1. 『Canvas』上部の『MainScene.csd』のタブをクリック
2. 『Resources』ウインドウの『HelloWorld.png』を右クリックし『Delete』をクリック
3. 開いたウインドウで『Move To Trash』をクリックして削除
4. 『Canvas』の『HelloWorld.png』が設定されていた『Sprite』オブジェクトをクリック
5. 画面右の『Properties』ウインドウでプロパティを下記のように変更
   ＊書いていないパラメータは変更していません。
   • 『Position & Size』-『Position』：X 240、Y 160
   • 『Feature』
     • 『Image Resource』：helloBG.png（『Resources』ウインドウからドラッグアンドドロップ）

スタートボタンの追加

1. 『Cocos Studio 2』の画面左の『Objects』ウインドウの『Widgets』の『Button』オブジェクトを『Canvas』にドラッグアンドドロップ
2. 『Properties』ウインドウでプロパティを下記のように変更
   • 『Name』：ButtonStart
   • 『Position & Size』
     • 『Position』：X 240、Y 160
   • 『Feature』
     • 『Background』
       『Normal State』: start_n.png
       『Pressed State』: start_s.png
     • 『Text』：""（文字を消去）

　図のような構成になります。

PlaySceneの作成

シーンの構成

　シーンは下記のような構成になります。

• ゲームレイヤー
  • 背景（マップファイル）
  • ランナー
• スコア表示
• ゲームオーバー表示

シーンファイルの追加

1. アプリケーションメニューの『File』-『New File...』をクリック
2. 開いたウインドウで、下記のように設定し、『New』をクリック
   • 『Type』：Scene
   • 『Name』：PlayScene

ゲームレイヤーの追加

1. 『Objects』ウインドウの『Basic Objects』の『Node』オブジェクトを『Animation』ウインドウの『Scene』にドラッグアンドドロップ
2. 『Properties』ウインドウでプロパティを下記のように変更
   • 『Name』：NodeGameLayer
     

マップ00の追加

　前回の記事で書きましたが、タイルの出力形式で『CSV』を選んだマップファイル（.tmx）は読み込めませんのでご注意を。

1. 『Objects』ウインドウの『Basic Objects』の『TileMap』オブジェクトを『Animation』ウインドウの『NodeGameLayer』にドラッグアンドドロップ
2. 『Properties』ウインドウで、プロパティを下記のように変更
   • 『Name』： Map00
   • 『Feature』
     • 『File』：map00.tmx

マップ01の追加

1. 『Objectsウインドウ』の『Basic Objects』の『TileMap』オブジェクトを『Animation』ウインドウの『NodeGameLayer』にドラッグアンドドロップ
2. 『Properties』ウインドウで、プロパティを下記のように変更
   • 『Name』： Map01
   • 『Position & Size』
     • 『Position』：X 640、Y 0
   • 『Feature』
     • 『File』：map01.tmx

ランナーの追加

　ランナーのスプライトと下記の3種類のアニメーションを追加します。

• ランニング：画像8枚、1コマ0.1秒
• ジャンプ上昇中：画像4枚、1コマ0.2秒
• ジャンプ下降中：画像2枚、1コマ0.3秒

1. 『Animation』ウインドウで、アニメーションのフレームレートを30fpsに変更
2. 『Resources』ウインドウの『running.plist』のツリーを展開
3. 『runner0.png』〜『runner7.png』の8枚の画像をまとめて選択して右クリックし『Create SpriteSheet Animation...』をクリック
   
4. 開いたウインドウで下記のように設定し、『OK』をクリック
   • 『Spacing』：3
5. 『Animation』ウインドウで、追加された『Sprite』オブジェクトをクリック
6. 『Properties』ウインドウでプロパティを下記のように変更
   • 『Name』： SpriteRunner
   • 『Position & Size』
     • 『Position』：X 80、Y 85
7. 『Animation』ウインドウで、追加された『SpriteRunner』を『NodeGameLayer』にドラッグアンドドロップして配下にする
8. 『Resources』ウインドウの『running.plist』の『runnerJumpUp0.png』〜『runnerJumpUp3.png』の4枚を選択し、『Animationウインドウ』の『SpriteRunner』にドラッグアンドドロップ
9. 開いたウインドウで下記のように設定し、『OK』をクリック
   • 『Start』：25
   • 『Spacing』：6
10. 『Resources』ウインドウの『running.plist』の『runnerJumpDown0.png』〜『runnerJumpDown1.png』の2枚を選択し、『Animationウインドウ』の『SpriteRunner』にドラッグアンドドロップ
11. 開いたウインドウで下記のように設定し、『OK』をクリック
    • 『Start』：50
    • 『Spacing』：9
12. 『Animationウインドウ』の左上の『Add Animationボタン』をクリック
13. 開いたウインドウで下記のように設定し、『OK』をクリック
    • 『Name』：Running
    • 『Start Frame』：0
    • 『End Frame』：24
14. 『Animationウインドウ』の左上の『Add Animationボタン』をクリック
15. 開いたウインドウで下記のように設定し、『OK』をクリック
    • 『Name』：JumpUp
    • 『Start Frame』：25
    • 『End Frame』：49
16. 『Animationウインドウ』の左上の『Add Animationボタン』をクリック
17. 開いたウインドウで下記のように設定し、『OK』をクリック
    • 『Name』： JumpDown
    • 『Start Frame』：50
    • 『End Frame』：77

スコア表示用ラベルの追加

1. 『Objects』ウインドウの『Widgets』の『Label』オブジェクトを『Animation』ウインドウの『Scene』にドラッグアンドドロップ
2. 『Propertiesウインドウ』でプロパティを下記のように変更
   • 『Name』： LabelCoin
   • 『Feature』
     • 『Custom Size』：チェックを入れる
     • 『Text』：Coins:0
     • 『Font Style』：#000000、20
   • 『Position & Size』
     • 『Position』：X 60、Y 300
     • 『Size』：X 100、Y 23
3. 『Objects』ウインドウの『Widgets』の『Label』オブジェクトを『Animation』ウインドウの『Scene』にドラッグアンドドロップ
4. 『Propertiesウインドウ』でプロパティを下記のように変更
   • 『Name』： LabelMeter
   • 『Feature』
     • 『Custom Size』：チェックを入れる
     • 『Text』：0M
     • 『H-Align』：『Align Right』
     • 『Font Style』：#000000、20
   • 『Position & Size』
     • 『Position』：X 420、Y 300
     • 『Size』：X 100、Y 23

　『LabelCoin』と『 LabelMeter』の階層に注意してください。『Scene』の配下です。

ゲームオーバー表示の追加

ノードの追加

1. 『Objects』ウインドウの『Basic Objects』の『Node』オブジェクトを『Animation』ウインドウの『Scene』にドラッグアンドドロップ
2. 『Properties』ウインドウでプロパティを下記のように変更
   • 『Name』：NodeGameOverLayer

背景の追加

1. 『Objects』ウインドウの『Widgets』の『Image』オブジェクトを『Animation』ウインドウの『NodeGameOverLayer』にドラッグアンドドロップ
2. 『Properties』ウインドウでプロパティを下記のように変更
   • 『Position & Size』
     • 『Position』：X 240、Y 160
     • 『Size』：X 480、Y 320
   • 『General』
     • 『Opacity』：70
     • 『Color』：#000000
   • 『9-slice』
     • 『9-slice』：チェックを入れる（Imageオブジェクトの四隅がにじんだようになるため）

リスタートボタンの追加

1. 『Objects』ウインドウの『Widgets』の『Button』オブジェクトを『Animation』ウインドウの『NodeGameOverLayer』にドラッグアンドドロップ
2. 『Properties』ウインドウでプロパティを下記のように変更
   • 『Name』：ButtonRestart
   • 『Position & Size』
     • 『Position』：X 240、Y 160
   • 『Feature』
     • 『Background』
       『Normal State』: restart_n.png
       『Pressed State』: restart_s.png
     • 『Text』：""（文字を消去）

　上図のような構成になっていることを確認してください。

コインノードの作成

　ゲーム内に配置するコインを作成します。

ノードファイルの追加

1. アプリケーションメニューの『File』-『New File...』をクリック
2. 開いたウインドウで、下記のように設定し、『New』をクリック
   • 『Type』：Node
   • 『Name』：CoinNode

コインの追加

　スプライトとコインが回転するアニメーションを追加します。

1. 『Animation』ウインドウで、アニメーションのフレームレートを30fpsに変更
2. 『Resources』ウインドウの『background.plist』のツリーを展開
3. 『coin0.png』〜『coin7.png』の8枚の画像をまとめて選択して右クリックし『Create SpriteSheet Animation...』をクリック
4. 開いたウインドウで下記のように設定し、『OK』をクリック
   • 『Spacing』：6
5. 『Animation』ウインドウで、追加された『Sprite』オブジェクトをクリック
6. 『Properties』ウインドウでプロパティを下記のように変更
   • 『Name』： SpriteCoin
7. 『Animationウインドウ』の左上の『Add Animationボタン』をクリック
8. 開いたウインドウで下記のように設定し、『OK』をクリック
   • 『Name』：animation
   • 『Start Frame』：0
   • 『End Frame』：48

プロジェクトの保存とパブリッシュ

　作成したデータを保存し、『Cocos Code IDE』にパブリッシュします。

1. アプリケーションメニューの『File』-『Save All』をクリック
2. アプリケーションメニューの『Project』-『Publish and Package...』をクリック
3. 『Publish』- 『Publish Type』- 『Publish To Code IDE』をクリック
4. 『OK』をクリック

作成したプロジェクトがパブリッシュされて、『Cocos Code IDE』が起動します。
『Cocos Code IDE』での作業は次回に行います。
　
今回は、以上です。

あとがき

　『Cocos Studio 2』には音声ファイルを扱うオブジェクトもあるのですが、まだ扱い方がわかっていないので使用していません。コードで呼び出してもコード量は多くないですしね。