FC2ブログ

Entries

cocos2d タイル化マップ

iPhone 用ゲーム作成ライブラリ cocos2d のプログラミングガイドを日本語に訳しながら読んでいます。

今回は、マップの使い方

このあたりを自分で実装するととても面倒臭いんです。

みやちかんたろうの大冒険の際はとても苦労しました。

そのあたりが簡単に実現できるのではという期待のもと、読み進めていきたいと思います。

--------------------------------
cocos2dプログラミングガイド
タイル化マップ

<目次
タイル化マップの作り方と使い方

タイル化マップ

cocos2d では、タイル化マップを作成するのにふたつの方法があります。

TMX Tile Map フォーマット(新しい、より柔軟、お勧め)と、PGU Tile Map フォーマット(古い、お勧めしない)です。

TMX Tile Map フォーマット
cocos2d は、Tiled で作成されたマップをサポートしています。

Tiled には、ふたつのバージョンがあります:
・Mac OS X、Windows 、Linux上で動作する java アプリケーション。
・java バージョンのほとんどの機能をサポートする QT(ネイティブ)アプリケーション。これを書いている時の QT バージョン 0.40 は六角形マップをサポートしていません。

以下のページでは、 Tiled を使ったマップの作成方法が説明されています。
Creating a single map with Tiled

cocos2d は以下の TMX マップをサポートしています:
・志向(Orientation)
 ・直行座標(Orthogonal)マップ
 ・等角図(Isometric)マップ
 ・六角形(Hexagonal)マップ (角が左右、角が上下はサポートされていません。おそらく Tiled も同様です。)
・タイル(Tiles)
 ・埋め込みタイル(Embedded tiles)はサポートされていません。(埋め込み画像によるタイルセットなど)
 ・埋め込みタイルセット(embedded tilesets)のみサポートされています。(タイルセットは埋め込まれていますが、画像は埋めこまれていません。)
 ・ひとつのレイヤーにひとつのタイルセットのみがサポートされています。
・レイヤー
 ・好きなだけレイヤーをもてます。
 ・それぞれのレイヤーは CCTMXLayer によって内部的に表現されます。(CCTMXLayer は CCSpriteSheet のサブクラスです。)
 ・それぞれのタイルは CCSprite によって表現されます。(CCtxLayer がその親となります。)
・オブジェクトグループ
 ・タイル化オブジェクトグループも同様にサポートされています。


外部イメージでの埋め込みタイルセットの作成方法
cocos2d はタイルセット内の埋め込み画像をサポートしていません。(ただし、チップセットの中に埋め込まれたタイルセットは必要です。)かわりに、スプライトシート画像(AKA: Texture Atlas)を自分自身で作成する必要があります。

Tiled の設定
Tiled に埋め込みイメージでタイルセットを保存しないように設定しましょう。

一度だけ Tiled で以下を行ってください。
・Edit → Preferences → Saving
・レイヤーオプション(Layer Options)
 ・バイナリエンコーディングの使用(Use binary encoding):ON(cocos2d は、text エンコーディングをサポートしていません。)
 ・圧縮レイヤーデータ(Compress layer data):ON(非圧縮データもサポートしてます。)
・タイルセットオプション(Tileset Options)
 ・画像の埋め込み(Embed images)(PNG):OFF(埋め込み画像はサポートしていません。)



メモ:新規にマップを作成する際は、マップサイズとは、マップのピクセルサイズではなく、縦と横のタイル数を指します。iPhone がサポートするマップのサイズには制限があります。(ユーザコメント:44px ×44px のタイルを 100×100 にした場合は動作しましたが、400×200は画面が真っ黒になり動作しませんでしたとさ。)


タイルセットが埋めこまれているか確かめる
マップ用のタイルセットはマップファイルに埋め込まれていなければなりません。
Tiled 内でこれはタイルセットマネージャによって操作されます(Tilesets → Tileset Manager でアクセス)。
タイルセットリスト内のタイルセット名の右のカラム内の「(Embedded)」を見てみてください。パス文字列の代わりにリスト内の行を選択し右側の埋め込みアイコン(Embed icon)を選択してください。埋め込みタイルセットに変換してくれます。

別のツールを使っているか、自分自身で確かめたい場合は、テキストまたはXMLエディタで、拡張子 .tmx のファイルを開き ノードを確認して下さい。ファイル名が指定された SOURCE プロパティが存在する場合は cocos2d-iPhone では動作しない外部のタイルセットです。


