GIF Replay - Capture, Record and Share your gameplay!

About GIF Replay - Capture, Record and Share your gameplay! – Unity Editor Tool & Plugin

GIF Replay - Capture, Record and Share your gameplay! Unity Asset Overview

Integrating an in-game GIF recorder and replay tool requires careful **Canvas** architecture to avoid performance degradation during frame capture. The GIF Replay - Capture, Record and Share your gameplay! asset isolates its recording indicators and playback interfaces from heavy game logic, but proper UI hierarchy setup is critical to prevent unnecessary draw call overhead and batch invalidation.

Canvas Segregation and Batching

To ensure optimal frame rates during real-time screen capture, UI components must be split across specialized canvases. Mixing fast-updating elements—such as recording indicators, progress bars, or animated spinners—with static game overlays causes Unity's **uGUI** renderer to regenerate the entire Canvas mesh on every frame where a value changes.

• Static UI Canvas: Dedicated to steady background panels, frame borders, and static control buttons. Set to Render Mode: Screen Space - Overlay with pixel-perfect alignment enabled.
• Dynamic Capture Overlay Canvas: Houses animated recording indicators, encode progress sliders, and timer text. Placing dynamic elements on a child or separate Canvas component isolates vertex buffer recalculations to that specific sub-hierarchy.
• Modal Replay Preview Canvas: Displays the final rendered GIF playback within a RawImage or generated **Sprite** sequence. This canvas can be completely disabled when inactive to eliminate unnecessary draw calls and raycast checks.

uGUI vs. UI Toolkit Considerations

While the asset out-of-the-box targets classic **uGUI (UnityEngine.UI)** due to its native support for RawImage binding via RenderTexture sources, modern Unity projects utilizing **UI Toolkit** can wrap the output via a RenderTexturePointer or custom VisualElement. Under uGUI, dynamic dynamic-texture assignment on a RawImage es Sprite Atlas requirements, making it the most direct route for displaying memory-buffered GIF previews.

Resolution Scaling & Responsive Layouts

Mobile platforms, handheld consoles, and desktop monitors exhibit wildly varying aspect ratios and pixel densities. A production-ready capture GUI must scale gracefully across dynamic viewport dimensions without distorting playback previews or clipping share buttons.

Canvas Scaler Settings

The primary control surface for the replay interface relies on the Canvas Scaler component. Configure the component using the following parameters for maximum multi-device compatibility:

• UI Scale Mode: Set to Scale With Screen Size.
• Reference Resolution: Establish a baseline of 1920 x 1080 for landscape configurations or 1080 x 1920 for portrait setups.
• Screen Match Mode: Set to Match Width Or Height, configuring the Match slider to 0.5 to balance scaling evenly across tall aspect ratios (18:9, 21:9) and standard displays.

Anchor Presets and Auto-Layout Management

When arranging playback control bars (Play, Pause, Trim, Save, Share), avoid hardcoded pixel offsets. Utilize **Anchor Presets** to bind UI clusters to screen boundaries. For instance, set recording status badges to the top-right corner using stretch anchors (Min: (0.8, 0.9), Max: (0.98, 0.98)) and center replay preview modals using RectTransform stretch anchors set to margins rather than fixed width/height values.

For horizontal button bars containing social sharing icons, employ a Horizontal Layout Group coupled with a Content Size Fitter (set to Preferred Size). Ensure that Control Child Size is toggled on for width and height to automatically reorganize buttons when dynamic sharing targets are registered at runtime.

Event System & Integration Setup

Binding replay capture events to the UI layer requires clean decoupling between the underlying capture worker thread and the main UI event system. Broadcasters should trigger UI updates via standard **UnityEngine.Events** or standard C# delegates to keep the UI controller responsive.

Implementation Code: Replay UI Controller

The following C# script demonstrates how to construct a high-performance UI controller that manages recording states, panel visibility, and playback display updates without triggering garbage collection (GC) allocations during gameplay runtime.

using System;
using UnityEngine;
using UnityEngine.UI;

