Compressed textures reference resolution

[Handzo]

Hello! I have a questions about compressed textures.

Questions:
1) Default extension chooser pick @*x multiply depends on window.devicePixelRatio. It works well for mobile, iPhoneX has window.devicePixelRatio = 3. But desktop chrome browser has window.devicePixelRatio = 1. So by default I will get the lowest resolution for desktop browser. Solution is to check userAgent and if it is desktop, force to pick the highest resolution. Are there any others fancy solutions?
2) I have source textures for 1920x1080 resolution, I am generating textures @3x(1920x1080), @2x(1280x720) and @1x(640x360). After texture loaded (doesn't matter for which resolution) I'm getting texture with size 640x360. At the end I have 640x360 coordinate system which is not precise, because all source textures was designed for 1920x1080. And if certain source texture has to be in position { x: 1000, y: 1000 } it means that after load on scene it position has to be { x: 333.333, y: 333.333 } but the image can be blurred because of that. If i will not switch off round pixels, position will be { x: 333, y: 333 } and the image will be shifted from original position. Solution is to make @1x(1920x1080), @.67x(1280x720) and @.33x(640, 360) textures or make original textures coordinates to be x%3 == 0 && y%3 == 0.
 

Need some advice. thanks

[ivan.popelyshev]

Welcome to resolution hell, sponsored by everyone who killed runtime vector formats (Adobe, Apple).

1)

No, there are only production solution, for evrey game its different

2)

> but the image can be blurred because of that

Use CLAMPing for objects that are not scaled. Scaled objects will be blurred anyway

> If i will not switch off round pixels, position will be { x: 333, y: 333 } and the image will be shifted from original position

That's not intended behaviour, roundPixels cares about texture resolution. Please make a minimal reproduce example.

[Handzo]

Quote

That's not intended behaviour, roundPixels cares about texture resolution. Please make a minimal reproduce example.

For example I have source texture 100x100 and by design they must be tiled horizontally, after loaded it will scale down by 3

const myTexture100x100 = resources['spot'];

for (let i = 0; i < 10; ++i) {
    const spot = new PIXI.Sprite(myTexture100x100);

    // rounded position = 33, 66, 100, 133, 166, 200, 233, 266, 300
    // offsets          = 33, 33, 34,  33,  33,  34,  33,  33,  34
    spot.position.set(100/33 * i, 0); 
    
    app.stage.addChild(spot);
}