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

タイルマップによる表示

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

はじめに

ここでは、parkourゲームに新しい背景をつけるためのタイルマップの追加の仕方を紹介します。
背景を永久にループさせたり、プレイヤーを永久に走らせる方法を学びます。
その仕掛けはcocos2d-xのレイヤーを動かすことにあります。

準備

ややこしいところへ行く前に、いくつかのリソースファイルとゲームに関連する名前を追加しましょう。

リソースとグローバル変数の設定

それぞれのレイヤー内で他のレイヤーを参照する必要があります。そこで、レイヤーを取得する最善の方法はタグを使うことです。
次のコードを Global.h に追加します。

ここで、背景レイヤー、ゲームプレイレイヤー、ステータスレイヤーにタグ名を与えたので、レイヤーをタグを使って取得できます。

Resources フォルダに、タイルマップのための以下のファイルを追加してください。

  • map.png
  • map00.tmx
  • map01.tmx

タイルマップの紹介

タイルマップは、2Dゲームでよく使われる概念です。多くのレベルマップと背景の多重スクロールを構築するのに便利です。
タイルマップは、普通のPNGファイルよりもメモリ効率が良いです。多くのレベルを作成しようと思うなら、絶対におすすめです。
難しい話は抜きにして、さっさとタイルマップの世界にいきましょう。

タイルマップの設計と背景の作成

最初にタイルマップのための TiledMap エディタをここからダウンロードします。
TiledMapは、クロスプラットフォームのソフトウエアで、多くのバージョンがあります。
あなたのOSにあったバージョンをダウンロードしましょう。
ダウンロードしたら、使い方に慣れていきましょう。
ここにドキュメントがあります。
Tiled が使いやすいと思ったなら、タイルマップを作成していきましょう。
詳細な2つのタイルマップの作成方法はこのチュートリアルの範囲を超えています。
(タイルマップを自分自身で作成できないなら、用意してあるタイルマップを使用してください)

Tiled

背景をタイルマップで置き換える

元の1枚の画像で構成されていた背景をすてきな新しいタイルマップに置き換えましょう。
では、 BackgroundLayer.cpp を変更します。
最初に、 BackgroundLayer.h にメンバー変数を追加します。

元の1枚の画像によるコードを削除します。

最後にタイルマップで背景を作成する新しいコードを追加します。
At last, we will add the new code snippets to create the tiled map background.

すべてを保存して、実行してみましょう。

Tilemap1## Introduction

2つのマップを追加しました。タイルマップ2( map01 )はタイルマップ1( map00 )の右隣りに配置されています。
次の節では、なぜ2つのマップがあるのかを説明します。

シーン表示の変更

物理ボディは右へ無限に動いていくのて、同期しているスプライトも同じ位置に動いていってしまいます。
前のチュートリアルのように、数秒後に、プレーヤーは画面の外に出て行ってしまいます。
そこで、ゲームプレイレイヤーの位置を見える位置に動かす必要があります。

まず、レイヤー作成時に、タグを追加するように変更します。

次に、 GameplayLayer クラスに次の関数を追加します。

ここで、 getEyeX 関数は、ゲームプレイレイヤーの移動量を指しています。

同じ量を BackgroundLayerGameplayLayer で反対に移動させる必要があります。
そこで、 update 関数をフレームごとに呼び出すように、 PlaySceneinit 関数の最後に scheduleUpdate 関数の呼び出しを追加します。

さらに、 PlayScene クラスに update 関数を作成します。

背景のスクロール

背景レイヤーの移動を設定するのは、前の節と同じです。
しかし、同じ計算を2つのタイルマップに対して行わなければなりません。
そこで、新しいメンバー関数 checkAndReload を BackgroundLayer クラスに追加します。

移動量が画面の幅を超えると、計算された値は、0以上になります。
新しい変数 newMapIndex を使って、どちらのマップを使うかと、どれだけ移動すべきを決めます。

毎フレーム呼び出すために、 BackgroundScene クラスの init 関数の最後に scheduleUpdate 関数の呼び出しを追加します。

Tilemap2

これで終わりです。実行してチェックしてみましょう。

まとめ

ここでは、タイルマップを使って表示をしました。物理ベースの無限に走るゲームを開発する時、この2つの概念はとても大切です。
次のチュートリアルでは、コインと障害物をゲームに追加します。そこでは、拡張性が高くなるように改造する方法も学びます。
また、プレイシーンやカプセル化された、Coin と Rocks という2つのクラスを後始末することもやります。

Digiprove sealCopyright secured by Digiprove © 2014

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

コメントを残す

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