読者です 読者をやめる 読者になる 読者になる

モーリーのメモ

プログラミングやCG作成等、アプリ開発を中心に情報を収集中!

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

f:id:mmorley:20151030225247p:plain
 
 下記の記事の続きです。
 
公式サイトのチュートリアルをやってみる その1 - タイルマップの作成:Cocos2d-x v3.7(JavaScript) - モーリーのメモ

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

画面の構成

 作成する画面は下記の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)』を選択

f:id:mmorley:20151029173752p:plain

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

  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』にドラッグアンドドロップ

MainSceneの作成

背景画像の差し替え

  1. Canvas』上部の『MainScene.csd』のタブをクリック
  2. 『Resources』ウインドウの『HelloWorld.png』を右クリックし『Delete』をクリック
  3. 開いたウインドウで『Move To Trash』をクリックして削除
  4. Canvas』の『HelloWorld.png』が設定されていた『Sprite』オブジェクトをクリック
  5. 画面右の『Properties』ウインドウでプロパティを下記のように変更
    *書いていないパラメータは変更していません。

スタートボタンの追加

  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』:""(文字を消去)

f:id:mmorley:20151030122828p:plain
 図のような構成になります。

PlaySceneの作成

シーンの構成

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

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

シーンファイルの追加

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

ゲームレイヤーの追加

  1. 『Objects』ウインドウの『Basic Objects』の『Node』オブジェクトを『Animation』ウインドウの『Scene』にドラッグアンドドロップ
  2. 『Properties』ウインドウでプロパティを下記のように変更
    • 『Name』:NodeGameLayer
      f:id:mmorley:20151030140208p:plain
マップ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...』をクリック
    f:id:mmorley:20151030141916p:plain
  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ボタンf:id:mmorley:20151005231929p:plain』をクリック
  13. 開いたウインドウで下記のように設定し、『OK』をクリック
    • 『Name』:Running
    • 『Start Frame』:0
    • 『End Frame』:24
  14. 『Animationウインドウ』の左上の『Add Animationボタンf:id:mmorley:20151005231929p:plain』をクリック
  15. 開いたウインドウで下記のように設定し、『OK』をクリック
    • 『Name』:JumpUp
    • 『Start Frame』:25
    • 『End Frame』:49
  16. 『Animationウインドウ』の左上の『Add Animationボタンf:id:mmorley:20151005231929p:plain』をクリック
  17. 開いたウインドウで下記のように設定し、『OK』をクリック
    • 『Name』: JumpDown
    • 『Start Frame』:50
    • 『End Frame』:77

f:id:mmorley:20151030154456p:plain

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

  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

f:id:mmorley:20151030165743p:plain
 『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』:""(文字を消去)

f:id:mmorley:20151030180215p:plain
 上図のような構成になっていることを確認してください。

コインノードの作成

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

ノードファイルの追加

  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ボタンf:id:mmorley:20151005231929p:plain』をクリック
  8. 開いたウインドウで下記のように設定し、『OK』をクリック
    • 『Name』:animation
    • 『Start Frame』:0
    • 『End Frame』:48

f:id:mmorley:20151031103855p:plain

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

 作成したデータを保存し、『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』には音声ファイルを扱うオブジェクトもあるのですが、まだ扱い方がわかっていないので使用していません。コードで呼び出してもコード量は多くないですしね。