FPS Performace issues

Hi,

I have installed 1.8.1 on my Mac, but I’m seeing during the Browser, FPS range from 30 - 40 ( Canvas, or WebGL ), anybody else experiencing the same? Thanks and God Bless…

Sincerely,

Sunday

1 Like

In the tutorial I was making, I am not seeing a low frame rate. What browser are you using? Also, what version of MacOS?

I have developed a game on my macOS High Sierra and have tested the game in Safari and Firefox and it runs very well. You should be getting a steady FPS (equal to or very close to 60) with no problems. I’ve also tested in the simulator and am getting good FPS there too. If you’re testing in a newer Safari and getting a low FPS, I recommend looking into what might be the bottleneck. A good place to look is in your update function. There might be other stuff that are triggering the low FPS but I am referring to my own experience with Cocos Creator and the browsers I’ve tested on…

I am facing the same issue. Cocos creator v1.6.2 works great but not v1.8.1 (both Mac and Windows). FPS range from 30 - 40 as mentioned by @luke2125. Tutorial doesn’t have fps issue but real game will have it.

Going to downgrade to v1.6.2 due to my deadline… (http://cocos2d-x.org/filedown/CocosCreator_v1.6.2_win)

v1.8.1
image

v1.6.2
image

I have attached my FPS stats from v1.8.1 in Safari. It might be that some modules are causing issues. I don’t use many modules so this might be why I am not experiencing issues. I know that last week or something like that, I had an issue with ScrollView throwing errors due to a module not being enabled.

Safari:

fps-display

Firefox (often pretty high):

firefox-fps

firefox-fps

I have been saying this for months. There are issues based on canvas size. The bigger, the worse fps. And this started to happen with version 1.6+. Works fine with 1.5+ @slackmoehrle please ask the team to check on this.

@jrosich absolutely. I will ask a team member to review this thread.

Okay, seems there’s two issue caused performance dropdown. But after a long time review and talking with @pandamicro , I think we did fixed one of them in 1.8.1…
Can you guys test v1.8.2-rc.2? (Mac | Windows)

Does the problem exists only on Chrome?

downloading as we speak and I will check now.
In my case, its always chrome but I havent checked on other browsers.

Edit: its not fixed. Still happening.

I have a small intro animation (not even a game) with design resolution 1600 x 900 and Im having performance issues. FPS are 25-29fps. See screenshot:

Same project with 1.5.2 I’m having 49-59fps

Thanks! We will check it again. Could you submit the demo project?

I have created a github issue. I have been able to reproduce it with the example-cases project, so it should be easy for you to test.

Thanks for the detailed feedback!

So in my case it happens on Chrome but works on Safari. I noticed that if my canvas size is 1370x870 the performance is ok, but when I start resize and make the screen wider > 1400, FPS drop starts but not immediately, it takes a couple of seconds to reach from 60 to 45(behaves like a memory leak). In the game I animate the background (parallax effect) with some objects on it. I noticed also if I resize vertically with 1600 width but 500 height the performance increases to 60 from 45 in remains 60. During previous resize cases, the FPS is always increases to 60 and starts going down after each resize. As bigger resolution as less final FPS.
image so on this picture you can see that the frame time is 1.8ms whereas the framerate is 48.

I checked out v1.8.2 bug is still there.

Having the same issue on Mac. Safari is ok while Chrome has serious FPS problems. It could be a Chrome issue but when looking at other similar games there are no low frame rates.

On the mobile browser both Chrome and Safari perform great.

Thanks, it seems like that the bottleneck is GPU’s pixel fillrate.
Please change the cc.view.enableRetina(true) to cc.view.enableRetina(false) in ‘web-desktop/main.js’, it should take effect if you use retina display. But if there’s still performance problem, please let me know.

@phero_constructs @jrosich

I’m assuming enableRetina for web games is the javascript scale factor using window.devicePixelRatio, if this is the case, from my experience reducing the scale factor can make that game look very choppy. If the devicePixelRatio is above like 2 it will look horrible. Even at 2 it will be blurry and choppy.

Either way, if Safari isn’t affected performance wise, I would be surprised if Chrome is being affected because as far as I know, Chrome runs on webkit. From my experience, slow performance in browsers are affected by this:

Many sprites with fast movement
Parallax backgrounds
Backgrounds and sprites overlaying them in general

When making browser games, I’ve noticed that backgrounds and sprites which overlay them and move at fast speeds reduce performance. This is because the browser must draw the whole screen at whatever fps you set the game at.

Again, if the game runs fine in Safari and Firefox, Chrome should be fine as far as scale factor is concerned.

There are many optimization techniques which can be used to make a game run slightly better at higher fps if the performance isn’t due to a Cocos bug. Developers should read up on canvas and webgl optimization techniques.

It’s difficult to get browser games to run well on all devices and all browser versions which is the main reason why I decided to use Cocos Creator for native games.

Hi, i tried to change cc.view.enableRestina to false and it doesn’t fix my issues. Still having 25-30 fps in my chrome/safari/firefox.

Are you using retina?

Im playing the game in my Macbook Pro (late 2011) - High Sierra. As far as I know, my macbook doesnt have a retina display

Here is what I found (copy from github issue), for future discussion and solution, please take a look at

Hi, @jrosich thanks for noticing and keep testing this issue, I reviewed all the differences and found the reason.

Direct reason

Here is the thing, v1.5 was using antialias option to create 3d context, it’s set to false on desktop

But since then, we notice the performance issue on mobile devices, so we removed this option entirely. I thought it was by default false because it fixed our performance issue, but actually I was wrong. This option is by default turned on by Chrome, and causing the issue you report.

Real problem

After some investigation, it seems all browsers don’t treat this option the same way, some use false default value, some have a GPU blacklist to bailout all devices that doesn’t support GPU level MSAA.

This lead me to the backend implementation of antialiasing: MSAA (Multisample anti aliasing). I think Chrome implemented software level MSAA when GPU MSAA is not available, which will cause huge pixel fill rate and serious performance dropdown.

This is my finding for now, I will make a PR to set antialias option to false, we will see how we provide possibility to modify this value.

External infos

3 Likes