search

hyperandroid / CAAT

Canvas Advanced Animation Toolkit
hyperandroid.github.com/CAAT
MIT License
727 stars 117 forks source link

Module loading order broken on 0.5? #96

Closed arnuschky closed 11 years ago

arnuschky commented 11 years ago

I switched to 0.5 today and I am experiencing weird issues. After I changed all references of CAAT.B2DPolygonBody to CAAT.Foundation.Box2D.B2DPolygonBody games loads fine on Firefox. But on Chrome the CAAT.Foundation.Box2D module isn't found. I end up with the following log messages:

Uncaught TypeError: Cannot call method 'createPolygonBody' of undefined scene.js:201 Created module: CAAT.Foundation.Box2D.B2DBodyActor caat.js:269 Created module: CAAT.Foundation.Box2D.B2DCircularBody caat.js:269 Created module: CAAT.Foundation.Box2D.B2DPolygonBody caat.js:269

Sometimes it works on Chrome, but I wasn't able to figure out when. I have the impression that this is some async module loading issue.

arnuschky commented 11 years ago

Can confirm that it works always on Firefox and Opera, but like 1 out of 5 times on Chrome.

Problem also present when using the CocoonJS Android loader!

hyperandroid commented 11 years ago

Will check this. The module manager is supposed to honor more specific paths. Have not seen this before. Demo12, box2d, always works for me. Argh. BTW, i'm sorry for the extra work renaming CAAT box2d related objects. The module manager defines an 'aliases' clause which is used to keep backward compatibility with class names, but forgot to add aliases for Box2d objects.

will check the loader. Thanks.

arnuschky commented 11 years ago

I seem to be having the same/a related problem when subclassing from Box2D-related classes. The code below used to work fine (and the same pattern is used in other parts of the app). Now, this code throws and error: "myGame.BallBodyActor.superclass is undefined." Reproducible in Chrome, and this time also in Fireworks. Opera still works fine.

(function () { myGame.BallBodyActor = function () { myGame.BallBodyActor.superclass.constructor.call(this); return this }; myGame.BallBodyActor.prototype = { someFunction : funtion() { } }; extend(myGame.BallBodyActor, CAAT.Foundation.Box2D.B2DCircularBody) })();

hyperandroid commented 11 years ago

Hi,

i've tested that sample inside demo12, which uses box2d and works fine. could you try that code there too ? thanks

arnuschky commented 11 years ago

Indeed, works fine for me as well (after I created a link from Box2D -> Box2d in src/Foundation)

I assume that it works fine because, in this example, your are loading the modules one by one from different files. Do I need a module loader definition as well when using the single-file distribution? For the moment, we just include the following lines at the top of our html:

<script type="text/javascript" src="libs/caat.js"></script>
<script type="text/javascript" src="libs/caat-box2d.js"></script>
<script type="text/javascript" src="libs/Box2dWeb-2.1.a.3.js"></script>

The rest is as indicated in the tutorials.

hyperandroid commented 11 years ago

There's an error in Box2D package definition. It is Box2d and must be Box2D. Applying a hot fix.

arnuschky commented 11 years ago

I realized that as well and fixed it on my system yesterday. Anyways, things did not work when using the single-file distribution of CAAT - maybe because we didn't use the module loader. I now started using the separate-file distribution with the module loader and everything works fine.

