Scaling images makes them blurry on the web

[Bartozzz]

I am making a pixel art MMORPG and have decided to use Skia as the rendering engine. However, when upscaling my tilesets, they become blurry (Tiled Editor on the left, Expo running on Web on the right for comparison):

My code is nothing fancy; it's just an Atlas and a Group. I also tried to scale the image directly in the Atlas transforms, but the result is the same. I built SKImage with Skia.Image.MakeImageFromEncoded.

<Group transform={[{ scale: 5 }]}>
  <Atlas ... />
</Group>

Any tips to keep the images crisp? I tried Runtime Shaders, but unfortunately, shaders are not supported on the Web.

[Bartozzz]

It makes them blurry on iOS/Android as well. I tried creating a picture, scaling the canvas, and creating a new image from the picture but it does not seem to work at all.

async function loadImage(url: string) {
  const skData = await Skia.Data.fromURI(url);
  const skImage = Skia.Image.MakeImageFromEncoded(skData);

  if (skImage) {
    const upscaledSkPicture = createPicture((canvas) => {
      canvas.drawImage(skImage, 0, 0);
      canvas.scale(2, 2);
    });
 
    const upscaledSkData = Skia.Data.fromBytes(upscaledSkPicture.serialize());
    const upscaledSkImage = Skia.Image.MakeImageFromEncoded(upscaledSkData);
 
    return upscaledSkImage;
  }

  return skImage;
}

[wcandillon]

you need to use sampling options, also in the latest version the default sampling is pretty good so it might fix your issue already, let me know

…

On Wed, Jan 29, 2025 at 9:58 PM Bartosz Łaniewski ***@***.***> wrote: It makes them blurry on iOS/Android as well. I tried creating a picture, scaling the canvas, and creating a new image from the picture but it does not seem to work at all. async function loadImage(url: string) { const skData = await Skia.Data.fromURI(url); const skImage = Skia.Image.MakeImageFromEncoded(skData); if (skImage) { const upscaledSkPicture = createPicture((canvas) => { canvas.drawImage(skImage, 0, 0); canvas.scale(2, 2); }); const upscaledSkData = Skia.Data.fromBytes(upscaledSkPicture.serialize()); const upscaledSkImage = Skia.Image.MakeImageFromEncoded(upscaledSkData); return upscaledSkImage; } return skImage;} — Reply to this email directly, view it on GitHub <#2915 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AACKXVW72IADF655IKV2N3L2NE6HVAVCNFSM6AAAAABV3R5BQ6VHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTEMBQGAYTEOA> . You are receiving this because you are subscribed to this thread.Message ID: <Shopify/react-native-skia/repo-discussions/2915/comments/12000128@ github.com>

[Bartozzz]

That's what I also thought, but unfortunately, I didn't manage to get 1.8.0 to work with Expo because of this issue. I guess I'll wait till it's officially supported, as even the expo-doctor suggests installing 1.5.0 instead. Thanks!