Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

899 views

Published on

近年、リッチなアニメーションを作成するためにSpineが利用されるようになってきています。このSpineではボーンアニメーションを作成できるほか、メッシュアタッチメントによる自由なアニメーションを生成することが可能です。これらのSpineの機能とCocos2d-xからの読み込み方法などについて紹介しました。

Published in: Technology
  • Be the first to comment

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

  1. 1. Cocos2d-x(JS) ハンズオン #12 Spine Nobollel株式会社 清水友晶
  2. 2. 清水 友晶  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
  3. 3. http://line.me/S/sticker/1085672
  4. 4. Spine  spineとは  spineのデモ  spineの画面構成の説明  spineにふれてみる  画像の配置  boneの設定  アニメーションの設定  Cocos2d-x上で動かしてみる  Cocos2d-x上で動かすための準備  spineで作成したアニメーションの呼び出し
  5. 5. spineとは  2Dスケルトンアニメーション作成ツール  http://esotericsoftware.com/  Windows, Mac, Linux  Cocos2d-x, Unity, Corona SDK, …(多数)  Essential: $69 Pro: $299(トライアル版あり)  ドキュメント http://esotericsoftware.com/spine-documentation/  ランタイムはGitHubで公開  Cocos2d-xにも含まれている
  6. 6. spineのデモ  spine – examples  /Spine/examples  dragon  goblins  powerup  spineboy  spinosaurus  Cocos2d-x  TestCPP  SpineTest
  7. 7. spineの画面構成の説明  モード(SETUP, ANIMATE)  Setup Mode  イメージ  描画順序  ボーン  スキン  Animate Mode  複数アニメーション  タイムライン  キーフレーム
  8. 8. spineにふれてみる spine v3.4.02 http://tks2.net/handson/20160901/handson .zip
  9. 9. spineにふれてみる  spineプロジェクトの作成  プロジェクトを保存するためのディレクトリを作成  spineファイルの保存  画像の配置  画像はimagesに表示される  緑: 使用している画像  赤: 使用していない画像
  10. 10. spineにふれてみる  画像はSlotに格納される  基本的には1つのスロットに1つの画像  画像表示順の設定  表示順序にて設定を行う  上にある画像が手前に表示される
  11. 11. 現在のすもも
  12. 12. spineにふれてみる  Boneの作成  rootを選択  Tools – 作成 を選択  配置したい箇所にboneを作成  BoneにSlotを割り当てる
  13. 13. 現在のすもも
  14. 14. アニメーションの設定  キーフレームの設定  緑: キーフレームなし(値の変更なし)  橙: キーフレームなし(値の変更あり)  赤: キーフレームあり(値の変更あり)
  15. 15. アニメーションの設定  全てのboneに対してアニメーションを設定する
  16. 16. Cocos2d-x上で動かしてみる Cocos2d-x 3.13 spine v3.4.02
  17. 17. Cocos2d-x上で動かすための準備  jsonファイルの書き出し  エクスポート  データ: JSON  アトラス作成: ON  ファイル生成  skeleton.atlas  skeleton.json  skeleton.png
  18. 18. Cocos2d-x上で動かすための準備  spineのフレームワークを読み込む  project.json  modulesにspineを追加する
  19. 19. spineで作成した アニメーションの呼び出し
  20. 20. メッシュアタッチメント  イメージにポリゴンを定義し 変形させることができる http://ja.esotericsoftware.c om/spine-meshes  ウェイトを設定することによ り滑らかな変形が可能になる http://ja.esotericsoftware.c om/spine-weights
  21. 21. Cocos2d-xにおけるメッシュ  Cocos2d-x v3.13より対応  Cocos2d-x v3.13以前のバージョンを利用する場合は、 開発元が公開しているランタイムを利用することで対 応可能 https://github.com/EsotericSoftware/spine- runtimes  ブラウザアプリは非対応
  22. 22. 作業はここまで
  23. 23. 参考になるサイト  Cocos公式Wiki http://www.cocos2d- x.org/wiki/Cocos2d-JS  Cocos2d-JS APIリファレンス http://cocos2d-x.org/wiki/Reference  Qiita (tag: cocos2d-js) https://qiita.com
  24. 24. おわり  ありがとうございました

×