• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

はじめてのLWF for Open Hack Day

on

  • 2,443 views

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

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

http://yhacks.jp/hackday/conference

Statistics

Views

Total Views
2,443
Views on SlideShare
2,432
Embed Views
11

Actions

Likes
5
Downloads
8
Comments
0

1 Embed 11

https://twitter.com 11

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

はじめてのLWF for Open Hack Day はじめてのLWF for Open Hack Day Presentation Transcript

  • はじめてのLWF グリー株式会社 開発本部 CTO室 芳賀 洋行
  • アジェンダ1. はじめに2. LWF概要3. LWF導入
  • はじめに
  • 質問① はじめに LWF概要 LWF導入• アートやデザインが良くないらしく 機能を試してすらもらえないことがあった 私には 難しすぎる わ。。。
  • 質問② はじめに LWF概要 LWF導入• 本機能はまったく変えてないのに、 アートやデザインが良くなったら 急に使われだした すごい 機能!
  • 質問③ はじめに LWF概要 LWF導入• そういいながら、自分も見た目で 本機能の出来を判断しちゃうことはある お、できとるやん
  • 質問④ はじめに LWF概要 LWF導入• アートやUIのデザインもできたらいいけど、 けっきょくモチはモチ屋だと思う
  • 質問⑤ はじめに LWF概要 LWF導入• Flashアニメーションとまったく同じ動作をする スクリプトを書いたことがある まったく同じ 動作をする 変換 スクリプト
  • はじめに はじめに LWF概要 LWF導入• 見た目による足切りを防ぎたい• 見た目でとっつきづらさを軽減したい• 見た目ですごいと思われても大丈夫なくらい 本機能は作りこんである• なにごとにもプロがいる• 「私はFLASHを再生したいだけなんだ!」
  • LWF 概要
  • 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導入• 会場にFLASH デザイナー/FLASHアーティスト の方はいらっしゃいませんか?
  • LWF概要まとめ はじめに LWF概要 LWF導入• 前提条件: FLASHアーティスト/デザイナーがいること• 達成されること: モチはモチ屋にお願いできる
  • LWF 導入
  • LWF導入 はじめに LWF概要 LWF導入• エンジニア向け• アーティスト向け• コミッター向け
  • LWFパッケージ はじめに LWF概要 LWF導入 (シンプルな解説)• https://github.com/gree/lwf に含まれるもの • FLASHから、LWFに適したSWFファイルを出力するスクリプト • SWFファイルから、LWFファイルと画像を生成するコンバーター • LWFファイル、画像を再生できるHTML5用プレイヤー • LWFファイル、画像を再生できるUnity用プレイヤー リソース HTML5用 ファイル プレイヤー (JavaScript)パブリッシュ用 LWF コンバーター スクリプト SWF (Ruby) (JSFL) Unity用 PNG PNG プレイヤー (C#)
  • LWFS はじめに LWF概要 LWF導入• Windows/Mac用の実戦プレビュー環境• 導入時のつまづきを最小化(「Rubyインストールでこける」)• 制作効率を最大化 (フォルダ監視によるswfの自動コンバート)• https://github.com/gree/lwfs プレビュー環境 “LWFS” リソース ファイルパブリッシュ用 LWF HTML5用 コンバーター プレイヤー スクリプト SWF (Ruby) (JavaScript) (JSFL) PNG PNG
  • LWFパッケージを はじめに LWF概要 LWF導入 もっと詳しく• 実際の開発で描画パフォーマンスや制作効率を最大化するのに 必要となる機能やオプションも含まれています js リソース HTML5用パブリッシュ用 SWF コンバーター ファイル プレイヤー スクリプト (Ruby) (JavaScript) (JSFL) LWF PNG PNG Unity用 プレイヤー PNG (C#) Json(※LWFパッケージには 含まれていません) テクスチャアトラス生成ツール(TexturePackerなど)
  • エンジニア向け はじめに LWF概要 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を導入してモチをモチ屋にお願いしましょう
  • 一緒に働く仲間を募集しております! gree.co.jp/recruit