いちおくまんえん

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

ことりちゅん(・8・)を3人ゲットした。あと今だけ映画が1本無料で見れるよ!

  • 今回のことりちゅんイベは最初の方は結構、頑張ったので途中3000位切るくらいまでランキング上がってました。

f:id:ichiokumanyen:20150502000943j:plain

1万位以内とか自分には無縁の世界かと思ってたけど、意外といけるもんですね(;・∀・)

LPが110程度だったので1時間おきに、ラブカストーンで回復して2回3連シャンシャンしてを繰り返し。

そしてイベントポイント報酬全部取り切ってしまったことに気づく∑(゚Д゚)

f:id:ichiokumanyen:20150502001508j:plain

そう言えば8万までしか報酬ないんだった!5万位以内に入るのが目標だったわけだし、さすがに後は自然回復だけで何とかなるだろうとまったりプレイに切り替え。

そしてイベント終了日の朝。

f:id:ichiokumanyen:20150502002422j:plain

1万位をちょっと超えてるだけ・・・だと・・!

もうちょいで勧誘チケと、ことりちゅんが更に手に入る・・。石5個くらい使えばなんとか取れる気がするし取りに行くか!と5個使ってシャンシャンしてみたけど、ちょっと不安だったので6個目投入してギリギリ大丈夫かなーと。

メンテ開けてランキング確認してみたらギリギリでしたε-(´∀`*)ホッ

f:id:ichiokumanyen:20150502003232j:plain

最後の石1個ケチってたら見事に泣きを見ることになってましたw

f:id:ichiokumanyen:20150502003327j:plain

早速ことりちゅんを覚醒させてレベルマックスに( ・`д・´)

f:id:ichiokumanyen:20150502003453j:plain


はよサブシナリオ見たい(;´Д`)


さすがに疲れたー。トップランカーの人たちは一体なんなんだろう。
この労力の20倍・・・。起きてる時間ずっとシャンシャンしてないかw

でも自分もネトゲ廃人してた時のこと考えると、たかが2週間くらいゲーム漬けなんて大したことないよね(^q^)むしろ微笑ましいくらいだよね


そんな時期があったなー。ネトゲ恐ろしい!


今月の追加楽曲はスピカテリブルでした!最高ですね!

f:id:ichiokumanyen:20150502010335j:plain






あ、そう言えば友達から映画タダで見れるよって教えてもらえたので共有!

【急げ!】グーグルプレイで”映画1本無料”キャンペーン中!手順を紹介

アカウント毎に1本見れるので複数持ってる人は結構見れると思います!

まどマギ見たかったけどなかった(´・ω・`)とりあえずけいおんレンタルしといた。

来週母の日で実家帰る予定なので、その時にでも見ようっと。
そういえば世間ではゴールデンウィークなんですね。

自営業は毎日が仕事であり、休みみたいなものだから、複雑な気分です。
たぶんいつも通り休みながら仕事してますw

1枚の画像をトリムしながらフレームアニメーションさせる。はてなブログでjQueryを使って表示。 

キャラ設定と、イメージ伝えるのにキャラジェネレーターでそれっぽいのを作ろうと思って、今丁度欲しいマップ上で表示させるミニキャラのものを触ってました。

ちびキャラツクール / ファミ通.com 無料ゲーム
Loose Leafキャラクター素材合成シミュレータ

いやー、マップチップは自由に使えることが多いんですが、キャラチップは大体、RPGツクールで配布されてるものをベースに作ってます。
なのでRPGツクールでしか使用不可です。っていうものがほとんどなんですよね(´・ω・`)


一応、完全オリジナルのキャラチップもありはするんですが、本当にゲーム!って感じのいかにもなものがほとんど。
私が今作りたいものは学園日常ものなので学生服とかセーラー服とかそういうので薄めのキャラが欲しいんです。

友人絵師のあめちぇるさんに、メインキャラのドット絵もおなしゃす!と無茶ぶりしてるので、きっと何とかなるはず!
学園ものなので、大体他のモブもボディは同じになるはずで。
モブなんてクオリティどうでもいいやっ!のっぺらぼうでもいいくらいだぜ!ってノリです。
だったら、いっその事全部お願いしよう(^q^)

キャラジェネレーターのこと伝えて、同じような感じのレイヤー分けしてもらっておけば、キャラジェネレーターも自作できる!
ゆくゆくはゲーム内で主人公のキャラメイキングとかにも使える気がする!と+(0゚・∀・) + ワクテカ +

そういや、大体の配布サイトでキャラチップってそのままpngベターって感じで、動いた時の感じがつかめないんですよね。サンプルでいくつかアニメgif載せてくれる人もいたりしますが。

別にアニメgif作らなくてもcssとjsで範囲絞って映す位置ずらせばいいだけでは?と作ってみた。
うん、これでアニメーション確認したりとかすぐ出来る( ・`д・´)

・・・。

どうせ作ったんだから動く形でブログに載せたい・・・。
スタイルはいけるだろうけど、jQueryいけんねやろうか・・・。
生のJavaScriptはあんま分からんからなぁ・・・。

調べたところ出来ることが分かった!!


へー、はてなブログってjQuery使えんねや(;・∀・)知らんかった!


blog-box.hateblo.jp

見つけたサイトで、「あっ、これいいよね」と思ったのでそのまま練習がてらパクるw


ォオー!!(゚д゚屮)屮できた。




じゃあ、ほんとにやりたかったことをやるよ!


前置きが長いっ( ゚д゚ )クワッ!!


ものすごいステキな絵でよく無料ランキング上位のアプリとかでもよく見かける
キャラクターチップ素材|RPGツクール素材支部|臼井の会様の素材を拝借

アニメーションgif使ってないよ!ほんとだよ(;・∀・)

真ん中下段の子すごく好き(^q^)死んでるのピクピクするのかと思ってたけど違うかったw

左上はイカちゃんじゃないでゲソ。気のせいでゲソ。

いやードット絵アニメーションっていいですよね!
早く自分の作ったキャラを動かしてあげたい。ちゃんと設定作ろう!


一応中身

html

<div class="chara_tip_frame">
    <!-- dataはオプション -->
    <img class="chara_tip_trim" data-line="1" data-frame_sequence="[1,2,3]" src="http://rawgithub.com/yasuhiro-matsuda/WebSample/master/image/$Actor64_b_3.png">
</div>

js

$(function() {
    // 設定値
    var width = 32;
    var height = 32;
    var default_frame_sequence = [1,2,3,2];
    var default_line = 1;
    var frame_interval = 200;
    var frame = 0;
    // 次のフレームに切り替える
    function nextFrame() {
        frame++;
        $('.chara_tip_trim').each(function() {
            var line = $(this).data("line") || default_line;
            var frame_sequence = $(this).data("frame_sequence") || default_frame_sequence;
            var now_frame = frame_sequence[frame % frame_sequence.length];
            var top = height * (line - 1);
            var left = width * (now_frame - 1);
            var right = left + width;
            var bottom = top + height;
            $(this).css({
                'top' : - top  + 'px',
                'left': - left + 'px',
                'clip':'rect('+
                    top + 'px,' +
                    right + 'px,' +
                    bottom + 'px,' +
                    left + 'px' +
                ')'
            });
        });
    }
    // 無駄に走らないように
    if ($('.chara_tip_trim').length) {
        var frame_interval = setInterval(function() {
            nextFrame();
        }, frame_interval);
    }
});

css

.chara_tip_frame {
    position: relative;
    width: 32px;
    height: 32px;
}
.chara_tip_frame .chara_tip_trim {
    position: absolute;
    clip: rect(0px, 32px, 32px, 0px);
}

一応全体のもの

github.com

