UI Dynamic Sampler

<< 📝 Description | 📌 Key Features | 🎮 Demo | ⚙ Installation | 🚀 Usage | 🤝 Contributing >>

📝 Description

This package provides a component to reduce jaggies in UI elements.

For example, when displaying a 2048x2048 texture at just 100x100 pixels, diagonal lines may appear jagged.
This effect is particularly noticeable on low-DPI displays (such as standard non-Retina screens) where individual pixels are more visible.

In such cases, jaggies can be reduced by generating a thumbnail texture that matches the display size or by using mipmaps.
However, these approaches increase asset size and complicate asset management.
Moreover, depending on the UI element's size, these approaches may cause blurring or fail to sufficiently reduce jaggies.

The UIDynamicSampler component dynamically pre-samples textures based on the current UI element size, effectively reducing jaggies without increasing asset size.
Additionally, it caches sampling results to maintain performance.

• 📌 Key Features
• 🎮 Demo
• ⚙ Installation
  • Install via OpenUPM
  • Install via UPM (with Package Manager UI)
  • Install via UPM (Manually)
  • Install as Embedded Package
• 🚀 Usage
  • Getting Started
• 🤝 Contributing
  • Issues
  • Pull Requests
  • Support
• License
• Author
• See Also

📌 Key Features

• Real-time anti-jaggies for uGUI: Dynamically samples textures based on UI element size to reduce jaggies.
• No Increase in Asset Size: Performs sampling dynamically, eliminating the need for additional thumbnails or mipmaps, keeping asset management simple.
• High Performance with Caching: Caches sampling results to reduce unnecessary computations.
• Improved Visibility on Low-DPI Displays: Provides clearer rendering even on lower-resolution screens where jaggies are more noticeable.
• Easy to Use: Simply add the UIDynamicSampler component to apply the effect.

🎮 Demo

WebGL Demo

⚙ Installation

This package requires Unity 2020.3 or later.

Install via OpenUPM

• This package is available on OpenUPM package registry.
• This is the preferred method of installation, as you can easily receive updates as they're released.
• If you have openupm-cli installed, then run the following command in your project's directory:

  openupm add com.coffee.ui-dynamic-sampler
  

• To update the package, use Package Manager UI (Window > Package Manager) or run the following command with @{version}:

  openupm add com.coffee.ui-dynamic-sampler@1.0.0
  

Install via UPM (with Package Manager UI)

• Click Window > Package Manager to open Package Manager UI.
• Click + > Add package from git URL... and input the repository URL: https://github.com/mob-sakai/UIDynamicSampler.git?path=Packages/src
  
• To update the package, change suffix #{version} to the target version.
  • e.g. https://github.com/mob-sakai/UIDynamicSampler.git?path=Packages/src#1.0.0

Install via UPM (Manually)

• Open the Packages/manifest.json file in your project. Then add this package somewhere in the dependencies block:

  {
    "dependencies": {
      "com.coffee.ui-dynamic-sampler": "https://github.com/mob-sakai/UIDynamicSampler.git?path=Packages/src",
      ...
    }
  }
  

• To update the package, change suffix #{version} to the target version.

  • e.g. "com.coffee.ui-dynamic-sampler": "https://github.com/mob-sakai/UIDynamicSampler.git?path=Packages/src#1.0.0",

Install as Embedded Package

1. Download the Source code (zip) file from Releases and extract it.
2. Move the <extracted_dir>/Packages/src directory into your project's Packages directory.
   
   • You can rename the src directory if needed.
   • If you intend to fix bugs or add features, installing it as an embedded package is recommended.
   • To update the package, re-download it and replace the existing contents.

🚀 Usage

Getting Started

1. Install the package.

2. Add a UIDynamicSampler component to a UI element (Image, RawImage) from the Add Component in the inspector or Component > UI > UIDynamicSampler menu.
   

3. Compare how jaggies appear in low DPI display environments.
   

4. Enjoy!

Component: UIDynamicSampler

• Sampling Threshold: Dynamic sampling will occur when the number of texels per screen pixel exceeds this value.
• Scale Factor: The scale of the dynamic texture relative to the rendering size. A larger value will require more memory.
• Pre Down Sampling Rate: The intensity of the blur applied by the downsampling buffer beforehand.

🤝 Contributing

Issues

Issues are incredibly valuable to this project:

• Ideas provide a valuable source of contributions that others can make.
• Problems help identify areas where this project needs improvement.
• Questions indicate where contributors can enhance the user experience.

Pull Requests

Pull requests offer a fantastic way to contribute your ideas to this repository.
Please refer to CONTRIBUTING.md and develop branch.

Support

This is an open-source project developed during my spare time.
If you appreciate it, consider supporting me.
Your support allows me to dedicate more time to development. 😊

License

• MIT

Author

• mob-sakai

See Also

• GitHub page : https://github.com/mob-sakai/UIDynamicSampler
• Releases : https://github.com/mob-sakai/UIDynamicSampler/releases
• Issue tracker : https://github.com/mob-sakai/UIDynamicSampler/issues
• Change log : https://github.com/mob-sakai/UIDynamicSampler/blob/main/Packages/src/CHANGELOG.md