Blog #1 - gree/lwf GitHub Wiki

http://www.gree.co.jp/en/news/press/2012/1018_01.html

“LWF” uses an animation engine based on a unique file format to render animation data converted from Flash content playable on Unity and HTML5. Usage example of “LWF” in “Animal Days”

screenshot

Isn't it good?

It's LWF (Lightweight SWF).

https://github.com/gree/lwf/

It's a framework to take animation data from SWF data generated by Adobe Flash and to convert it to a unique format. It can be played on Unity and HTML5.

However it doesn't support the complicated things such as shape, mask and ActionScript.

The purpose of LWF is to reduce the development cost for game which uses 2D character animation or 2D user interface. Of course, shape and mask are used in 2D games, but we can create games without these as well. And we don't need ActionScript at all, because game logics are implemented in C# for Unity and Javascript for HTML5 :-).

You might want to say "Hmm, taking animation data from SWF and play it. My colleague already implemented it.”

That's right.

However, there are following special features for LWF.

  • Resize the image at run time. Although only one SWF data for non-Retina is prepared, it can read images both Retina and non-Retina.
  • Work with texture sheets. The converter reads TexturePacker JSON file.
  • Game friendly APIs.
  • Features for only HTML5 version: Embedded JavaScript handling

Features for HTML5 version: Embedded JavaScript handling. I wrote it twice because it's important.

"It's possible to write JavaScript in ActionScript panel" when authoring with Adobe Flash as well as CreateJS toolkit used with Adobe Flash CS6. People who uses Adobe Flash, might realize language difference between ActionScript and JavaScript, but it should be familiar authoring process.

For example, write the following codes for ActionScript.

this.gotoAndPlay("run");

Write the following code for embedded JavaScript in LWf.

/* js
 
this.gotoAndPlay("run");
 
*/

Those are almost same as seen above. In the below example of ActionScript for moving MovieClip.

this.mc._x += 10;
this.mc._y += 15;

Write the following codes for embedded JavaScript.

/* js
 
this.mc.x += 10;
this.mc.y += 15;
 
*/

Did you get it?

The space is too small to explain how to handle this concretely.

Sorry! ... I was just kidding. Actually, there's no document to explain it now, but we are planning to update and provide it soon.

If you have the "use the Source, Luke!" attribute, please try the source code. It should work.

Please enjoy "LWF"! Thank you!

Oops, I forgot to tell you the following things.

For HTML5 version, the below renderers have been implemented.

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

Please select an appropriate renderer for your environment!