As an Associate of Unity Asset Store, this website earns from qualifying purchases & contains affiliate links: check the footer for more info.

Gallery Kit — Unity Asset

Gallery Kit (Unity Asset) — complete cross-platform solution for Media Content control:
Images/Photos, Videos, and Texts.

Unity Asset Store — Download Button
  • Create Media Galleries with:
    • Local Files,
    • Files by URLs;
  • Swipe Content,
  • Play Videos,
  • Scroll Texts,
  • Show Your Game Menu,
  • Present Your Company or Product.

Gallery Kit package Contains

  • Complete Demo Project with Dark Theme: “Cities of the World”.
  • 3 Customized Scenes:
    • Menu,
    • Loading Screen,
    • Gallery (Content is Loaded Dynamically depending on the choice in the Menu Scene).
  • Fullscreen Video Player.
  • Horizontal UI Layout (Landscape Left) with Full HD (1920×1080) Reference Resolution which is perfect for Big Touchscreen Displays, but the Layout automatically fits UI for Mobiles considering Safe Areas (iOS, Android). It’s also compatible with Vertical UI Layout (which is quite convenient to use for large screens).

Check the Map of Unity Assets to choose the product that best suits your needs.

Limitations

Asset doesn’t operate with Native Code and relies on Video Player by Unity (component/class).
Any Video Limitations are related to this component.

Advantages and Features of Unity Gallery Kit

Unity Gallery Kit provides:

  • Ready to use Project Template for your Event or Game;
  • 5-minute customization for your own app:
    • you only need to indicate your Texts, Images and Videos;
  • Interactive Media Kit with the ability to expand.

Gallery Kit is an All-in-One solution:

  • Smart Tabs in Menu,
  • Combined Image/Photo & Video Gallery,
  • Dynamic Resources Loading (from predefined folders),
  • Scrollable Text Area,
  • Fullscreen Video Player with Time Slider & Play/Pause Button.

Perfect for Apps

Unity Asset is suitable for the next types of applications:

  • Gallery App;
  • Game Menu/Gallery;
  • Exhibition Stand;
  • Digital Kiosk/Terminal;
  • Interactive Panel, Billboard, Whiteboard;
  • Multimedia Presentation.

Perfect for Events

The project was tested by many people on:

  • Expo,
  • World Fair,
  • Trade Show,
  • Messe,
  • Doors Open Day,
  • Presentation.

Easy Implementation

Gallery Kit is designed for the free version of Unity Game Engine. It’s easy to use, so you do not have to be a programmer to configure the Asset for your event.

And if you need any additional specialized feature, the programmers will be able to easily & quickly implement it because all modules are designed independently to keep this asset extendable & easy to understand.

Tutorial

Getting Started with Gallery Kit

Folders & Files in package by default:

  • Makaka Games.

Steps

If you have any issues with the first launch then just Reach Support with Invoice Number and Get Help.

If you read this tutorial from PDF, first check the latest docs online to get actual information.

  1. Create New Unity Project with Unity 2022.3.20 & “3D” Template.
  2. File > Build Settings > Windows, Mac, Android, iOS, WebGL > Switch Platform.
  3. Download and import Gallery Kit into Unity.
    1. Warning Windows:
      1. Click “Import” to overwrite the Project Settings with predefined ones.
      2. Click “Install/Upgrade” for Package Manager Dependencies.
  4. Next Packages are provided with Unity Package Manager, and they are already installed for this Asset by default. If packages are missing (Warning Window did not appear) then install them again with Package Manager (advanced settings enabled: “Pre-release Packages”):
    1. TextMesh Pro 3.0.8:
      1. Always Required: Window > TextMeshPro > Import TMP Essential Resources.
  5. WebGL Only:
    • Videos: you can only play Videos by URLs. Since WebGL is sensitive to the Build Size, then Remove all Local VideoClips from the Unity Project:
      Project window > Search by Type > Video Clip.
      Learn More about Video Types below.
    • Images: you can use Local Images & Images by URLs. To Reduce the Build Size, you can only use Images by URLs and remove Local Images.
  6. Reopen Unity Project.
  7. Open Scene: Makaka Games > Gallery Kit > Scenes > Menu.
  8. Test in the Unity Editor or Build for Mobile or Desktop.

“$” GameObject

Some Scenes have “$” GameObject, which has main control script for the scene.
Various modules interact with each other with the “$”.

Menu Scene is controlled by Smart Tabs which manage Animation, Interactivity, and State Saving when Scene Switching. Each Tab contains some Buttons with Images to initialize the Gallery Scene with appropriate content dynamically — Current Project.

There is also a Video Player that can be used for a Main Video Presentation of the App.

Buttons with Images can use Local Images or Images by URLs.
Images by URLs are set in the Inspector of the “$” Game Object.