We had additional problems due to file loading order. Our own game uses multiple classes in multiple files which depend on each other and on CAAT classes We fixed this by using the CAAT module loader for our own classes as well. I included a description of this below for documentation:

 window.addEventListener('load', load(), false);

 function load() {
    CAAT.ModuleManager.

     baseURL("js/").

     // get modules, and solve their dependencies.
     bring([
        "CAAT.Foundation.Director",
        "CAAT.Foundation.Actor",
        "CAAT.Foundation.ActorContainer",
        "CAAT.Foundation.UI.TextActor",
        "CAAT.Foundation.UI.PathActor",
        "CAAT.Foundation.UI.Layout.BoxLayout",
        "CAAT.Foundation.Box2D.B2DBodyActor",
        "CAAT.Foundation.Box2D.B2DPolygonBody",
        "CAAT.Foundation.Box2D.B2DCircularBody",
        "CAAT.Module.Image.Preloader.Preloader",
        "CAAT.Module.Image.Preloader.ImagePreloader",

        "MyGame.Class1",
        "MyGame.Class2"
     ]).

     // this function will be firer every time all dependencies have been solved.
     // if you call again bring, this function could be fired again.
     onReady(function() {

        var canvascontainer = document.createElement('canvas');
        document.body.appendChild(canvascontainer);

        var director = new CAAT.Director().
           initialize(
           1024,
           768,
           canvascontainer);

        // Preload images.
        new CAAT.ImagePreloader().loadImages(
           [
              {id:'buttons', url:'images/buttons.png'}
           ],
           function on_load(counter, images) {

              if (counter === images.length) {

                 director.emptyScenes();
                 director.setImagesCache(images);

                 // create your scenes here

                 director.switchToScene(0);
                 CAAT.loop(60);
              }
           }
        );
     });

And classes look as follows:

 CAAT.Module({
   defines : "MyGame.Class1",
   depends : [ "CAAT.Foundation.Actor" ],
   extendsClass : "CAAT.Foundation.Actor",

   extendsWith : function () {
     return {

        variable : null, 

        init : function (variable) {
           this.variable = variable;
           return this
        }
     };
   }
 });
hyperandroid commented 11 years ago

If your own classes use CAAT module structure, you must load them using the module manager, otherwise, dependencies may not resolve properly. The module manager is reentrant, so you could load full caat files (the ones under build folder) and then use the module loader to solve your code, or even, on onReady callback invocation, instrument the module loader to bring other clases like:

CAAT.ModuleManager.
    // set the loader base URL
        baseURL("src/").

    // set some resolution paths
        setModulePath("CAAT.Core",              "Core").
        setModulePath(...).

    // get modules, and solve their dependencies.
    // MoMa will end up loading many more modules than these.
        bring(
        [
            "CAAT.PathUtil.Path",
            "..."
        ]).

    // this function will be fired after all modules have been loaded and all dependencies
    // have been solved.
    // it may imply loading other module files and solving its dependencies as well.
    // if you call bting again, this function could be re-fired.
        onReady(function () {

            CAAT.ModuleManager.setModulePath(...).bring(...)
        });

I think the problem with box2D is (apart from the name clash) the fact that the module manager can bring library files as well as dependencies. CAAT.Foundation.Box2D.B2DBodyActor tries to load box2d library file as a dependency like as follows:

CAAT.Module({
    defines:"CAAT.Foundation.Box2D.B2DBodyActor",
    depends:[
        "Lib/Box2dWeb-2.1.a.3.js",
        "CAAT.Foundation.Actor"
    ],
    aliases : ...

this basically expects a Lib folder with the Box2dWeb file inside at your baseURL definition. For the complete CAAT files, it is just nothing, so the place where the html file is located at must have the Lib folder.

Maybe this is your problem ?

arnuschky commented 11 years ago

Indeed, it works now. I guess the problem was the missing module loader. Thanks a lot for your help.

hyperandroid commented 11 years ago

The module loader is expected to be used to load caat base code, but it is perfectly suited for 3rd party code as well. i've a missing task, which is a node script that will pack caat and your code alltogether into one single file. you can call at any given moment CAAT.ModuleManager.status() to see current loader status, missing dependencies, etc. and CAAT.ModuleManager.solvedInOrder() which dumps a list of how modules where solved instead of the loading order. The result from solvedInOrder() will be input to this script since the module loader already knows a baseURL and modules' path definition. On the other hand, you can have your own code defined howerver you'd like to. It is not mandatory to follow CAAT module structure. You could use your own module loader, other 3rd party class and modules loaders or none at all keeping your own file script order. You can achieve this by using the pre-packed caat files located under the 'build' directory. These files use the module structure, but are auto solved since all necessary dependencies are in the same file.

thanks for the email you sent to help scout. any suggestion about how to organize the content ? we're into it already, but feedback is always welcome.

thanks.

2012/11/26 arnuschky notifications@github.com

Indeed, it works now. I guess the problem was the missing module loader. Thanks a lot for your help.

— Reply to this email directly or view it on GitHubhttps://github.com/hyperandroid/CAAT/issues/96#issuecomment-10714272.

arnuschky commented 11 years ago

Thanks for your reply. That clears things up. We will stick to your module loader, as it does its job well and we're happy with it. I just have to find out how to get autocompletion working with my IDE (WebStorm) but that's another matter. :)

thanks for the email you sent to help scout.

Sorry, I do not understand what you mean by "help scout". Do you mean the stuff I've posted on the CAAT mailing list or the mail I've sent to Ludei support?

Cheers, Arne

2012/11/26 arnuschky notifications@github.com

Indeed, it works now. I guess the problem was the missing module loader. Thanks a lot for your help.

— Reply to this email directly or view it on GitHubhttps://github.com/hyperandroid/CAAT/issues/96#issuecomment-10714272.

Reply to this email directly or view it on GitHub: https://github.com/hyperandroid/CAAT/issues/96#issuecomment-10724841

hyperandroid commented 11 years ago

I was referring to Ludei support.

2012/11/26 arnuschky notifications@github.com

Thanks for your reply. That clears things up. We will stick to your module loader, as it does its job well and we're happy with it. I just have to find out how to get autocompletion working with my IDE (WebStorm) but that's another matter. :)

thanks for the email you sent to help scout.

Sorry, I do not understand what you mean by "help scout". Do you mean the stuff I've posted on the CAAT mailing list or the mail I've sent to Ludei support?

Cheers, Arne

2012/11/26 arnuschky notifications@github.com

Indeed, it works now. I guess the problem was the missing module loader. Thanks a lot for your help.

— Reply to this email directly or view it on GitHub< https://github.com/hyperandroid/CAAT/issues/96#issuecomment-10714272>.

Reply to this email directly or view it on GitHub: https://github.com/hyperandroid/CAAT/issues/96#issuecomment-10724841

— Reply to this email directly or view it on GitHubhttps://github.com/hyperandroid/CAAT/issues/96#issuecomment-10726490.

arnuschky commented 11 years ago

Hey,

thanks, I spoke with Ludei support directly.

One thing that would really help is to know which version of the CocoonJS launcher works well in conjunction with which version of CAAT. An info like "stable version: launcher 1.2 + CAAT 0.5 build 23" would be really helpful. Up to know we always waste a lot of time because the latest launcher and the latest CAAT version do not always seem to play along.

Thanks for all the prompt help we are receiving!

Arne

On Mon, 26 Nov 2012 10:10:46 -0800 Ibon Tolosana notifications@github.com wrote:

I was referring to Ludei support.

  • i

2012/11/26 arnuschky notifications@github.com

Thanks for your reply. That clears things up. We will stick to your module loader, as it does its job well and we're happy with it. I just have to find out how to get autocompletion working with my IDE (WebStorm) but that's another matter. :)

