cocos2d-x(js) ハンズオン #12「cocos2d-xとspine」
TRANSCRIPT
清水 友晶 Nobollel 株式会社 CTO
チームビルディングスマホアプリ開発Cocos2d-x サポートTECH.C. 非常勤講師
プライベートでもCocos2d-x に関するゲーム開発講演活動執筆活動
マイブーム : Ingress チラ裏開発メモ : http://tks2.net/memo SlideShare: http://www.slideshare.net/doraemonsss Facebook: http://www.facebook.com/doraemonsss
Spinespine とは
spine のデモ
spine の画面構成の説明
spine にふれてみる 画像の配置 bone の設定 アニメーションの設定
Cocos2d-x 上で動かしてみる Cocos2d-x 上で動かすための準備 spine で作成したアニメーションの呼び出
し
spine とは2D スケルトンアニメーション作成ツール
http://esotericsoftware.com/Windows, Mac, LinuxCocos2d-x, Unity, Corona SDK, … (多数)
Essential: $69Pro: $299 (トライアル版あり)
ドキュメントhttp://esotericsoftware.com/spine-documentation/
ランタイムは GitHub で公開 Cocos2d-x にも含まれている
spine のデモspine – examples
/Spine/examplesdragongoblinspowerupspineboyspinosaurus
Cocos2d-xTestCPP
SpineTest
spine にふれてみるspine プロジェクトの作成
プロジェクトを保存するためのディレクトリを作成spine ファイルの保存
画像の配置画像は images に表示される緑 : 使用している画像赤 : 使用していない画像
Cocos2d-x 上で動かすための準備
json ファイルの書き出しエクスポート
データ : JSONアトラス作成 : ON
ファイル生成skeleton.atlasskeleton.jsonskeleton.png
メッシュアタッチメントイメージにポリゴンを定義し
変形させることができるhttp://ja.esotericsoftware.com/spine-meshes
ウェイトを設定することにより滑らかな変形が可能になるhttp://ja.esotericsoftware.com/spine-weights
Cocos2d-x におけるメッシュ
Cocos2d-x v3.13 より対応
Cocos2d-x v3.13 以前のバージョンを利用する場合は、開発元が公開しているランタイムを利用することで対応可能https://github.com/EsotericSoftware/spine-runtimes
ブラウザアプリは非対応
参考になるサイト
Cocos 公式 Wikihttp://www.cocos2d-x.org/wiki/Cocos2d-JS
Cocos2d-JS API リファレンスhttp://cocos2d-x.org/wiki/Reference
Qiita( tag: cocos2d-js )https://qiita.com