Switching between Canvas and CSS

[neeraj-anka]

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

[hyperandroid]

Hi neeraj,

I can infer little from your description. I think you're not initializing properly the director element. Are you doing it like this :

director= new CAAT.Director().initialize(700,500,document.getElementById('game')).setClear( false );
the "game" Dom element must a div element.

About performance on mobile, you could try executing on canvas with calling the following code:
director.setClear( CAAT.Director.CLEAR_DIRTY_RECTS )
this code instrument to redraw only on-screen affected areas and depending on your game, it could speed things up a lot.

Let me know how it goes for you.
Regards,

-ibon

[neeraj-anka]

Hi IBon,

Thanks for your quick response. I am using the standard template.js
supplied with CAAT to initialize the director. I am using the template with
splash file. The director in being initialized in that file with the
following code
var director = new CAAT.Director().
initialize(
width||800,
height||600,
isCanvas?canvascontainer:undefined).
setClear(false) // set director to NOT clearing the background
;

My canvascontainer is a div in HTML.

The exact issue I am facing on mobile devices is that when the orientation
of the device is changed the click areas are changes e.g. in portrait mode
I can see my buttons properly when I rotate the device and make the
orientation landscape the button appears in the correct place but the click
area is misplaced.

Thanks,
Neeraj.

On Fri, Feb 24, 2012 at 6:07 PM, hyperandroid <
reply@reply.github.com

wrote:

Hi neeraj,

I can infer little from your description. I think you're not initializing
properly the director element. Are you doing it like this :

director= new
CAAT.Director().initialize(700,500,document.getElementById('game')).setClear(
false );
the "game" Dom element must a div element.

About performance on mobile, you could try executing on canvas with
calling the following code:
director.setClear( CAAT.Director.CLEAR_DIRTY_RECTS )
this code instrument to redraw only on-screen affected areas and depending
on your game, it could speed things up a lot.

Let me know how it goes for you.
Regards,

-ibon

---

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

[hyperandroid]

Thanks neeraj.

Will make a use case for this issue.
You could enable resize events for directors with:

director.enableResizeEvents(CAAT.Director.prototype.RESIZE_PROPORTIONAL);

or any of the other RESIZE_XXX flags.
This way you could allow the director to conform appropriately to the new
screen size. The drawback, is that it will try to occupy the whole screen
area scaling up/down as needed.

Let me know if this works for you.

Regards,
-ibon

El 24 de febrero de 2012 14:08, neeraj-anka <
reply@reply.github.com

escribi:

Hi IBon,

Thanks for your quick response. I am using the standard template.js
supplied with CAAT to initialize the director. I am using the template with
splash file. The director in being initialized in that file with the
following code
var director = new CAAT.Director().
initialize(
width||800,
height||600,
isCanvas?canvascontainer:undefined).
setClear(false) // set director to NOT clearing the background
;

My canvascontainer is a div in HTML.

The exact issue I am facing on mobile devices is that when the orientation
of the device is changed the click areas are changes e.g. in portrait mode
I can see my buttons properly when I rotate the device and make the
orientation landscape the button appears in the correct place but the click
area is misplaced.

Thanks,
Neeraj.

On Fri, Feb 24, 2012 at 6:07 PM, hyperandroid <
reply@reply.github.com

wrote:

Hi neeraj,

I can infer little from your description. I think you're not initializing
properly the director element. Are you doing it like this :

director= new

CAAT.Director().initialize(700,500,document.getElementById('game')).setClear(
false );
the "game" Dom element must a div element.

About performance on mobile, you could try executing on canvas with
calling the following code:
director.setClear( CAAT.Director.CLEAR_DIRTY_RECTS )
this code instrument to redraw only on-screen affected areas and
depending
on your game, it could speed things up a lot.

Let me know how it goes for you.
Regards,

-ibon

---

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

---

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

[hyperandroid]

Have taken a look at the template code, and have modified them to run with CSS as well.
Will upload a new caat version today.
Sorry for the inconvenience.

[hyperandroid]

Pushed new templates and some fixes.
Try them and let me know how it goes.
Regards,

-ibon

[neeraj-anka]

Hey thanks a lot Ibon. I will try with the new code and let you know.

Neeraj.

On Tue, Feb 28, 2012 at 3:46 AM, hyperandroid <
reply@reply.github.com

wrote:

Pushed new templates and some fixes.
Try them and let me know how it goes.
Regards,

-ibon

---

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