Jump to content

Compressed textures reference resolution


Handzo
 Share

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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);
}

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...