この時、配列で渡したかったデータが配列になってなかったので修正してます(´・ω・`)


久しぶりにWeb系のコード書いた。新鮮w

以下でちょっと賢くなった

いい加減、&lt;script src=&quot;http://.. と書くのはやめましょう - DQNEO起業日記
TEST CORDING » GithubからJavaScriptを読み込み時は専用のドメインから!


あとはてなブログのデザインCSSがよく分からない。

/*
この書き方できない
<link rel="stylesheet" href="css/scroll_top.css">
*/
/*
これも設定画面は適用されるけどメイン画面で読み込まれない
@import "http://rawgithub.com/yasuhiro-matsuda/WebSample/master/css/chara_tip_animation.css";
@import "http://rawgithub.com/yasuhiro-matsuda/WebSample/master/css/scroll_top.css";
*/

普通にスタイルはかけたけど外部ファイルうまく読み込めなかった。
なのでヘッダーとかから、外部ファイル読み込みました(´・ω・`)ちゃんちゃん

<!-- ヘッダー -->
<link rel="stylesheet" href="http://rawgithub.com/yasuhiro-matsuda/WebSample/master/css/chara_tip_animation.css">
<link rel="stylesheet" href="http://rawgithub.com/yasuhiro-matsuda/WebSample/master/css/scroll_top.css">
<!-- フッター -->
<a class="scroll_top" href="#">
  <img src="http://rawgithub.com/yasuhiro-matsuda/WebSample/master/image/icon_up_arrow.png" alt="topへ戻る" />
</a>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://rawgithub.com/yasuhiro-matsuda/WebSample/master/js/chara_tip_animation.js"></script>
<script src="http://rawgithub.com/yasuhiro-matsuda/WebSample/master/js/scroll_top.js"></script>

関西ソーシャルゲーム勉強会でLTします。

ksgs.doorkeeper.jp

2015-05-16(土)14:00 - 17:00
関西ソーシャルゲーム勉強会・2015夏にてLT枠で参加させてもらいます!

タイトルは「cocos2d-x&CocosCodeIDE&luaで個人開発始めました」です。

まだ全然ゲーム出来てないけど「始めました」だし5分位なら自己紹介とちょっと話すくらいになるだけだし大丈夫でしょ(´・ω・`)

こういう大勢の人を前にプレゼンすることとかいい経験だし、しっかり宣伝しとかないとね!
LTに参加しておくと今後メインの講演にも参加させて貰える可能性もあるしね( ・`д・´)


それに今回はLT枠に事前に申し込んでおくとビアバッシュ懇親会の参加費1500円が無料になるとのこと!
一般参加はキャンセル待ち状態なので、なんとでも参加したい!という方はLT枠から申し込むと、今月中なら確実に参加できるはずです(・∀・)



たぶんこの関西ソーシャルゲーム勉強会、2013年2月の第三回くらいから皆勤賞な気がするw

ちょっとでもいいLTが出来るように頑張らないとー(`・ω・´)

ことりちゅん(・8・)をゲットした。あと今やってるゲームとか

f:id:ichiokumanyen:20150422122554j:plain

ことりちゅん(・8・)のイベントきましたね。

覚醒後可愛いので絶対に2枚取りに行く!

そして早速1枚目ゲット!

f:id:ichiokumanyen:20150422122726j:plain


まだ途中だけど、初めて1万位以内に食い込めた( ・`д・´)

f:id:ichiokumanyen:20150422123021j:plain


ふふふ、無職な俺には2枚取りなんて朝飯前。3枚取りすら狙えるんだぜ!



・・・。


(´;ω;`)ブワッ



さすがにラストスパートについてけないと思うし、2枚取りで十分なので12万ポイントくらい目指して頑張ります。
12万で大丈夫かな・・。

一応時間は作れるので5万位に入れるように様子見てあわせていきます。




周期的に考えると、推しメンの、にこにー、かよちんのイベントがまた連続しそうでまた辛いことになりそうだ。

そういえばスクフェスはリリース日から、間にちょっとだけ休憩してた時期があったけどずっと続いてる。

手持ちはこんな感じ。間違えて突っ込んだ100円以外は無課金です(;・∀・)

f:id:ichiokumanyen:20150422124219j:plainf:id:ichiokumanyen:20150422124227j:plainf:id:ichiokumanyen:20150422124233j:plain

気づいたら全タイプSR以上でページが埋まるようになってました。
10連ガチャを40回近くは回してるはずだけどガチャ産URは2枚です(´;ω;`)ブワッ

