Skip to content

Add 3x sprite sheets - #1246

Open
ZeLonewolf wants to merge 20 commits into
mainfrom
zlw-3x-sprites
Open

Add 3x sprite sheets#1246
ZeLonewolf wants to merge 20 commits into
mainfrom
zlw-3x-sprites

Conversation

@ZeLonewolf

@ZeLonewolf ZeLonewolf commented Aug 2, 2025

Copy link
Copy Markdown
Member

Add sprite sheets for 3x pixel ratios, which is needed for newer iPhones.

  • I believe this is not yet supported by maplibre, so this is really just getting ahead of that presumed eventual support
  • Converts the sprite generation script to typescript since we're in there anyways.
  • New 3x Images will not appear in this PR's checks tabs because the image links are generated in the privileged CI runner. This link is the prover that the 3x sprites are working and getting generated. The size of the 3x sprite sheet is shown in the style performance tab.

Comment thread scripts/sprites.ts
Comment on lines +33 to +47
const generated: SpriteSheetResult[] = await Sprites.generate(
sprites,
[1, 2, 3]
);

for (const result of generated) {
const scaleText: string =
result.pixelRatio === 1 ? "" : `@${result.pixelRatio}x`;
const outputPng: string = `${opts.output}/sprite${scaleText}.png`;
const outputJson: string = `${opts.output}/sprite${scaleText}.json`;

await fs.writeFile(outputPng, result.buffer);
await fs.writeFile(outputJson, JSON.stringify(result.layout, null, 2));
const kb: string = (result.buffer.length / 1024).toFixed(1);
console.log(`Wrote ${kb}KiB to ${outputPng}`);

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The main change is here. I now pass in an array [1,2,3] and generate sprites in a loop. Easy extension to 4x if we ever need it.

@ZeLonewolf ZeLonewolf closed this Aug 3, 2025
@ZeLonewolf ZeLonewolf reopened this Aug 3, 2025
@ZeLonewolf
ZeLonewolf marked this pull request as ready for review August 3, 2025 00:31
@ZeLonewolf
ZeLonewolf requested a review from quincylvania August 3, 2025 00:31
@1ec5

1ec5 commented Aug 3, 2025

Copy link
Copy Markdown
Member

I believe this is not yet supported by maplibre, so this is really just getting ahead of that presumed eventual support

Previously tracked in mapbox/mapbox-gl-native#1008. Not sure if this has ever been requested of MapLibre GL JS. Most of the codebase theoretically supports arbitrary pixel densities, but the code that parses URL formats assumes all HiDPI sprites have “2x” in the URL. QGIS also hard-codes 2× as the maximum resolution.

@ZeLonewolf
ZeLonewolf marked this pull request as draft August 21, 2025 01:54
@ZeLonewolf
ZeLonewolf marked this pull request as ready for review August 29, 2025 21:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants