hyperandroid / caat Goto Github PK

• 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.

Make a better support for drag on elements specially buttons.
On drag on a button, if mouseExit/Enter the button should reflect such changes.

Any idea about this error (after updating to the last revision):

[17:10:43.258] this.modelViewMatrixI is null ...caat.js:10685

It would be nice to know if and how to contribute. Especially nice would be to know how to build/test the framework.

Hi,

I had created a game using the caat.js library however I am facing some issues when rendering it on safari on iOS. So I thought of using the caat-css.js library but I am not able to get the code running. When I change the library to caat-css I am getting and error on line 5792 that this.domElement is undefined. The line number 5792 appears in the function:
style : function(attr,value) {
this.domElement.style[attr]= value;
},
Can you please help.

Thanks,
Neeraj

Awesome staff .

One question :

Is there a way use "mask" like flash ' s MovieClip.mask in CAAT ?

http://dl.dropbox.com/u/29345465/other/flashmask.swf

Thank you very much

On webGL, enable multipage textures.

I'm collecting reviews of CAAT by developers with finished and released games.

If you're interested, please write your review in the form at: http://goo.gl/GbHhI

Reviews will be published very soon.

Thanks,

Jason.
http://MobileGameEngines.com

In Director.render, the initialization code (canvas clear, etc) is ran even if all calls to Scene.isInAnimationFrame return false. A proposed solution:

    ...
    var initialized = false;
    if (this.glEnabled) {
        for (i = 0; i < ne; i++) {
            var c = this.childrenList[i];
            if (c.isInAnimationFrame(this.time)) {
                if (!initialized) {
                    this.gl.clear(this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT);
                    this.coordsIndex = 0;
                    this.uvIndex = 0;
                    initialized = true;
                }
                ...
    } else {
        for (i = 0; i < ne; i++) {
            var c= this.childrenList[i];
            if (c.isInAnimationFrame(this.time)) {
                if (!initialized) {
                    this.ctx.globalAlpha = 1;
                    this.ctx.globalCompositeOperation = 'source-over';

                    if (this.clear) {
                        this.ctx.clearRect(0, 0, this.width, this.height);
                    }
                    initialized = true;
                }
                ...
    }

(I am working on a project that will also target mobile devices where CPU consumption results to battery consumption :-))

The mechanism of context. setTransform(matrix) and then transform(matrix) must be mimiced for GL enabled renderer.
Now webGL does not work properly.

So I've got myself quite the number of actors by now and its getting confusing to access them by their index inside the container. Is there any plan to implement actor retrieval from a scene by using a named id?

Study the possibility of adding scaling limits.
For examples, make the system only downscale by setting a scale limit of (1,1).

Can't get mouse events outside of an ActorContainer's boundingBox

It's a very good engine.

We are creating an online game using this library.

I hope you continue working on the code and improving CAAT.

:-)

Let SpriteImage objects manage more than one animation sprite sheet definition.
Add methods:

addAnimationSheet( 
       "jump",  /* animation name */
       [14,15,16,15,14],  /* animation indexes */
       200,                        /* milliseconds between animation frames */
       false,
       function( /* optional callback */ 
          actor, /* actor working on */
          currentAnimationIndex ) /* current animation sheet index */ {



      } 
);

Hello there,

I am writing a simple game where the solution is to drag & drop in item into a box. The box is animated using its mouseEnter/mouseExit events. However, when I drag another item on top of the box, it no longer is being animated - probably because the dragged Actor consumes the mouse events. Is there any way around this?

Hi,

I need to check if mouse is over an Actor/ActorContainer while I am
dragging other Actor/ActorContainer over other objects to validate
if moving Actor can be placed inside destination ActorContainer or not.

Can I do this?

I am trying to use the "mouseUp" method
to check when an Actor is not being dragged
but it does not work.

Is there any way to detect "drop"?

Both Actor and ActorContainer containing this Actor
are inside an input list.

I'm using the audioPlay method on the director to play sounds, however they all are played at the same volume. Changing the volume through
director.getAudioManager().getAudio("myAudioId").volume = 0.1
does not work, because the AudioManager::play function does not copy the volume from the audio source into the channel.
One can easily fix that however by adding after the channel.load() line:
channel.volume=audio.volume;

Kind regards,
Thomas

Hi,

I am using CAAT (canvas implementation) on several platforms, including mobile devices.
This is a really great framework :)

I just have a question.
On desktop, clearing the whole canvas has no real impact on small canvases, but on mobile this is really a performance bottleneck.
I would like to know if a kind of invalidation mechanism is planned for CAAT, in order to clear only areas that have to be redrawn (based on actor dirtiness).

Thanks a lot !

Couldn't find any planning about next feature or demos/samples, so I'll ask here my list :

A)
SVG => using svg as Image. (or/and SVG import/export as in fabric js canvas lib)
HTML => using foreign object inside SVG (would allow complex and automatic text layout)
Video => ... using image/audio kind of class (streaming, events, filters), with a Ios case that render video as div overlay.
Image Filters => on bitmap/cache/image/video/etc.
"External Canvas" plugin => ability to insert other libs (canvas latex render, music notation render, etc/)

