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とspine

26,793 views

Published on

cocos2d-xとspine

Published in: Technology
  • Be the first to comment

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.14http://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.4spine v1.4.14
  19. 19. cocos2d-x上で動かすための準備—  jsonファイルの書き出し—  Export...—  Format: JSON—  テクスチャアトラスの作成—  TexturePackerhttp://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. おわり—  次回は「いろいろなオブジェクトの利用」を行います。

×