Most sprites are no longer displayed in the desktop version of browsers

Cocos Creator
1

Hi all!

I am using Cocos Creator version 3.8.6.

Everything was fine until today. After working, I decided to take a break and clicked close Cocos Creator. He warned that there were changes in the scene and suggested keeping them. I agreed. In general, this is strange, since I don’t change the scene for months, all the work is done in prefabs. A little later I decided to get back to work. Cocos Creator warned that there were some unsaved changes or something like that and whether I wanted it to restore them. I agreed. Since then I can’t see most of the sprites in the game when I run the desktop version in the browser.

Tried to run in two browsers: Google Chrome and Microsoft Edge. The latest browser versions.

But if I run the game in “Preview in Editor” mode, everything works fine.

In Google Chrome I actually pressed Ctrl + Shift + Delete and cleared everything for all time. It didn’t help.

I tried setting the CLEANUP_IMAGE_CACHE flag and it didn’t help.

Made a web-mobile build. Looked at the resources, saw those sprites there that were not displayed before. Launched the server and entered it through the desktop version of the browser, most of the sprites are not displayed. But if you enter from the mobile version, everything works fine.

I have already deleted Cocos Creator and deleted all the folders I could find where it saved things. Then I reinstalled it and it didn’t help.

I didn’t go into the browser settings today to check for an update. All the sprites were displayed. Then that saving/restoring incident happened and the sprites stopped displaying. After that I went into the settings and then the update was found and installed. But most of the sprites are still not displayed.

What could have happened and, most importantly, how can it be fixed?

Google Chrome writes about two issues:

1

A form field element has neither an id nor a name attribute. This might prevent the browser from correctly autofilling the form.

To fix this issue, add a unique id or name attribute to a form field. This is not strictly needed, but still recommended even if you have an autocomplete attribute on the same element.

2

One or more documents in this page is in Quirks Mode, which will render the affected document(s) with quirks incompatible with the current HTML and CSS specifications.

Quirks Mode exists mostly due to historical reasons. If this is not intentional, you can add or modify the DOCTYPE to be `<!DOCTYPE html>` to render the page in No Quirks Mode.
2

Today I turned on my laptop, which I hadn’t turned on for a long time.That is, it does not have the latest version of the Microsoft Edge browser. I launch the desktop version of the game there and it works fine. Updated the browser to the latest version and launched the game. That’s it, most of the sprites are not displayed. I got this behavior in the following browsers (I haven’t tested others):

  • Microsoft Edge (139.0.3405.86)
  • Google Chrome (139.0.7258.67)
3

Hi all!

A very interesting situation. On the one hand, there were no problems in old versions of the browser, on the other hand, I have news.

As I said, most sprites are not displayed when running the game in the desktop version of the browser. I decided to focus on one specific sprite that wasn’t showing up.

Created a new 2D project version 3.8.6. Using Drag and Drop, I moved the sprite I was interested in from the main project folder to the Assets of the new project. Looking ahead, I will say that in this way Cocos Creator also copied the .meta file itself (even though I did not move it). I place the sprite in the middle of the Canvas and launch the project in the browser. The sprite is not visible.

I remove the sprite from the scene and from Assets. I copy this sprite into the folder (not via Drag and Drop), so now a new meta file is created when I switch to Cocos Creator. I place the sprite in the middle of the Canvas and launch the project in the browser. The sprite is visible. Compared .meta files when the sprite is visible and when it is not visible. I did not find any differences that could explain this behavior.

Here is the .meta file from the visible sprite:

{
  "ver": "1.0.27",
  "importer": "image",
  "imported": true,
  "uuid": "e16a8756-3609-426a-82cf-33d00a00b57a",
  "files": [
    ".json",
    ".png"
  ],
  "subMetas": {
    "6c48a": {
      "importer": "texture",
      "uuid": "e16a8756-3609-426a-82cf-33d00a00b57a@6c48a",
      "displayName": "events_icon",
      "id": "6c48a",
      "name": "texture",
      "userData": {
        "wrapModeS": "clamp-to-edge",
        "wrapModeT": "clamp-to-edge",
        "imageUuidOrDatabaseUri": "e16a8756-3609-426a-82cf-33d00a00b57a",
        "isUuid": true,
        "visible": false,
        "minfilter": "linear",
        "magfilter": "linear",
        "mipfilter": "none",
        "anisotropy": 0
      },
      "ver": "1.0.22",
      "imported": true,
      "files": [
        ".json"
      ],
      "subMetas": {}
    },
    "f9941": {
      "importer": "sprite-frame",
      "uuid": "e16a8756-3609-426a-82cf-33d00a00b57a@f9941",
      "displayName": "events_icon",
      "id": "f9941",
      "name": "spriteFrame",
      "userData": {
        "trimThreshold": 1,
        "rotated": false,
        "offsetX": 0,
        "offsetY": 0,
        "trimX": 5,
        "trimY": 5,
        "width": 162,
        "height": 131,
        "rawWidth": 172,
        "rawHeight": 141,
        "borderTop": 0,
        "borderBottom": 0,
        "borderLeft": 0,
        "borderRight": 0,
        "packable": true,
        "pixelsToUnit": 100,
        "pivotX": 0.5,
        "pivotY": 0.5,
        "meshType": 0,
        "vertices": {
          "rawPosition": [
            -81,
            -65.5,
            0,
            81,
            -65.5,
            0,
            -81,
            65.5,
            0,
            81,
            65.5,
            0
          ],
          "indexes": [
            0,
            1,
            2,
            2,
            1,
            3
          ],
          "uv": [
            5,
            136,
            167,
            136,
            5,
            5,
            167,
            5
          ],
          "nuv": [
            0.029069767441860465,
            0.03546099290780142,
            0.9709302325581395,
            0.03546099290780142,
            0.029069767441860465,
            0.9645390070921985,
            0.9709302325581395,
            0.9645390070921985
          ],
          "minPos": [
            -81,
            -65.5,
            0
          ],
          "maxPos": [
            81,
            65.5,
            0
          ]
        },
        "isUuid": true,
        "imageUuidOrDatabaseUri": "e16a8756-3609-426a-82cf-33d00a00b57a@6c48a",
        "atlasUuid": "",
        "trimType": "auto"
      },
      "ver": "1.0.12",
      "imported": true,
      "files": [
        ".json"
      ],
      "subMetas": {}
    }
  },
  "userData": {
    "type": "sprite-frame",
    "hasAlpha": true,
    "fixAlphaTransparencyArtifacts": false,
    "redirect": "e16a8756-3609-426a-82cf-33d00a00b57a@6c48a"
  }
}

