Skip to Content

Optimizing for Performance

Last modified by Microchip on 2025/08/25 12:38

Introduction

This page offers general guidelines for designing and setting up an MGS GUI project to ensure optimal rendering speed on the intended platform.

Performance Bottlenecks

The following factors may lead to performance problems:

  • Data and image formats that are too large
  • Update regions that are too large
  • Buffer sizes that are too small
  • Intensive image decoding and alpha blending
    • Excessive compression
    • An abundance of transparency effects
  • High CPU and bus bandwidth consumption

Optimizing Data Formats

Project Color Mode

The project’s color mode determines the pixel data format that the library uses to render each frame. Choosing an appropriate color mode is crucial, as it directly impacts both the memory footprint and the performance of the GUI application.

For optimal performance, we recommend using the RGB565 color mode.

For a color GUI, using 16-bit RGB565 can reduce the size of the frame/scratch buffer and image assets. This means less data is needed to be read/written from/to memory which would effectively reduce the screen draw times. Consider using RGB565 color mode if:

  • 64k colors is sufficient
  • Minimal gradients in UI design

Using RGB565 color mode have additional benefits of reduced memory usage (RAM and Flash) and faster boot time.

To configure the project color mode, refer to the "Setting the Project Color Mode" page.

New Project window

Note that RGB565 color mode does not support transparency, so the use of multiple layers in devices with HW overlays will be limited. We recommend only using one layer for RGB565-based designs.

Image Assets Color Mode

In general, storing image assets in the same color mode as the project improves performance as it eliminates the need for color conversion when the image is drawn. It is recommended that images are stored in RGB or RGB RLE formats that match the color mode of the project.

The image asset's color mode is set in the image manager for RGB images. See "Using Images in Microchip Graphics Suite (MGS)" for more information.

Configuring Images for RGB565 Color Mode

Using RGB565 color mode in the project helps improve graphics performance. To eliminate color conversion when rendering images, we recommend storing images in RGB565 format.

The disadvantage of storing images in RGB565 format is that images with transparent backgrounds will lose their transparency. To help with this, the MGS Composer enables users to set a background color for images, thus allowing images to be stored with backgrounds that match the GUI background.

Set Image Background Color

If images with transparent backgrounds are absolutely necessary (e.g, the GUI background is not a solid color or the image is used in screens with different colors), the following options are possible:

  1. Use color masking to eliminate the background color during rendering. This will tell the library to discard pixels with the mask color when rendering the image. This may cause images to have jagged edges.
  2. Keep the images in RGBA8888 format. The library will perform the color conversion and alpha blending of the RGBA8888 image to the RGB565 frame.

Optimizing Damage or Dirty Areas

A damaged or dirty area refers to a specific region of the screen or a graphical surface that has changed and needs to be redrawn or updated. This concept is crucial for optimizing rendering performance in graphical user interfaces (GUIs), games, and other applications that display dynamic content. 

A dirty area that is too large or overlapping can increase drawing time and negatively affect performance.

While the graphics library is designed to minimize the size of the dirty areas, certain GUI design practices can help the library to better optimize the size of the dirty areas and improve draw performance.

The objectives are to:

  • Minimize the frequency of redraw operations
  • Limit the size of regions requiring redrawing

Minimize Widget Overlap

When widgets overlap, this causes the library to redraw the overlapped section when either widget needs to be updated.

No overlapping widgets

Resize the Widget to the Visible Area

Ensure that widget dimensions closely fit the visible content areas to reduce unnecessary redrawing of the background.

Tight widget size

Set Widget Background to None

Eliminate extra color fill if the image background is transparent or matches the main background.

No background

Optimizing the Buffer Sizes

The MGS library uses scratch buffers to pre-render the damage area before drawing to the main buffer. Increasing the size of scratch buffer minimizes the number of cycles the library will need to update a frame. It is best to have a scratch buffer size that is as big as the frame buffer. To adjust the scratch buffer size, go to Project Settings > Renderer.

Project Settings window

Increase Scratch Buffer Size

Match screen size (bpp x width x height) if possible.

Minimize GFX task cycles and reduce screen tearing.

Disable Scratch Buffer Padding

Scratch buffer is only needed in devices with 2D GPUs that require aligned buffers, like the PIC32MZ DA or SAMA7D65. 

For other devices, scratch buffer padding can be disabled.

Optimizing Image Assets

The Image Assets Manager provides a wide set of configuration options to configure image assets so that they are optimized for the resources available in the target platform.

For detailed information on the Image Assets Manager, refer to "Using Images in Microchip Graphics Suite (MGS)".

Use Images in RGB Format

To ensure that images are rendered as fast as possible, consider storing images in RGB format.

  • PNG and JPEG have higher decoding overhead.
  • Use uncompressed image assets (RGB) and use an image color mode that matches the MGS Composer project or layer color mode. This allows the library to draw images with minimal decoding and processing.

Direct Render Mode

To further reduce rendering time, consider using Direct Render mode. Direct Render mode tells the library to directly copy the image data without any processing. Since there is no processing overhead of the image asset, this can result in very fast image rendering. 

Direct Render mode will automatically store images in RGB uncompressed format, which will result in larger image sizes. Pay attention to the output size of the images.

Note that with Direct Render mode, the library will just copy the pixels directly to the scratch buffer. For Direct Render mode to work best:

  • Images must use the same color mode as the project and the layer.
  • Make sure that images have a solid background (no transparency). Use the Image Asset Manager to set the background color for images.

Direct Render Mode with Background Color

Image Preprocessing

For devices with limited Flash but with a large amount of RAM available (PIC32MZ DA), consider using image pre-processing if raw RGB images cannot be used due to Flash size limitations. 

  • Image preprocessing enables images to be stored as compressed in Flash and then decompressed to RAM during boot.
  • The decompressed images in RAM are used to very quickly render the image to the frame buffer.
  • Pre-processing enables users to reduce image asset size in Flash while also benefiting from the fast render performance of uncompressed images in RAM. For more information, refer to the "Image Pre-processing" page.

RLE Compression

RGB image sizes are generally larger than other image formats. Consider this size tradeoff when using uncompressed RGB images for faster performance. If uncompressed RGB image sizes are too big, consider enabling RLE compression. RLE compression works well with human-drawn images like icons or clipart that are typically used for buttons.

Back to Top

Optimizing Labels, Strings, and Fonts

String and Font Assets are used to create Labels in the UI design. The Font and String Assets Manager provide configuration options to configure these assets and optimize them for your design. Refer to the font asset and string asset guides for more information.

Strings can take longer to draw when the string asset uses anti-aliased fonts. Anti-aliased fonts are fonts that have undergone a process to smooth out the edges of the characters, making them appear less jagged and more visually appealing. The tradeoff is that these fonts are larger (8x versus aliased fonts), and require the library to alpha blend each pixel to the background, which can significantly increase draw time, especially on small MCUs.

A couple of options can be used to improve the rendering time of labels and strings:

  • Consider not using anti-aliased fonts if the pixelated edges on aliased fonts do not impact the readability of the strings rendered on the screen.
  • Consider using scheme acceleration for labels. Scheme acceleration generates a lookup table of pre-alpha blended foreground and background colors, which can be used to quickly draw the anti-aliased glyphs on label widgets without the library having to do alpha blending at run-time.

Back to Top