Hello Community,
Since about 5 month we develop with cocos2d-html5. We’ve already finished the beta-version of our first game: http://www.lepsworld2.com/LepsWorldFriends/LepsWorldFriends/
We’ve some troubles with the performance on Firefox (very bad, between 30-40fps), IE (between 50-55fps) and Safari (also very bad, between 25 - 35fps). On google Chrome it works well and smoothly!
All the levels are created with the Tiled Map-Editor.
Did anybody have a experience with cocos-html5 + tile-maps or did anybody know some tricks to improve the performance?
Could anyone help?
Many thanks!
Hi Matthias,
Your game is very well. what size is your tilemap?
Regards
David
Hi David,
Our tilemap is 300x18 tiles with a tilesize of 54px.
Yesterday we have done some tests and discovered the following things:
- If we change the value “renderMode” in the cocos2d.js file from the default value 0 to 1 the menu works well and smoothly in all browsers (Chrome, IE, Firefox, Opera), but as soon as the tilemap is loaded the FPS rate drops down to 6-8FPS in Chrome! In Firefox the tilemap is not displayed! We have also tried to stop all actions and calculations so that only the tilemap is loaded, but there was no improvement!
2)We have tried to make a smaller tilemap with 20x18 tiles, then the it works on each browser well and smooth!
I have some questions:
- Is it possible that our tilemap is to big?
- Which “render mode” value should we use?
P.S: the SimpleAudioEngine does’nt work in Firefox since the 2.2.1 update! The game crashs with an Error: “this._ctx.createGainNode is not a function”.
I hope you (or anybody else) could help us. 
Many thanks and best regards,
Matthias
Recomendations:
- Reduce the draw calls
- Use spritebatch for rendering
- Reduce the draw calls (again)
- Reduce the draw calls (even more)
- Do not render things that are outside of the visible canvas
- Yes, it was all about reducing the draw calls
If anyone else can add more recommendations (other than reducing draw calls) would be appreciated
HI, Matthias
We have found the source of your problem in Canvas RenderMode. It’s because Chrome doesn’t do auto clip for drawImage function, so your entire map which is (24300 px * 1480 px * 3 layers) is rendered every frame.
We can make some changes to avoid this problem, we will keep you noticed when it’s done.
Bests
Huabin
Huabin, first notice that auto-cliping was implemented on cocos2d-x 
(but really happy to hear it) the same behaviour is in cocos2d-x C++ too?
Hi Huabin,
Thank you for your information! That Sounds Good, I hope these changes solve the problem.
This problem also exists in Firefox an IE, not only in Chrome! Do you solve this problem with the next version of cocos2d or earlier?
With many thanks and best regards,
Matthias
Jesus Bosch wrote:
Huabin, first notice that auto-cliping was implemented on cocos2d-x (but really happy to hear it) the same behaviour is in cocos2d-x C++ too?
I don’t think cocos2d-x has the same problem, because it use OpenGLES which clip the scene with camera. For the same reason, it won’t happen when cocos2d-html5’s renderMode is on WebGL, so there should be another explaination for the performance problem in WebGL version of Matthias’ game.
As far as I know, Safari will clip for drawImage function automatically, it’s possible that the same issue occurs on Firefox and IE.
We will make the change in develop branch soon, but it will officially be fixed in next main version of cocos2d-html5.
Hi, Matthias,
I have made a mistake, the issue isn’t due to auto clipping, the real problem is related to a known chrome issue
We have provided a side walkthrough in the futur version, but it cost more memory use. So we suggest that your map shouldn’t be larger than 4096px * 4096px before chrome fix this issue.
Huabin LING wrote:
Jesus Bosch wrote:
> Huabin, first notice that auto-cliping was implemented on cocos2d-x (but really happy to hear it) the same behaviour is in cocos2d-x C++ too?
>
I don’t think cocos2d-x has the same problem, because it use OpenGLES which clip the scene with camera. For the same reason, it won’t happen when cocos2d-html5’s renderMode is on WebGL, so there should be another explaination for the performance problem in WebGL version of Matthias’ game.
>
As far as I know, Safari will clip for drawImage function automatically, it’s possible that the same issue occurs on Firefox and IE.
We will make the change in develop branch soon, but it will officially be fixed in next main version of cocos2d-html5.
this might be correct, but as far as I know, you send the information anyway to the graphic card, and that takes time. We have seen huge performance improvements just by setting visible to false to nodes that are outside of the visible area of the screen/camera in some games.
Hi Jesus,
Interesting, in which render mode? WebGL or Canvas? Is the improvement universal or browser specified?
I recently joined the team, and I’m still learning things of cocos2d, so I’m not so clear of everything and I could make many mistakes, 
Hi Huabin,
Sorry I was talking more about cocos2d-x C++ with OpenGL, but I assume the behaviour should be the same at least for webgl.
Welcome to cocos
Thanks! Jesus
I’ll talk about the behavior with others in cocos2d-x team.
Hi Huabin,
Thank you for your effort!
We have also tried to set the visibility of the tilemap outside of the visible area to false, but there was no performance improvement!
Are you sure that our problem is related to this known chrome issue? In the description of this issue you can see that this issue was also tested on Safari 5, Firefox 4.x and IE 9 and these browser are OK , but we also have troubles with the performance on these browser and not only on Chrome! For example….on Firefox the tilemap is not even displayed!
Hi Matthias,
It’s normal that the visibility parameter doesn’t work, the performance issue is due to the size of cache which depend on your map size. On chrome, I’m sure it’s related to the chrome issue. As for Firefox, I tested it on Mac / Firefox19, your game works smoothly.
Problems on other browsers should have other reason, but my suggestion is that you can reduce your map size to see what happens.
I have 6FPS in safari, not very good. How many render calls do you have? are you using a spritebatch to render everything?
@Huabin
Are animations stopped automatically when they are out of the visible area? I assume they are not, and it seems they have a lot (even the level decorations are animated)
Hi,
`Huabin
I have made some tests and found the following:
(Original map size : height = 18 tiles, width = 300 tiles, tilewidth = 54px, tileheight = 54px)
If I change the map-width to 202 Tiles (10908px) the game works smoothly on Chrome and Firefox.
If I change the map-width to 203 Tiles (10962px) the FPS drops down to 8.0 on Chrome and on Firefox the tilemap is not even displayed! How can it be? There are only 18 tiles more to draw and the frame rate drops so heavily.
P.S: the frame rate on IE rises above 60.0 FPS in the menu and in the game?!
`Jesus
We have also tried to stop all actions and animations in the whole map (Enemys, Coins,…) but there was no improvement. Even if you just create/add the map, the frame rate drops down.
`Jesus
Animations aren’t stopped when they are out of scope, because in many case auto pause is not wanted. Imagine one animation moves an element from outside the canvas to inside the canvas.
` Matthias
Your test case make totally sense, when the size of map increase to the threshold that triggers the Chrome bug, the fps will suddenly drops down. As for Firefox, I assume it’s a memory use limit, so the cache won’t be displayed.
Hi Huabin,
I don’t think that it is a memory-use-limit problem on firefox. I have tried to split the 300 tiles map into 3 pieces with 100 tiles. Now i can add this 3 pieces one after another and all 3 maps are displayed on firefox with 60.0 fps(I can also add 4 maps with 100 tiles and it works)!
Furthermore, if i split the map it also works on Chrome with 60.0 fps!
Have a nice day.
(but really happy to hear it) the same behaviour is in cocos2d-x C++ too?