Unreal Engine Asset: Image Gallery Documentation


Overview

The Image Gallery asset pack is a versatile collection of 12 image gallery demos, designed to showcase a variety of methods for retrieving and displaying images in gallery views within Unreal Engine projects. This asset pack includes a total of 32 blueprint classes and provides functionality for both Ingame and Runtime image handling.


Features

  1. Two Demo Types:

    • Ingame Demos: Retrieve images prepackaged within the game or imported during runtime.
    • Runtime Demos: Dynamically fetch images at runtime from a specified folder path on the user’s drive.
  2. Three Image Gallery Styles:

    • Full Size: Displays large images in a focused layout.
    • Image Bar: Compact image previews aligned in a bar.
    • Two Lines: Arranges images in a two-line format for enhanced browsing.
  3. Alignment Options: Each gallery style supports two alignment options:

    • Horizontal Alignment: Images are laid out horizontally.
    • Vertical Alignment: Images are laid out vertically.

Classes Overview

Key Blueprint Classes

  1. Image_Importer: Handles runtime image import and conversion.
  2. Gallery_Manager: Manages gallery behavior and interactions.
  3. Gallery_UI: Provides user interface elements for navigating the galleries.

How to Use

Ingame Image Galleries

  1. Prepare images by packaging them with the game or importing them at runtime.
  2. Set up the gallery type (Full Size, Image Bar, or Two Lines) and specify the alignment (Horizontal or Vertical) using the provided blueprint classes.

Runtime Image Galleries

To dynamically load images from a folder path at runtime:

  1. Ensure the Image_Importer class is present in the level.
  2. Use the GetAllImagesFromLocation function:
    • Input: Folder path (string).
    • Output: A list of image file paths (strings).
  3. Use the LoadTexture2D function:
    • Input: A file path (string) from the list obtained in the previous step.
    • Output: Converts the image to a Texture2D format for rendering in the gallery.

Blueprint Functionality

GetAllImagesFromLocation

  • Description: Retrieves all image file paths from the specified folder.
  • Input: Folder path (string).
  • Output: Array of strings representing image file paths.

LoadTexture2D

  • Description: Converts an image file (string path) into a Texture2D object for use in Unreal Engine.
  • Input: Image file path (string).
  • Output: Texture2D object.

Best Practices

  1. Use optimized image formats (e.g., PNG, JPG) for faster loading and reduced memory usage.
  2. Limit the number of images in runtime galleries to maintain performance.
  3. Predefine folder structures for runtime image retrieval to avoid misconfigurations.

Gallery Types and Alignment

Gallery StyleHorizontal AlignmentVertical Alignment
Full SizeSingle row of large imagesSingle column of large images
Image BarHorizontal strip of thumbnailsVertical stack of thumbnails
Two LinesTwo horizontal rows of imagesTwo vertical columns of images

FAQs

Q1. Can I use this asset pack in VR or AR projects?
Yes, the Image Gallery asset can be integrated into VR/AR projects, though performance optimization may be required for runtime image loading.

Q2. What file formats are supported for images?
The asset supports common formats such as PNG, JPG, and BMP.

Q3. Can I customize the gallery UI?
Absolutely! The Gallery_UI blueprint class is fully customizable to suit your project’s aesthetic and functional requirements.


Troubleshooting

  • Issue: Images are not loading at runtime.

    • Solution: Ensure the Image_Importer class is in the level and the folder path provided is valid.
  • Issue: Slow performance when loading large images.

    • Solution: Optimize image size and format. Consider loading images asynchronously.