namespace GameplayCapture.UI
{
    [RequireComponent(typeof(CanvasGroup))]
    public class GifReplayUIController : MonoBehaviour
    {
        [Header("Canvas Groups")]
        [SerializeField] private CanvasGroup HUDOverlayGroup;
        [SerializeField] private CanvasGroup ReplayModalGroup;

        [Header("UI Controls")]
        [SerializeField] private RawImage PreviewDisplay;
        [SerializeField] private Slider EncodingProgressBar;
        [SerializeField] private Button RecordButton;
        [SerializeField] private Button StopButton;
        [SerializeField] private Button ShareButton;

        public event Action OnRecordRequested;
        public event Action OnStopRequested;
        public event Action OnShareRequested;

        private void OnEnable()
        {
            RecordButton.onClick.AddListener(HandleRecordClicked);
            StopButton.onClick.AddListener(HandleStopClicked);
            ShareButton.onClick.AddListener(HandleShareClicked);
        }

        private void OnDisable()
        {
            RecordButton.onClick.RemoveListener(HandleRecordClicked);
            StopButton.onClick.RemoveListener(HandleStopClicked);
            ShareButton.onClick.RemoveListener(HandleShareClicked);
        }

        private void HandleRecordClicked()
        {
            SetCanvasGroupState(HUDOverlayGroup, true);
            SetCanvasGroupState(ReplayModalGroup, false);
            OnRecordRequested?.Invoke();
        }

        private void HandleStopClicked()
        {
            SetCanvasGroupState(HUDOverlayGroup, false);
            OnStopRequested?.Invoke();
        }

        private void HandleShareClicked()
        {
            OnShareRequested?.Invoke();
        }

        public void DisplayReplayModal(Texture previewTexture)
        {
            if (PreviewDisplay != null && previewTexture != null)
            {
                PreviewDisplay.texture = previewTexture;
            }
            SetCanvasGroupState(ReplayModalGroup, true);
        }

        public void UpdateEncodingProgress(float progressNormalized)
        {
            if (EncodingProgressBar != null)
            {
                EncodingProgressBar.value = Mathf.Clamp01(progressNormalized);
            }
        }

        private void SetCanvasGroupState(CanvasGroup group, bool isVisible)
        {
            if (group == null) return;
            group.alpha = isVisible ? 1f : 0f;
            group.blocksRaycasts = isVisible;
            group.interactable = isVisible;
        }
    }
}

Event System Optimization

When implementing dynamic overlays, ensure that non-interactive UI elements (such as dark panel background overlays, raw image preview frames, and text labels) have Raycast Target disabled on their respective Graphic components. Leaving Raycast Target enabled on static images forces Unity's GraphicRaycaster to evaluate unnecessary geometry on every touch or pointer event.

Profiling & Memory Optimization Best Practices

Generating and previewing animated GIF content involves continuous frame buffering into dynamic memory. To maintain continuous 60 FPS gameplay during background recording, observe the following profiling guidelines:

• Graphic Raycaster Overhead: Disable the GraphicRaycaster script on high-frequency UI canvases (like full-screen HUD overlays) when no interactive buttons are currently present on screen.
• Texture Disposal & GC Prevention: Dynamic Texture2D or RenderTexture instances created during GIF frame extraction must be explicitly destroyed via Destroy(texture) or returned to a render pool. Relying purely on C# Garbage Collection will lead to noticeable frame stutter during long recording sessions.
• Sprite Atlas Packing: Combine all custom UI graphic assets (record icons, play/pause controls, social media logos) into a unified **Sprite Atlas** (using Unity's **Sprite Atlas v2**). This reduces draw calls for the entire replay panel down to a single batched mesh call.
• Smooth Canvas Transitions: Instead of toggling GameObject.SetActive(false) on popup modals—which forces canvas layout recalculations and batch rebuilds—fade the **CanvasGroup.alpha** parameter between 0f and 1f and toggle blocksRaycasts.

Related Unity Tools Assets