Inconsistencies and bad documentation

robinduckett commented 12 years ago

Javascript errors when switching between caat-css.js and caat.js
ImageActor et al not available in caat-css.js
More javascript errors when attempting to use the minified versions of any of the library
Documentation states caat.js "covers it all" but then doesn't supply examples on how to switch rendering from Canvas to CSS/Dom. Is it even possible to switch? Or must caat.js be changed for caat-css.js? Where are the other Actors when this happens?

Whilst I commend your efforts and am really eager to use this library, it's basically a non starter for me at this point since it just doesn't work.

hyperandroid commented 12 years ago

Hey Robin, thanks for your valuable feedback.

2011/11/25 Robin Duckett < reply@reply.github.com

Javascript errors when switching between caat-css.js and caat.js

this should not happen, and will check it out. could you be more specific ? i work ona dayly basis switching from caat to caat-js and vice versa, y don't get them. maybe i've uploaded incorrect minified versions ?

ImageActor et all not available in caat-css.js

as the documentation says, those objects are deprecated. its functionality is already available on CAAT.Actor object which is the preferred and only supported way of using images/sprites/buttons, etc.

More javascript errors when attempting to use the minified versions of any of the library

Documentation states caat.js "covers it all" but then doesn't supply examples on how to switch rendering from Canvas to CSS/Dom. Is it even possible to switch? Or must caat.js be changed for caat-css.js? Where are the other Actors when this happens?

maybe should clarify that a little bit more. to switch renderers, you must use different script library files and can't use at the same time caat and caat-css files on the same web document. apart from that, everything else is handled by the library. some operations can't be handled on CSS renderer since there's no rendering context available on a DOM. that said, drawing lines, etc. won't be automatically handled.

Whilst I commend your efforts and am really eager to use this library, it's basically a non starter for me at this point since it just doesn't work.

This project is managed by a one-army man. There're some project running on top of it, and some more are being developed right now. I'd have liked you decided to do so as well with yours. I'm improving this code every day, hope it will fit your needs in the near future. Until then, your feedback is highly appreciated.

Best, -ibon

Reply to this email directly or view it on GitHub: https://github.com/hyperandroid/CAAT/issues/20

robinduckett commented 12 years ago

Hi Ibon,

Thanks for your quick response.

I've managed to get it working, the minified files are still producing errors for me, and I have figured out how to switch rendering by changing the javascript file depending on what I'm going for.

More concerns:

Resize events work up until a point, but then stop. If you do the following:

var Scene;
var Director;

(function() {
  function scene() {
    Scene = Director.createScene();

    var bg = new CAAT.ActorContainer()
    .setBounds(0, 0, Director.width, Director.height)
    .setFillStyle('#333');

    Scene.addChild(bg);

    var img = new CAAT.Actor()
    .setBackgroundImage(Director.getImage('car1'));

    Scene.addChild(img);
  }

  function init() {
    Director = new CAAT.Director()
    .initialize(700, 300, document.getElementById('gallery'))
    .setClear(false);

    Director.enableResizeEvents(CAAT.Director.prototype.RESIZE_WIDTH);

    new CAAT.ImagePreloader().loadImages(
      [
        {id: 'car1', url: 'http://dark-car-wallpaper.carwallpapersdesktop.co.uk/images/street-car-wallpapers-3.jpg'},
        {id: 'car2', url: 'http://dark-car-wallpaper.carwallpapersdesktop.co.uk/images/street-car-wallpapers-2.jpg'},
        {id: 'car3', url: 'http://dark-car-wallpaper.carwallpapersdesktop.co.uk/images/street-car-wallpapers-1.jpg'}
      ],
      function(counter, images) {
        console.log(counter, images);

        if (counter == images.length) {
          Director.setImagesCache(images);
          scene();
        }
      }
    );

    CAAT.loop(60);
  }

  init();
})();

Then after the page gets past 1760px wide, the background no longer gets set and it just appears while on the right hand side.

No way to specify a margin on a resized scene

So for example if I wanted the above scene to have a 20px border on the left and right hand side, there is no way to do this currently? Or maybe I have just missed it again.

Resize events don't work on Firefox, at all.

hyperandroid commented 12 years ago

Hey Robin,

regarding the px size limit i can (fortunately) say it doesn't seem to be a caat issue. i've tested on chrome and the behavior is the one you describe, but doesn't seem to be happening in FF. About Scenes on a Director, scenes are meant to be top level containers, and should occupy the whole area. that said, you should not set bounds on scene elements. I sugest you adding a container on the scene, set its bounds, and add the actor with your car to is, like this:

var con= new CAAT.ActorContainer(). setBounds(20,20,director.width-20,director.height-20). addActor( your_actor_with_image )

scene.addActor(con);

the only concern with this is that the bounds are defined for the current director size, and it is meant to be resized. that's why you have the opportunity to set an on-resize callback function so you can reset the size as:

director.enableResizeEvents( CAAT.Director.prototype.RESIZE_BOTH, function resizeCallback(director,w,h) { con.setBounds(20,20,director.width-20,director.height-20); } );

about your js errors with different source files i can't figure them out. could you please send me a capture of your js console ?

best -ibon

2011/11/25 Robin Duckett < reply@reply.github.com

Hi Ibon,

Thanks for your quick response.

I've managed to get it working, the minified files are still producing errors for me, and I have figured out how to switch rendering by changing the javascript file depending on what I'm going for.

More concerns:

Resize events work up until a point, but then stop. If you do the following:
var Scene;
var Director;

(function() {
 function scene() {
   Scene = Director.createScene();

   var bg = new CAAT.ActorContainer()
   .setBounds(0, 0, Director.width, Director.height)
   .setFillStyle('#333');

   Scene.addChild(bg);

   var img = new CAAT.Actor()
   .setBackgroundImage(Director.getImage('car1'));

   Scene.addChild(img);
 }

 function init() {
   Director = new CAAT.Director()
   .initialize(700, 300, document.getElementById('gallery'))
   .setClear(false);

   Director.enableResizeEvents(CAAT.Director.prototype.RESIZE_WIDTH);

   new CAAT.ImagePreloader().loadImages(
     [
       {id: 'car1', url: '
http://dark-car-wallpaper.carwallpapersdesktop.co.uk/images/street-car-wallpapers-3.jpg'
},
       {id: 'car2', url: '
http://dark-car-wallpaper.carwallpapersdesktop.co.uk/images/street-car-wallpapers-2.jpg'
},
       {id: 'car3', url: '
http://dark-car-wallpaper.carwallpapersdesktop.co.uk/images/street-car-wallpapers-1.jpg
'}
     ],
     function(counter, images) {
       console.log(counter, images);

       if (counter == images.length) {
         Director.setImagesCache(images);
         scene();
       }
     }
   );

   CAAT.loop(60);
 }

 init();
})();
Then after the page gets past 1760px wide, the background no longer gets set and it just appears while on the right hand side.

No way to specify a margin on a resized scene

So for example if I wanted the above scene to have a 20px border on the left and right hand side, there is no way to do this currently? Or maybe I have just missed it again.

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

robinduckett commented 12 years ago

caat-css-min.js:33Uncaught TypeError: undefined is not a function
CAAT.ContainerBehavior.behaviorscaat-css-min.js:33
(anonymous function)caat-css-min.js:38
index.html:62Uncaught TypeError: undefined is not a function
initindex.html:62
(anonymous function)index.html:85
(anonymous function)

That's with caat-css-min.js - take off the -min and it works fine.

Thanks for the resize tips!

hyperandroid commented 12 years ago

Hey Robin, infinite thanks for the console dump. it's clear the minified version is different from the non-min one :/. will fix that asap with some changes i've done yesterday.

When them both are the same, will close this issue, do you agree ? best.

-ibon

2011/11/25 Robin Duckett < reply@reply.github.com

caat-css-min.js:33Uncaught TypeError: undefined is not a function
CAAT.ContainerBehavior.behaviorscaat-css-min.js:33
(anonymous function)caat-css-min.js:38
index.html:62Uncaught TypeError: undefined is not a function
initindex.html:62
(anonymous function)index.html:85
(anonymous function)
That's with caat-css-min.js - take off the -min and it works fine.

Thanks for the resize tips!

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

robinduckett commented 12 years ago

yes :) On Nov 25, 2011 12:30 PM, "hyperandroid" < reply@reply.github.com> wrote:

Hey Robin, infinite thanks for the console dump. it's clear the minified version is different from the non-min one :/. will fix that asap with some changes i've done yesterday.

When them both are the same, will close this issue, do you agree ? best.

-ibon

2011/11/25 Robin Duckett < reply@reply.github.com
caat-css-min.js:33Uncaught TypeError: undefined is not a function
CAAT.ContainerBehavior.behaviorscaat-css-min.js:33
(anonymous function)caat-css-min.js:38
index.html:62Uncaught TypeError: undefined is not a function
initindex.html:62
(anonymous function)index.html:85
(anonymous function)
That's with caat-css-min.js - take off the -min and it works fine.

Thanks for the resize tips!

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

hyperandroid commented 12 years ago

Uploaded and tested new caat library files. Sorry for the incovenience of having uploaded different lib and min files.

timothyjoelwright commented 11 years ago

Just a quick request that your resizing info here be added to the tutorial. (The current resize tutorial page doesn't mention the callback) I searched around for almost an hour before finding this - seems like adjusting actors on resizing would be a fairly common thing. Thanks!

hyperandroid commented 11 years ago

You're right. Documentation is a bit outdated. I must work on this issue. Any help will be welcome though.

hyperandroid / CAAT

Inconsistencies and bad documentation #20