でもことりちゃん引けたから良しとする!


スクフェスはこんな感じで。

あとはクラッシュ・オブ・クラン。完全に放置しててたまに回収するだけになってます。

f:id:ichiokumanyen:20150422125110j:plainf:id:ichiokumanyen:20150422125119j:plain


あとは、ちょっと前に始めた、城とドラゴン。

f:id:ichiokumanyen:20150422125258j:plainf:id:ichiokumanyen:20150422125303j:plain

基本はこれも放置しつつなんだけど、クラクラみたいにシールド張れないのと、戦闘用資源の溜まりが早すぎて、対戦しないと無駄になるっていうのがあって、結構時間潰されます。
5時間毎に戦闘して、やたら高いアップグレードのものを狙ってる時だけ、頑張るとかそういう感じです。
でもだいぶ成長してしまって、今後のアップグレードに必要なものが、リーグ戦とかで手に入る別のアイテムが必要になってきたので、さすがにこれ以上時間かけるのは辛いと引退を決意。


今後しばらくは、アプリの開発に時間を多めにあてたいので、ちょっとずつ時間を工面していこうかなと(´・ω・`)


ちなみに今期のアニメは見ようとしてるものの内、まだ半分も見れてません。
アニメの話も全然書いてなかったから書きたいんだよねー。
こっちは、また近いうちに書くとします。

ゲームのプレイ時間は大幅に削れても、アニメだけは生命線なので削れても半分くらいですね!

Tiledとcocos2d-xでマップを作る 表示順をいい感じにする

えー、大変苦戦しております(;´∀`)


当たり判定とかその辺はあちこち見てまわてったらある程度分かったので後回し中

このチュートリアルみたいにやればたぶん出来るよねーwww.raywenderlich.com


それで、今何をやってるかというと、表示の優先度決めをどうするかをごにゃごにゃやってます。


あれです。文章で説明出来る気がしない・・・。

f:id:ichiokumanyen:20150421232419j:plain

こう、今いる場所によってどっちが上に表示されるかを決めたいんです。

最初は机全部、椅子全部、とかでレイヤー分けてやってたんですが、
机と椅子の間、椅子と机の間にプレイヤー表示させる時に、全部まとめて表示順を切り替えるとおかしくなる事に気づいたΣ(゚д゚lll)

基本的に下にある方が表示優先度高い。同じタイル上に乗ってる時の表示順がタイルによって異なる。

これをどうにかする為には同じレイヤーに全部載せておいて、LocalZOderを適宜変えていくか、GlobalZOrderで管理するしかない。・・はず。


ただでさえタイル周りややこしいのに自分でGlobalZOrderをいい感じに制御出来る自信は全くない!


なので、LocalZOderで何とかする。



あれ( ゚д゚)そういやTestCppのTileMapになんかいい感じに表示順が変わるやつあったような!


あった。なんか2種類あるZorderのものとVertexZとかいうもの。

これでサクッと出来ちゃうんじゃね(・∀・)

しかし、甘かった。


Zorderのものは1ラインごとにレイヤー用意して、そのラインのY座標を超えてるかでプレイヤーレイヤーのZorderを切り替える方法。

VertexZの方はTiledのレイヤーにcc_vertexzというカスタムプロパティを用意して、移動せんでいいやつは適当なマイナス値(恐らくマップサイズのx * yした値以上?)をあてて、自動で変化してほしい方はautomaticを指定するという方法っぽい。

試してみた。


何か3D的な動きして気持ち悪い。
いや、意図してうまく作ればいい感じになるのかもしれない!

だが私の作りたいものは普通の二次元のものだ!

タイルマップのチラツキとかどうにかするのに何かDirectorで何とかTestを無効にしたらいいとかあった気がするので調べて既に適用済み。

cc.Director:getInstance():setDepthTest(false)

