Faction Packed World Map VFX and UI-Space Rendering

Project information

  • Category: UI Rendering, VFX, Tools
  • Project date: 2026
  • Role: Technical Artist & Engineer
  • Built for: Faction Packed

Overview

The world map needed to feel alive while still behaving like a clean, zoomable UI surface. I built the rendering bridge that let authored map content use sprites, 3D objects, shaders, and Shuriken particles while appearing inside the UI.

Problem

A normal UI image was too static for the map direction, but moving the whole experience out of UI would have made input, layout, scaling, and popup behavior harder to manage. The map needed animated fog, water, trees, citadel icons, tap events, and small environmental moments without giving up UI ergonomics.

What I Built

  • RenderTexture-backed UI view: A spawned camera rig renders map content into a RawImage.
  • UI alignment system: The camera and spawned root align to the UI rect so the rendered content fits the interface surface.
  • Zoom compensation: Pinch zoom can scale the UI without forcing an expensive render texture resize every frame.
  • Layered map art: Water, fog, trees, icons, and doodads were split into independently animated layers.
  • Interactive map raycasts: Taps map from screen space through the preview camera into authored world-space interactables.
  • Environmental VFX hooks: Whales, cave eyes, citadels, weather, and volcano effects can live in the authored map rig.

The clip above shows the map behaving as a UI surface while still rendering authored world-space content: tap targets, idle weather particles, snow, dust clouds, and small environmental VFX.

World-space map prefab hierarchy and designer-authored VFX breakdown.

The map starts from an authored world-space prefab that gets instantiated into the UI render rig. That gave designers a clear hierarchy for adding and removing map content, placing VFX, and mixing sprites, skinned animated sprites, flipbook cave-eye animations, particle systems, and VFX Graph effects while still presenting everything inside UI space.

Technical Notes

The map view creates and owns its render texture, assigns it to the UI image, disables HDR for the preview camera where appropriate, and releases GPU memory cleanly when disabled or destroyed.

The interaction layer ignores blocking UI overlays, converts screen positions into preview viewport coordinates, casts through the map camera, and routes results into map interactables with milestone events.

Configurable world map render texture script inspector.

The view script was built to be modular rather than home-screen-specific. It exposes the render texture, camera, content root, and interaction settings so the same map presentation could be reused across other screens as the project grew.

Portfolio Takeaway

This is a good example of technical art as connective tissue: making rendering, input, animation, VFX, and UI layout cooperate so artists can build a richer map without the implementation leaking into every asset.