Unity Gallery Kit — Smart Tabs Scene
Unity Gallery Kit — Smart Tabs
Connections of Tabs and Tab Content in
the Hierarchy window in Menu Scene

Here can be the only Active Tab (or Current Tab). To set the Active Tab (when the app starts) you must set active appropriate Tab Content (Game Object) in the Hierarchy window.

The Tab should be called as well as one of the children of TabContents (Game Object). So when you Toggle the Tabs, then appropriate content (Buttons with Images) is automatically hidden/shown. Every Child of appropriate Tab Content has the Animator with Animation.

Current Project (selected in the Menu Scene)

Name of Tab + Name of Button with Image (in TabContents) in the Hierarchy window indicate the appropriate directory + subdirectory (Current Project: City, Game, etc.) in the predefined Resources Folder.


Video Player Fullscreen

Video Player Fullscreen is the customized Video Player by Unity (component/class) on Menu & Gallery Scenes, which has a Time Slider & Play/Pause button.

Video Player Fullscreen uses its own camera to render the video on Camera Near Plane to save the Aspect Ratio of Video. It also has Unity Events (OnShowingAndPlaying & OnClosing), so here you can enable/disable other cameras in the Scene.

Video Types

Video Player can use the next Types of Videos:

  1. Local VideoClips.
  2. Videos by URLs (with Paths to Files like this video).
    URLs without paths to files (like YouTube links) are not supported.

Media Content (Images, Videos, and Texts) is loaded into the Gallery Scene dynamically from the Resources Folder, depending on the selected object (Current Project) on the Menu Scene.

Create a Gallery in 5 minutes! You only need to Load your Texts, Images, Videos into the correct folders or Provide their URLs.

All paths to the resources are registered in ResourcePaths.cs file.
Resources Folder has the next structure of nested folders:

  • MainVideos (for Local VideoClips which are not a part of Dynamic Resources Loading: Menu Scene can use such videos as Main Video Presentation of the App).
  • TabContents (check Menu Scene description):
    • Eastern Europe.
    • Northern Europe.
    • Eurasia:
      • Istanbul.
      • Saint Petersburg.
      • Veliky Novgorod.
      • Almaty (let’s assume that this is the Current Project):
        • Images:
          • artcover (image cover for Menu Scene),
          • FullScreen (images for Gallery Scene):
            can contain Local Images and Text-File with Image URLs.
        • Text (for Gallery Scene):
          • Desc.txt contains Local Text,
          • URL.txt contains the URL of a Text File.
        • Videos:
          • Clips (can contain Local VideoClips and Text-File with Video URLs),
          • Covers (image covers for Gallery Scene):
            can contain Local Images and Text-File with Image URLs.

A Symbiosis of 2 Galleries is presented on the Gallery Scene:

  • Image Gallery Of Triples — Preview Gallery (shows Images & Video covers).
  • Image Gallery Fullscreen — shows the Same Images in Fullscreen Mode and Videos (Video Player is shown instead of Video Covers).
Unity Gallery Kit — Image Gallery

Every Unity Image Gallery has a single “Template” Game Object, which is instantiated respectively the image count (Photos + Video Covers) in Resources Folder per Current Project.

When the Current Project has Videos & Video Covers, then Video Covers are shown in appropriate galleries at first. Video Covers will be augmented Overlay of Video Icons automatically.

If Current Project has Both the Types of Videos, Both Types of Images or Text, then Content by URL will be used instead of Local one.

There are 2 Ways of Media Scrolling in Both Galleries:

  • Next/Previous Buttons are shown Depending On the Index of the Gallery Element.
  • Swipe Gesture.

Texts

A separate text file is needed for each Current Project.

Text from the file is shown on Gallery Scene in 2 areas:

  • Header Text,
  • Main text.

The Header Text should be written on the first line of the file.
So the program recognizes Header Text & Main text.

Text Types

Gallery Scene can use the next Types of Text:

  1. Local Text Assets.
  2. Text by URL (with Path to File like this text).

Resizing Image Gallery Of Triples

Critical info for Unity Media Gallery is Layout Element (component) settings.
Critical parameters here are “Preferred width” and “Preferred height”.

Way 1
  1. Setup “Preferred width” & “Preferred height” for “Template” Game Object and for its children;
  2. Resize Scroll View.
Way 2

Just Change the Scale.

Testing

To Test the Dynamic Loading of Texts, Images and Videos in the Gallery Scene, you can use the checkbox «Is Test Mode» on the “$” Game Object to set Current Project without Menu Scene.

Unity Gallery Kit — Testing Resources
Tabs Testing in the Gallery Scene

WebGL

Learn the Article called WebGL and Unity about Building and Testing Unity games and apps for WebGL.

Video

On WebGL, Video Playing is supported only by URL with Path to File like this video.

Text By URL

By default, the Gallery Kit (WebGL App) was tested with the Text by URL that is located on the same domain as the App itself.