そしてついでにこちらのスライドにもあったprojectionの設定も適用してみる

www.slideshare.net

cc.Director:getInstance():setProjection(cc.DIRECTOR_PROJECTION2_D)

これで綺麗に二次元で表示されるようにはなったけどやはり、Z軸ポジションからの表示優先がうまく効かない(´・ω・`)

上の内容を一部だけ適用したり、いろいろ組み合わせ変えてやってみたけどダメだ・・。

ほんとに元からTMXLayerに存在してたタイルを動かすんじゃなく、後から関係ないSprite足して適用出来るんだろうか。


うーん。


CCFastTMXLayerの中身を見てみよう。

なるほど、分からん(^q^)

ついでにCCTMXLayerと何が違うのか見てみたら、draw周りの作りが根本的に違う様子。
普通の方はSpriteBatchNodeを継承してて、Fastの方はNodeを継承。
Fastの方は色々バッファを持っていて無駄な処理を極力排除してそうな感じ。
あと後からaddChildが普通に出来る点が優秀。

普通の方もaddChildくらい出来るだろうと思っていたら機能しないようにされててAssertで殺される('A`)

OpenGLとかなんのこっちゃな私にはどっちも肝心の描画周りで何しているのかさっぱりである!


とりあえず早い方を使いたいし、3次元とか興味ないのでZ軸とか使わない、LocalZorderいじくる方法でいく!

これなら何とかなる!と思ったけどそう簡単にはいかなかった。

やはり同じテクスチャじゃない画像を間に挟むとうまくいかないのかなー。
サンプル通りにタイルを取得して動かす方法はもちろんうまくいく。


・・・ん?

なんかgetTileAtで取得したタイルだけ何かZorder合ってなくね?(;・∀・)
一番上にきてるような・・・。

うん、一番上に乗っかっている。

もしかして?と、このタイルにプレイヤーのSprite重ねてみる。

あれ?うまくいく(;・∀・)


なんでか分からないけど正しいorderで表示されるようになった。

なら!!と全部触ってみる。

for x=0, 49, 1 do
    for y=0, 49, 1 do
        local tile = autoOrderlayer:getTileAt( cc.p(x,y) )
        if tile then
            print(string.format("tile exists. x: %d, y: %d, tag: %d", x, y, tile:getTag()))
            print(string.format("localZ: %d", tile:getLocalZOrder()))
            -- 特殊設定したいタイルのorderをいじくってみるテスト
            -- プレイヤーと同じタイル上にいる時は1段分オーダーを増やしてる
            if y == 11 or y==17 or (y == 13 and x ~= 12) then
                tile:setLocalZOrder(tile:getLocalZOrder() + 50)
            end
        end
    end
end

うん、luaの制御構文まじ分かんない(^q^)

新しいSpriteとして用意されて性能がた落ちになるのではと懸念があったけど、
見た感じGL callの数とかに変化な・・・。あれ?減ってる。良くなってる?(;・∀・)

なら結果オーライということで!

一応こんな感じです。


あ、Windowsのキャプチャソフトいいのあったら教えて下さい(o・ω・o)

今回は何も検討せず検索して一番上に出てきた、BandicamとかいうGOMPlayerと同じとこ?のソフト使いました。

普通に音も取れるし、マウスの動きとクリックイベントも分かりやすく表示出来るので、何となく使う分にはいい感じです。

やっぱり動画は分かりやすくていいですね。積極的につかってこー。



一応プレイヤーの方の表示順切り替えてる部分のソース

local function onTouchMoved(touch, event)
    local diff = touch:getDelta()
    local node = layer:getChildByTag(kTagMoveChara)
    local currentPosX, currentPosY= node:getPosition()
    print(string.format("x: %d, y: %d ", currentPosX, currentPosY))
    node:setPosition(cc.p(currentPosX + diff.x/2, currentPosY + diff.y/2))
    local p = CC_POINT_POINTS_TO_PIXELS(cc.p(node:getPosition()))
    local newZ = (16*50-p.y)/16*50+p.x/16+50
    print(string.format("newZ: %d", newZ))
    node:setLocalZOrder( newZ )
