Deadlock Modding Notes LogoDeadlock Modding Notes Logo

Compiling UI Textures

Note

CSDK 12 now ships with a Hero Image Template to skip decompilation. Use Duplicate Addon on a addon template in the CFG Tool to make an editable version of the addon.

Requirements

Warning

If you are using CS2 to compile UI textures, be aware that compilation of .vpdi resources doesn’t work. You need to use a .vdata file instead like this (it also works for Deadlock):

myimages.vdata
<!-- kv3 encoding:text:version{e21c7f3c-8a33-41c5-9977-a76d3a32aa0d} format:generic:version{7412167c-06e9-4698-aff2-e63eb59037e7} -->
{
    generic_data_type = "panorama_image_list"
    image_list =
    [
        panorama:"file://{images}/map_icons/screenshots/1080p/aim_runtrain.png",
        panorama:"file://{images}/map_icons/screenshots/1080p/aim_runtrain_1.png",
        panorama:"file://{images}/map_icons/screenshots/1080p/aim_runtrain_2.png",
        panorama:"file://{images}/map_icons/screenshots/1080p/aim_runtrain_3.png",
        panorama:"file://{images}/map_icons/screenshots/1080p/aim_runtrain_4.png",
    ]
}

There are multiple ways to make and compile a UI texture:

VData

A .vdata file will automatically recompile all referenced image files if that .vdata file is recompiled. You can get a decompiled .vdata file for your addon with Source 2 Viewer (or use the example above).

Source 2 supports making .vtex_c files out of various image filetypes.

Making a VPDI file

VPDI (Valve Panorama Dynamic Images) is a file that compiles all UI textures defined in it. Here’s how it looks like:

dynamic_images_hero_icons.vpdi
"DynamicImages"
{
    //-------------------------------------------------------------------------
    // Changing absolutely any file referenced below
    // will cause a rebuild if it is
    // a directly referenced image in content.
    //-------------------------------------------------------------------------
    "Explicit Files"
    {
        "{images}/heroes/rimdle.png"                    ""
        "{images}/heroes/rimdle_mm.png"                 ""
        "{images}/heroes/rimdle_sm.png"                 ""
        "{images}/heroes/rimdle_vertical.png"           ""
        "{images}/heroes/rimdle_card.png"               ""
    }
}

First, make a .vpdi file in the panorama folder of your addon (you can copy the example above). Then, define all of your images ({images} is the panorama/images folder) in it. Then, if your tools are open, find your .vpdi file in the Asset Browser, right click on it and select “Recompile > Full”. Compilation of this file will recompile all referenced images as .vtex_c files.

Packing

Graph View