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」

1,643 views

Published on

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

Published in: Technology
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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. おわり  ありがとうございました

×