Cocos2d-x v3 チュートリアル 3

ゲームプレイシーンのデザインと構築

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

ゲームの紹介

ここでは、ゲームシーンの設計と構築を紹介します。すべてのゲームは何らかのゲームシーンを持っています。なので、このチュートリアルでは一般的なシナリオに従うようにします。

前のチュートリアルから、特定のシーンのロジックを分離するために、別のレイヤーを使うことができることを学びました。

最終的なゲーム画面は次のようになります。

Result

背景レイヤー

まず、すべてのゲームでは背景が必要です。背景は画面全体を覆う静的な画像だけのこともあります。また、背景レイヤーが一定の速度や速度を変化しながら移動することもあります。背景に視差効果 (移動速度の違うレイヤーがあり、近いものは速く、遠くのものは遅く移動する)があるものもあります。

後で視差効果のある背景を組み立てるのに有効なタイルマップを紹介します。このチュートリアルでは、単純にするために、ゲームの背景として静的な1枚絵を使います。

注意:
ゲームの主人公を無限に走らせるような効果を背景を移動することによって作成できます。主人公は常に画面の中心にいます。そういった技法はゲーム開発の中で多く見ることができます。

ゲームプレイレイヤー

ゲームプレイレイヤーは、すべてのゲーム要素のアニメーション、衝突、その他のゲームロジックを含みます。このレイヤーではゲームプレイのキーとなる部分を作成します。一般的にゲームオブジェクト、レベルマネージャ、オブジェクト間の衝突検出、勝敗判定を設計します。面倒な作業はすべてここにあります。

理論的には、このレイヤーを小さなレイヤーに分ける必要はありません。複合と委譲を使って、適切に取り扱います。

ステータスレイヤー

ビデオゲームでは、HUD (head-up display、ハッド)はゲームのユーザーインターフェイスの一部として、プレーヤーに関連する情報を視覚的に伝える方法になります。その名前は現代の飛行機のヘッドアップディスプレイに因んでいます。

HUDは、主人公の体力、アイテム、ゲームの進行状況(スコアやレベルなど)などの情報を連続的に表示します。

単純にするために、ここではStatusLayerという別のレイヤーで情報を表示することにします。なぜなら、これらの要素は、常に他のゲーム要素の上に表示されるからです。別のレイヤーを使うことによって、より簡単にZオーダー表示問題をクリアできます。

実際のコード

準備

まず、2つの画像(PlayBG.pngrunner.png)を Resources ディレクトリに追加します。

ゲームプレイシーン(PlayScene.cpp)

背景レイヤー、ゲームプレイレイヤー、ステイタスレイヤーは別の表示順で表示しなければなりません。それには、 addChild メソッドで明示的に指定するか、正しい順序で追加していくかどちらかになります。ここでは、後者の方法をとります。

これが、PlaySceneのコードの一部です。

MenuSceneの変更

ボタンを押したら、PlaySceneに移るようにします。

背景レイヤー(BackgroundLayer.cpp)

これが背景画像です。

PlayBG

これがコードの一部です。

ゲームプレイレイヤー(GamenPlayLayer.cpp)

これがキャラクタの画像です。

Runner

ここでは、主人公をどのようにして走らせるかを紹介します。 MoveTo スクリプトを使って、2秒間で (80,85) から (300,85) に移動します。

これがコードの一部です。

ステータスレイヤー(StatusLayer.cpp)

ここでは、2つの表示を追加します。コインの量と距離です。2つ共ラベルを使います。ラベルはHUDに情報を表示するのにとても便利です。またコードもとても単純になります。

これがコードの一部です。

LabelTTF::create でテキストラベルを作成することができます。最初の引数は表示するテキストで、2つめはフォント、3つめはフォントサイズです。また、LabelTTFの setColor 関数でラベルの色を変更できます。Color3B(0, 0, 0) は黒です。

まとめ

ここでは、ゲームシーンを別々のレイヤーに分けることを学びました。それぞれのレイヤーは、それぞれのロジックを持ちます。

Digiprove sealCopyright secured by Digiprove © 2014

Cocos2d-x v3 チュートリアル 3」への1件のフィードバック

コメントを残す

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