cocos2dとはちょっとズレた話かもしれませんが、CCTMXTiledMapを活かそうと思ったら使うことになるTiledというマップ作成ツールの使い方について解説します。
<初級編>Tiledの使い方講座
●基本機能
Tiledは正方形(トップビュー、サイドビュー)、平行四辺形(クォータービュー)、六角形(ヘックス)のスクロール可能なマップを作成するのに非常に便利なツールです。もともとはPythonのゲーム用に作られたこのツールですが、cocos2dのCCTMXTiledMapクラスでサポートされた形式tmx形式を出力可能なツールとなっています。というか、cocos2dの方がtmxに対応させたということになりますか。
以下のスクリーンショットを見てもらえれば、どんなマップが作れるのかよく分かると思います。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhFk31GzaS1yPgaMqTWJLTXimWKoVro1tYAdcnPv0TwoItJYHZgKy7tOh7Et2KimYEYQ2Wa_txWCd7jD3lGglstA2q1s_vh0D4Ax0mV9yPYg0VFCwWLNWWgaPh1LT8-9wOKbHL8V9QNx8/s320/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2011-12-24+23.38.14.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPUbHH_sPXtwamA074Kh1OKduW-iM2DTBoLWpcUVdeeyHGu9HTjr12Aa6xBTjpAUIj8chIpZuy3RA8CcB7IPaPSihq02vJkA9Jk-81fKHdoXxCsQW0hwttbgjsCUIvvsaom7z3948tY-E/s320/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2011-12-24+23.39.38.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKQqQXoZ2goCQS3-quxmkAnseCCTkPuvCU-oDNGgYGmR2Ch4_svtezDRRp74JRFzJrn3hgouItXSTA00nThg6e8enGEZmFCUrA4uKRpqlAp8H58RTtSpUAeIb-Fak7O4aiSkz4R2Wvo0g/s320/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2011-12-24+23.32.01.png)
一番上のマップはHungryMasterで使用したもので、トップビューとなっています。真ん中はTiledのサンプルに用意されているもので、トップビューなのですが、左上に向かって上層がつながって表示されているややパースペクティブなもの。一番下の例はクォータービューとなっております。クォータービューのタイルチップはこちらのものを使用させてもらいました。
マップはレイヤー構造を持てますので、それを利用することで、地面、建物、2階部分などをレイヤー分けして載せていくことができます。クォータービューのものを例に取りますと、地面レイヤーだけでは以下のようになります。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxpDDh1j1U7tfKI-K4PlmBcPbEdflX6lKeOvZ5MfVd0JR1KLFIFVo-bcWsvi8PPHxDff9m4gSwd_H4Z_wwyDg5MnwUpMIh0vYsm9pPIVYTaiNpnhgT9Btu4zOBH-7qxNAUItKBZWQZhJk/s320/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2011-12-24+23.32.06.png)
これに建物レイヤーを重ねることで、次のようになります。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKQqQXoZ2goCQS3-quxmkAnseCCTkPuvCU-oDNGgYGmR2Ch4_svtezDRRp74JRFzJrn3hgouItXSTA00nThg6e8enGEZmFCUrA4uKRpqlAp8H58RTtSpUAeIb-Fak7O4aiSkz4R2Wvo0g/s320/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2011-12-24+23.32.01.png)
さらに、オブジェクトレイヤーという範囲指定が行えるレイヤーを設定し、範囲指定を行うと以下のように設定が行えます。この範囲を何に使うかはゲーム部分で自由に利用すれば良いのですが、得られるの矩形の4点となります。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCWDTHfNWUgJKl_onzDWmHM4GjqX9Xswi95Qo9HdK4Jp7uDeNCsLW2XiyHMuvLX9q7tLFNTi81ptgmiDYPTaIS4dkiBH1A-3-wUhwSt_-8VcVC4Yn7q_ZKHx7rO2lI0_m1j4WxVgRqyB0/s320/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2011-12-24+23.37.12.png)
●実践してみましょう
まず「ファイル>新規ファイル」コマンドにて、どんな形状のマップを作成するか設定します。ここでは、平行四辺形の並んだクォータービューマップにしてみましょう。これって結構たいへんなんですよね。ここで指定する数値は平行四辺形の地面部分が収まるサイズのドットを指定します。使用するマップチップの画像はこれを使用してみましょう。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitLsdzHkadvBjXMSe_4qnhiOMxOKB5YqRPuEROeXN4mN0lloscCugRO_Yws2AHarzIBXuZ6yjbJfi6-OLPU5B2AYlyNSq_DphGEXCTjbhjiFlU0PxG7l_iZk2hyphenhyphenwsyZwuP882s7mDrLOw/s320/tile.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtfHjvJzr7G9bxad8gYDwGBucMlZvZKeZ5GyS33CchyE8ep4XGlRnP0h3667Ee3kdtSZomq1NCh28BY9R2hJFRcYFMNkUHftpjd8TO0kB0W-nFcO7DEEcutjHFDyREP8nqEo-mCIVCFkU/s320/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2011-12-24+23.57.38.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9vd61ly6GfEwwJVXzKfGnbKJOWkMPFdUx3ThZ1ZwdT87Mv9Jnyz7C7uWU-RkD7Jwtp9_KqCaKcPO7HcZOBoENCmx9UtC1qkydkUzl9R-4BkLw69wJ2NQYmqp9B-tBNC3OVh6A1IXmqak/s320/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2011-12-24+23.57.56.png)
こんな感じに空のマップが用意されます。さらに、使用するマップチップを登録して配置可能にしましょう。
「マップ>新しいタイルセット」コマンドを実行し、タイルセットとして登録します。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXFHgco0p1LRhx0P1ersY4Oqid7Asq1WWZ3IxlHvQu-lIwAg3lqtzMJIsw2ZNImZRmXcxKYS6_SDo9VKlac4kEr_wWG0qiw0dCD-MxCawV6nT4gviu1XNKZ7iJA3T_uRR1PF7FoH0F2Hk/s320/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2011-12-25+0.05.17.png)
この時に、指定するタイルの高さは透明部分も含めたサイズになりますので、地面部分の高さしないように注意しましょう。
正しく登録できると、こんなふうにタイルを配置可能です。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm14xzKdWzgXKbH86rDK3m5L339w286bFARsfm7uXIY0rEvRGxdZMB1CBuSt-1uMgVRv5bCxi3P4oOLD4TMonXH_0Fpl0x7RJ3Nn_JY5BCb9-Sl6dqta6oZxT0wCaZI2OmWVErc2_DgFo/s320/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2011-12-25+0.07.49.png)
次は、壁を配置しましょう。新しいレイヤーが必要になります。「レイヤー>タイル・レイヤーの追加」を実行すると、タイルレイヤーが1つ増えます。そのレイヤーをアクティブにしてタイルを配置すれば上のレイヤーに物が置けます。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYVa-6X7aq1rKuRdtpvWTb1_m7rYm8my4Ldhps6uZHhGRg7KTKh3klTEtOWeL3mrYdLuG1DKmo5tcOdOiaCvMeOeBiqKADrMmgktu1w1DSWXYSsYse3aImFMFE2h4ipELfI_ku1UEx7lw/s320/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2011-12-25+0.10.02.png)
どんどん上層レイヤーを増やしていけば、2階、3階などどんどん増築できます。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqTsQsOIv-Vlj1kqR8SUxiWhXmU7bR52EdJsDB8ZAwmF3CG8NO9ex4cXPhNQSS0KWySPzbTLBCl1N3oVVRfcTc6IJfzhyiQbEpjJtM33T2kMP0qZePRZdAkkEus6Zm1Zhg5CmLMEKFjFs/s320/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2011-12-25+0.11.44.png)
再度に範囲指定用のオブジェクトレイヤーを追加してみましょうか。
「レイヤー>オブジェクト・レイヤーの追加」を実行すると範囲指定用のレイヤーが生成されます。これをアクティブにして、「オブジェクトを追加」アイコンをアクティブにすると、範囲指定ができます。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1y-dDYR7l2JlovsAmpy20ADa085PmTI1S5_xMlpsRcjN1j4D4MfzltTABkuOceNL3O0rX42msfaikhEC5FN0MTfU-FPxhcj7wjW-rAoZSxjiXH5QFdiC70TnbC2p1ZJmp3wzZ-EecMWU/s320/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2011-12-25+0.14.26.png)
以上です。
駆け足ですが、ざっと使い方についてのみ解説してみました。
0 件のコメント:
コメントを投稿