To Load Text by URL via a domain other than the domain where the App is located (that is, to perform cross-domain request), you need to customize that web-server with Text by URL. The “Access-Control-Allow-Origin” header should be added to the server response on the server side (and not to the request on the client side). It’s out of the scope of this manual, but you can learn this post.

So, for this reason, the Text by URL may not load if you are testing on your Local Web Server on a Desktop that Unity runs for you after Building for WebGL.

Tested with Devices

  1. Mobile Platforms:
    • iOS on iPhone XS Max;
    • Android on Samsung Galaxy A71;
    • WebGL in Google Chrome: Video Playing is supported only by URL with Path to File
      like this video.
  2. Desktop Platforms:
    • Windows on Touchscreen Expo Stand.
    • macOS on MacBook Air;
    • WebGL in Google Chrome: Video Playing is supported only by URL with Path to File
      like this video.

Exposition checklist (organize an event)

Do you organize the event or exposition?

There are two main things that a business wants to get from the exhibition:

  • Quick sales,
  • Brand awareness.

There are also two main business questions:

  1. Is there need to increase the conversion rate for a limited time?
  2. How to engage the event visitors to interact with your brand?

As a result, all of this leads us to one important question — How to organize an Expo Event:

  1. Develop Event Goal and Objectives.
  2. Organize a Team.
  3. Set a Date.
  4. Brand Your Event.
  5. Create Interaction with Your Brand.
  6. Create a Master Plan.
  7. Determine Administrative Processes.
  8. Identify and Establish Partnerships and Sponsors.
  9. Create a Publicity Plan.
  10. Establish a Budget.
  11. Determine Evaluation Process.

So let me consider #5 in more detail. This means Interactivity and Gamification. And since we live in the 21st century, one of the best ways to interest visitors — do it with the help of new digital technologies.

The easiest and most budget option in this direction — it is to apply static information in a dynamic way using a Full-HD touchscreen and smart software. The world is rapidly changing, so you need to be always on the trend.

On the other hand, you do not need to use several latest technologies, if they do not match conceptually. Thus, you need to focus on one thing.

I suggest you use Gallery Kit solution:

  • Create a positive experience for a potential customer through the interactivity.
  • Get an informational touch terminal in less than one day.
  • Organize a modern Event.

Support

First, read the latest docs online.
If it didn’t help, get the support.

Changelog

Check the current version of Gallery Kit on Asset Store.
The latest versions will be added as soon as possible.

5.0 (New Web Features for All Tested Platforms):
E.g., the minimum tested WebGL Build Size is 8MB.

Features:

  • Images Loading by URLs.
  • Texts Loading by URLs.
  • Loading Animation on Menu & Gallery Scenes.

Improvements:

  • 60 FPS by Default.

4.0:

Features:

Improvements:

3.1:

Improvements:

3.0:

  • Unity 2021.1.12.
  • iOS/Android UI Layout.
  • VideoClips in Gallery:
    • Gallery of Triples: Auto Overlay of Video Icons.
    • Gallery Fullscreen: Video Player with Time Slider & Play/Pause Button.
  • Color Theme: Dark.
  • Next/Previous Buttons are shown Depending On the Index of the Gallery Element.
  • TextMesh Pro texts.

2.0:

1.2:

1.1:

Unity Assets

Support for Unity Assets

I am Andrey Sirota, Founder of Makaka Games and full-time Publisher on the Unity Asset Store. First, read the latest docs online. If it didn’t help, get the support.

Related Articles

8 Comments

  1. Hi,

    I like your assets much :) .
    I read your DOC. Video player is included in the “Main” scene.
    I would like to know if video can be added into “Image Gallery — Full Screen”. For example, the selected video plays automatically once player pressed the video preview image at “Image Gallery Of Triples”.

      1. Sorry, let me recap what i understand in current system (but i may wrong),
        (1) “Image Gallery Of Triples” show images.
        (2) Once player selected any image, the game would go to “Image Gallery — Full Screen” and the corresponding selected image would be shown in full screen model.

        I would like to know if:
        (1) “Image Gallery Of Triples” show only images.
        (2) Once player selected any image, the game would go to “Image Gallery — Full Screen” and the corresponding selected image OR video would be shown in full screen model.

        1. Rex, You understand correctly.

          I made some changes & get next result.

          If target gallery have videos then they are shown in front of “Image Gallery of Triples” and Images follow right after the video. “Full Screen Image Gallery” is not related with videos.

          When you click on video cover in “Image Gallery of Triples” then target video is played on fullscreen. Video Player works as on Main Scene: it is closed on finish or on click).

          Next Actions:
          – Purchase Image Gallery Kit: https://makaka.org/o/image-gallery-kit
          – Reach Support with Invoice Number: https://makaka.org/support
          – Get Updated Project.

Leave a Reply

Your email address will not be published. Required fields are marked *

Comment moderation is enabled. Your comment may take some time to appear.

Back to top button