Inconsistencies and bad documentation about caat HOT 9 CLOSED

Hey Robin,
thanks for your valuable feedback.

2011/11/25 Robin Duckett <
[email protected]

• 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:
#20

from caat.

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.

from caat.

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 <
[email protected]

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:
#20 (comment)

from caat.

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!

from caat.

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 <
[email protected]

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:
#20 (comment)

from caat.

yes :)
On Nov 25, 2011 12:30 PM, "hyperandroid" <
[email protected]>
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 <
[email protected]

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:
#20 (comment)

---

Reply to this email directly or view it on GitHub:
#20 (comment)

from caat.

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

from caat.

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!

from caat.

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

from caat.