Monthly Archives: 4月 2015

CocosStudioで作成したシーンが読み込まれない


なんか上手くいかない。

CocosStudioのバージョンは2.2.1Mac版です。

以下の記事を参考にやってみたのですが。

cocos2d-jsにcocos studioで作成したシーンを読み込む – アルファブレンド プログラミングチップス

なんか、

みたいなエラーが出て「ccs」定義されてないと怒られてしまう。「ccs」を「cc」にしてもダメでした。

CocosStudioから出力されるJSONファイルとシーン作成に使用した画像(下画像参考)をプロジェクトに突っ込んで呼ぶだけ、のはずが・・・

cocosstudio_maechan_20150429

Cocos2dも定期的にバージョンアップしているので、メソッド名が変わったりしてるからこの書き方ではいかないのかなあ。

もしくはJSONデータの読み込み方法?シーンを呼ぶタイミング?ファイルの書き出し方?

いろいろと予想はつくのですが、なにか参考になる記事ないものか。

調べた記事たち

Run scene generated in CocosStudio? – Stack Overflow
UPGRADE GUIDE FROM COCOS2D-HTML5 V2.2.X TO COCOS2D-JS V3.0 BETA – Cocos2d-X公式サイト

最後のサンプルできた! by maechan (Learning Cocos2d-js Game Development)


20150428_maechan_cocos2d-js_sample_09

読み進めている本のサンプルすべて終わった!

いきなり「最後」とかなってますが、ブログには載せていませんでしたが時間がある時にちまちまやってました。今回作ったゲームの仕様は前にTeccoちゃんが書いてくれたので割愛しまっす。

Cocos2d-JSの基本的な部分は今回使った本で学べたので、お次は「CocosStudio」「SpriteStudio」を弄っていこうかと思います。

この本めっさオススメっす。

Category: sample - 2015年4月28日

Sprite Studio使ってみた!Cocos Studioダメかも… @五反田モス & ドトール


Cocos Studio2 を使ってみたけど、全然使えない。。。

おそらくまだMacで整っていない感じな感じ

Cocos2dx関連サポートツールはmacに不向きなので気をつけてください

 

で、Sprite Studioも使ってみて、初見はちょっとつまづきましたが、以下の動画を見て

かなりイイ感じで使えた!!

 

やってみた

 

これをつくるのに、初見で10分かからないくらい

