LWF 101

Hiroyuki Haga

GREE, CTO Office

1. Issue that LWF will resolve.

2. LWF Overview

3. LWF Adoption

Agenda

Issues

• Because the look-and-feel was poor, users don’t want to try core-features of the your service that you’ve done very well.

Common issue at engineering part 1 “Sealed package”

It’s too difficult for me to try..

• Users started to use and respect the your service and core-features when the look-and-feels was improved even if you didn’t apply any modifications to core-features.

Common issue at engineering part 2 “Package is also big part of application”

Great service!

• By the way, I have evaluated goodness of core-features based on look-and-feel in some cases.

Common issue at engineering part 3

Wow! I “Looks” great service!

• “The exports know best.” is fact.

• I’m a not artist. I’m an engineer.

Common issue at engineering part 4

• I had to reproduce Flash animation’s behaviors by using platform specific scripts manually.

Common(?) issue at engineering part 5

Convert manually xD

Platform specific scripts

• Prevent a “sealed application”.

• Look-and-feel is also big part of application

• I’m feeling confidence about core-mechanics, problem is looks.

• Better leave it to a specialist

• “I just want to play FLASH animation on ****** platform!!!”

Issues Overview Adoption Issue

LWF Overview

LWF is an open source, 2D user-interface and 2D animation framework that enables to extract “art and UI design” part perfectly.

LWF Overview Overview Adoption Issue

LWF framework affords artists to create 2D user-interface and 2D animation contents in FLASH format for both HTML5 and Unity application.

LWF framework affords you to focus on engineering part only.

LWF framework makes you happy.

LWF Overview cont. Overview Adoption Issue

• What you don’t need to do are… • Tweak position of text or image by yourselves.

• Control tween animation by yourselves.

• Control complex UI events such as firing an “pushed” animation after playing specific animation on button is pressed.

• Boring tasks such as loading images for playing animation…

• What you need to do are… • Find a nice FLASH artist

• Under stand LWF’s limitation

• Convert FLASH animation by using LWF’s converter

LWF Overview Overview Adoption Issue

• HELP! We need FLASH artists!

So… Overview Adoption Issue

• Main Promise：

A FLASH artist is in your team.

• Benefits: “The exports know best”

LWF Overview .. Overview Adoption Issue

LWF Adoption

• For engineer

• For artist

• For committer

LWF Adoption Overview Adoption Issue

Resource files

• https://github.com/gree/lwf package includes: • JSFL Flash script that publishes scene into LWF preferred SWF file.

• Converter that generates LWF file and images from the given SWF file.

• Javascript LWF player that works on browser

• C# LWF player that works in the Unity

LWF package overview

Converter (Ruby)

LWF player

for Browser (Javascript)

LWF player for Unity

(C#)

Flash script for publishing

(JSFL)

SWF

PNG PNG

LWF

Overview Adoption Issue

LWF preview environment “LWFS”

Resource files

• Production ready LWF preview environment for Windows and Mac OSX

• Automated installation process for smooth adoption

• Prompt iteration by automated convert and deploy.

• https://github.com/gree/lwfs

LWFS

Converter (Ruby)

LWF player

for Browser (Javascript)

Flash script for publishing

(JSFL)

SWF

PNG PNG

LWF

Overview Adoption Issue

Resource files

• LWF package contains variety of options that are required in production use for maximize rendering performance and productivity.

LWF package in detail

Converter (Ruby)

LWF player

for Browser (Javascript

)

LWF player for Unity

(C#)

Flash script for publishing

(JSFL)

SWF

PNG

js

(LWF doesn’t include this)

Sprite Atlas generator like Texture Packer.

PNG

Json

PNG

LWF

Overview Adoption Issue

1. Source a “lwf.js” in the header of html.

2. Initialize LWF instance with specified resource files.

3. Joy… 1. Play FLASH animation

2. Jump to Label in FLASH animation

3. Implement function that will be called by button press event in FLASH animation.

For engineer Overview Adoption Issue

Demo Overview Adoption Issue

• Make a FLASH animation with movie clip by using key-framing only. Note that shape is not supported.

• Add labels, that will be specified by engineer, to timeline.

• Add actions, that will be specified by engineer, to button that will be fired after button-pressed-animation played. • For Javascript writer : Add view login javascript to /* js */

• Download LWF previewer “LWFS” from http://github.com/gree/lwfs

• Preview your flash animation file by using LWFS.

For artist Overview Adoption Issue

Demo Overview Adoption Issue

• Read Kazuki’s presentation about implementation http://gree.github.com/lwf/presentation20121115

• Fork http://github.com/gree/lwf

• Send pull request to http://github.com/gree/lwf

For committer

Demo Overview Adoption Issue

• For engineer You can enjoy paradise after patient of adoption.

• For artist You can enjoy paradise after patient of adoption.

• For committer Let’s make paradise

LWF Adoption wrap-up Overview Adoption Issue

• Look-and-feel is important also. Let’s make it “Better leave it to a specialist.”

• LWF Framework enables “Better leave it to a specialist.”

• By LWF adoption, enjoy “Better leave it to a specialist.”

Wrap up