Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.

For the best experience please use the latest Chrome, Safari or Firefox browser.

LWF - Lightweight SWF


an open-source developer tool for Unity and HTML5 smartphone apps


a framework for 2D User Interface and 2D Animation


Lightweight SWF

Lightweight SWF

based on an animation data converted from a Flash SWF file.

The purpose of LWF

Yet another Flash Player implementation

The purpose of LWF

Make Game Development HAPPY!

Happy game developing!

A common problem

Animators make good animations

A common problem

Programmers implement animations as good as they can do

LWF fixes the problem


LWF Way: Adobe Flash

Adobe Flash is one of the most powerful and useful tool for authoring 2D animation


Animators can make too many animations, Do not forget adapting Performance and Memory Usage

Too much

Supported Flash Elements

FLASH for LWF production guideline

NOT SUPPORTED Flash Elements

It's so complicated...

Shape: so don't worry about it

You can get easily "Bitmap" from "Shape"

Flash Professional / Converting art between vector and bitmap formats (CS5.5 or later)

You can also use JSFL for converting shapes into bitmaps.

Example: Authoring Animation in Flash

Example: Publish SWF


Example: Convert SWF into LWF

    $ ruby swf2lwf.rb logo.swf

    Generates logo.lwf

Example: And then ...

Example: Play it :)

Yes! It is embedded LWF Runtime for HTML5 with Canvas Renderer

Aren't you just bored with this LWF example?

Let's see a real example

REAL Example:

Embedded LWF Runtime for HTML5 with Canvas Renderer

The implementation of LWF

LWF Converter

LWF Binary Format (.lwf file)

LWF Runtime For Unity

LWF Runtime For Unity

It means you can port LWF for XNA and PlayStation Mobile SDK!


Pitfalls with Unity

core (Unity-independent part)

It just works as Flash Player

core: Events

core: Events

