We will create an application framework to simplify the MadButterfly for javascript programming. We list all goals and ideas in this page. It's welcome for anybody to join this work.

Hello, world

First of all, we need to build a minimal application template.

var mbfly=require("mbfly");
var app= new mbfly.app("main.svg");

app.loop(); 

The above four lines of code can be used to create an MadButterfly application. You use use inkscape to compose the main.svg. It's free to add any elements to the screen. The art designer can edit the main.svg by using any tools which will keep all attributes of SVG.

Keyboard and Remote Control

Touch screen

Scene change

The scene is actually a set of groups inside a SVG file. When we switch to a scene, it means that we hide all groups unless the group is part of the scene. Inside the SVG file, it is defined as a scenes tag inside the metadata section. The loadSVG() will parse this section and build a scene table. We can use

    app.changeScene(4)

to switch to scene 4. In addition, we can use name instead of number as well.

    app.changeScene('stage')

The name can be assigned by the scene editor. We can give any frame a name. The scene is defined as

<mb:scenes>

    <mb:scene start="1" end="3" ref="g3344"/>

    <mb:scene start="2" end="3" ref="g4444"/>

    <mb:scenename frame="3" name="stage"/>

</mb:scenes>

In addition, we can define a callback function when the scene is active. For example,

    app.addSceneListener(3, callback)

The callback will be called when the scene is switched to scene 3.

Browser support

The MadButterfly application framework can be executed in the browse which support SVG with animation. Please refer to the BrowserPorting for the details.