Cocos2d-js(v3系)のチュートリアルまとめ

  • 63
    いいね
  • 3
    コメント
この記事は最終更新日から1年以上が経過しています。

まだまだドキュメントが少ないCocos2d-js(v3)
比較的長くて読めるチュートリアルをまとめてみました。(随時更新予定)

マスト:公式の実装サンプル

性質上全てのサンプルコードのソースコードが見えるのでこれは穴場です
http://cocos2d-x.org/js-tests/
chromeデベロッパーツールとかで見れば分かりますがjs-tests/src/以下には各々のjsファイルがあるのでソースコードをみてみましょう。
ChromeデベロッパーツールのSources検索では複数ファイルをまたがって検索できるのでレシピ集として使えます。
スクリーンショット 2015-02-15 18.37.30.png

Game Creator Onlineのサンプルコード(10本ほど)

中国語ですが、ブラウザでコーディングできるように開発されてるサービスGame Creator Online。
Flappy Birdとか2048とか10個くらいコードがあります。
http://h5.cocos.com/template/

公式チュートリアル

残念ながら日本語訳されてないっぽい。でもコードには日本語も英語もないし・・・(ry

セットアップ
「Setting up the Cocos2d-JS Development Environment」
http://www.cocos2d-x.org/docs/tutorial/framework/html5/parkour-game-with-javascript-v3.0/chapter1/en

Hello World
「Hello World Cocos2d-JS」
http://www.cocos2d-x.org/docs/tutorial/framework/html5/parkour-game-with-javascript-v3.0/chapter1/en

シーン・レイヤーなど、基本概念の説明と実装
「Make your First Game Scene」
http://www.cocos2d-x.org/docs/tutorial/framework/html5/parkour-game-with-javascript-v3.0/chapter3/en

主にレイヤーの話
「Design and Make Main Game Scene」
http://www.cocos2d-x.org/docs/tutorial/framework/html5/parkour-game-with-javascript-v3.0/chapter4/en

アニメーション(キャラのコマ送り)について
「Let Player Run Animations」
http://www.cocos2d-x.org/docs/tutorial/framework/html5/parkour-game-with-javascript-v3.0/chapter5/en

物理エンジン「Chipmunk」の導入法
「Add Chipmunk Physics to Our Game」
http://www.cocos2d-x.org/docs/tutorial/framework/html5/parkour-game-with-javascript-v3.0/chapter6/en

ちなみにQiitaには日本語のChipmunk導入法もありました
「cocos2d-js(cocos2d-html5) でchipmunkを使う」
http://qiita.com/iwag@github/items/237333fdd251ec597b6b

タイルマップの作成
「Explorer with TiledMap and Camera」
http://www.cocos2d-x.org/docs/tutorial/framework/html5/parkour-game-with-javascript-v3.0/chapter7/en

タイルマップを基にして横スクロールアクションを作っていく
「Add Coin and Obstacles」
http://www.cocos2d-x.org/docs/tutorial/framework/html5/parkour-game-with-javascript-v3.0/chapter8/en

UI・ボタンの配置、画面遷移関係
「Add Game Over Logic And More」
http://www.cocos2d-x.org/docs/tutorial/framework/html5/parkour-game-with-javascript-v3.0/chapter9/en

効果音・BGMの追加
「Add Audio Effect into Parkour Game」
http://www.cocos2d-x.org/docs/tutorial/framework/html5/parkour-game-with-javascript-v3.0/chapter10/en

フルソースのv3系日本語チュートリアル

これは何気に超有り難や。ちなみに、記事元のmonoproさまは小中学生にプログラミングを教えられているようです。そこでcocos2d-jsとは、エッジがきいてますね。

【Cocos2d-js Sample Code】Happy Bird2
1にリセットボタンを追加した模様
http://mono-pro.net/archives/2622

【Cocos2d-js Sample Code】Happy Bird
http://mono-pro.net/archives/2479

【Cocos2d-js Sample Code】Umiushi
http://mono-pro.net/archives/2523

Qiitaで参考にさせてもらったもの

cocos2d-jsを使ったゲーム開発
http://qiita.com/isora1988/items/0f482f43472327253b2d

cocos2d-js v2.2.x -> v3.0beta アップグレードログ
http://qiita.com/nise_nabe/items/98cf59caa6de6b1efd7a

Cocos2d-html5(v2系)の貴重な長編日本語チュートリアル

現状、2系チュートリアルが中心のサイトです。
Cocos2d-JS v3.0を試す
http://funige.hatenablog.com/entry/2014/05/02/235716

以下はv2系になってしまいますが、とっても読みやすいのでおすすめ。

はじめてのゲーム (1)
http://funige.hatenablog.com/entry/2013/11/08/210132

はじめてのゲーム (2)
http://funige.hatenablog.com/entry/2013/11/10/183142

Cocos2d−HTML5ではじめるモバイルゲーム開発の著者さんによるチュートリアルです。とっても読みやすいので、正式バージョンをKindle購入がおすすめ。
「Cocos2d-html5ではじめるモバイルゲーム開発 [Kindle版]」
http://www.amazon.co.jp/Cocos2d-html5%E3%81%A7%E3%81%AF%E3%81%98%E3%82%81%E3%82%8B%E3%83%A2%E3%83%90%E3%82%A4%E3%83%AB%E3%82%B2%E3%83%BC%E3%83%A0%E9%96%8B%E7%99%BA-%E3%83%95%E3%83%8B%E3%82%B2-ebook/dp/B00HGNIK38

小話(おいらはこう見る)

ベンチマークテストのようなものを見ても、今やJavaScriptはどんなデバイスでもガンガン動く「高性能」な言語の一員。そのとっつきやすさから、名だたるゲームエンジンとの蜜月関係を築きゲームにおいてもその地位を盤石にしつつあります。
端末を問わず常にフロントで動くJavaScriptたんは一番イカしてるのです。