Image Quality/Resolution

[Carln02]

Hello! I started checking out your library recently and I encountered a small issue with images. Both non-rectangular PNGs and SVGs appear pixelated and low resolution, no matter how high the original resolution of the image is. Below you can find a screenshot of what I'm talking about. The star's image file is a 1028 by 1028px PNG.

Thank you!!

[KurtGokhan]

Can you provide the following information?

• What is the React code used to generate this behavior?
• How are you providing the image source? If it is an asset inside Unity, what are your import settings? Can you send that asset and its .meta file? (Some compression, mipmap or filter mode settings can cause this behavior)
• Does this happen without ReactUnity? Can you try creating a simple UGUI image and try to reproduce it?

[Carln02]

1. The code is quite long, but if I run the following in the index file:

import picture from "src/assets/icons/--primary-main/star-filled.png";
export function App() {
   return (<image source={picture} style={{width: '100px', height: '100px'}}/>);
}
Renderer.render(<App />);

I get the same pixelated output:

2. Can I access images from the "Assets" folder? Whenever I try to input a path that goes outside the "src" folder in the react project I get an error. The image is placed inside this src folder and it doesn't have a .meta file.

Here is the asset:

3. If I place the same image as a 2D sprite in Unity it looks perfectly fine.

And thank you so much for the help!

[KurtGokhan]

I see. Image imports from file are imported with some default settings. I changed those settings to maximize quality now.

Fixed on main branch. I won't release a new version urgently as the problem only exists in development. In build, you have to go to the build folder and modify image import settings manually anyway.

[Carln02]

Oh okay great!! Thank you for your help :)

[KurtGokhan]

Forgot to update, this is already fixed in 0.14.2