GREE-Fsite

LWFとソーシャルゲーム

グリー株式会社メディア事業本部
西澤俊平

Copyright © 2004-2013 GREE,Inc. All Rights Reserved.

自己紹介

西澤俊平
・メディア事業本部プロダクトデザイングループ
・グリー内製ソーシャルゲームの演出Flashを制作してます
・ 2010年9月入社
・前職ではモバイル(FP)カジュアルFlashゲームの制
作をしてました
・自称サマルトリア型Flashクリエイター

Like !
・ FlashLite 1.1
・ Javascript


早速本題に


LWFとは？

LWFは独自ファイルフォーマットに基づくアニメーションエンジンであり
FLASHコンテンツから変換したアニメーションデータにおいて、
UnityとHTML5の再生を可能にします。

・Flash プレーヤーに近い挙動により、Flash 開発経験者の学習負担を大幅軽減。
・Flash アーティストがエンジニアリングなしに、アニメーションおよび
ユーザーインターフェースを作成可能。
・既存の Flash プレーヤーでは不可能だった、自由で高度なインタラクションが提供可能。
・ユーザーインターフェース用とアニメーションエフェクト用といった、
複数の「LWF」データを同時に再生・制御可能。


変換

再生


なぜLWFなのか？


昨今のスマートフォンの高性能化にともない
ソーシャルゲームの演出もリッチ化の傾向にあります


クオリティを確保しつつ、ソーシャルゲーム業界特有の
流れの早さについていける制作速度が求められる

オーサリングツールとして優秀なFlash
環境の変化という激流に身を置くFlashクリエイターを
無駄なく活かすためのソリューションがLWF


LWF for Unity

LWF for HTML5


LWF for Unity 使用事例

http://product.gree.net/jp/ja/games/46390/


LWF for HTML5 使用事例

http://product.gree.net/jp/ja/games/58195/


LWF for HTML5


従来の方法では駄目だったの
か？


おさらい


従来の方法その1 変換エンジンを使う

• FlashLite1.1で制作できる • 動的に変換するため、画面
ので、クリエイターの学習が再生されるまで時間がか
コストがほぼ必要ないかる
• 再現性はかなり高い • FlashLite1.1でできること
しかできない


従来の方法その2
JavaScriptで頑張る


従来の方法その2 Javascriptで頑張る
Flashで制作したアニメーションを参考に…



JavaScriptに書き換える



当然トゥイーンのイージングや時間指定も
javascript
JavaScriptに書き換える



変換エンジンのような変換時間は
なく、ファイルのロード時間だけ
で済む

工数がかかる
JavaScriptとhtmlとcssの知識が必要
デザイナーには厳しい


バックエンド側の実装方法等は以下の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


LWFSの準備

■LWFS(github)
https://github.com/gree/lwfs

LWFSは｢元ファイルをLWFに変換、プレビューするツール｣です。
元ファイルを更新すれば、自動でLWFに変換し、プレビューにも反映され
ます。

https://code.google.com/p/lwfs/downloads/list

上記URLからダウンロードし、適当な場所に展開してください。
(OS XならLWFS-osx-*.zip、WindowsならLWFS-win-*.zip)


LWFSの準備

展開したら、フォルダ内のstart.jsを実行してください。
jsファイルがエディタ等に関連付けられている場合、
右クリックから「コマンドプロンプトで開く」を選択してください。
この際、ブラウザはChromeかSafariをデフォルトにしておきます。


LWFSの準備

デスクトップに
｢LWFS_work｣
｢LWFS_work_output｣
2つのフォルダが作成されます。また、ブラウザにプレビューのリスト画面
が立ち上がります。LWFS_work内のファイルがこのリストに反映されます。


LWFSの準備

LWFS_work下のフォルダ構成は以下のようになります。
1つのフォルダにつき、flaとswfが1つずつ必要です。
2つ以上入れるとエラーになります。

LWFS_workの構成がブラウザのプレビュー
にも反映されます。


それでは、実際に制作してみましょう


まずは


良い感じのアニメーションを作ります
(腕の見せ所)


と気軽にいきたいところですが、
LWFには制限事項がいくつかあるので、
それらに注意しながら制作します。


LWFSの制限事項

• シェイプ(ベクター)は使えません。
全てビットマップにする必要があります。
• シェイプが使えないので、シェイプトゥイーンも使えません。
• テキストはダイナミックテキスト(デバイスフォント)のみ利用可。
• fla内ではサウンドが使えません。
• カラー効果はアルファのみ対応(着色、明度等は不可)

• パブリッシュ設定は
Flash Player 7
ActionScript1.0


以上に気をつけた上で


良い感じのアニメーションを作ります


ライブラリの一部。
シェイプが使用できないので、
全て画像化してあります。

単純に縮小していく光等はモーショントゥイーン
で動きをつけられますが、ゆらゆら模様が変わる
光などは連番の画像で書き出し、タイムラインに
並べて再生させます。


「LWF_publish」コマンドで
パブリッシュします

https://github.com/gree/lwf/blob/master/tools/flash/LWF_Publish.jsfl


試しにエラーを含んだままLWF_Publishを実行すると……

このように
「mcHorseというシンボルにシェイプが含まれています」
と警告を出してくれます。


ここで製作済みのファイルがあるので
LWFSでチェックしてみましょう


demo


うん、なんとなく分かった気がする。
でも、これってcreateJSと何が違うの？


createJSとほぼ同等の事ができます！


スクリプトもcreateJSとほぼ同様の書き方


でも同じような物ならAdobeの
サポートのあるcreateJSの方が……


勿論、LWFならではのメリットもあります


LWFのメリット

• 複数プラットフォームに書き出し可能(html5, Unity, cocos-2d)

• html5はRenderingの方式も選択可能(Canvas、cssアニメーション)

• 確認環境(LWFS)が多機能(実機確認、フレーム送り、自動変換等）

• オープンソース(zlib License)(知識があれば)拡張可能

• ダイナミックテキストの装飾(縁取り、ドロップシャドウ等)


LWFのメリット

熱意あるLWF開発者
坂本一樹さん(@splhack)


おまけ


どんなに良い演出をどう頑張って作っても、
WEBベースでAndroid2.X
は動作速度的に厳しいですよね


Android4.0もいまいち不安定


シェアも高い


逆に考えるんだ


アプリにしちゃえばいいさと
考えるんだ


NativeRenderer


Flashでオーサリングしたアニメーションを
そのままアプリに載せることができる

もちろんアプリなので高速


ご清聴ありがとうございました


GREE-Fsite

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to GREE-Fsite

Similar to GREE-Fsite (20)

GREE-Fsite