Low quality assets for mobile

[Jazcash]

I need to speed up the loading of my game on mobile, so I'm loading half-size spritesheets that are half the dimensions and about half the file size. I don't want to have to treat my sprites any differently regardless of if the game is desktop or mobile, however. e.g. if I add a sprite to the world using the small-size spritesheet, I want it to still be the same dimensions as the larger-size one. That way I won't have to worry about positional differences.

My high quality image:

and my low quality image:

At first I thought it'd be simple as just `.setScale(2)`, but then realised I don't want to change any of the actual sprite's properties as scale may be something I wish to play with later (e.g. tweening), and I don't want to have to have conditional code for desktop and mobile here. Ideally, any changes would all be done to the texture/frame before being added to any game object.

My attempt was to change the resolution of LQ:

preload(){
    this.load.image("orangeLQ", "assets/images/orangeLQ.png");
    this.load.image("orangeHQ", "assets/images/orangeHQ.png");
}

create(){
    this.cache.getBaseTexture("orangeLQ").resolution = 0.5;

    let orangeLQ = this.add.sprite(0, 0, "orangeLQ");
    let orangeHQ = this.add.sprite(0, orangeLQ.bottom, "orangeHQ");
}

You can see this scaled the LQ up correctly, but the internal dimensions are still the same, as you can see by the HQ sprite's y value causing overlap.

Anyone any ideas? Here's the sandbox: phaser.io/sandbox/QTkaLhaF

[Jazcash]

Think I've just found a way, but it feels dirty...

preload(){
    this.load.image("orangeLQ", "assets/images/orangeLQ.png");
    this.load.image("orangeHQ", "assets/images/orangeHQ.png");
}

create(){
    this.cache.getBaseTexture("orangeLQ").width *= 2;
    this.cache.getBaseTexture("orangeLQ").height *= 2;
    this.cache.getFrameData("orangeLQ").getFrameByName("assets/images/orangeLQ.png").width *= 2;
    this.cache.getFrameData("orangeLQ").getFrameByName("assets/images/orangeLQ.png").height *= 2;
    this.cache.getFrameData("orangeLQ").getFrameByName("assets/images/orangeLQ.png").right *= 2;
    this.cache.getFrameData("orangeLQ").getFrameByName("assets/images/orangeLQ.png").bottom *= 2;
    this.cache.getFrameData("orangeLQ").getFrameByName("assets/images/orangeLQ.png").sourceSizeH *= 2;
    this.cache.getFrameData("orangeLQ").getFrameByName("assets/images/orangeLQ.png").sourceSizeW *= 2;
    this.cache.getFrameData("orangeLQ").getFrameByName("assets/images/orangeLQ.png").centerX *= 2;
    this.cache.getFrameData("orangeLQ").getFrameByName("assets/images/orangeLQ.png").centerY *= 2;
    this.cache.getFrameData("orangeLQ").getFrameByName("assets/images/orangeLQ.png").x *= 2;
    this.cache.getFrameData("orangeLQ").getFrameByName("assets/images/orangeLQ.png").y *= 2;

    let orangeLQ = this.add.sprite(0, 0, "orangeLQ");
    let orangeHQ = this.add.sprite(0, orangeLQ.bottom, "orangeHQ");
}

[casey]

Why not use a PNG optimizer? I've reduced your 90kB down to 9kb here... (using TinyPNG  https://tinypng.com/)  without changing your scale at all. Looks pretty close (top is original, bottom is optimized). There are many ways you can optimize graphics beyond just scale. Then you don't need to change your code at all.

[Jazcash]

That's cool, and I definitely will be doing that, but I have a lot of big spritesheets so it's not enough for me