はじめてのLWF

グリー株式会社 開発本部 CTO室

芳賀 洋行

1. はじめに

2. LWF概要

3. LWF導入

アジェンダ

はじめに

• アートやデザインが良くないらしく 機能を試してすらもらえないことがあった

質問① LWF概要 LWF導入 はじめに

私には 難しすぎるわ。。。

• 本機能はまったく変えてないのに、 アートやデザインが良くなったら 急に使われだした

質問② LWF概要 LWF導入 はじめに

すごい 機能！

• そういいながら、自分も見た目で 本機能の出来を判断しちゃうことはある

質問③

お、できとるやん

LWF概要 LWF導入 はじめに

• アートやUIのデザインもできたらいいけど、 けっきょくモチはモチ屋だと思う

質問④ LWF概要 LWF導入 はじめに

• Flashアニメーションとまったく同じ動作をする スクリプトを書いたことがある

質問⑤ LWF概要 LWF導入 はじめに

変換

まったく同じ動作をする スクリプト

• 見た目による足切りを防ぎたい

• 見た目でとっつきづらさを軽減したい

• 見た目ですごいと思われても大丈夫なくらい 本機能は作りこんである

• なにごとにもプロがいる

• 「私はFLASHを再生したいだけなんだ！」

はじめに LWF概要 LWF導入 はじめに

LWF 概要

「アートやデザイン」と「エンジニアリング」 を分離できる

• 2Dインターフェイス

• 2Dアニメーション

のオープンソース フレームワークです

LWF概要 LWF概要 LWF導入 はじめに

LWF フレームワークを使うと

• HTML5アプリ

• Unityアプリ

上でFLASHアニメーションを利用して

• 2Dインターフェイス/2Dアニメーション

を作れるようになるため、 エンジニアはそういった作業から解放されます

LWF概要 LWF概要 LWF導入 はじめに

• やらなくてよくなること • エンジニアが位置合わせ

• エンジニアがTweenアニメーションを作る

• エンジニアがUIアニメーションのタイミング制御

• 画像読み込みなどの車輪実装

• やること • FLASHアーティストを探す

• FLASHデザイナーを探す

• LWFの制限を知る

• FLASHアニメーションを変換する

LWF概要 LWF概要 LWF導入 はじめに

• 会場にFLASH デザイナー/FLASHアーティスト の方はいらっしゃいませんか？

まとめ LWF概要 LWF導入 はじめに

• 前提条件：

FLASHアーティスト/デザイナーがいること

• 達成されること：

モチはモチ屋にお願いできる

LWF概要まとめ LWF概要 LWF導入 はじめに

LWF 導入

• エンジニア向け

• アーティスト向け

• コミッター向け

LWF導入 LWF概要 LWF導入 はじめに

リソース ファイル

• 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

プレビュー環境 “LWFS”

リソース ファイル

• Windows/Mac用の実戦プレビュー環境

• 導入時のつまづきを最小化(「Rubyインストールでこける」)

• 制作効率を最大化 (フォルダ監視によるswfの自動コンバート)

• https://github.com/gree/lwfs

LWFS LWF概要 LWF導入 はじめに

コンバーター (Ruby)

HTML5用 プレイヤー

(JavaScript)

パブリッシュ用 スクリプト

(JSFL)

SWF

PNG PNG

LWF

リソース ファイル

• 実際の開発で描画パフォーマンスや制作効率を最大化するのに 必要となる機能やオプションも含まれています

LWFパッケージを もっと詳しく

LWF概要 LWF導入 はじめに

コンバーター (Ruby)

HTML5用 プレイヤー (JavaScript)

Unity用 プレイヤー

(C#)

パブリッシュ用 スクリプト

(JSFL)

SWF

PNG

js

(※LWFパッケージには 含まれていません)

テクスチャ アトラス生成ツール

(TexturePackerなど)

PNG

Json

PNG

LWF

1. lwf.jsファイルを読み込みます

2. リソースファイルを指定して LWFインスタンスを初期化します

3. 利用する 1. 再生します

2. リソースファイルに設定されているラベルに移動する

3. 事前に設定済みのイベントに呼ばれる関数を実装する

エンジニア向け LWF概要 LWF導入 はじめに

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

• シェイプを使わずに キーフレームでFlashアニメーションを作成する

• エンジニアから指定されたラベルを各所に追加する

• ボタンクリック時には 特定のアニメーションを再生した後、 エンジニアから指定のあったイベントを発行する スクリプトを追記する • ※JavaScript書ける方：Flashファイルに動作制御のJavaScriptを記述し

ます

• http://github.com/gree/lwfs から LWFSを ダウンロードし、動作を確認します

アーティスト向け LWF概要 LWF導入 はじめに

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

• 坂本一樹セミナーの資料を読む

http://gree.github.com/lwf/presentation20121115

• http://github.com/gree/lwfをforkする

• http://github.com/gree/lwfにpull requestを送る

コミッター向け LWF概要 LWF導入 はじめに

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

• エンジニアの方へ 慣れると素晴らしい世界が待ってます

• アーティストの方へ 慣れると素晴らしい世界が待ってます

• コミッターの方へ 一緒に素晴らしい世界を作りましょう

LWF導入まとめ LWF概要 LWF導入 はじめに

• 見た目はやっぱり重要。 モチはモチ屋にお願いしよう

• モチをモチ屋にお願いできる仕組みLWF

• LWFを導入してモチをモチ屋にお願いしましょう

まとめ

一緒に働く仲間を募集しております！

gree.co.jp/recruit