B) Any plans for multi-layer render (mix of css, webgl, canvas each on its own "overlay" div), that would allow maximum flexibility, compatibility and performance ? (like explained in Stanislas Lem google doodle making of.)

C) After the Webgl and Css, any Flash Renderer planned ?
(driving flash media from javascript)

So about each of these, would like to know if planned, or accepted as patch (with some guidelines) :

I have fixed a problem I had with your otherwise rather amazing CAAT library.

The problem was that I had two ActorContainers, each with their own ShapeActor children. These were both added to a scene and enableDrag was called on each ShapeActor. Only the last-added ActorContainer's children were responding to mouse events. The reason was that the findActorAtPosition() method would return 'this' if none of the children contained the mouse location. For what I was wanting to achieve, I needed only the ShapeActor children to be returned from this method, and never an ActorContainer.

Long story short, you can make an ActorContainer transparent to mouse events by replacing the final return statement of ActorContainer.findActorAtPosition() with this:

return this.constructor == CAAT.ActorContainer ? null : this;

In other words, "given that the mouse is not contained in one of my children, if I am purely an ActorContainer, admit that I haven't found an actor - otherwise, return this concrete subclass of ActorContainer."

Add a mechanism to mark scene assets as 'needed but not present' and supply with a friendly callback object to be notified about these assets preloading.
Should also offer the possibility of marking those assets as discardable so upon scene change the system can unload unneeded assets.
This procedure should be automatic with minimal developer intervention apart from defining the asset list and be notified on callback asset preload.

Test the convenience of a consumed parameter to input events which will set the event as consumed or not.
If the event is not consumed, the input subsystem will continue traversing the scene graph finding suitable actors to consume the event.
Implications:

• create a method findAllActorsAtPos which will traverse the whole scene graph and return an Array of Actor elements which lie at any given on-screen coordinate.

Hi,

I have created two objects with one property:

            var testing = {};
            Object.defineProperties(testing, {
                container: {
                    value: new CAAT.Actor(),
                    writable: true,
                    enumerable: true
                }
            });

            var obj1 = Object.create(testing);
            obj1.container.setId("obj1");

            var obj2 = Object.create(testing);
            obj2.container.setId("obj2");

Then, I try to add the "container" property to an ActorContainer using
the common "addChild" method in this way:

slotElement.addChild( obj1.container );
slotElement.addChild( obj2.container );

But I got this error:

Uncaught adding to a container an element with parent.

It only works when I create Actor container outside an object (Object.defineProperties(...)).

Any idea?

Thanks a lot.

On Mac OS, line drawing seems to be switching to software rendering (low performance).
Change glLines by degenerated triangles.

A clearRect must be issued previous to cache the whole exiting scene.
This prevents scenes which don't clear the background have visual artifacts from other exited scenes.