Named Arguments and Lambda

    enterFrame:(movie) => {
        /* handle the event */

It's so meaningful, isn't it?

core: Events

core: Extras

You can implement the renderers of these using the renderer interface what you want to do with the geometry, color and size information

See also FLASH for LWF production guideline

unity (Unity dependent part)

Wrapper: LWFObject and LWFPlayer

Editor: LWFObject Inspector

Inspector provides the current status of LWFObject instances


How to render the LWF instance

  1. Execute a display list in a frame of a movieclip
  2. Update the geometry of each node in the display list
  3. Pass the geometry and color information of each node through a renderer
  4. Render it using CombinedMeshRenderer or DrawMeshRenderer





How to create a texture sheet


TexturePacker setting for LWF

LWF Converter (swf2lwf.rb) expects JSON (Hash) Data Format

    $ ruby swf2lwf.rb foo.swf foo_atlas.json

Dynamic Batching friendly

ResourceCache (lwf_unity_resourcecache.cs) does the best for it

Return the same material as possible with caching the resouces

Load another texture at the runtime

Implement TextureLoader and pass it through LWFObject Load method or SetLoader method

Reference: LWFObject.cs


How about SkinnedMeshRenderer instead of MeshRenderer?

It seems that CPU matrix calculation is a little bit better than SkinnedMeshRenderer.






LWF decides to use a text renderer by the font name at the runtime

Q: Can I change the text string at the runtime?

A: Use SetText API

How to convert a Bitmap Font


    $ macruby fontconv.rb MTLmr3m.ttf MotoyaLMaru 17 "" 2048 2048 MTLmr3m

How to integrate SystemFontRenderer with unity-systemfontrenderer

     * Connect LWF to SystemFontRenderer
    LWF.UnityRenderer.ISystemFontRenderer.SetConstructor(() => {
        return new SystemFont.Renderer();

Unity 4.0 Dynamic Font

We want to integrate it as soon as possible! But

We need automatic line feed...


LWF works fine with NGUI!

UIWidget inherited class for LWF

NGUI Integration


It is not included in lwf.unitypackage

LWF Runtime For HTML5

REAL Example:

Embedded LWF Runtime for HTML5 with Canvas Renderer

LWF Runtime For HTML5

core (HTML5-independent part... as Possible)

It might work on node.js and Web Worker

LWF uses several HTML5 features

If it is available at the runtime

JFYI: Canvas / CSS 3D

CSS3 3D Canvas
Android 2.x-3.x - -
Android 4.x- - GPU
iOS 4.x GPU -
iOS 5.x- GPU GPU

In our experience, Canvas is more stable and faster than CSS3 in every platform, however, of course it may vary by animation data

Canvas Renderer

    cache = LWF.ResourceCache.get();

Canvas Renderer does not change the Canvas context as possible for the performance

CSS3 Renderer

    cache = LWF.ResourceCache.get();

CSS3 Renderer does not change the CSS style of DOM elements as possible for the performance

CSS3 Renderer

WebGL Renderer

    cache = LWF.ResourceCache.get();

Experimental Implementation, but it would work correctly


Loading LWF binary data using ArrayBuffer, better than the below

    LWFLoader.prototype.readByte = function() {
        return this.d.charCodeAt(this.index++) & 0xff;

    LWFLoader.prototype.readChar = function() {
        return String.fromCharCode(this.readByte());

Web Worker

Asynchronous Loading LWF binary data

JFYI: A Pitfall


How to render bitmap on HTML5

Image Helper at the runtime

Load another image at the runtime

ResourceCache loadLWF and loadLWFs support it

How to render text on HTML5

Retina-ready text rendering in those renderers!

Q: Can I change the text string at the runtime?

A: Use setText API as well as LWF Runtime for Unity

Embedded JavaScript

Write JavaScript code in the action panel of Adobe Flash, and then it works on LWF as well as ActionScript of Flash Player

Embedded JavaScript

JavaScript code should be in the /* js comment block

    /* js



    /* js += 10; += 15;


Embedded JavaScript

similar to CreateJS

How to convert with Embedded JavaScript

    $ ruby swf2lwf.rb -f foo.fla foo.swf

    Generates foo.lwf and foo.js

Embedded JavaScript

/* js
    frame action

/* js_load
    as "on (load)"

/* js_postLoad
    as "on (load)"

/* js_enterFrame
    as "on (enterFrame)"

/* js_unload
    as "on (unload)"

Embedded JavaScript: Execution order

    Execution order for above movieclips hierarchy
     V _root js_load action only at first time
     V     mcA js_load only at first time
     V     mcA onClipEvent(load) only at first time
     V         mcB js_load only at first time
     V         mcB onClipEvent(load) only at first time
     V         mcB js_postLoad only at first time
     V         mcB frame action/js
     V         mcB js_enterFrame action
     V         mcB onClipEvent(enterFrame)
     V     mcA js_postLoad only at first time
     V     mcA frame action/js
     V     mcA js_enterFrame action
     V     mcA onClipEvent(enterFrame)
     V _root js_postLoad action only at first time
     V _root frame action/js
     V _root js_enterFrame action

Embedded JavaScript

"this" is the Movie instance where the JavaScript is written on

    /* js



Embedded JavaScript

You can use "_root" as well as ActionScript

    /* js



Example: Embedded JavaScript


Embedded LWF Runtime for HTML5 with Canvas Renderer


LWF for HTML5 includes the modified version of

Example: tween.js

        .to({x: 360, y: 80, rotation: 359}, 120)

Example: tween.js


Embedded LWF Runtime for HTML5 with Canvas Renderer


Yes! LWF for HTML5 works on cocos2d-html5!


cocos2d-html5-dependent part: cocos2d

It uses cocos2d-html5 API as possible

Example code for cocos2d-html5

    var cache = LWF.ResourceCache.get();
        onload:function(lwfNode) {

cc.LWFNode is a class that is derived from cc.Node class, like LWFObject of LWF for Unity

cocos2d for iPhone/cocos2d-x JavaScript Binding

LWF for cocos2d-html5 works on JSB! But experimental


Particle Designer data works on LWF on cocos2d-html5

How to use LWF for HTML5


How to use LWF for Unity/HTML5


LWF Support Tool


A Preview Tool, is a daemon that generates AUTOMATICALLY lwf files from swf/fla files as soon as these files are modified

REAL Example:

Embedded LWF Runtime for HTML5 with Canvas Renderer


Please visit

Use a spacebar or arrow keys to navigate