(ちなみにこれと同じのをCocos Studioで作ったら1時間くらいかかった。。。

 

まだ使い方がわかってないだけかもしれないが、MacではCocos Studioはダメダメなにおいがする

おとなしくSprite Studio使うか、おウチでWindows版使ってみる。

(ちょっと興味あるので、WIndows版のCocos Studioのレビューもするかも)

 

今日は五反田ドトールから〜の五反田モスで作業!

五反田モス

 

maechanが眠そうだからそろそろ帰るよ!

対処法: TypeError: cc.Point is not a constructor


これもブラウザでのデバッグでは異常なかったのに、Mac(iOS,Android)デバッグででたエラー。

今度は、そこまでハマらなかったけど、まぁつまづいたのでメモ。

 

ググったら一番上にひっかかる

Javascript: TypeError: … is not a constructor

http://stackoverflow.com/questions/15008793/javascript-typeerror-is-not-a-constructor

 

これはちょっと今回のとは違うのでスルーしよう。

 

今回は公式をちゃんと見る。

Class cc.Point

http://www.cocos2d-x.org/reference/html5-js/V3.2/symbols/cc.Point.html

 

ここにこんな一文が。。。

cc.Point is the class for point object, please do not use its constructor to create points, use cc.p() alias function instead.

 

Point オブジェクトを作るときは new cc.Point じゃなく、 cc.p を使ってくれ。

ってことだ。

 

はい、ちゃんと公式に答えがありましたね。

言われた通り、new cc.Point と記述した部分を cc.p と書き直してあげます。

 

ボクの場合はこれでうまくいきました!やったね!

もくもくCocos2d-js会 @ツタバ


今週は昨日に引き続き、今日もやってるお!

ツタバ

 

今日は、昨日の夜から悩まされてたエラーが解決して満足満足!!一本満足だったお!!

 

ってことで千本満足をどーぞ!

 

今日、改めて気づいたのは1人でもくもくやってるよりも

エラーについて話しながらやると気づけるとこが多いな〜ということだよ。

 

今日はほんとはsprite studioをやろうと思ったんだけど、案外ハマって今日はできそうにないよw

やっとエラー解決したプロジェクトを一通り完成させて今日は終わりかな〜

 

なんとなくリリースできそうなものがぼんやりと見えてきたので嬉しい。

maechanはガンガンサンプル進めてるよ!

 

追いつかれないように逃げ回るよ!!(・∀・)/

対処法: /runtime/mac/PrebuiltRuntimeJs.app/../../../src/app.js:xx:TypeError: xxxx is undefined


めっちゃ悩んだ!やっと解決。

Cocos2d-js 3.5Cocos IDEを使ってて出たエラー。

[projectフォルダ]/runtime/mac/PrebuiltRuntimeJs.app/../../../src/app.js:xx:TypeError: xxxx is undefined

 

症状としては、ブラウザのデバッグだとエラーが出ないんだけど、Androidの実機とか、Macでデバッグを走らせると、型エラーがでるみたいだった。

ここで問題だったのが、MOUSETOUCHの違いだった。

 

MOUSEだと

こんな感じに書いているとエラーがでる。

 

デバッグしてみるとevent._xとevent._yの値がNaNで返ってきてるようだ。

 

これをtouch仕様に書き換えてあげないといけない。

こんな感じ。

 

Macのデバッグだと、MOUSEかな?という思い込みでけっこうはまった。

 

似た感じで悩んでる人もいた。(事象は違うけどおんなじエラー)

How can I fix my Uncaught TypeError in my Cocos2d-js Touch event?

http://stackoverflow.com/questions/28902377/how-can-i-fix-my-uncaught-typeerror-in-my-cocos2d-js-touch-event

Cc.Rect is not a function running on IOS

http://discuss.cocos2d-x.org/t/cc-rect-is-not-a-function-running-on-ios/18233

 

とりあえずかなりハマったので二次被害が出ないためにも書き記しておく。

 

でもすげースッキリした!!うえーい!!

もくもくCocos2d-js会 @目黒茶屋


11150971_633416783459516_2040702732580831189_n

昨日もやってたよ!

今回は目黒にある「目黒茶屋」さんでもくもく。

フリーWi-fiで電源も使える素晴らしいお店。椅子もふかふかでお尻痛くならなかった。

とにかく居心地がすごくいい。店の人が普通に他のテーブルでご飯食べてる感じ、最高。

Teccoちゃん情報で、ここのお店お昼はほぼ貸切状態で使えるとか。今度行ってみよう。

活動の進捗は、TeccoちゃんはCocos Studioをいじいじ、maechanは例の本のチャプター4をちまちまやってました。

早く本終わらせたいな。よーしがんばる!

対処方法:「Syntax error on token “Invalid Character”, delete this token」というエラー


これは、久々にシンタックスエラーが出た。

一緒のエラー出ている人がたくさんいる。

Syntax error on token “Invalid Character”, delete this token – Stackoverflow

これは、ソースコード内に全角スペースが入ってたり、Windows/Mac間の文字コードが原因っぽい。

私の場合はコードの末尾に全角スペースが入っていたことが原因でした。

コピペした報いを受けた笑

Cocos Studio入門してみた


サンプルの作成も一段落したので、ついにCocos Studioをいじってみたいと思います。

 

Cocos for macのDL先

cocos2d ダウンロード

英語版のサイトにいくとある、一番右のやつ(どうも名前が固定しないね)

(下の方で書いてるけど、Cocos for macからCocos Studioを呼び出す感じ、たぶん)

 

DLして開くと、なんとも可愛い。インストーラですね。

cocos installer

ダブルクリック!

cocos installer 2

ライセンスに同意して、インスコ!!

 

Cocos for macの起動画面

cocos初期画面

う〜ん、良い意味でシンプルですな。

なぜかTutorialを押しても何も出ません。。。

 

Cocos Store

cocos store

Unity StoreみたいなStoreもあるみたい。

ぱっと見、品揃えはあんま良くなさそうだからやっぱ自分で作るんだろうね。

 

Cocos for macで新規作成!

cocos studio

Cocos for macでNew Projectってやると、自動的にCocos Studioに飛ばされるみたい。

Cocos for macが管理ソフトで、Cocos Studioが実際の作業場(な気がする)

 

とりあえず、Cocos Studioの初期画面でなんとなくすごそーなことができそうな(気がする)

 

いじってまたレポってくね〜

 

【追記: 2015/4/17】

1日くらい意味もわからずいじくりまわすか、ある程度知識ある人はこれ見れば、どうゆうものかすごいわかりやすいと思う。

Cocos Studioで待機時のアニメーションを作成

 

Cocos Studioで走る動作のアニメーション作成

 

2つめは8分くらいだけど、1つめは4分だし、感覚をつかむためには決して長くない時間だと思う。

大体、どんなことができるかわかる。(特に1回触ってみた後だと)

 

今、候補としてもいっこあがってるのが、Sprite Studio

ちなみにSprite Studioいじったことない人はこちらもこれ見ればだいたいわかる、たぶん

 

OPTPiX SpriteStudioチュートリアル

 

Sprite Studioはインディーライセンスがあって無料だけど、スプラッシュスクリーンを入れる必要があるよ。

 

う~ん迷うね~作業量が多いなら後者で、カンタンなものだったらCocos Studioでもイケる(かもしれない)

でもインディーだからオカネないからね。何でも無料でがんばる。

 

そんな僕たちにはどっちも強い味方になるはず!感謝!

最後のサンプルできたー!! by Tecco (Learning Cocos2d-js Game Development)


どうもこんばんわ。Teccoです。

最近、腰痛がひどくて、『ヘルニア 休職』とかでググっちゃってるアホです。

まぁ、そんなこんなでこちらの本のサンプルもついに最後。。。

 

最後のサンプルはなんと。。。

 

キャンディクラッシュみたいななにか!!

 

どんなふうにできているか順序だてて書いてくね。

 

1. ランダムにタイルを並べる

クラッシュ・オブ・クランみたいなもの1

ここでやっているのは

  • spriteシートに何色かの球?を用意する
  • spriteシートから数色(今回は5色)を取得する(定義する)
  • for文を2つ使って、6 × 6 にタイルをランダムに描写していく

 

これだけできればここまでできるよ。

ランダムなので起動するたびに色が変わるよ!

 

2. タッチリスナーをつける

タッチリスナーをつける

ここでは

  • タッチリスナーをつける
  • それぞれの中心から20 × 20の間をタッチ範囲とする
  • タッチされた場合、タイルのopacity(透明度)を半分にする

 

タッチ判定を厳しくしたりしたかったら中心からの距離を短く設定したりすると難易度(やりづらさ?)が上がるよ。

 

 3. 色をつなげられるようにする

色つなぎ

ここでは

  • 最初にタッチしたタイルを記憶する
  • そこからの距離が隣か斜めかの範囲で制限する
  • さらに同じ色であれば、連続してopacityを半分にする

 

ここまでくると大分ゲームっぽくなってきてテンションがあがってくる。

 

4. 戻れる(タッチをキャンセルできる)ようにする

タッチキャンセル

ゲームの仕様にもよるんだろうけど、指が離れていなければ戻れるようにする。

(将棋とか囲碁みたいだね!!)

 

ここでは一つ前のタイルを記憶していてそこがもう一回タッチされたら、今までと逆の処理をするだけ。

 

5. 繋がった色のタイルを消す

繋がった色を消す

ここでは

  • 消せる最低数は3とする(ぷよぷよなら4だね)
  • タッチを離した瞬間にタッチされた座標を探索しに行く(もう1回for文を回す)
  • そこで、合致した座標のタイルを消去する

 

これで同じ色を3つ以上繋いだら、タイルが消えるようになったよ!

 

6. 消したタイルの場所にタイルを補充する

消した場所にタイルを補充

ここでは、さっきの消したタイルの場所に、インデックス的に列 -1 のものを +1 して下にずらしているよ!

 

7. 上から落ちてきたことで、さらに空いた上の空白に補充する

タイルを上に補充

上から振ってきた分、さらにその上が空白になってしまうので、またその分を探索して、そこにランダムなタイルを補充しているよ!

 

8. なぞったタイルに線を引く

なぞったタイルに線を引く

これもゲーム性によると思うけど、タッチしたタイルに線を引いていくよ。

 

最後はそんな難しいことしてるわけじゃなく、上のほうでやった条件が通ったとき(次の色が範囲内で同じだったとき)、前のタイルの中心から、今のタイルの中心に向かって線を引く処理を加えただけだよ。

 

キャンディクラッシュっぽいのできたー!!!

(やばい!クラッシュ・オブ・クランと混同してた!w)

 

これでサンプルは終わり!

気軽にやってるけど一つひとつばらしてみたらおもしろいもんだね。

 

けっこういろんなゲーム性のものが含まれていたので、これらを組み合わせてオリジナルゲームを作っていきたいと思いま!!!

 

がんばる!

 

【追記 2015/4/18】

これに音つけて、スマホ用に書き換えたやつができた!

 

う〜ん、やっぱスマホで動くとテンション上がるね!

やる気がでてきたので!!!!…….寝ます!(26時すぎたなう)