Multiple Asset Resolutions

Cocos Creator
#1

How should i switch between 1x, 2x and 3x resource assets (SpriteFrames) in cc.Sprite?

For now i am using the custom MdSprite class:

@ccclass
@executeInEditMode
export default class MdSprite extends cc.Sprite {
    @property(cc.SpriteFrame)
    spriteFrameX1: cc.SpriteFrame = null;

    @property(cc.SpriteFrame)
    spriteFrameX2: cc.SpriteFrame = null;

    @property(cc.SpriteFrame)
    spriteFrameX3: cc.SpriteFrame = null;

    onFocusInEditor() {
        this.onLoad();
    }

    onLoad() {
        this.spriteFrame = this[`spriteFrameX${Config.assetLevel}`];
    }
}

But this leads to loading all frames into video memory, so unacceptable for release builds.

And there is the issue with cc.Label and dpi - cc.Label always looks blurry. Should i scale it manual?

1 Like
#2

I’ve, and others, have asked about this before. It seems it was scheduled at some point but then forgotten.

You could probably use an x1 resolution in the editor and the dynamically load the x2/x3. But you would still load 2 graphics for each which I’m also not a fan of.

The best “solution” is to simply use x3 for everything as far as I can see.

#3

x3 is a bad solution for low end devices.

I found the solution that works with my MdSprite class (for example only @2x resources will be loaded):

    {
        cc.LoadingItems.prototype.__internal_append = cc.LoadingItems.prototype.append;
        cc.LoadingItems.prototype.append = function (urlList, owner) {
            const filteredUrlList = urlList.filter((item) => {
                return !(item.url.includes("/x1/") || item.url.includes("/x3/"));
            });
            
            return this.__internal_append(filteredUrlList, owner);
        };
    }

So we simply filter loading resources.

5 Likes
#4

Good idea. I might implement it this way too.