スプライトシートの作成
便利な画像詰め込みツールが幾つかあります。
mkatlas.pl コマンドラインベースのテクスチャアトラス作成ツール (cocos2dに同封されてます) (無料)
Packer ビジュアルなテクスチャアトラス作成ツール (無料)
Image Magic コマンドラインベースのユーティリティ (無料)
zwoptex ビジュアルなテクスチャアトラス作成ツール (無料と商用)
TexturePacker グラフィカルなUI + コマンドライン (無料と商用)

これらのツールは個々の画像からスプライトシートを作成します。

スプライトシートの制限
・最大サイズ:iPhone 3GS 以降 2048×2048、それ以前 1024×1024
・タイルはすべて同じサイズでなければならない

オプション:
・マージン(margin):余白内のピクセル内の空間
・スペーシング(spacing):タイル間のピクセル内の空間

マージンが2、スペーシングが2をおすすめします。

スプライトシートの変な線が出るのを修正(spritesheet artifact fixer)
マップを移動させたときに、タイルの境界に変な線が出た場合は、このツールでなおしましょう。※この線はシュミレーターでは発生せず、iPhone デバイスでのみ発生します。

「spritesheet-artifact-fixer」は cocos2d に同封されたスプライトシートを修正するためのちょっとしたツールです。

その原理は、タイルの境界をスペーシング・マージンピクセルにコピーすることです。理論上は、スペーシング・マージンピクセルは描画されませんが、実際にはごくたまに、特にアンチエイリアスされたテクスチャや 3D プロジェクションを使用している場合に描画されることがあります。

このツールの使い方:

同様に、TexturePacker の 「–extrude」機能を使用もできます。


座標(Coordinates)とGID
座標(Coordinates)
64×32 のマップのタイルで使用される座標システム(Coordinates system)は:
・(0,0):左上隅
・(63,31):右下隅



GID
タイルの GID は、そのグローバルな識別子(Global IDentifier) です。この値は、1から始まりタイルの数までの unsigned int 値です。



5個の別のタイルがあった場合は、
・Tile 0 の GID は 1
・Tile 1 の GID は 2
・Tile 2 の GID は 3
というふうになります。

GID 0 は空のタイルを表すために使われます。


TMXノードの作り方

デフォルトのすべてのタイルはエイリアスされています。アンチエイリアスタイルを作成したい場合は以下のようにします:

すべての例は:
tests/TileMapTest.m


タイルの取得・追加・削除・変更方法

座業を指定してタイル(CCSprite)を取得する方法:

座業を指定してタイルの GID を取得する方法:

座業を指定して新規のタイルの GID を設定する方法:

座業を指定してタイルを削除する方法:

レイヤーをイテレート(iterate)する


Z オーダーとデプスバッファ(depth buffer)
※v0.99.1 以降で有効な情報です
※等角図と直交座標のみで有効で、六角形マップでは無効な情報です

ゲーム内で、スプライトの Y 座標によって(直交座標マップと等角図マップの両方で同様) 、スプライトをどれかのタイルの前か後ろに配置したい場合は、2つのオプションが使用できます:
・OpenGL ES のデプスバッファ(depth buffer)を使用
・複数の TMX レイヤーと Zオーダーを使用

デプスバッファ(depth buffer)を使用
このオプションは、OpenGL ES のデプスバッファを使用します。それで、まず最初に、Zバッファ(z-buffer)と2Dプロジェクション(2D projection)を作成しなければなりません。

2つの TMX レイヤーでマップを作成することもとても重要です。
・背景用レイヤー。草原とか
・前景用レイヤー。林とか



草原レイヤーはスプライトの後ろ側になります。そのため、その頂点Z座標は可能なかぎり小さくすべきです。例えば -1000 等。林レイヤーはタイルで違った頂点Z座標をセットすべきです。上の方のタイルより下の方のタイルのZ座標を大きく設定しましょう。

この設定を行う方法は以下のとおりです:
1.タイルを開きます
2.背景レイヤーを選択します。(草原等)
3.Tiled → Layer → Layer Properties
4.cc_vertexz = -1000 を追加
5.前景レイヤーを選択します。(林等)
6.Tiled → Layer → Layer Properties
7.cc_vertexz = automatic を追加