Use case:
A pannable map in a viewport, does not react once the mouse performs action outside of the area that was visible upon initialization. So it works at start, but once we drag to side the portion we see now does not react

There's a big performance penalty with huge actors which have a tiling background image.

Allow pause/resume operations on single actors.
This issue must be thoroughly taken into consideration.
Implies changing schedule operations like timers and setFrameTime methods for behaviors/keyframes.

Include code supplied by Eemeli.

if in dirty rects mode, add the actor's region to dirty rectangles.

Eeemeli reports that css3 is not working on caat css renderer.
It seems that the translate3d(0,0,0) css3 transformation pre-pending prevents transformation application.
Will have to check what browser caat is running since certain browsers benefit from that seamlessly unuseful translate sentence.
As a work around, users can remove the 'translate3d(0,0,0)' from their caat-css.js file.

To be more precise it introduces a nested array in the list of actors that breaks the rendering/animation loop. It can be corrected by changing the last statement of the function from

cl.splice( index, 1, nActor );

to

cl.splice( index, 0, nActor[0] );

Now only supported table sprite sheets where every sprite is of the same size.

If you call setOffset on a CAAT.SpriteImage the SpatialHash code is incorrectly marking an actor as being off screen, so as you pan around the CAAT.Actor doesn't get drawn.

Add a method switchToSceneById so the user can change scene based on Ids, not index.

I skimmed through the tutorials to get a better overview of the features. I noticed that the animation never changes when selecting different curves, found at the bottom of this tutorial page: http://labs.hyperandroid.com/caat-tutorial-4-interpolators

I am trying to set a different z-index value for an ActionContainer contained inside an ActionContainer
but it doesn't work.

Maybe because it setZOrder can be applied only to an Actor contained inside an ActorContainer?

// in CAAT.TextActor.drawOnPath

var currentCurveLength= charWidth/2 + textWidth;

// should be

var currentCurveLength = textWidth;

// -----------------------------
explanation:
ctx.measureText( char ).width returns the width of the bounding box for the character, but the character can be left, center, right or any other position within that bounding box. By shifting the bounding box position by 1/2 without knowing the placement of the character within this bounding box, the kerning will "appear" to be destroyed.

It was my fault. Is spite of setTextFillStyle, I used setFillStyle
with text and that was my stupid error.

Hello There,
I really like your library and I would like to see it support shadowColor & shadowBlur canvas attributes. My javascript however is mediocre at best and I've got no clue as to where I should add the functionality (and even less how to re-build the build/caat.js). Any advice on that?

Add sound volume control capabilities.

If you use alpha behavior on an ActorContainer the alpha of the child actors is unaffected. Easy workaround is to use childrenList and change it for each child.

My Use Case:
I added an imageactor as a child of another image actor and used a alphabehavior on the parent, the child's alpha did not change.

This method does not work when the director object instance is scaled.

Hi,

I have three objects: card, panel1, panel2

card is child of panel1 but I want to make it
the child of panel2 so I do it this way:

card.setParent(null);
panel2.addChild(card);

After this, card object disappears from screen.
What am I doing wrong?

Thanks

There shouldn't be a TextActor and ShapeActor, there should be one Actor which either contains Text or Shapes. Or Both. It's a compound, you are overusing object orientation.

Add circular shaped paths.

Right now, CAAT only supports pre-defined textures for GL rendering, and not on-the-fly texture build.
Allow the developer to on-the-fly build and destroy textures.

Hi hyperandroid

CAAT.loop(30,function(){
console.log("onRenderStart");
});

it should output the string

but no output :| ,why ?

Im using "hyperandroid-CAAT-1a77f74"

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
another question :

How can I call a function when mouseMove mouseDown ... on the "stage" ?
P.S. even though the "stage" is empty .

like so :

stage.mouseMove=function(evt){
myShapeActor.setLocation(evt.point.x,evt.point.y);
}
Thanks