Lightweight SWF

2012/10/19

エンジニアの坂本 一樹(@splhack)です。今日はみんなに新しいソリューションを紹介するね★ LWFっていうんだよっ♪

グリー、UnityおよびHTML5に対応したスマートフォンアプリの開発支援ソリューション「LWF」をオープンソースソフトウェアとして公開
「LWF」は、独自ファイルフォーマットに基づくアニメーションエンジンで、Flashコンテンツから変換したアニメーションデータを、UnityとHTML5で再生できます。

「Animal Days」での「LWF」使用例

(弊社プレスリリースより抜粋)

ねっ、いいでしょ♥

... すみません。書いてて辛くなってきたんで、もうちょっと堅くさせていただきます。

“新次元ゲーム開発セミナー”が開催！　グリーの気鋭が語る、次世代のモバイルゲーム開発で求められるものとは？
坂本氏が講演で、「“Lightweight SWF”を“github”でオープンソースとして提供します」と発言したときには、会場からささやかなざわめきが沸き上がっていたのが印象的だった。

はい。ということで、セミナー登壇中に、その場でgit push -u origin masterさせていただきました(「git pushしていいでしょうか?」で何人かフイた)。

それがコレです。

LWFです。Lightweight SWFというものです。

これは何をするものかと軽く説明しますと、Adobe Flashでオーサリングして生成したSWFデータから、アニメーションデータを取り出しまして、独自のフォーマットであるLWFフォーマットに変換いたしまして、UnityやHTML5で再生するための仕組みです。

シェイプ、マスク、アクションスクリプトなどの複雑なものは一切対応しておりません。

なぜかと言いますと、『LWFの目的』は、2Dのゲーム、つまり2Dのキャラクターがアニメーションしたり、2Dのユーザーインターフェースを扱うようなものですが、そういった『2Dゲームの開発コストを下げること』、なのです。2Dゲームでもシェイプ、マスクは当然使うわけですが、なんといいますか、なくてもまぁなんとかなるかな、というレベルではないでしょうか。アクションスクリプトに関しては、UnityではC#など、HTML5ではJavaScriptを使ってゲームロジックを実装するわけですから、そういった環境では不要、といってしまっても過言ではないかと思います。

「あぁ、なんだSWFからアニメーション取り出して再生するだけじゃん、そんなの会社に１人は居るSWFバイナリに詳しい人がもう実装済みさね」

と、おっしゃりたい気持ちはわかります。そのとおりです。

そのとおりではありますが、このLWF、それなりに工夫しておりまして、以下のような特徴があります。

  • 実行時画像サイズ変更。SWFデータは非Retina用1つしか用意していなくても、Retina用、非Retina用などの画像を端末に合わせて読み込み可能。
  • テクスチャーシート対応。コンバータがTexturePackerのJSON形式に対応。
  • ゲームに便利なAPIの提供。
  • HTML5版専用機能: 埋め込みJavaScript対応。

『HTML5版専用機能: 埋め込みJavaScript対応』 大事なことなので二度書きました。

これは、Adobe Flash CS6とともに使用されるCreateJS toolkitのように、Adobe Flashでオーサリング時に、『アクションスクリプトパネルにJavaScriptを書ける』のです。Adobe Flashに慣れている方にとって、アクションスクリプトとJavaScriptと言語に違いはありますが、馴染み深いオーサリング方法ではないかと思います。

たとえばアクションスクリプトでは、以下のように書きます。

LWFでの埋め込みJavaScriptは、以下のように書きます。

このとおり、ほぼ同じです。

たとえばアクションスクリプトでは、以下のようにムービークリップを移動させました。

LWFでの埋め込みJavaScriptは、以下のように書きます。

いかがでしょうか。

具体的にどのようにやればいいかと言いますと、それを説明するには、このスペースは狭すぎます。

... すみません調子に乗りました。いま現在それを説明するドキュメントは存在しませんが、今後順次提供していく予定です!

もし "Use the Source, Luke!" 属性をお持ちでしたら、ソースコードを元にお試しいただければ幸いです。現時点のソースコードで対応しております。

それでは『LWF』お楽しみくださいませ!

あ、そうだ言い忘れました。

HTML5版は、以下のレンダラが実装済みです。

  • WebKit CSS 3D
  • Canvas
  • WebGL
  • cocos2d-html5

環境にあわせてレンダラを選択してくださいませ!

One more thing.

そうそう動いてるものを見たいですよね。お見せしましょう!

Let's LWF! http://gree.github.com/lwf-demo/