Cocos2d-x(JS) ハンズオン #12Spine

Nobollel 株式会社 清水友晶

清水 友晶 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

http://line.me/S/sticker/1085672

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 の画面構成の説明モード（ SETUP, ANIMATE ）

Setup Modeイメージ描画順序ボーンスキン

Animate Mode複数アニメーションタイムラインキーフレーム

spine にふれてみるspine v3.4.02

http://tks2.net/handson/20160901/handson.zip

spine にふれてみるspine プロジェクトの作成

プロジェクトを保存するためのディレクトリを作成spine ファイルの保存

画像の配置画像は images に表示される緑 : 使用している画像赤 : 使用していない画像

spine にふれてみる画像は Slot に格納される

基本的には 1 つのスロットに 1 つの画像

画像表示順の設定表示順序にて設定を行う

上にある画像が手前に表示される

現在のすもも

spine にふれてみるBone の作成

root を選択Tools – 作成 を選択配置したい箇所に bone を作成Bone に Slot を割り当てる

現在のすもも

アニメーションの設定キーフレームの設定

緑 : キーフレームなし（値の変更なし）橙 : キーフレームなし（値の変更あり）赤 : キーフレームあり（値の変更あり）

アニメーションの設定全ての bone に対してアニメーションを設定する

Cocos2d-x 上で動かしてみる

Cocos2d-x 3.13spine v3.4.02

Cocos2d-x 上で動かすための準備

json ファイルの書き出しエクスポート

データ : JSONアトラス作成 : ON

ファイル生成skeleton.atlasskeleton.jsonskeleton.png

Cocos2d-x 上で動かすための準備

spine のフレームワークを読み込むproject.json

modules に spine を追加する

spine で作成したアニメーションの呼び出し

メッシュアタッチメントイメージにポリゴンを定義し

変形させることができる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

おわり

ありがとうございました