はじめての方に向けたLWFの概要、導入説明スライドです。 Open Hack Day Conference 用 http://yhacks.jp/hackday/conference

1. はじめてのLWF
グリー株式会社
開発本部 CTO室
芳賀 洋行

2. 1. はじめに
2. LWF概要
3. LWF導入
アジェンダ

3. はじめに

4. • アートやデザインが良くないらしく
機能を試してすらもらえないことがあった
質問① LWF概要 LWF導入はじめに
私には
難しすぎる
わ。。。

5. • 本機能はまったく変えてないのに、
アートやデザインが良くなったら
急に使われだした
質問② LWF概要 LWF導入はじめに
すごい
機能！

6. • そういいながら、自分も見た目で
本機能の出来を判断しちゃうことはある
質問③
お、できとるやん
LWF概要 LWF導入はじめに

7. • アートやUIのデザインもできたらいいけど、
けっきょくモチはモチ屋だと思う
質問④ LWF概要 LWF導入はじめに

8. • Flashアニメーションとまったく同じ動作をする
スクリプトを書いたことがある
質問⑤ LWF概要 LWF導入はじめに
変換
まったく同じ
動作をする
スクリプト

9. • 見た目による足切りを防ぎたい
• 見た目でとっつきづらさを軽減したい
• 見た目ですごいと思われても大丈夫なくらい
本機能は作りこんである
• なにごとにもプロがいる
• 「私はFLASHを再生したいだけなんだ！」
はじめに LWF概要 LWF導入はじめに

10. LWF 概要

11. 「アートやデザイン」と「エンジニアリング」
を分離できる
• 2Dインターフェイス
• 2Dアニメーション
のオープンソース フレームワークです
LWF概要 LWF概要 LWF導入はじめに

12. LWF フレームワークを使うと
• HTML5アプリ
• Unityアプリ
上でFLASHアニメーションを利用して
• 2Dインターフェイス/2Dアニメーション
を作れるようになるため、
エンジニアはそういった作業から解放されます
LWF概要 LWF概要 LWF導入はじめに

13. • やらなくてよくなること
• エンジニアが位置合わせ
• エンジニアがTweenアニメーションを作る
• エンジニアがUIアニメーションのタイミング制御
• 画像読み込みなどの車輪実装
• やること
• FLASHアーティストを探す
• FLASHデザイナーを探す
• LWFの制限を知る
• FLASHアニメーションを変換する
LWF概要 LWF概要 LWF導入はじめに

14. • 会場にFLASH デザイナー/FLASHアーティスト
の方はいらっしゃいませんか？
まとめ LWF概要 LWF導入はじめに

15. • 前提条件：
FLASHアーティスト/デザイナーがいること
• 達成されること：
モチはモチ屋にお願いできる
LWF概要まとめ LWF概要 LWF導入はじめに

16. LWF 導入

17. • エンジニア向け
• アーティスト向け
• コミッター向け
LWF導入 LWF概要 LWF導入はじめに

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. プレビュー環境 “LWFS”
リソース
ファイル
• Windows/Mac用の実戦プレビュー環境
• 導入時のつまづきを最小化(「Rubyインストールでこける」)
• 制作効率を最大化 (フォルダ監視によるswfの自動コンバート)
• https://github.com/gree/lwfs
LWFS LWF概要 LWF導入はじめに
コンバーター
(Ruby)
HTML5用
プレイヤー
(JavaScript)
パブリッシュ用
スクリプト
(JSFL)
SWF
PNG
PNG
LWF

20. リソース
ファイル
• 実際の開発で描画パフォーマンスや制作効率を最大化するのに
必要となる機能やオプションも含まれています
LWFパッケージを
もっと詳しく
LWF概要 LWF導入はじめに
コンバーター
(Ruby)
HTML5用
プレイヤー
(JavaScript)
Unity用
プレイヤー
(C#)
パブリッシュ用
スクリプト
(JSFL)
SWF
PNG
js
(※LWFパッケージには
含まれていません)
テクスチャ
アトラス生成ツール
(TexturePackerなど)
PNG
Json
PNG
LWF

21. 1. lwf.jsファイルを読み込みます
2. リソースファイルを指定して
LWFインスタンスを初期化します
3. 利用する
1. 再生します
2. リソースファイルに設定されているラベルに移動する
3. 事前に設定済みのイベントに呼ばれる関数を実装する
エンジニア向け LWF概要 LWF導入はじめに

22. デモ LWF概要 LWF導入はじめに

23. • シェイプを使わずに
キーフレームでFlashアニメーションを作成する
• エンジニアから指定されたラベルを各所に追加する
• ボタンクリック時には
特定のアニメーションを再生した後、
エンジニアから指定のあったイベントを発行する
スクリプトを追記する
• ※JavaScript書ける方：Flashファイルに動作制御のJavaScriptを記述し
ます
• http://github.com/gree/lwfs から LWFSを
ダウンロードし、動作を確認します
アーティスト向け LWF概要 LWF導入はじめに

24. デモ LWF概要 LWF導入はじめに

25. • 坂本一樹セミナーの資料を読む
http://gree.github.com/lwf/presentation20121115
• http://github.com/gree/lwfをforkする
• http://github.com/gree/lwfにpull requestを送る
コミッター向け LWF概要 LWF導入はじめに

26. デモ LWF概要 LWF導入はじめに

27. • エンジニアの方へ
慣れると素晴らしい世界が待ってます
•
アーティストの方へ
慣れると素晴らしい世界が待ってます
• コミッターの方へ
一緒に素晴らしい世界を作りましょう
LWF導入まとめ LWF概要 LWF導入はじめに

28. • 見た目はやっぱり重要。
モチはモチ屋にお願いしよう
• モチをモチ屋にお願いできる仕組みLWF
• LWFを導入してモチをモチ屋にお願いしましょう
まとめ

29. 一緒に働く仲間を募集しております！
gree.co.jp/recruit