Cocos creator 3. Performance on Android very low

Cocos Creator
#1

Hi all. I have a game I can play on phone from web browser and get 60 fps. But when I build this game to single apk. file and play as app on device I get 25 fps.

#2

Can you please try 3.0.1?

#3

This might help.
https://discuss.cocos2d-x.org/t/android-build-rendering-options-for-performance/52382?u=migguli

#4

We have done some performance improvements(since v3.0), it has a big performance improved:

And we are continue improving the performance.
@Horchynskyi you are appreciated if you can manually merge the codes and have a try.

#5

I was thinking of trying to put the web build inside a wrapper android project containing just a WebView. Do you know if anyone has tried that?

#6

I am thinking to try Cordova, because from Cocos android build also sprites lose textures (I don’t know why).

#7

Could you please describe it in detail? Thanks.

#8

Cordova is one framework that utilizes the webview wrapping. https://cordova.apache.org/

I tested to put web build inside cordova app. It appeared to work with better performance. I tested with the game I’m working on currently, so might not apply to all use cases.

#9

I tried and I saw just black screen in app built by Cordova.

#10

It took some hacking to get it working for me. Now after some testing I get about 2 times lower rendering time, but gamelogic and physics modules are performing worse. About 60% more fps as a result on older android phone.

Below is the index file i used. Notes:

Default cordova content security policy needed some tweaking. This is a quick solution, not the most secure and certainly not production ready. Also API calls, like from Gameanalytics SDK are not going through with this setup.

using “globalThis.fetch” to replace fetch since file fetching apparently it is not supported.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />

    <title>Cocos Creator | PipeRunner</title>

    <!--http://www.html5rocks.com/en/mobile/mobifying/-->
    <meta
      name="viewport"
      content="width=device-width,user-scalable=no,initial-scale=1, minimum-scale=1,maximum-scale=1"
    />

    <!--https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html-->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta
      name="apple-mobile-web-app-status-bar-style"
      content="black-translucent"
    />
    <meta
      http-equiv="Content-Security-Policy"
      content="default-src 'self' 'unsafe-eval' 'unsafe-inline' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline';  media-src *; img-src 'self' data: content:;"
    />

    <meta name="format-detection" content="telephone=no" />

    <meta
      name="viewport"
      content="initial-scale=1, width=device-width, viewport-fit=cover"
    />
    <meta name="color-scheme" content="light dark" />

    <!-- force webkit on 360 -->
    <meta name="renderer" content="webkit" />
    <meta name="force-rendering" content="webkit" />
    <!-- force edge on IE -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="msapplication-tap-highlight" content="no" />

    <!-- force full screen on some browser -->
    <meta name="full-screen" content="yes" />
    <meta name="x5-fullscreen" content="true" />
    <meta name="360-fullscreen" content="true" />

    <!-- force screen orientation on some browser -->
    <meta name="screen-orientation" content="portrait" />
    <meta name="x5-orientation" content="portrait" />

    <!--fix fireball/issues/3568 -->
    <!--<meta name="browsermode" content="application">-->
    <meta name="x5-page-mode" content="app" />

    <!--<link rel="apple-touch-icon" href=".png" />-->
    <!--<link rel="apple-touch-icon-precomposed" href=".png" />-->

    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <canvas
      id="GameCanvas"
      oncontextmenu="event.preventDefault()"
      tabindex="0"
    ></canvas>

    <!-- This is needed since fetch is not supported -->
    <script>
      globalThis.fetch = function (url) {
        return new Promise(function (resolve, reject) {
          var xhr = new XMLHttpRequest();
          xhr.onload = function () {
            resolve(new Response(xhr.response, { status: xhr.status }));
          };
          xhr.onerror = function () {
            reject(new TypeError('Local request failed'));
          };
          xhr.open('GET', url);
          xhr.responseType = 'arraybuffer';
          xhr.send(null);
        });
      };
    </script>

    <!-- Polyfills bundle. -->
    <script src="src/polyfills.bundle.js" charset="utf-8"></script>

    <!-- SystemJS support. -->
    <script src="src/system.bundle.js" charset="utf-8"></script>

    <!-- Import map -->
    <script
      src="src/import-map.json"
      type="systemjs-importmap"
      charset="utf-8"
    ></script>

    <script>
      System.import('./index.44413.js').catch(function (err) {
        console.error(err);
      });
    </script>
  </body>
</html>
#11

Creator 3.1 is now available. And looks like android performance issue is pretty much solved in there. To me at least it run at least as smoothly as in web build, if not better.

#12

I have the same issue. i get 120 FPS on my desktop but when I’m testing on my phone I get 25-30 fps… i also tested with a new empty project with just a sprite image on scene and nothing else. that’s really weird guys…

#13

To fix that issue you have to install the following plugins:

  • cordova-plugin-wkwebview-file-xhr

  • @ahovakimyan/cordova-plugin-wkwebviewxhrfix

#14

thanks for reply, but I decided move project to Unity. I very like JS and Cocos, but currently it is not convenient for building projects to native platforms, sometime view on web and android different, issues with performance and long path and time to make build (build in cocos, then by andoid studio to get apk.). In Unity it is 1 button and you get build. Also, you can debug just by plugging in device. I hope sometime Cocos will provide the same convenient features.

#15

@ Horchynskyi coming from Unity, i also complain about these issues. I see the big potential in CC. But somehow, changes appear, your projects dont work anymore with new versions. New versions cause performance issues, and so on … seems like the devs have a big construction with CC. I hope they can fix it. Maybe in 1-2 years. For now … in my opinion … its not mature yet.

2 Likes