いちおくまんえん

最近はcocos2d-xでゲームアプリ「いちおくまんえん」の制作がメインです。 あとアニメも少々・・

Tiledとcocos2d-xでオートタイルを使いたい

まずオートタイルについてですが、文章で書いても伝わらないと思うので、フラッシュで動くサンプル付きで説明してくれてる以下のサイトで試して見てもらった方が早いです(・∀・)

オートタイル - さつまいものタルト


いやー、よく地形触ったりするゲームとかであるけど、便利ですよね!

これでマップ作れたら楽ですよね!

そこでTiledにも同じような機能がないか調べてみた。

どうやらドキュメントとかYoutubeの動画とか見てる限りではありそう!

しかし英語の情報しかない(;・∀・)

WebページはGoogleさんのおかげで、何となくは読めるけど動画となると、何言ってるかさっぱり分からんw

そしてだいぶ手間取ったけど確信のページを発見。

github.com

本家ドキュメントやないかΣ(゚д゚lll)ガーン

くまなく見たつもりが索引のShow more pageに隠れてた・・。

どうやら当たり判定にでも使うのかと思っていた、タイルの地形設定部分がオートタイル用の設定らしい。
いや、Tiled的にはこれはオートタイルじゃなく、ただの地形設定であって、オートタイルは別の機能として設定ファイル作ってから実行したらタイルが補完されたりする機能のことを指してるみたいだ。

まぁいいや(・∀・)

とりあえずcocos2d-xのサンプルに入ってた砂漠のやつが同じっぽかったので自分で設定して試してみる。

メインの砂漠
f:id:ichiokumanyen:20150420004008j:plain

他も同じように
f:id:ichiokumanyen:20150420004023j:plain

名前なんて付けていいか悩むよね(´・ω・`)

後はタイルの部分を地形タブに切り替えたら設定したのが出てくる。
選んだら勝手に地形ブラシになるので好きに描くと、おおーこれこれ!となる。

f:id:ichiokumanyen:20150420004045j:plain


うむ、出来た!



でもね。問題がある。

Tiledの地形設定の形式の素材が全然見つからない!!!!

いやね、これ死活問題ですよ(;´∀`)

海外ではこの形式の素材が多いんですかね?検索しても全くダメです。


あと、タイルの境界部分がタイルの中間なんですよね。
1タイルだけのやつがない。

最小単位が2×2なんです。

1タイルのオブジェクトを置こうとすると半分のっかってるとかそういう感じになる。


・・・。とりあえず素材もないし、雑な感じになってしまうのでアウト!




では、どういうものが使いたいかというと、こういうやつです。

f:id:ichiokumanyen:20150420010311p:plain f:id:ichiokumanyen:20150420010348p:plain

ドット絵世界様より

f:id:ichiokumanyen:20150420010536p:plain f:id:ichiokumanyen:20150420010626p:plain f:id:ichiokumanyen:20150420010649p:plain

ねくらマップチップのいろいろ様より


上の方がRPGツクールの古い方のオートタイルの規格で、
下の方がWolfRPGエディターのオートタイルの規格で作られたものです。

大体素材を探してるとこの辺りばかり見つかります。

RPGツクールは説明するまでもないとして、
WolfRPGエディター(ウディタと呼ばれる)はRPGツクールがかなり玄人向けになった感じのものっぽいです。
WOLF RPGエディター公式サイト 【RPG作成フリーソフト】
本家の説明によると、

高度なRPG開発が可能な、完全無料のゲーム制作ツールです。

ニコニコ大百科の説明によると、

「わあ、RPGがカンタンに作れるんだね!」と目をキラキラさせながら寄ってきたゲーム制作初心者さんの夢を片っ端から打ち砕く暗黒のツールです。(作者談)

うん、何となく分かってた(^q^)


RPGツクールですら挫折した私ですが、ウディタも試さず、いきなりゲーム作ろうとしてます\(^o^)/

完全にエターナったコースですよねw


しかし、生活がかかってるんだ!なんとかリリースまで持ってくよ!!



それでだ。


さっきあげたオートタイルの素材をそのまま配置しても、ツクールの方はそのままでも一部使えるので何とかなるけど、ウディタの方はどうしようもない・・・。

なんでこんな形になってんだろうと思って調べたら納得です。

最初にあげたものの他に
オートタイル - さつまいものタルト
反転ニンフェット |RGSS3 オートタイル タイルIDについて
オートタイルの境界を自由に描きたい
ActionScript入門Wiki - ツクール仕様のオートタイルを配置する

よく見かけるキャラチップとかタイルチップは32×32pxのものがほとんどなので、32×32px単位で管理してるのかと思ったら、16×16pxで管理されているみたい。

だから実際に1タイルと思ってたものは4タイルで、周囲のタイルに合わせて変化させてるよう。


なるほど!

理屈は分かったけど、Tiledはこれに対応していない。

一応1タイル16pxとしてタイルを読みこませれば何とかなるけど、配置がめんどくさい上に座標管理がややこしい。

とは言え、32pxでタイル読ませてしまうとテクスチャを分割して、組み立てて当て込むとかしないといけない。
どっちにしろめんどくせぇ('A`)

あ、ちなみに全パターンの32×32pxタイルを作成してくれるツールも存在してた。
AutoTileGen | Automatic Tileset Generator

ちょっとこれも検討中。




うーん。



どないしよう(´・ω・`)

16pxタイルにしてTiledちょっと触ってみたけどかなり辛い・・。

でもこれなら32×32pxのタイルで半分切ってこれと繋げたいとか、思ってたやつが出来るようになる・・。

めんどくさくはなるけど通行設定とかが、そのまま1タイルずつでいい感じに指定できそうでもあるし!


とりあえず、16pxで作ってみることにしよう。

またいい方法見つかれば対処しよう、うん。



そう言えば、試行錯誤してる内にタイルにアニメーションデータと、当たり判定データが埋め込めることがわかった。

表示メニュー内にあった
f:id:ichiokumanyen:20150420060024j:plain
f:id:ichiokumanyen:20150420060034j:plain
f:id:ichiokumanyen:20150420060042j:plain

アニメーションはTiled上でも指定したとおり再生してくれる。
タイルにもアニメーションするよって感じのフィルム的なマークが付いた。

データ構造はこんな感じ

 <tileset firstgid="1" name="at_sea" tilewidth="16" tileheight="16">
  <image source="at_sea.png" width="192" height="160"/>
  <tile id="0">
   <objectgroup draworder="index">
    <object id="0" x="4" y="4.25" width="10" height="9.75"/>
   </objectgroup>
   <animation>
    <frame tileid="0" duration="100"/>
    <frame tileid="2" duration="100"/>
    <frame tileid="4" duration="100"/>
    <frame tileid="6" duration="100"/>
    <frame tileid="8" duration="100"/>
    <frame tileid="10" duration="100"/>
   </animation>
  </tile>

データは作られるとは言え、ソースをざっと見た感じでは、この情報はcocos2d-xのパーサーでは正しく拾われません。
独自に情報拾えるようにパーサーカスタマイズして、拾った情報を元に独自にアニメーションと、当たり判定を実装する必要があります。

この辺はまた次あたりにでも書こうと思います。どうやって実装するかなー(;´∀`)