Successfully reported this slideshow.

More Related Content

More from Tomoaki Shimizu

Related Books

Free with a 14 day trial from Scribd

See all

cocos2d-xとspine

  1. 1. cocos2d-xとspine 株式会社TKS2 清水友晶
  2. 2. 清水 友晶 —  株式会社TKS2 スマートフォンアプリ開発 (iOS, Android, Windows Phone 8) Webコンテンツ開発 —  cocos2d-xへの開発参加 cocos2d-xを利用したアプリ開発 講演活動 執筆活動 —  Twitter: tks2shimizu —  Blog: http://tks2.net/memo —  SlideShare: http://www.slideshare.net/doraemonsss —  Facebook: http://www.facebook.com/doraemonsss
  3. 3. 出版されました!
  4. 4. —  http://cocos2d-x.jp —  cocos2d-x開発元Chukong Technologies社公認 —  cocos2d-xのための自由なコミュニティー —  入門者から上級者まで誰でもOK!!ぜひご参加を! —  cocos2d-xに関することなら何でも投稿できます!! —  https://www.facebook.com/groups/152840204871454/
  5. 5. —  6/25 第9回 shinjuku.cocos2d-x —  6/28 第1回 cocos2d-x開発事例勉強会 —  7/11 shinjuku.cocos2d-x初心者ハンズオン     ∼WindowsでAndroidアプリ開発環境を作ろう!∼ —  7/18 第10回 shinjuku.cocos2d-x —  8/M shinjuku.cocos2d-x初心者ハンズオン     ∼MacでiOSアプリ開発環境を作ろう!∼ —  8/M 第11回 shinjuku.cocos2d-x —  9/M shinjuku.cocos2d-x初心者ハンズオン     ∼MacでAndroidアプリ開発環境を作ろう!∼
  6. 6. 目次 —  spineとは —  spineのデモ —  spineの画面構成の説明 —  spineにふれてみる —  画像の配置 —  boneの設定 —  アニメーションの設定 —  cocos2d-x上で動かしてみる —  cocos2d-x上で動かすための準備 —  spineで作成したアニメーションの呼び出し
  7. 7. spineとは —  2Dスケルトンアニメーション作成ツール —  http://esotericsoftware.com/ —  Windows, Mac, Linux —  cocos2d-x, Unity, Corona SDK, …(多数) —  $60(トライアル版あり) —  ドキュメント http://esotericsoftware.com/spine-documentation/ —  ランタイムはGitHubで公開 —  cocos2d-x用ランタイムは、cocos2d-xに含まれている
  8. 8. spineのデモ —  spine ‒ examples —  /Spine/examples —  dragon —  goblins —  powerup —  spineboy —  spinosaurus —  cocos2d-x —  TestCPP —  SpineTest
  9. 9. spineの画面構成の説明 —  モード(SETUP, ANIMATE) —  Setup Mode —  イメージ —  描画順序 —  ボーン —  スキン —  Animate Mode —  複数アニメーション —  タイムライン —  キーフレーム
  10. 10. spineにふれてみる spine v1.4.14 http://tks2.net/spine/sumomo.zip
  11. 11. spineにふれてみる —  spineプロジェクトの作成 —  プロジェクトを保存するためのディレクトリを作成 —  spineファイルの保存 —  画像の配置 —  画像はimagesに表示される —  緑: 使用している画像 —  赤: 使用していない画像
  12. 12. spineにふれてみる —  画像はSlotに格納される —  基本的には1つのSlotに1つの画像 —  画像表示順の設定 —  Draw Orderにて設定を行う —  上にある画像が手前に表示される
  13. 13. 現在のすもも
  14. 14. spineにふれてみる —  Boneの作成 —  rootを選択 —  Tools ‒ Createを選択 —  配置したい箇所にboneを作成 —  BoneにSlotを割り当てる —  Boneの連結 —  接続したいBoneを選択 —  Tools ‒ Createを選択 —  配置したい箇所にboneを作成 —  BoneにSlotを割り当てる
  15. 15. 現在のすもも
  16. 16. アニメーションの設定 —  キーフレームの設定 —  緑: キーフレームなし(値の変更なし) —  橙: キーフレームなし(値の変更あり) —  赤: キーフレームあり(値の変更あり)
  17. 17. アニメーションの設定 —  全てのboneに対してアニメーションを設定する
  18. 18. cocos2d-x上で動かしてみる cocos2d-x 2.1.4 spine v1.4.14
  19. 19. cocos2d-x上で動かすための準備 —  jsonファイルの書き出し —  Export... —  Format: JSON —  テクスチャアトラスの作成 —  TexturePacker http://www.codeandweb.com/texturepacker —  Data Format: LibGDX
  20. 20. spineで作成した アニメーションの呼び出し —  CCSkeltonAnimationクラス —  createWithFile関数 —  skelton data file: skeleton.json —  atlas file: sumomo.atlas —  setPosition関数 —  setAnimation関数 —  addAnimation関数 —  timeScale変数 —  debugBones変数 —  debugSlots変数
  21. 21. おわり —  次回は「いろいろなオブジェクトの利用」を行います。

×