Cocos2d-XとCocos2d-JSの3〜系をインストール

Cocos2d-JS

v3.0以降インストール方法と、それぞれの用途がかわったようなので、試してみた。v3.0以降では下記のように役割が分かれるようになったので注意が必要。 Cocos2d-X : C++とLuaの言語でネイティブアプリ Cocos2d-JS : Javascriptでネイティブ＋WebアプリCoco…

2014-06-04

Invalid Native Object

Cocos2d-JS

Invalid Native Objectで怒られる既に既出だと思いますが、 Cocos2d-JS(html5)をiOSでコンパイルしようとした場合のメモリの問題。 http://www.cocos2d-x.org/wiki/Memory_Management_of_JSBCocos2d-x (C++) のメモリ管理はretainカウント方式なので生じる…

2014-05-15

GithubPageつくる

git Cocos2d-JS

Qiitaに書いた記事についてSample欲しいとか、実行した状態を見たいとか言われたのでGithubPageで公開してみました。 GithubPage上でPerlやPHPなどのコードは動かせませんが、Cocos2d-JS(html5)はJavaScript単体で動くので githubページ上でサンプル実行ま…

2014-05-08

cc.SpriteFrame.create(image,rect)でアニメーションを記述する

Cocos2d-JS

アニメーションの作成方法として前回記載した「TexturePackerで作成した素材をCocos2d-html5で動作させる」 http://d.hatena.ne.jp/oggata/20140327/1395896104 を記載した。この方法では複数画像をspriteにしてplistを作って..という手順を踏むのがけっこ…

2014-04-30

cc.ScrollViewでスクロールできるマップを実装する

Cocos2d-JS

Canvasで書いていた頃はonTouchesMovedとonTouchesEndedを駆使して、あれやそれやとスクロールの処理を書いていたが、Cocos2d-html5ではcc.ScrollViewを使う事で簡単にスクロール処理を書く事ができた。ポイントはsetDirectionでスクロールの方向と、タ…

2014-04-24

Cocos2d-JS(Cocos2d-html5)をダウンロードして３分でTwitterクライアントを作る方法

Cocos2d-JS

Cocos2d-JS(Cocos2d-html5)をダウンロードして３分でTwitterクライアントを作成する方法を下記に記載します。やっていることは、Cocos2d-JSをダウンロードし、HelloHTML5Worldというサンプルの中身をそのまま編集し、 TwitterのAPIから受け取ったレスポン…

2014-04-17

cc.ParticleSystemの使い方

Cocos2d-JS

下記のように記述することで簡単にparticleの表現ができます。 //cc.ParticleFire / cc.ParticleFireworks / cc.ParticleFlower / cc.ParticleGalaxy //cc.ParticleMeteor / cc.ParticleRain / cc.ParticleSmoke / cc.ParticleSnow/ //cc.ParticleSpiral / c…

2014-04-17

Cocos2d-html5でデータ保存のためにXMLHttpRequestで処理を投げる

Cocos2d-JS

ゲームのデータ読み込み、データの保存を実装しています。 Javascriptの場合、直接MySQLなどのデータベースに接続してやり取りすることよりも、 APIを別途作成し、JSONを通じてやり取りすることが多いと思います。例えば、データの読み込みの場合は 1.クエリ…

2014-04-17

Cocos2d-html5で TiledMapEditorのデータをもとに当たり判定のある壁を作る

Cocos2d-JS

1.TiledMapEditorのレイヤーであたり判定用のレイヤーを作成して書き出す。ここでは「collidable」という名前で当たり判定用のレイヤーを作成し、そのレイヤーに草を配置しました。 baseレイヤーには土のマップチップが配置されています。（TiledMapEditor…

2014-04-16

Cocos2d-html5で TiledMapEditorから出力したマップを並べる

Cocos2d-JS

TiledMapEditorでマップを作成する 1.tiled map editorをダウンロード http://www.mapeditor.org/download.html 2.新規プロジェクトの作成使用するタイルセットによって設定します。 TiledMapEditorのsampleについているdesertで使用されているpngを使う場…

2014-04-10

Cocos2d-html5で作成したプロジェクトをXCodeでアプリ化する

Cocos2d-JS

1.cocos2d-xをダウンロード http://www.cocos2d-x.org/download 2.ダウンロードしてきたものを任意のディレクトリにコピー 3.コピー先のcreate_project.pyを利用して、新しいプロジェクトを作成 cd /Users/hoge/cocos2d-x/cocos2d-x-2.2.2/tools/project-cre…

2014-04-04

Cocos2d-html5の各種オブジェクトの使い方

Cocos2d-JS

Cocos2d-html5ではゲームの構成要素として下記のような階層構造をもっています。各機能ごとにSceneとLayerを作成し、その上にゲームを構成するキャラクターやUIをNodeとして重ねていく事でゲームを作成します。 Director ゲーム１つに対して１個しか存在し…

2014-04-04

Cocos2d-html5でサウンドファイルの取り扱い

Cocos2d-JS

音楽ファイルの使い方 ※音楽ファイルの再生。Fireroxはmp3だめ。IEとSafariはoggが再生不可。ブラウザによって複数フォーマットが基本らしい。 cocos2d-html5ではs_hogeで再生できない場合ほかのファイルを探して再生してくれるらしい。 var s_hoge = "res/…

2014-03-31

RepeatForever と stopAllActions でアニメーションを切り替える

Cocos2d-JS

たとえば上下左右に歩くキャラクターのspriteを用いたアニメーションでプレイヤーの進行方向によってアニメーションを切り替えたい場合は RepoeatForeverとstopAllActionを用いると実現できる。RepeatForeverは回数の指定なく永遠にアニメーションを再生す…

2014-03-27

TexturePackerで作成した素材をCocos2d-html5で動作させる

Cocos2d-JS

1)素材の配置 Sample/res/にtexturePackerで作成した素材を配置する Sample/res/battle_sprite.plist Sample/res/battle_sprite.png みたいな感じ 2)リソースの記載 Sample/src/resource.jsに追記する var s_battle = "res/img/battle.png"; var s_battlepli…

2014-03-27

TexturePackerの使い方

Cocos2d-JS

1)ダウンロード http://www.codeandweb.com/texturepackerからDLする 2)設定。 Ouput->DataFormatをcocos2dに設定 Ouput->Texture formatは PNG Ouput->Imageformatは RGBA8888 Geomatry->Maxsize W:2048 H:2048 3)分割された画像を追加する今回は battle1.…

2014-03-27

Cocos2d-html5とは

Cocos2d-JS

フレームワークの選定最近、社内で使用するゲームフレームワークをいろいろと試していました。そのなかでCocos2d-html5を使ってみる事にしました。選定に至った具体的な理由は別の記事で記載しています。 http://oggata.tumblr.com/post/83083036007/cocos…

2014-03-27

Cocos2d-html5のDLからサンプルの作成

Cocos2d-JS

Cocos2d-html5を使って3分でTwitterClientを作成する方法ではインストール〜Twitterクライアントを作成する流れを記載しています。 1)ダウンロード http://www.cocos2d-x.org/download からダウンロードする 2)配置ファイルをcocos2d-html5とリネームして …