下記の記事の続きです。
公式サイトのチュートリアルをやってみる その1 - タイルマップの作成:Cocos2d-x v3.7(JavaScript) - モーリーのメモ
今回は画面の作成を行います。
公式サイトのチュートリアルは、画面もすべてコードで作成しているのですが、せっかく『Cocos Studio 2』という画面作成ツールがあるので、『Cocos Studio 2』を使って作成したいと思います。
目次
画面の構成
作成する画面は下記の2つです。
- タイトル画面
背景とスタートボタンだけの画面です。
- プレイ画面
ゲームのメインとなる画面です。
背景、ランナー(プレイヤー)、スコア表示、ゲームオーバー表示で構成されています。
プロジェクトの作成
- 『Cocos Studio2』を起動
- アプリケーションメニューの『File』-『New Project...』をクリック
- 開いたウィンドウで『All』の『Cocos Project』を選択し、『Next』をクリック
- 次のように設定を行った後、『Finished』をクリック
- 『Project Name(プロジェクト名)』:HelloCocos-Parkour(任意のプロジェクト名)
- 『Orientation(画面の向き)』:『横向きの画面のアイコン』を選択
- 『Engine Version(cocos2d-xのバージョン)』:『cocos2d-x-3.7』を選択
- 『Project Language(使用するプログラミング言語)』:『JavaScript』を選択
プロジェクトへの画像の追加
スプライトシートを追加
インポートした画像をスプライトシートにまとめます。
MainSceneの作成
背景画像の差し替え
- 『Canvas』上部の『MainScene.csd』のタブをクリック
- 『Resources』ウインドウの『HelloWorld.png』を右クリックし『Delete』をクリック
- 開いたウインドウで『Move To Trash』をクリックして削除
- 『Canvas』の『HelloWorld.png』が設定されていた『Sprite』オブジェクトをクリック
- 画面右の『Properties』ウインドウでプロパティを下記のように変更
*書いていないパラメータは変更していません。- 『Position & Size』-『Position』:X 240、Y 160
- 『Feature』
- 『Image Resource』:helloBG.png(『Resources』ウインドウからドラッグアンドドロップ)
スタートボタンの追加
- 『Cocos Studio 2』の画面左の『Objects』ウインドウの『Widgets』の『Button』オブジェクトを『Canvas』にドラッグアンドドロップ
- 『Properties』ウインドウでプロパティを下記のように変更
図のような構成になります。
PlaySceneの作成
シーンの構成
シーンは下記のような構成になります。
- ゲームレイヤー
- 背景(マップファイル)
- ランナー
- スコア表示
- ゲームオーバー表示
シーンファイルの追加
- アプリケーションメニューの『File』-『New File...』をクリック
- 開いたウインドウで、下記のように設定し、『New』をクリック
- 『Type』:Scene
- 『Name』:PlayScene
ゲームレイヤーの追加
- 『Objects』ウインドウの『Basic Objects』の『Node』オブジェクトを『Animation』ウインドウの『Scene』にドラッグアンドドロップ
- 『Properties』ウインドウでプロパティを下記のように変更
- 『Name』:NodeGameLayer
- 『Name』:NodeGameLayer
マップ00の追加
前回の記事で書きましたが、タイルの出力形式で『CSV』を選んだマップファイル(.tmx)は読み込めませんのでご注意を。
- 『Objects』ウインドウの『Basic Objects』の『TileMap』オブジェクトを『Animation』ウインドウの『NodeGameLayer』にドラッグアンドドロップ
- 『Properties』ウインドウで、プロパティを下記のように変更
- 『Name』: Map00
- 『Feature』
- 『File』:map00.tmx
マップ01の追加
- 『Objectsウインドウ』の『Basic Objects』の『TileMap』オブジェクトを『Animation』ウインドウの『NodeGameLayer』にドラッグアンドドロップ
- 『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秒
- 『Animation』ウインドウで、アニメーションのフレームレートを30fpsに変更
- 『Resources』ウインドウの『running.plist』のツリーを展開
- 『runner0.png』〜『runner7.png』の8枚の画像をまとめて選択して右クリックし『Create SpriteSheet Animation...』をクリック
- 開いたウインドウで下記のように設定し、『OK』をクリック
- 『Spacing』:3
- 『Animation』ウインドウで、追加された『Sprite』オブジェクトをクリック
- 『Properties』ウインドウでプロパティを下記のように変更
- 『Name』: SpriteRunner
- 『Position & Size』
- 『Position』:X 80、Y 85
- 『Animation』ウインドウで、追加された『SpriteRunner』を『NodeGameLayer』にドラッグアンドドロップして配下にする
- 『Resources』ウインドウの『running.plist』の『runnerJumpUp0.png』〜『runnerJumpUp3.png』の4枚を選択し、『Animationウインドウ』の『SpriteRunner』にドラッグアンドドロップ
- 開いたウインドウで下記のように設定し、『OK』をクリック
- 『Start』:25
- 『Spacing』:6
- 『Resources』ウインドウの『running.plist』の『runnerJumpDown0.png』〜『runnerJumpDown1.png』の2枚を選択し、『Animationウインドウ』の『SpriteRunner』にドラッグアンドドロップ
- 開いたウインドウで下記のように設定し、『OK』をクリック
- 『Start』:50
- 『Spacing』:9
- 『Animationウインドウ』の左上の『Add Animationボタン』をクリック
- 開いたウインドウで下記のように設定し、『OK』をクリック
- 『Name』:Running
- 『Start Frame』:0
- 『End Frame』:24
- 『Animationウインドウ』の左上の『Add Animationボタン』をクリック
- 開いたウインドウで下記のように設定し、『OK』をクリック
- 『Name』:JumpUp
- 『Start Frame』:25
- 『End Frame』:49
- 『Animationウインドウ』の左上の『Add Animationボタン』をクリック
- 開いたウインドウで下記のように設定し、『OK』をクリック
- 『Name』: JumpDown
- 『Start Frame』:50
- 『End Frame』:77
スコア表示用ラベルの追加
- 『Objects』ウインドウの『Widgets』の『Label』オブジェクトを『Animation』ウインドウの『Scene』にドラッグアンドドロップ
- 『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
- 『Objects』ウインドウの『Widgets』の『Label』オブジェクトを『Animation』ウインドウの『Scene』にドラッグアンドドロップ
- 『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』の配下です。
ゲームオーバー表示の追加
ノードの追加
- 『Objects』ウインドウの『Basic Objects』の『Node』オブジェクトを『Animation』ウインドウの『Scene』にドラッグアンドドロップ
- 『Properties』ウインドウでプロパティを下記のように変更
- 『Name』:NodeGameOverLayer
背景の追加
- 『Objects』ウインドウの『Widgets』の『Image』オブジェクトを『Animation』ウインドウの『NodeGameOverLayer』にドラッグアンドドロップ
- 『Properties』ウインドウでプロパティを下記のように変更
- 『Position & Size』
- 『Position』:X 240、Y 160
- 『Size』:X 480、Y 320
- 『General』
- 『Opacity』:70
- 『Color』:#000000
- 『9-slice』
- 『9-slice』:チェックを入れる(Imageオブジェクトの四隅がにじんだようになるため)
- 『Position & Size』
リスタートボタンの追加
- 『Objects』ウインドウの『Widgets』の『Button』オブジェクトを『Animation』ウインドウの『NodeGameOverLayer』にドラッグアンドドロップ
- 『Properties』ウインドウでプロパティを下記のように変更
上図のような構成になっていることを確認してください。
コインノードの作成
ゲーム内に配置するコインを作成します。
ノードファイルの追加
- アプリケーションメニューの『File』-『New File...』をクリック
- 開いたウインドウで、下記のように設定し、『New』をクリック
- 『Type』:Node
- 『Name』:CoinNode
コインの追加
スプライトとコインが回転するアニメーションを追加します。
- 『Animation』ウインドウで、アニメーションのフレームレートを30fpsに変更
- 『Resources』ウインドウの『background.plist』のツリーを展開
- 『coin0.png』〜『coin7.png』の8枚の画像をまとめて選択して右クリックし『Create SpriteSheet Animation...』をクリック
- 開いたウインドウで下記のように設定し、『OK』をクリック
- 『Spacing』:6
- 『Animation』ウインドウで、追加された『Sprite』オブジェクトをクリック
- 『Properties』ウインドウでプロパティを下記のように変更
- 『Name』: SpriteCoin
- 『Animationウインドウ』の左上の『Add Animationボタン』をクリック
- 開いたウインドウで下記のように設定し、『OK』をクリック
- 『Name』:animation
- 『Start Frame』:0
- 『End Frame』:48
プロジェクトの保存とパブリッシュ
作成したデータを保存し、『Cocos Code IDE』にパブリッシュします。
- アプリケーションメニューの『File』-『Save All』をクリック
- アプリケーションメニューの『Project』-『Publish and Package...』をクリック
- 『Publish』- 『Publish Type』- 『Publish To Code IDE』をクリック
- 『OK』をクリック
作成したプロジェクトがパブリッシュされて、『Cocos Code IDE』が起動します。
『Cocos Code IDE』での作業は次回に行います。
今回は、以上です。
あとがき
『Cocos Studio 2』には音声ファイルを扱うオブジェクトもあるのですが、まだ扱い方がわかっていないので使用していません。コードで呼び出してもコード量は多くないですしね。