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.

GREE-Fsite

40,690 views

Published on

GREE-Fsite

  1. 1. LWFとソーシャルゲーム グリー株式会社 メディア事業本部 西澤 俊平 Copyright © 2004-2013 GREE,Inc. All Rights Reserved. Copyright © 2004-2007 GREE,Inc. All Rights Reserved.
  2. 2. 自己紹介西澤 俊平・ メディア事業本部プロダクトデザイングループ・ グリー内製ソーシャルゲームの演出Flashを制作してます・ 2010年9月入社・ 前職ではモバイル(FP)カジュアルFlashゲームの制 作をしてました・ 自称サマルトリア型FlashクリエイターLike !・ FlashLite 1.1・ Javascript Copyright © 2004-2013 GREE,Inc. All Rights Reserved.
  3. 3. 早速本題に Copyright © 2004-2013 GREE,Inc. All Rights Reserved. Copyright © 2004-2007 GREE,Inc. All Rights Reserved.
  4. 4. Copyright © 2004-2013 GREE,Inc. All Rights Reserved.
  5. 5. LWFとは? LWFは独自ファイルフォーマットに基づくアニメーションエンジンであり FLASHコンテンツから変換したアニメーションデータにおいて、 UnityとHTML5の再生を可能にします。・Flash プレーヤーに近い挙動により、Flash 開発経験者の学習負担を大幅軽減。・Flash アーティストがエンジニアリングなしに、アニメーションおよび ユーザーインターフェースを作成可能。・既存の Flash プレーヤーでは不可能だった、自由で高度なインタラクションが提供可能。・ユーザーインターフェース用とアニメーションエフェクト用といった、 複数の「LWF」データを同時に再生・制御可能。 Copyright © 2004-2013 GREE,Inc. All Rights Reserved.
  6. 6. 変換 再生 Copyright © 2004-2013 GREE,Inc. All Rights Reserved.
  7. 7. なぜLWFなのか? Copyright © 2004-2013 GREE,Inc. All Rights Reserved. Copyright © 2004-2007 GREE,Inc. All Rights Reserved.
  8. 8. 昨今のスマートフォンの高性能化にともないソーシャルゲームの演出もリッチ化の傾向にあります Copyright © 2004-2013 GREE,Inc. All Rights Reserved. Copyright © 2004-2007 GREE,Inc. All Rights Reserved.
  9. 9. クオリティを確保しつつ、ソーシャルゲーム業界特有の 流れの早さについていける制作速度が求められる オーサリングツールとして優秀なFlash環境の変化という激流に身を置くFlashクリエイターを 無駄なく活かすためのソリューションがLWF Copyright © 2004-2013 GREE,Inc. All Rights Reserved.
  10. 10. LWF for UnityLWF for HTML5 Copyright © 2004-2013 GREE,Inc. All Rights Reserved.
  11. 11. LWF for Unity 使用事例http://product.gree.net/jp/ja/games/46390/ Copyright © 2004-2013 GREE,Inc. All Rights Reserved.
  12. 12. LWF for HTML5 使用事例http://product.gree.net/jp/ja/games/58195/ Copyright © 2004-2013 GREE,Inc. All Rights Reserved.
  13. 13. LWF for HTML5 Copyright © 2004-2013 GREE,Inc. All Rights Reserved. Copyright © 2004-2007 GREE,Inc. All Rights Reserved.
  14. 14. 従来の方法では駄目だったの か? Copyright © 2004-2013 GREE,Inc. All Rights Reserved. Copyright © 2004-2007 GREE,Inc. All Rights Reserved.
  15. 15. おさらい Copyright © 2004-2013 GREE,Inc. All Rights Reserved. Copyright © 2004-2007 GREE,Inc. All Rights Reserved.
  16. 16. 従来の方法その1 変換エンジンを使う• FlashLite1.1で制作できる • 動的に変換するため、画面 ので、クリエイターの学習 が再生されるまで時間がか コストがほぼ必要ない かる• 再現性はかなり高い • FlashLite1.1でできること しかできない Copyright © 2004-2013 GREE,Inc. All Rights Reserved. Copyright © 2004-2007 GREE,Inc. All Rights Reserved.
  17. 17. 従来の方法その2JavaScriptで頑張る Copyright © 2004-2013 GREE,Inc. All Rights Reserved. Copyright © 2004-2007 GREE,Inc. All Rights Reserved.
  18. 18. 従来の方法その2 Javascriptで頑張る Flashで制作したアニメーションを参考に… Copyright © 2004-2013 GREE,Inc. All Rights Reserved.
  19. 19. 従来の方法その2 Javascriptで頑張る JavaScriptに書き換える Copyright © 2004-2013 GREE,Inc. All Rights Reserved.
  20. 20. 従来の方法その2 Javascriptで頑張る 当然トゥイーンのイージングや時間指定も javascript JavaScriptに書き換える Copyright © 2004-2013 GREE,Inc. All Rights Reserved.
  21. 21. 従来の方法その2 Javascriptで頑張る 変換エンジンのような変換時間は なく、ファイルのロード時間だけ で済む 工数がかかる JavaScriptとhtmlとcssの知識が必要 デザイナーには厳しい Copyright © 2004-2013 GREE,Inc. All Rights Reserved.
  22. 22. Copyright © 2004-2013 GREE,Inc. All Rights Reserved.
  23. 23. バックエンド側の実装方法等は以下のURLを参考にして下さい• ■LWF http://gree.github.com/lwf/• ■グリー流新次元ゲーム開発 http://area.autodesk.jp/movie/gree-unity-adsk/03.html• ■初めてのLWF http://www.slideshare.net/hiroyuki-haga/2013- 0209greeopenhackday Copyright © 2004-2013 GREE,Inc. All Rights Reserved.
  24. 24. LWFSの準備■LWFS(github)https://github.com/gree/lwfsLWFSは「元ファイルをLWFに変換、プレビューするツール」です。元ファイルを更新すれば、自動でLWFに変換し、プレビューにも反映され ます。https://code.google.com/p/lwfs/downloads/list上記URLからダウンロードし、適当な場所に展開してください。(OS XならLWFS-osx-*.zip、WindowsならLWFS-win-*.zip) Copyright © 2004-2013 GREE,Inc. All Rights Reserved.
  25. 25. LWFSの準備展開したら、フォルダ内のstart.jsを実行してください。jsファイルがエディタ等に関連付けられている場合、右クリックから「コマンドプロンプトで開く」を選択してください。この際、ブラウザはChromeかSafariをデフォルトにしておきます。 Copyright © 2004-2013 GREE,Inc. All Rights Reserved.
  26. 26. LWFSの準備デスクトップに「LWFS_work」「LWFS_work_output」2つのフォルダが作成されます。また、ブラウザにプレビューのリスト画面が立ち上がります。LWFS_work内のファイルがこのリストに反映されます。 Copyright © 2004-2013 GREE,Inc. All Rights Reserved.
  27. 27. LWFSの準備LWFS_work下のフォルダ構成は以下のようになります。1つのフォルダにつき、flaとswfが1つずつ必要です。2つ以上入れるとエラーになります。 LWFS_workの構成がブラウザのプレビュー にも反映されます。 Copyright © 2004-2013 GREE,Inc. All Rights Reserved.
  28. 28. それでは、実際に制作してみましょう Copyright © 2004-2013 GREE,Inc. All Rights Reserved. Copyright © 2004-2007 GREE,Inc. All Rights Reserved.
  29. 29. まずは Copyright © 2004-2013 GREE,Inc. All Rights Reserved.
  30. 30. 良い感じのアニメーションを作ります (腕の見せ所) Copyright © 2004-2013 GREE,Inc. All Rights Reserved.
  31. 31. と気軽にいきたいところですが、LWFには制限事項がいくつかあるので、 それらに注意しながら制作します。 Copyright © 2004-2013 GREE,Inc. All Rights Reserved.
  32. 32. LWFSの制限事項• シェイプ(ベクター)は使えません。 全てビットマップにする必要があります。• シェイプが使えないので、シェイプトゥイーンも使えません。• テキストはダイナミックテキスト(デバイスフォント)のみ利用可。• fla内ではサウンドが使えません。• カラー効果はアルファのみ対応(着色、明度等は不可)• パブリッシュ設定は Flash Player 7 ActionScript1.0 Copyright © 2004-2013 GREE,Inc. All Rights Reserved.
  33. 33. 以上に気をつけた上で Copyright © 2004-2013 GREE,Inc. All Rights Reserved.
  34. 34. 良い感じのアニメーションを作ります Copyright © 2004-2013 GREE,Inc. All Rights Reserved.
  35. 35. ライブラリの一部。シェイプが使用できないので、全て画像化してあります。単純に縮小していく光等はモーショントゥイーンで動きをつけられますが、ゆらゆら模様が変わる光などは連番の画像で書き出し、タイムラインに並べて再生させます。 Copyright © 2004-2013 GREE,Inc. All Rights Reserved.
  36. 36. 「LWF_publish」コマンドで パブリッシュしますhttps://github.com/gree/lwf/blob/master/tools/flash/LWF_Publish.jsfl Copyright © 2004-2013 GREE,Inc. All Rights Reserved.
  37. 37. 試しにエラーを含んだままLWF_Publishを実行すると…… このように 「mcHorseというシンボルにシェイプが含まれています」 と警告を出してくれます。 Copyright © 2004-2013 GREE,Inc. All Rights Reserved.
  38. 38. ここで製作済みのファイルがあるので LWFSでチェックしてみましょう Copyright © 2004-2013 GREE,Inc. All Rights Reserved.
  39. 39. demo Copyright © 2004-2013 GREE,Inc. All Rights Reserved.
  40. 40. うん、なんとなく分かった気がする。でも、これってcreateJSと何が違うの? Copyright © 2004-2013 GREE,Inc. All Rights Reserved.
  41. 41. createJSとほぼ同等の事ができます! Copyright © 2004-2013 GREE,Inc. All Rights Reserved.
  42. 42. スクリプトもcreateJSとほぼ同様の書き方 Copyright © 2004-2013 GREE,Inc. All Rights Reserved.
  43. 43. でも同じような物ならAdobeのサポートのあるcreateJSの方が…… Copyright © 2004-2013 GREE,Inc. All Rights Reserved.
  44. 44. 勿論、LWFならではのメリットもあります Copyright © 2004-2013 GREE,Inc. All Rights Reserved.
  45. 45. LWFのメリット• 複数プラットフォームに書き出し可能(html5, Unity, cocos-2d)• html5はRenderingの方式も選択可能(Canvas、cssアニメーション)• 確認環境(LWFS)が多機能(実機確認、フレーム送り、自動変換等)• オープンソース(zlib License)(知識があれば)拡張可能• ダイナミックテキストの装飾(縁取り、ドロップシャドウ等) Copyright © 2004-2013 GREE,Inc. All Rights Reserved.
  46. 46. LWFのメリット 熱意あるLWF開発者 坂本一樹さん(@splhack) Copyright © 2004-2013 GREE,Inc. All Rights Reserved.
  47. 47. おまけ Copyright © 2004-2013 GREE,Inc. All Rights Reserved.
  48. 48. どんなに良い演出をどう頑張って作っても、 WEBベースでAndroid2.X は動作速度的に厳しいですよね Copyright © 2004-2013 GREE,Inc. All Rights Reserved.
  49. 49. Android4.0もいまいち不安定 Copyright © 2004-2013 GREE,Inc. All Rights Reserved.
  50. 50. シェアも高い Copyright © 2004-2013 GREE,Inc. All Rights Reserved.
  51. 51. 逆に考えるんだ Copyright © 2004-2013 GREE,Inc. All Rights Reserved.
  52. 52. アプリにしちゃえばいいさと 考えるんだ Copyright © 2004-2013 GREE,Inc. All Rights Reserved.
  53. 53. NativeRenderer Copyright © 2004-2013 GREE,Inc. All Rights Reserved.
  54. 54. demo Copyright © 2004-2013 GREE,Inc. All Rights Reserved.
  55. 55. Flashでオーサリングしたアニメーションを そのままアプリに載せることができる もちろんアプリなので高速 Copyright © 2004-2013 GREE,Inc. All Rights Reserved.
  56. 56. ご清聴ありがとうございました Copyright © 2004-2013 GREE,Inc. All Rights Reserved. Copyright © 2004-2007 GREE,Inc. All Rights Reserved.

×