thanks for the email you sent to help scout.

Sorry, I do not understand what you mean by "help scout". Do you mean the stuff I've posted on the CAAT mailing list or the mail I've sent to Ludei support?

Cheers, Arne

2012/11/26 arnuschky notifications@github.com

Indeed, it works now. I guess the problem was the missing module loader. Thanks a lot for your help.

— Reply to this email directly or view it on GitHub< https://github.com/hyperandroid/CAAT/issues/96#issuecomment-10714272>.

Reply to this email directly or view it on GitHub: https://github.com/hyperandroid/CAAT/issues/96#issuecomment-10724841

— Reply to this email directly or view it on GitHubhttps://github.com/hyperandroid/CAAT/issues/96#issuecomment-10726490.

Reply to this email directly or view it on GitHub: https://github.com/hyperandroid/CAAT/issues/96#issuecomment-10726603

hyperandroid commented 11 years ago

Important to note:

CAAT and CocoonJS are two different things. they don't relate to one another. Except for the fact that i try keeping it as compatible as possible.

2012/12/2 arnuschky notifications@github.com

Hey,

thanks, I spoke with Ludei support directly.

One thing that would really help is to know which version of the CocoonJS launcher works well in conjunction with which version of CAAT. An info like "stable version: launcher 1.2 + CAAT 0.5 build 23" would be really helpful. Up to know we always waste a lot of time because the latest launcher and the latest CAAT version do not always seem to play along.

Thanks for all the prompt help we are receiving!

Arne

On Mon, 26 Nov 2012 10:10:46 -0800 Ibon Tolosana notifications@github.com wrote:

I was referring to Ludei support.

  • i

2012/11/26 arnuschky notifications@github.com

Thanks for your reply. That clears things up. We will stick to your module loader, as it does its job well and we're happy with it. I just have to find out how to get autocompletion working with my IDE (WebStorm) but that's another matter. :)

thanks for the email you sent to help scout.

Sorry, I do not understand what you mean by "help scout". Do you mean the stuff I've posted on the CAAT mailing list or the mail I've sent to Ludei support?

Cheers, Arne

2012/11/26 arnuschky notifications@github.com

Indeed, it works now. I guess the problem was the missing module loader. Thanks a lot for your help.

— Reply to this email directly or view it on GitHub< https://github.com/hyperandroid/CAAT/issues/96#issuecomment-10714272>.

Reply to this email directly or view it on GitHub: https://github.com/hyperandroid/CAAT/issues/96#issuecomment-10724841

— Reply to this email directly or view it on GitHub< https://github.com/hyperandroid/CAAT/issues/96#issuecomment-10726490>.

Reply to this email directly or view it on GitHub: https://github.com/hyperandroid/CAAT/issues/96#issuecomment-10726603

— Reply to this email directly or view it on GitHubhttps://github.com/hyperandroid/CAAT/issues/96#issuecomment-10933611.