导出CreateJS lib资产以与require.js一起使用

debugcn 发表于 Dev

羽毛球猫

我正在尝试使用从Flash IDE导出的资产（矢量，影片剪辑等）用于CreateJS，但是我们正在使用require.js来管理我们的JS代码，因此导出的lib JS与使用require.js加载不直接兼容。

有没有人想出要对导出的JS进行哪些更改以使其适合与require.js一起使用？这是此类导出的JS代码的示例：

(function(lib, img, cjs)
{

    var p; // shortcut to reference prototypes

    // stage content:
    (lib.Lib = function()
    {
        this.initialize();

        // Layer 1
        this.background = new lib.Background();
        this.background.setTransform(320, 240, 1, 1, 0, 0, 0, 320, 240);

        this.addChild(this.background);
    }).prototype = p = new cjs.Container();
    p.nominalBounds = new cjs.Rectangle(0, 0, 640, 480);


    // symbols:
    (lib.background = function()
    {
        this.initialize(img.background);
    }).prototype = p = new cjs.Bitmap();
    p.nominalBounds = new cjs.Rectangle(0, 0, 320, 480);


    (lib.flashlogo = function()
    {
        this.initialize(img.flashlogo);
    }).prototype = p = new cjs.Bitmap();
    p.nominalBounds = new cjs.Rectangle(0, 0, 894, 894);


    (lib.Background = function()
    {
        this.initialize();

        // Layer 1
        this.instance = new lib.background();
        this.instance.setTransform(640, 0, 1, 1, 0, 0, 180);

        this.instance_1 = new lib.background();

        this.addChild(this.instance_1, this.instance);
    }).prototype = p = new cjs.Container();
    p.nominalBounds = new cjs.Rectangle(0, 0, 640, 480);


    (lib.BubbleVector = function()
    {
        this.initialize();

        // Layer 1
        this.shape = new cjs.Shape();
        this.shape.graphics.f().s("rgba(215,254,255,0.741)").ss(8.7, 1, 1).p("EArYgrXQR+R+AAZZQAAZax+R+Qx+R+5aAAQ5ZAAx+x+Qx+x+AA5aQAA5ZR+x+QR+x+ZZAAQZaAAR+R+g");

        this.shape_1 = new cjs.Shape();
        this.shape_1.graphics.rf([
            "rgba(149,235,252,0)", "rgba(149,235,252,0.102)", "rgba(149,235,252,0.451)", "rgba(145,173,255,0.576)",
            "rgba(67,170,233,0.851)"
        ], [
            0, 0.357, 0.745, 0.922, 1
        ], -0.2, -0.1, 0, -0.2, -0.1, 389.2).s().p("EgrXArYQx+x+AA5aQAA5ZR+x+QR+x+ZZAAQZaAAR+R+QR+R+AAZZQAAZax+R+Qx+R+5aAAQ5ZAAx+x+gAOgNzQhWBXAAB7QAAB7BWBWQBYBYB7gBQB6ABBXhYQBXhWAAh7QAAh7hXhXQhXhXh6ABQh7gBhYBXgA2k2IQg3A4AABOQAABPA3A3QA5A4BOABQBPgBA3g4QA4g3AAhPQAAhOg4g4Qg3g4hPAAQhOAAg5A4g");

        this.shape_2 = new cjs.Shape();
        this.shape_2.graphics.rf(["#FFEBFC", "rgba(189,238,250,0.137)"], [
            0.42, 1
        ], 0, 0, 0, 0, 0, 31.5).s().p("AjRDQQhWhWAAh6QAAh5BWhXQBYhXB5AAQB6AABXBXQBXBXAAB5QAAB6hXBWQhXBYh6AAQh5AAhYhYg");
        this.shape_2.setTransform(113.9, 109.4);

        this.shape_3 = new cjs.Shape();
        this.shape_3.graphics.rf(["#FFEBFC", "rgba(189,238,250,0.251)"], [
            0.455, 1
        ], 0, 0, 0, 0, 0, 20.2).s().p("AiFCFQg4g3ABhOQgBhNA4g4QA4g4BNAAQBOAAA4A4QA3A4AABNQAABOg3A3Qg4A4hOABQhNgBg4g4g");
        this.shape_3.setTransform(-131, -128.2);

        this.addChild(this.shape_3, this.shape_2, this.shape_1, this.shape);
    }).prototype = p = new cjs.Container();
    p.nominalBounds = new cjs.Rectangle(-392.6, -392.6, 785.3, 785.3);


    (lib.Bubble = function(mode, startPosition, loop)
    {
        this.initialize(mode, startPosition, loop, {});

        // Layer 1
        this.instance = new lib.BubbleVector();
        this.instance.setTransform(0, 0, 0.4, 0.4);

        this.timeline.addTween(cjs.Tween.get(this.instance).to({scaleY: 0.4, skewX: 3.3}, 11).to({skewX: -3.1}, 24).to({scaleY: 0.4, skewX: 0}, 12).wait(1));

    }).prototype = p = new cjs.MovieClip();
    p.nominalBounds = new cjs.Rectangle(-157, -157, 314.1, 314.1);

})(lib = lib || {}, images = images || {}, createjs = createjs || {});
var lib, images, createjs;

...你看，这很混乱。

安德鲁·舒斯塔里约夫（Andrew Shustariov）

好的，这就是我得到的：

据我从您的代码了解-您想对您的libvar进行乘方运算。

因此，这是RequireJs的基本示例：

index.html