And here is the .meta file from the invisible sprite:

{
  "ver": "1.0.27",
  "importer": "image",
  "imported": true,
  "uuid": "690d61f5-ae26-4d9f-9b3e-caaf70929147",
  "files": [
    ".json",
    ".png"
  ],
  "subMetas": {
    "6c48a": {
      "importer": "texture",
      "uuid": "690d61f5-ae26-4d9f-9b3e-caaf70929147@6c48a",
      "displayName": "events_icon",
      "id": "6c48a",
      "name": "texture",
      "userData": {
        "wrapModeS": "clamp-to-edge",
        "wrapModeT": "clamp-to-edge",
        "imageUuidOrDatabaseUri": "690d61f5-ae26-4d9f-9b3e-caaf70929147",
        "isUuid": true,
        "visible": false,
        "minfilter": "linear",
        "magfilter": "linear",
        "mipfilter": "none",
        "anisotropy": 0
      },
      "ver": "1.0.22",
      "imported": true,
      "files": [
        ".json"
      ],
      "subMetas": {}
    },
    "f9941": {
      "importer": "sprite-frame",
      "uuid": "690d61f5-ae26-4d9f-9b3e-caaf70929147@f9941",
      "displayName": "events_icon",
      "id": "f9941",
      "name": "spriteFrame",
      "userData": {
        "trimThreshold": 1,
        "rotated": false,
        "offsetX": 0,
        "offsetY": 0,
        "trimX": 5,
        "trimY": 5,
        "width": 162,
        "height": 131,
        "rawWidth": 172,
        "rawHeight": 141,
        "borderTop": 0,
        "borderBottom": 0,
        "borderLeft": 0,
        "borderRight": 0,
        "packable": true,
        "pixelsToUnit": 100,
        "pivotX": 0.5,
        "pivotY": 0.5,
        "meshType": 0,
        "vertices": {
          "rawPosition": [
            -81,
            -65.5,
            0,
            81,
            -65.5,
            0,
            -81,
            65.5,
            0,
            81,
            65.5,
            0
          ],
          "indexes": [
            0,
            1,
            2,
            2,
            1,
            3
          ],
          "uv": [
            5,
            136,
            167,
            136,
            5,
            5,
            167,
            5
          ],
          "nuv": [
            0.029069767441860465,
            0.03546099290780142,
            0.9709302325581395,
            0.03546099290780142,
            0.029069767441860465,
            0.9645390070921985,
            0.9709302325581395,
            0.9645390070921985
          ],
          "minPos": [
            -81,
            -65.5,
            0
          ],
          "maxPos": [
            81,
            65.5,
            0
          ]
        },
        "isUuid": true,
        "imageUuidOrDatabaseUri": "690d61f5-ae26-4d9f-9b3e-caaf70929147@6c48a",
        "atlasUuid": "",
        "trimType": "auto"
      },
      "ver": "1.0.12",
      "imported": true,
      "files": [
        ".json"
      ],
      "subMetas": {}
    }
  },
  "userData": {
    "type": "sprite-frame",
    "hasAlpha": true,
    "fixAlphaTransparencyArtifacts": false,
    "redirect": "690d61f5-ae26-4d9f-9b3e-caaf70929147@6c48a"
  }
}

What’s wrong here? And it’s very interesting how it happens that old versions of the browser display everything normally?

It would be awful if I had to delete all the sprites and add them again, and then set them up in each prefab. Moreover, where is the guarantee that it won’t break again. Why could this even happen?

4

So what should I do now?

Installed Mozilla Firefox. Launched the game in it - everything works great!

What exactly is wrong with these UUIDs under Microsoft Edge and Google Chrome?

5

It’s probably not that serious, since no one has responded yet)

Here is the scene:

01
011920×1040 75 KB

Here’s the launch in the latest version of Google Chrome (remember, everything worked fine before the browser update):

02
021202×934 43.2 KB

And here is the launch in the latest version of Mozilla Firefox:

03
031282×937 13.8 KB

Where did I go wrong?

6

As it turned out, the problem was that the project included images in png format with a color depth of 16-bit per channel.

Once all images were converted to 8-bit per channel color, the problem went away.

1 Like