LWF - an open-source tool for bringing Flash animation to Unity and HTML5

LWF - an open-source developer tool for Unity and HTML5

​

LWF (Lightweight SWF) is a framework for 2D User Interface and 2D Animation. It is based on an animation data converted from an Adobe Flash SWF file. And it also works well with NGUI. Please take a look at the presentation of LWF and the sample.


LWF in production

Press Release from GREE, Inc. (http://www.gree.co.jp/en/news/press/2012/1018_01.html)




LWF Presentation

Description and Implementation of LWF - http://gree.github.com/lwf/presentation20121115/


LWF Sample

Basic2 Sample - http://gree.github.com/lwf-demo/unity/basic2/


Screenshot (Unity Editor, Flash CS6)



These samples also work on HTML5!

• http://gree.github.com/lwf-demo/html5/basic2/sample1.html
• http://gree.github.com/lwf-demo/html5/basic2/sample2.html
• http://gree.github.com/lwf-demo/html5/basic2/sample3.html

How to import your Adobe Flash data into your Unity project

LWF on GitHub

Yes! It's an Open Source! Under the zlib License.

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


Unity PlugIns from GREE, Inc.

• WebView Plugin https://github.com/gree/unity-webview
• System Font Renderer Plugin https://github.com/gree/unity-systemfontrenderer
• Bitmap Font Renderer Plugin https://github.com/gree/unity-bitmapfontrenderer

 

This sounds awesome!

 

only for mobile platform? not support windows standalone player?

 

LWF should work on windows standalone player as well.

However unity-systemfontrenderer( https://github.com/gree/unity-systemfontrenderer ) that is an optional component for LWF, doesn't support windows yet.

 

I uploaded a basic sample (http://gree.github.com/lwf-demo/unity/basic2/) and the project of it (https://github.com/gree/lwf-demo/tree/master/unity/basic2). Please take a look at these!

 

uploaded a screenshot of Unity Editor and Flash CS6. HTML5 version samples are also available.

• http://gree.github.com/lwf-demo/html5/basic2/sample1.html
• http://gree.github.com/lwf-demo/html5/basic2/sample2.html
• http://gree.github.com/lwf-demo/html5/basic2/sample3.html

 

Uploaded a screencast, "How to import your Adobe Flash data into your Unity project" (youtube).

LWFS, Converter and Previewer for LWF - https://github.com/gree/lwfs

 

Hello, Nice work.

I have things to wonder, I'm looking for 2d skeleton animation solution now. LWF looks perfect solution for me.

Have no experience on Flash, but google showed me "motion tween" enable to make skeleton animation. and in presentation of LWF, motion tween may be usable. Is it right? and I'd like to know what version of flash is recommended for making artwork. Thanks ahead.

 

I'm happy to hear that!

Yes! It is right. We did it like the following.

I recommend you to use Adobe Flash CS6, but older versions of Adobe Flash should work for LWF.

 

Thank you, the image you attached is really helpful for me to understand how you did!

 

Hi,

This sounds very impressive but I am missing a point: If I make a 2D UI with NGUI, can I "export" it somehow to HTML5 with your tool?

Thanks

Stephane

 

Thank you for your interest, but LWF is not for that purpose even though LWF works well NGUI.

LWF is based on an animation data converted from a Flash SWF file. It means that you can use Adobe Flash for authoring 2D User Interface and 2D animation. And LWF works well on NGUI, for example, 2D characters on NGUI panel.

 

are you planing to add AS3 support or is it just for animations?

 

We have no plan to support AS3. I recommend you to use Scaleform if you would like to use AS3 on Unity.

LWF also supports SWF version 3 Action. It allows to control movieclips or to notify events to the application program, for example, at the end of the animation or when a button is pressed.

http://gree.github.com/lwf-demo/pdf/FLASHforLWFproductionguideline.pdf

• play
• stop
• gotoAndPlay
• gotoAndStop
• nextFrame
• prevFrame
• tellTarget
• fscommand

 

I updated LWF for rendering textures in the Scene View in Unity!

https://github.com/gree/lwf

The previous version of LWF doesn't render textures at all in the Scene View if the LWF data doesn't use a texture sheet. Thus, it is difficult to adjust position, but now, you can see textures in the Scene View at last!

Also, there is another presentation of LWF. Please take a look it.
http://www.slideshare.net/hiroyuki-haga/2013-0209greeopenhackdayenglish

 

This is an awesome project. Thanks for sharing.

 

First I would like to say that LWF seems very promising and looking forward to using it!

Our team is currently looking to implement this tool within Unity to implement high quality animations in our upcoming game. We ran into a few issues while testing this program and are looking for solutions to help us get LWF running in our pipeline.

We followed the Unity install steps outlined in the following video: http://www.youtube.com/watch?v=A_AhTosm1NU
And we also followed the Flash LWF install steps in: http://www.youtube.com/watch?v=K7awPpMplIk

The problem we ran into was that the same texture was being placed onto the separate images. I've attached a screen shot showing you an example of the issue we're experiencing: http://i.imgur.com/frlxK8M.png

We've spent some time trying to fix the issue on our own with no luck, so we're hoping we can get some help from the developers.

Thank you for your time and creating this awesome tool for us to use.

EDIT: Our developer found the problem, we were trying to use our swf + spritesheet that we ran through the swf2lwf.rb script with a LWFObject script. We changed the LWFObject to a LWFPlayer and it worked. Our mistake.

 

Thank you!

Hmm, it sounds odd to me. LWFObject should work as well. Could you share with me your fla, swf, texture sheet and Unity project?

 

hi,
this technology looks like perfect solution for exFlash developers moving to unity, that's why we are trying to adopt it for our project
first try led to few errors, probably on our side, but I am just unable to find where we are wrong, can you please take a look?

when exporting from flash i get this trace

Warning shape is contained 1. symbole name = root
Warning shape is contained 2. symbole name = root
Warning shape is contained 3. symbole name = root
Warning shape is contained 4. symbole name = root
Warning shape is contained 5. symbole name = root
Warning shape is contained 6. symbole name = root
Warning shape is contained 7. symbole name = root
Warning shape is contained 8. symbole name = nohy
Warning shape is contained 9. symbole name = nohy
Warning shape is contained 10. symbole name = nohy
Warning shape is contained 11. symbole name = nohy
Warning shape is contained 12. symbole name = nohy
Warning shape is contained 13. symbole name = nohy
Warning shape is contained 14. symbole name = nohy
Warning shape is contained 15. symbole name = ostatni
Warning shape is contained 16. symbole name = ostatni
Warning shape is contained 17. symbole name = ostatni
Warning shape is contained 18. symbole name = ostatni
Warning shape is contained 19. symbole name = ostatni
Warning shape is contained 20. symbole name = ostatni
Warning shape is contained 21. symbole name = ostatni
Warning shape is contained 22. symbole name = telo
Warning shape is contained 23. symbole name = telo
Warning shape is contained 24. symbole name = telo
Warning shape is contained 25. symbole name = telo
Warning shape is contained 26. symbole name = telo
Warning shape is contained 27. symbole name = telo
Warning shape is contained 28. symbole name = telo
Warning shape is contained 29. symbole name = Tween 3

Publish SWF completed! 0.88 sec


when converting swf to lwf in ruby i have this 2 warnings

C:\Ruby193\swf2lwf>ruby swf2lwf.rb dog.swf
WARN: Shape(16) is not rect.
WARN: bitmap(nohy_noha_b_z_natazena.png 96x111) is specified UVWH(0,0)-(5,6).


and when runing in unity i have this error

NullReferenceException: Object reference not set to an instance of an object
LWF.UnityRenderer.ResourceCache.<SetLoader>m__1D (System.String filename) (at Assets/Plugins/lwf/renderer/common/lwf_unity_resourcecache.cs:131)
LWF.UnityRenderer.ResourceCache.LoadLWFData (System.String filename, System.Func`2 lwfDataLoader) (at Assets/Plugins/lwf/renderer/common/lwf_unity_resourcecache.cs:161)
LWFPlayer.Load (System.String path, System.String texturePrefix, System.String fontPrefix, Single zOffset, Single zRate, Int32 renderQueueOffset, Int32 cachingFrames, UnityEngine.Camera camera, Boolean autoPlay, System.Func`2 lwfDataCallback, System.Action`1 lwfLoadCallback, System.Action`1 lwfDestroyCallback, System.Func`2 lwfDataLoader, System.Func`2 textureLoader, System.Action`1 textureUnloader) (at Assets/Plugins/lwf/wrapper/LWFPlayer.cs:103)
Dog.Start () (at Assets/Dog.cs:9)



thanks for your help

 

I've made a demo with LWF and posted a semi-tutorial about it: http://blog.sokay.net/2013/05/13/flash-animation-in-unity-with-lwf/

I hope it helps someone!

 

First I would like to say that LWF is really amazing! It's a pleasure using it.

I have an issue that I really hope there is a solution for. I'm currently trying to interlace two lwf animations in unity. While in the Unity scene these two lwf animation interlace in 3d space, one always renders completely on top of another. Here's a quick sketch I made below to demonstrate what I'm trying to accomplish. Each square represents a different symbol.



Currently the lwf animation that is closer to the camera will completely overlap the other (Which I don't want). Similar to the Image below.

Is this normal behavior? If so, is anyone aware of any solutions so that Interlacing of 2 lwf animations can be possible inside Unity?

Thank you for your time.

 

I have no idea whether this will work, but you might be able to try switching the camera to Orthographic or setting the Perspective camera to:

Code (csharp):

1.  
2. gameObject.camera.transparencySortMode = TransparencySortMode.Orthographic;
3.  

If that doesn't work, it seems like you'd need to build both "halves" into the same swf. I think you could have have two separate movieclips and have them both play with code to "move together".

 

Thanks for the reply sonofbryce.

From what I'm reading "TransparencySortMode.Orthographic" just makes it so that objects are sorted based on distance along the camera's view. Unfortunately This wont solve the problem of having 2 lwf objects interlacing properly.

For the project I'm working on I'm not able to build the two animations into the same swf, otherwise that wouldn't been the simplest most obvious solution.

If anyone have any other suggestions I would love to hear them. From my understanding the problem might be with the way the shaders are rendering the lwf animations. Currently they are rendering based on the lwf objects pivot position distance from the camera, so If i have two intersecting lwf objects, one lwf object will completly render ontop of the other(even though their meshes are intersecting or Interlacing in 3D space).

 

The same issue over here
All five images, created in flash by converting shapes into bitmaps, are imported into the unity project but in animation, the first one is replacing all the others...
Do you have any suggestions?

/* --- EDIT ---*/
instead of "LWFPlayer" try with "LWFObject"

 

Can someone please explain how to navigate flash timeline from unity?
I thought about something like:

onEvent(foo){
gotoAndPlay("bar");
}

thank you in advance

 

Hi! I have a problem! WHen I try to convert swf file by lwfs it show me error

swf2lwf caused an exception:
undefined method `width' for nil:NilClass

It's happen only when I use MovieClip in my flash animation! When I use bitmaps it's OK! But I need to use MovieClip! What should I do?

I use Adobe Flash Pro CS4! And set Flash Player 7 and Action Script 1.0 for export swf file!

 

I haven't seen this error but I'm sure LWF does not support vector graphics so that might be the cause. In Flash CS5.5 and CS6 you have the ability to convert shape (vector) to bitmap (raster) and with CS4 you'll have to do it elsewhere (Photoshop or Illustrator).
Good luck!

 

kazuki, we just did some quick tests with LWF and it's working fantastic. this tool is amazing!! thank you guys for making this opensource!

 

Hi,

first of all thanks for sharing LWF with us, it's a great tool!!

I have one question:
is it possible to call a kind of tellTarget Command from Unity to a clip inside a LWFMovie?

I basically need to trigger a Movieclip animation, without using gotoAndPlay command.

Any help is highly appreciated!
Thanks in advance.

All the best,
jan

PS: i wrote a jsfl script to replace all shapes with pngs, so they can be used with LWF if someone is interested.
PPS: solved it by converting everything into MovieClips and using GotoLabel to jump to a frame that calls tellTarget from the timeline.

 

Hey - this looks so great I am almost ready to hug somebody...

But can this be used together with 2D Toolkit?

 

Hi all,

Let me just say that this is one of the best tools for Unity I ever used, thanks to devs for making our lives easier with it.

Now, I have a bit of a problem with making lwf work for me.
Problem is when in Flash I put symbol under a symbol - I can successfully load animation in Unity, but I can't control it.
Any command that I put (stop, play, GotoFrame) it just gets ignored.

Could it be it's cause of this hierarchic structure? if yes is there any other way to do it?
What I'm trying to do is use parent symbol to mirror symbol underneath it - that way I don't have to rewrite all motion paths.

any help would be very much appreciated.

Thanks!

 

Hi all,

This tool is really amazing, so then to all involved in development.

I have a quick question. Is it possible to play a animation in reverse ?

 

Hi all and sorry I have not noticed so many questions on this thread! I feel like it's too late to answer for the questions, but it might help you or further users.

 

Could you try to use the latest LWF https://github.com/gree/lwf and LWFS https://github.com/gree/lwfs ? And if your flash data contains shapes, you should convert the shapes into bitmap. Please take a look at Adobe document http://help.adobe.com/en_US/flash/cs/using/WSb03e830bd6f770ee1f9eac2b12da610f99a-7fff.html .

 

Thank you, I really appreciate it

 

If you are using CombinedMeshRenderer, it always renders completely overlap the others. It doesn't allow to Z-sort for every single bitmap.

 

You can use LWFObject.GotoAndPlayMovie API for that. For example,

lwfObject.GotoAndPlayMovie("testMovie", "bar");

lwfObject.GotoAndPlayMovie("_root.layer.testMovie", "bar");

 

Could you try to use the latest LWF https://github.com/gree/lwf and LWFS https://github.com/gree/lwfs ? And if your flash data contains shapes, you should convert the shapes into bitmap. Please take a look at Adobe document http://help.adobe.com/en_US/flash/cs...f99a-7fff.html .

 

Thank you! BTW, LWF now supports Unity, HTML5, Cocos2d-x, and iOS UIKit

 

Yeah you can control movies via LWFObject GotoAndPlayMovie API, MoveMovie, RotateMovie, ScaleMovie, and so on.

 

Yes. LWF doesn't affect other components and plugins.

 

First of all, you should name the symbols which you want to control. LWFObject GotoAndPlayMovie API allows to use full path to the symbol like "_root.layer.animationMovie".

 

Yeah, try to use LWFObject.PrevFrameMovie API every update for the movie which you want to play an animation in reverse.

 

Hey guys,
I've been trying to use this today, but I can't get it to work correctly. The animations play with only one texture, so it looks awful. The test flash (01_animated_building) looks like a giant horse with a tiny horse moving on top of it.
Any suggestions?

 

I am using the latest Unity build and latest LWF code. View attachment 84103

 

Sorry for the spam. I managed to fix this problem by using the LWFSampleObject in the sample project. I was trying to inherit from LWFPlayer like instructed in the video tutorial. LWF devs, please note this and either fix the video or fix the LWFPlayer object.

That said, I love this tool, it's brilliant.

 

I wanted to share to everyone what we were able to create with this tool for this weekend's Global Game Jam.

Thanks



Windows: http://bit.ly/1i2uuda
Mac: http://bit.ly/1iC0LKO

 

Wow, Cool! Thank you for sharing it

Yeah we want to update outdated video and samples if we have enough time to do it.

 

We updated LWF to support Full Color Transform.
https://github.com/gree/lwf/commit/0b7176b5558405e62e70be65d6210f97234815c4

Now you can use the additional color parameters in Advanced Color Transform.


However it will affect the rendering performance (usually 15% or more, it depends on data and GPU) because it uses a little more instructions in the fragment shader, so it is disabled by default. Set useAdditionalColor argument true of LWFObject and LWFPlayer Load API while you want to use the feature.

 

Hi there. I really like using LWF as a format and have used it a lot in a new project I am working on.

I wanted to know though if is possible to use multiple atlases. I have a character, a Knight, that works a treat. But I want to be able to customise his armour, his weapon and his helmets. Currently I am limited to the 2048x2048 texture atlas size, but that limits the amount of variation I can have.

So I wanted to know, is it possible to be able to handle multiple texture atlases or for a single export? Or would the best approach to be to dynamically create the texture sheet to use on the character. I think this would be tricky though as I would have to lose the cropping of transparent pixels in texturePacker.

Any insight would be really helpful, as I really like LWF and I dont want to swap to another animation format!