end

テスト用なのであれなコードですが!
テスト用じゃなくてもきっとあれなコード書いてますが( ゚д゚ )クワッ!!

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のパーサーでは正しく拾われません。
独自に情報拾えるようにパーサーカスタマイズして、拾った情報を元に独自にアニメーションと、当たり判定を実装する必要があります。

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

cocos2d-xでタイルマップを使う。いろいろ苦戦中('A`)

Luaでタイルマップを表示するのは簡単です。

function MainScene:onCreate()
    -- マップ作る cc.のものより早いらしいのでこっち使う
    local map = ccexp.TMXTiledMap:create("tilemap/school01.tmx")
    self:addChild(map)
end

終わりw

今まではこっち使ってましたが、
cocos2d::TMXTiledMap

これからはこっちを使うらしいです。
cocos2d::experimental::TMXTiledMap

ファイル名がCCTMXTiledMap.hから、CCFastTMXTiledMap.hに変わってるので間違いない!

いや、もしかしたら普段使わなさそうな余計な機能落としてますよーとかかも知れないですが!

ちゃんと差分見ておこ(´・ω・`)


とりあえず、実際には色々確認したいのでもっと色々書いてますが肝心な部分はあれだけでOKです。


ただ、Tiledとかで作ったtmxファイルを表示するのは出来るわけですが、表示して終わるだけじゃないのがゲームです。色々しないといけません。


そもそもこういうマップ系のゲームなんて作ったこともなかったし、作れる気もしなかったのでスルーしてましたが、やっぱりRPG的なもの作りたいですよね(・∀・)

なので、頑張って作ってみようと思います( ・`д・´)

一応、Tiledはcocos2d-x対応してるよということでなんですが、一体どこまで出来るのかが全く分かりません。
Tiled触ったことないので、そもそも何が出来るのかも分からないし、設定した項目をcocos2d-xが全部対応してるとかも不明(´・ω・`)


よく分からないけど、とりあえず作ってみてちょっとずつ理解していこう。

適当に素材拾ってきて配置してみる。

f:id:ichiokumanyen:20150419001720j:plain

うん、杏ちゃん超かわいい!

タイルマップを置くツールだけどなぜかレイヤーを追加しようとしたら「画像レイヤーを追加する」が選択出来たので、ォオー!!(゚д゚屮)屮と思って使ってみた。

あと、オブジェクトレイヤーも存在してて好きな形のオブジェクトを作って置けた。

何かこれ使って通行不可能範囲とか、プレイヤーとかコイン置く位置決めたりしてるとか、どっかの記事か本かで読んだ気がする!

よし、実行してみよう

f:id:ichiokumanyen:20150419004306j:plain


なんでや!!( ゚д゚ )クワッ!!


ちょっと最初から盛りすぎたな!とかなり削って原因を探る。

f:id:ichiokumanyen:20150419005644j:plain:w160 f:id:ichiokumanyen:20150419005658j:plain:w160 f:id:ichiokumanyen:20150419005707j:plain:w160


どうやら、同じレイヤーに違うタイルセットのものを混在させると、どっちかの画像が狂う。

たぶん、1レイヤーに対して1タイルセット。んで、GIDの一番若いので使ったタイルセットが使用される。

たぶん!

あと、最後(右端にある)のタイルセットの一部が表示されなくなることがある。
なので最後にダミーのタイルセット足しておくと安定した(;・∀・)


一応これでタイルマップの部分はちゃんと表示出来た。


画像とオブジェクトの部分はよく分からないので、ソース確認しつつ、cppにブレークポイント貼って中身見てみる。
WindowsC++デバッグできるのありがたいですね!VisualStudioCommunityさまさまです。

どうやら値は渡ってきてる。
MapInfoの_objectGroups._data[0]._objects[作ったobjの数分]._field.mapVal[プロパティの数分].firstが
基本はname, type, x, y, width, height, gidがあって、ベクターで用意したものは、pointsに格納されてる。
後は自分でカスタムで用意したものも取得できてた。
pointsは、second._field.vectorVal[打ったポイント数分]._field.mapVal[0].secondがx座標、1がy座標。
f:id:ichiokumanyen:20150419054310j:plain

cocos2d::Valueの取り方は全然記憶してないので適当に書いてます(;・∀・)

というわけで、オブジェクトレイヤーで作ったものに対してはちゃんとアクセス出来そう。

画像レイヤーは多分対応してないっぽい。(よく調べないでモノを言う)
// TODO こっちもまた暇を見つけてちゃんと調べる


あとTiledでは、タイルセットにもカスタムプロパティがセット出来て、地形の情報も持たせられる。1タイル毎にもカスタムプロパティが持てるみたい。
地形情報は1タイルを4分割してそれぞれに指定出来る。

f:id:ichiokumanyen:20150419054616j:plain

たぶん当たり判定に使用するのではないかと想像( ・`д・´)

これらのプロパティはcocos2d-xで有効活用されてるんだろうか。調べてみる。

色々試してみたけど一部はmapInfo._tilePropetiesに格納されるけど全然思ったとおりにならない。
何かmapInfo._tilePropetiesに各タイルセットの情報と、各タイルの情報がカオスな感じに突っ込まれてる。
地形情報は受け取ろうと箱は出来てるけど値が渡ってない。
ちゃんとパース周りのソース追わんと分かんないねこれ('A`)

とりあえず何が保存されてるのか、モデル周りのメンバ洗っとく。

TMXTilesetInfo メンバ抜き出し

class CC_DLL TMXTilesetInfo : public Ref
{
    std::string     _name;
    int             _firstGid;
    Size            _tileSize;
    int             _spacing;
    int             _margin;
    //! filename containing the tiles (should be spritesheet / texture atlas)
    std::string     _sourceImage;
    //! size in pixels of the image
    Size            _imageSize;
};

TMXMapInfo メンバ抜き出し

class CC_DLL TMXMapInfo : public Ref, public SAXDelegator
{    
    /// map orientation
    int    _orientation;
    /// map width & height
    Size _mapSize;
    /// tiles width & height
    Size _tileSize;
    /// Layers
    Vector<TMXLayerInfo*> _layers;
    /// tilesets
    Vector<TMXTilesetInfo*> _tilesets;
    /// ObjectGroups
    Vector<TMXObjectGroup*> _objectGroups;
    /// parent element
    int _parentElement;
    /// parent GID
    int _parentGID;
    /// layer attribs
    int _layerAttribs;
    /// is storing characters?
    bool _storingCharacters;
    /// properties
    ValueMap _properties;
    //! xml format tile index
    int _xmlTileIndex;
    
    //! tmx filename
    std::string _TMXFileName;
    // tmx resource path
    std::string _resources;
    //! current string
    std::string _currentString;
    //! tile properties
    ValueMapIntKey _tileProperties;
    int _currentFirstGID;
    bool _recordFirstGID;
};

TMXLayerInfo メンバ抜き出し

class CC_DLL TMXLayerInfo : public Ref
{
    ValueMap            _properties;
    std::string         _name;
    Size                _layerSize;
    uint32_t            *_tiles;
    bool                _visible;
    unsigned char       _opacity;
    bool                _ownTiles;
    Vec2               _offset;
};

タイルセットのモデルに欲しい情報が全然残ってないことは分かった。
せめてカスタムプロパティくらいは持ってて欲しかった・・。


とまぁ、これとは別にオートタイルとかでも困ってます(´・ω・`)

分かってはいたけど、ちゃんとマップチップ使っていい感じに動かすのは大変そうです。
何となくで動かす分には無理やりな対応で出来そうだけど、結構こだわりたい部分なので頑張って理解します!

明日はパース周りちゃんと調べるのと、オートタイルの記事でも書きます。
会社行かなくなってから、完全に生活のサイクルが狂いまくってます。
まぁ誰かに迷惑かけるわけでもないのでいいんですけどね(^q^)