もう一つ重要なことは、GL_ALPHA_TEST を有効にしてスプライトを描画することです。
例:


質問:cc_vertexz はどのように動きますか?
回答:cc_vertexz は 「automatic」という文字か整数値の文字を指定できます。
・値に数値(正または負)を指定した場合、その数値は指定されたレイヤー上のすべてのタイルに、指定したvertexZが適用されます。
・値に「automatic」を指定した場合は、タイルの一行目の vertexZ の値が -1、次の行が -2 といった具合になります。

唯一やらなければならないことは、Y の位置によって vertexZ を変更することです。
例:

サンプルの動作に関しては、TileMapTest.m を参照ください。

質問:cc_alpha_func は使用すべきですか?
回答:cc_alpha_func の値は cc_vertexz=automatic の時にのみ使用されます。デフォルトでの値は 0 です。この値は、GL_GREATER を設定した関数を使用してタイルを描画するために使用されます。CCTMXLayer がタイルを描画する方法は以下のとおりです:



例:

等角図での頂点 Z の例。「林」と「草原」の2つのレイヤーを持つ。「林」レイヤーは cc_vertex=automatic が設定されている。「草原」レイヤーには、cc_vertexz=-1000 が設定してある。


直角座標 での頂点 Z の例。「林」と「草原」の2つのレイヤーを持つ。「林」レイヤーは cc_vertexz=automatic と cc_alpha_func=0.5 を使用している。「草原」レイヤーには、cc_vertexz=-1000 が設定してある。


複数の TMX レイヤーと Zオーダーを使用
マップのそれぞれのレイヤーは、自動的に自分自身の Z オーダーの値を設定するため、TMX エディタ内にレイヤー属性を追加する必要はありません。TMXMap の子ノードとしてスプライトを追加することで、マップオブジェクトのレイヤー内にそのスプライトを動的に配置することができます。

動作の例はここを参照:TileMapTest.m


スクリーンショット

3D プロジェクションとアンチエイリアスタイルを使用した直交座標マップ。タイルは、spritesheet-fixer ツールで修正してある。3D プロジェクションとアンチエイリアスタイルを使用してても、変な線は現れない。


直交座標マップ。マップのタイルサイズはタイルより小さい。


2D プロジェクションとエイリアスタイルを使用した等角図マップ。


2D プロジェクションとエイリアスタイルを使用した六角形マップ。頂点は左右。上下頂点はサポートされていない。

PGU タイルマップフォーマット
PGU タイルマップも使用可能です。

このフォーマットは柔軟性がなく(サイズの制限がある)、エディターにいくつかのバグがあると思われるため、このフォーマットはおすすめしません。昔作ったゲームで使用しているのであれば使用の継続は可能ですが、その使用はおすすめしません。

代わりに TMX タイルマップの使用をおすすめします。

このフォーマットに関するいくつかの記事:
read/write in TileMapAtlas
How to use the PGU tile editor
Plugin to generate PGU maps with the Tiled editor


-----------------------------------------
長かった。この翻訳は長かった。
でも、ゲームの肝となる部分ですね。
いろんなエディタが用意されていて、かなり簡単にマップが作成できそうな予感がします。

早く実際に使ってみたいです。

スポンサード リンク

コメント

コメントの投稿

コメントの投稿

管理者にだけ表示を許可する

トラックバック

トラックバック URL
http://miyachikantaro.blog.fc2.com/tb.php/24-f3c02019
この記事にトラックバックする(FC2ブログユーザー)

Appendix

出演ゲーム

みやちかんたろうの大冒険

↑インストールはこちらから
予告編

21面デモ

ステージ作成

検索フォーム

訪問者

Apple製品紹介

Apple MacBook Air 1.6GHz 13.3インチ MB003J/A

中古価格
¥59,800から
(2013/1/24 06:45時点)

QRコード

QR

メールフォーム

名前:
メール:
件名:
本文:

Extra

プロフィール

みやちかんたろう

Author:みやちかんたろう
種別:きいろいねこ
年齢:10歳
性別:オス
趣味:昆虫採集
twitter:@gatsupport

※このサイトはリンクフリーです。ご自由にリンクしてください。相互リンクもじゃんじゃん募集中です!!

最新記事

最新コメント

最新トラックバック

月別アーカイブ