<!doctype html>
<html>
    <head>
    </head>
    <body>
        <div id="stage"></div>
        <script data-main="main" src="require.js"></script>
    </body>
</html>

main.js

require.config({
    paths : {
        createJs : '//code.createjs.com/createjs-2013.12.12.min'
    },
    shim : {
        createJs : {exports: 'createjs'}
    }
});

require(['./myModule'], function(myModule) {
    console.log(myModule);
});

和您的模块：

define(['createJs'], function(cjs) {

//(function(lib, img, cjs)
//{
var lib = lib || {};
    var p;  //shortcut to reference prototypes

    // stage content
    (lib.Lib = function()
    {
        this.initialize();

        // Layer 1
        this.background = new lib.Background();
        this.background.setTransform(320, 240, 1, 1, 0, 0, 0, 320, 240);

        this.addChild(this.background);
    }).prototype = p = new cjs.Container();
    p.nominalBounds = new cjs.Rectangle(0, 0, 640, 480);


    // symbols
    (lib.background = function()
    {
        this.initialize(img.background);
    }).prototype = p = new cjs.Bitmap();
    p.nominalBounds = new cjs.Rectangle(0, 0, 320, 480);


    (lib.flashlogo = function()
    {
        this.initialize(img.flashlogo);
    }).prototype = p = new cjs.Bitmap();
    p.nominalBounds = new cjs.Rectangle(0, 0, 894, 894);


    (lib.Background = function()
    {
        this.initialize();

        // Layer 1
        this.instance = new lib.background();
        this.instance.setTransform(640, 0, 1, 1, 0, 0, 180);

        this.instance_1 = new lib.background();

        this.addChild(this.instance_1, this.instance);
    }).prototype = p = new cjs.Container();
    p.nominalBounds = new cjs.Rectangle(0, 0, 640, 480);


    (lib.BubbleVector = function()
    {
        this.initialize();

        // Layer 1
        this.shape = new cjs.Shape();
        this.shape.graphics.f().s(rgba(215,254,255,0.741)).ss(8.7, 1, 1).p("EArYgrXQR+R+AAZZQAAZax+R+Qx+R+5aAAQ5ZAAx+x+Qx+x+AA5aQAA5ZR+x+QR+x+ZZAAQZaAAR+R+g");

        this.shape_1 = new cjs.Shape();
        this.shape_1.graphics.rf([
            rgba(149,235,252,0), rgba(149,235,252,0.102), rgba(149,235,252,0.451), rgba(145,173,255,0.576),
            rgba(67,170,233,0.851)
        ], [
            0, 0.357, 0.745, 0.922, 1
        ], -0.2, -0.1, 0, -0.2, -0.1, 389.2).s().p("EgrXArYQx+x+AA5aQAA5ZR+x+QR+x+ZZAAQZaAAR+R+QR+R+AAZZQAAZax+R+Qx+R+5aAAQ5ZAAx+x+gAOgNzQhWBXAAB7QAAB7BWBWQBYBYB7gBQB6ABBXhYQBXhWAAh7QAAh7hXhXQhXhXh6ABQh7gBhYBXgA2k2IQg3A4AABOQAABPA3A3QA5A4BOABQBPgBA3g4QA4g3AAhPQAAhOg4g4Qg3g4hPAAQhOAAg5A4g");

        this.shape_2 = new cjs.Shape();
        this.shape_2.graphics.rf(["#FFEBFC", rgba(189,238,250,0.137)], [
            0.42, 1
        ], 0, 0, 0, 0, 0, 31.5).s().p("AjRDQQhWhWAAh6QAAh5BWhXQBYhXB5AAQB6AABXBXQBXBXAAB5QAAB6hXBWQhXBYh6AAQh5AAhYhYg");
        this.shape_2.setTransform(113.9, 109.4);

        this.shape_3 = new cjs.Shape();
        this.shape_3.graphics.rf(["#FFEBFC", rgba(189,238,250,0.251)], [
            0.455, 1
        ], 0, 0, 0, 0, 0, 20.2).s().p("AiFCFQg4g3ABhOQgBhNA4g4QA4g4BNAAQBOAAA4A4QA3A4AABNQAABOg3A3Qg4A4hOABQhNgBg4g4g");
        this.shape_3.setTransform(-131, -128.2);

        this.addChild(this.shape_3, this.shape_2, this.shape_1, this.shape);
    }).prototype = p = new cjs.Container();
    p.nominalBounds = new cjs.Rectangle(-392.6, -392.6, 785.3, 785.3);

    // MovieClip is UNDEFINED HERE!!!
    /*(lib.Bubble = function(mode, startPosition, loop)
    {
        this.initialize(mode, startPosition, loop, {});

        // Layer 1
        this.instance = new lib.BubbleVector();
        this.instance.setTransform(0, 0, 0.4, 0.4);

        this.timeline.addTween(cjs.Tween.get(this.instance).to({scaleY : 0.4, skewX : 3.3}, 11).to({skewX : -3.1}, 24).to({scaleY : 0.4, skewX : 0}, 12).wait(1));

    }).prototype = p = new cjs.MovieClip();
    p.nominalBounds = new cjs.Rectangle(-157, -157, 314.1, 314.1);*/

//})(lib = lib || {}, images = images || {}, createjs = createjs || {});
//var lib, images, createjs;
return lib;
});

如您所见，您只需要将模块包装在define回调和return所有需要的内容中。

而且，似乎CDN中的createJs不仅是lib，这在这里是必需的，因为它不包含MovieClip类，因此我暂时将其注释掉。如果您可以清除使用的库，那么我可以解决一个例子。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。