cocos2d-x v3 チュートリアル 7

コインと障害物の追加

元記事はこちらです。
Parkour Game with JavaScript (Cocos2d-JS v3.0) Chapter8

はじめに

ここでは、コインと障害物を追加していきます。

この後、プレーヤーが走ってコインを集めたり、障害物に当たって、死んだりします。

また、Tiledマップエディタを使ってゲームレベルの設計をしていきます。ゲームロジックは少し前より複雑になりますので、新しいコードを追加する前にコードをリファクタリングします。

準備

始める前に準備をしましょう。

リソースの追加とグローバル変数の追加

2つのゲーム要素をparkourゲームに追加しますので、グローバルな整数タグをそれぞれのゲーム要素に付与します。

次のコードを Global.h に追加しましょう。

ここでは、0,1,2 をプレーヤー、コイン、岩に割り当てます。

さらに、別のスプライトシート background.pngbackground.plistResources フォルダに追加します。コインと岩を background.png にパックしました。

詳細は、次節で行います。

コインと岩をTexturePackerでスプライトシートにパック

前の章では、小さなスプライトを大きくてコンパクトなスプライトシートに集めました。では、別のスプライトシートをパックしましょう。

最初に、TexturePackerを起動して、res/TexturePacker/coins and rocks にあるすべてのアセットをドラッグします。

リソースをドラッグした後、Data fileTexture file をそれぞれ、 Resources/background.plistResources/background.png に変更してください。

もし、最適化したくない場合は、そのまま Publish を押してスプライトシートを作成してください。

Texturepacker2

タイルマップのオブジェクトレイヤーの紹介

ここではタイルマップをレベルマップとして使いますが、ゲーム要素が欠けています。そこで、ここではタイルマップのオブジェクトレイヤーを使って、レベル要素を設計してきます。

コインオブジェクトレイヤー

最初にコインオブジェクトレイヤーを追加します。

  1. Tiledマップエディタを起動して、map00.tmxmap01.tmx を開きます。

  2. map00.tmxmap01.tmxcoin という名前のオブジェクトレイヤーを作成します。

Tilemap coin

  1. オブジェクトレイヤーを設計し、マップ中に矩形のオブジェクトをドラッグします。
    矩形のサイズや位置は変更可能です。また複製や削除もできます。

  2. オブジェクトレイヤーの設計ポイント

タイルマップ中のレイヤーの不透明度が変更できますので、オブジェクトを容易に置くことができます。

岩オブジェクトレイヤー

岩オブジェクトレイヤーの作成過程はコインオブジェクトレイヤーとほぼ同じです。
ですから、自分でやってみましょう。

BackgroundLayer クラスのリファクタリングとヘルパーメソッドの追加

コーディング中に既存の構造に新たな機能を追加するには、とても難しいと思うかもれません。

それは良くないコードなので、止めてすぐにリファクタリングしましょう。

BackgroundLayer クラスのリファクタリング

ここでは、init 関数を改良しましょう。まず、Vectorクラスの objects というリストをVector<cocos2d::Node*> クラスで用意します。

メンバーの追加

  1. メンバー変数の追加

  1. init 関数でキャッシュに、 background.plist という名前のスプライトシートを読み込む。

  1. コインと岩を初期化するための loadObject 関数を追加

ここでは、すべてのオブジェクトの情報を巡回し、Chipmunk の剛体を作成します。最後に objects に中のオブジェクトを追加します。

これらのコードについては説明はいらないでしょう。 mapIndex という変数には気をつけてください。 剛体を位置づける計算にそれを使います。

最初の2つの画面の物理オブジェクトを作成するために、 init 関数の最後で loadObject 関数を呼び出します。

  1. 不要になったchipmunk胴体を削除するための2つのヘルパー関数を追加

最初の関数は removeObjects です。それは mapIndex によってオブジェクトを除去します。実装はこのようにになります。

作成や破棄するロジックを checkAndReload 関数に追加

マップが移動する時、コインや岩を再作成するために、loadObject を呼び出します。

また、 removeObjects を呼び出して、すべての不要なオブジェクトを除去します。

コードは次のようになります。

コインと岩の追加

では、コインと岩の実装に入りましょう。詳細な実装の前に、2つのクラスの設計のアイデアに注意を払う必要があります。
ここでは、Spriteクラスではなく、Nodeクラスを継承することにします。
このクラスは、作成時に引数が必要になりますので、引数付きの create 関数を自分で用意します。
そして、内部にSpriteオブジェクトを持つようにします。

コインクラスの設計と実装

  1. 新規にCoin.hCoin.h を作成します。
    そこにCoinクラスを実装していきます。 Class フォルダにソースがあることを確認しましょう。

  2. Coin クラスは、 Node クラスを継承します。

コードを1つずつ説明します。

まず、メンバー変数が2つ、 spritemapIndex があります。
sprite は、コインのスプライトで、 mapIndex には、アクセッサ(getter/setter)関数を用意します。
init 関数では、スプライトシートを作成します。

コインは円状なので、 createCircle 関数で円状の剛体を作成してスプライトに関連付けます。

最後に、後始末のための removeFromParent 関数を定義します。

Rockクラスの設計と実装

Rockクラスの設計はCoinクラスとほぼ同じです。違いは剛体の形状だけです。
Rockクラスは矩形ですので、Coinクラスの円を矩形に変更します。

PlayScene の改良

PlayScene の init関数のリファクタリング

shapesToRemove というメンバー変数をPlaySceneクラス追加します。

衝突判定のコールバック関数の追加

  • タグの付与をを *init 関数の最後に追加します。

  • リスナーを initPhysics 関数の最後に追加します。

  • プレーヤーと、コインまたは岩との衝突判定をするための2つのコールバック関数を実装しましょう。

  • 不要になったスプライトを背景レイヤーから除去します。次のコードを update 関数の最初に追加します。

まとめ

ここは長かったですね。
複雑なゲームレベルを設計するためのタイルマップによるオブジェクトレイヤーの使い方と自分で作成するクラスの構造について学びました。

Digiprove sealCopyright secured by Digiprove © 2015

cocos2d-x v3 チュートリアル 7」への2件のフィードバック

  1. objective-Cでの開発はかなりやってきましたが、少し前からcocos2d-xを使い始めています。
    Ver3のドキュメントが少ないので非常に参考になります。
    まだ慣れていないので、今回のようにソースを全て記載していただけると助かります。

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください