はじめてのLWF for Open Hack Day

2,715 views

Published on

はじめての方に向けたLWFの概要、導入説明スライドです。
Open Hack Day Conference 用

http://yhacks.jp/hackday/conference

はじめてのLWF for Open Hack Day

  1. 1. はじめてのLWF グリー株式会社 開発本部 CTO室 芳賀 洋行
  2. 2. 1. はじめに 2. LWF概要 3. LWF導入 アジェンダ
  3. 3. はじめに
  4. 4. • アートやデザインが良くないらしく 機能を試してすらもらえないことがあった 質問① LWF概要 LWF導入はじめに 私には 難しすぎる わ。。。
  5. 5. • 本機能はまったく変えてないのに、 アートやデザインが良くなったら 急に使われだした 質問② LWF概要 LWF導入はじめに すごい 機能!
  6. 6. • そういいながら、自分も見た目で 本機能の出来を判断しちゃうことはある 質問③ お、できとるやん LWF概要 LWF導入はじめに
  7. 7. • アートやUIのデザインもできたらいいけど、 けっきょくモチはモチ屋だと思う 質問④ LWF概要 LWF導入はじめに
  8. 8. • Flashアニメーションとまったく同じ動作をする スクリプトを書いたことがある 質問⑤ LWF概要 LWF導入はじめに 変換 まったく同じ 動作をする スクリプト
  9. 9. • 見た目による足切りを防ぎたい • 見た目でとっつきづらさを軽減したい • 見た目ですごいと思われても大丈夫なくらい 本機能は作りこんである • なにごとにもプロがいる • 「私はFLASHを再生したいだけなんだ!」 はじめに LWF概要 LWF導入はじめに
  10. 10. LWF 概要
  11. 11. 「アートやデザイン」と「エンジニアリング」 を分離できる • 2Dインターフェイス • 2Dアニメーション のオープンソース フレームワークです LWF概要 LWF概要 LWF導入はじめに
  12. 12. LWF フレームワークを使うと • HTML5アプリ • Unityアプリ 上でFLASHアニメーションを利用して • 2Dインターフェイス/2Dアニメーション を作れるようになるため、 エンジニアはそういった作業から解放されます LWF概要 LWF概要 LWF導入はじめに
  13. 13. • やらなくてよくなること • エンジニアが位置合わせ • エンジニアがTweenアニメーションを作る • エンジニアがUIアニメーションのタイミング制御 • 画像読み込みなどの車輪実装 • やること • FLASHアーティストを探す • FLASHデザイナーを探す • LWFの制限を知る • FLASHアニメーションを変換する LWF概要 LWF概要 LWF導入はじめに
  14. 14. • 会場にFLASH デザイナー/FLASHアーティスト の方はいらっしゃいませんか? まとめ LWF概要 LWF導入はじめに
  15. 15. • 前提条件: FLASHアーティスト/デザイナーがいること • 達成されること: モチはモチ屋にお願いできる LWF概要まとめ LWF概要 LWF導入はじめに
  16. 16. LWF 導入
  17. 17. • エンジニア向け • アーティスト向け • コミッター向け LWF導入 LWF概要 LWF導入はじめに
  18. 18. リソース ファイル • https://github.com/gree/lwf に含まれるもの • FLASHから、LWFに適したSWFファイルを出力するスクリプト • SWFファイルから、LWFファイルと画像を生成するコンバーター • LWFファイル、画像を再生できるHTML5用プレイヤー • LWFファイル、画像を再生できるUnity用プレイヤー LWFパッケージ (シンプルな解説) LWF概要 LWF導入はじめに コンバーター (Ruby) HTML5用 プレイヤー (JavaScript) Unity用 プレイヤー (C#) パブリッシュ用 スクリプト (JSFL) SWF PNG PNG LWF
  19. 19. プレビュー環境 “LWFS” リソース ファイル • Windows/Mac用の実戦プレビュー環境 • 導入時のつまづきを最小化(「Rubyインストールでこける」) • 制作効率を最大化 (フォルダ監視によるswfの自動コンバート) • https://github.com/gree/lwfs LWFS LWF概要 LWF導入はじめに コンバーター (Ruby) HTML5用 プレイヤー (JavaScript) パブリッシュ用 スクリプト (JSFL) SWF PNG PNG LWF
  20. 20. リソース ファイル • 実際の開発で描画パフォーマンスや制作効率を最大化するのに 必要となる機能やオプションも含まれています LWFパッケージを もっと詳しく LWF概要 LWF導入はじめに コンバーター (Ruby) HTML5用 プレイヤー (JavaScript) Unity用 プレイヤー (C#) パブリッシュ用 スクリプト (JSFL) SWF PNG js (※LWFパッケージには 含まれていません) テクスチャ アトラス生成ツール (TexturePackerなど) PNG Json PNG LWF
  21. 21. 1. lwf.jsファイルを読み込みます 2. リソースファイルを指定して LWFインスタンスを初期化します 3. 利用する 1. 再生します 2. リソースファイルに設定されているラベルに移動する 3. 事前に設定済みのイベントに呼ばれる関数を実装する エンジニア向け LWF概要 LWF導入はじめに
  22. 22. デモ LWF概要 LWF導入はじめに
  23. 23. • シェイプを使わずに キーフレームでFlashアニメーションを作成する • エンジニアから指定されたラベルを各所に追加する • ボタンクリック時には 特定のアニメーションを再生した後、 エンジニアから指定のあったイベントを発行する スクリプトを追記する • ※JavaScript書ける方:Flashファイルに動作制御のJavaScriptを記述し ます • http://github.com/gree/lwfs から LWFSを ダウンロードし、動作を確認します アーティスト向け LWF概要 LWF導入はじめに
  24. 24. デモ LWF概要 LWF導入はじめに
  25. 25. • 坂本一樹セミナーの資料を読む http://gree.github.com/lwf/presentation20121115 • http://github.com/gree/lwfをforkする • http://github.com/gree/lwfにpull requestを送る コミッター向け LWF概要 LWF導入はじめに
  26. 26. デモ LWF概要 LWF導入はじめに
  27. 27. • エンジニアの方へ 慣れると素晴らしい世界が待ってます • アーティストの方へ 慣れると素晴らしい世界が待ってます • コミッターの方へ 一緒に素晴らしい世界を作りましょう LWF導入まとめ LWF概要 LWF導入はじめに
  28. 28. • 見た目はやっぱり重要。 モチはモチ屋にお願いしよう • モチをモチ屋にお願いできる仕組みLWF • LWFを導入してモチをモチ屋にお願いしましょう まとめ
  29. 29. 一緒に働く仲間を募集しております! gree.co.jp/recruit

×