> For the complete documentation index, see [llms.txt](https://visionstore.gitbook.io/visionstore-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://visionstore.gitbook.io/visionstore-docs/scripts/advanced-clothing/configuration/clothing-catalog.md). # Clothing catalog The clothing menu tree, item names, clipping rules, body hotspots and thumbnail settings. ## Categories `config/categories.lua`. `Config.Categories` is the tree shown in the APPAREL section. A **leaf** is one GTA clothing slot, a **group** holds leaves, and the `outfits` node opens the wardrobe. | Group | Leaves (slot) | | ------------------------ | ---------------------------------------------------------------------------------------------- | | OUTFITS | Opens the wardrobe | | CLOTHING | Tops (component 11), Bottoms (4), Footwear (6), Undershirts (8), Torso / Arms (3), Decals (10) | | UPPER BODY ACCESSORIES | Vests (9), Bags (5), Neckwear (7) | | HAND & WRIST ACCESSORIES | Watches (prop 6), Bracelets (prop 7) | | HEAD ACCESSORIES | Hats (prop 0), Glasses (prop 1), Earrings (prop 2), Masks (component 1) | A leaf looks like this: ```lua { id = "undershirts", label = "undershirts", icon = "undershirt", component = 8, camera = "torso", slug = "undershirt", noneDrawable = { male = 15, female = 14 } }, ``` | Field | What it does | | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | | `id` | Unique id. Prices (`Config.Prices[id]`), locale labels and shop `categories` lists use it. | | `label` | Locale key under `ui.categories`. | | `icon` | Icon name from `html/js/icons.js`. | | `component` / `prop` | The GTA slot. Props can always be removed (shown as a NONE card). | | `camera` | Camera preset when the category opens (see [General](/visionstore-docs/scripts/advanced-clothing/configuration/general.md#camera)). | | `slug` | Token for thumbnail paths. | | `noneDrawable` | The drawable that means "nothing" for this slot per gender. Enables the CLEAR action, and taking it off is free. | | `panel` | Extra tabs in the CUSTOMIZATION panel. Tops have STYLES, UNDERSHIRTS and NECKWEAR, so a look can be completed without leaving the tops grid. | | `subgroups` | Splits a list into groups (see below). | | `children` | Sub categories of a group. | Every clothing slot is already mapped to exactly one leaf. "Adding a category" means adding a **group** or moving leaves between groups. If you add a group, add its label to every locale under `ui.categories`. ### Ties and scarves Neckwear ships with three subgroups. `ties` and `scarves` are empty because drawable ids depend on your clothing packs. Fill them with ids and ranges: ```lua subgroups = { { id = "necklaces", label = "necklaces", drawables = "rest" }, { id = "ties", label = "ties", drawables = { { from = 10, to = 14 }, 22, 23 } }, { id = "scarves", label = "scarves", drawables = { { 30, 41 } } }, }, ``` `"rest"` collects everything not listed in another subgroup. ### Category rail and outfit cards ```lua Config.IconRail = { "clothing", "upper_accessories", "hand_accessories", "head_accessories", "outfits" } Config.OutfitPreviewSlots = { top = { component = 11 }, bottom = { component = 4 }, shoes = { component = 6 }, } ``` `IconRail` is the order of the main category rail. `OutfitPreviewSlots` picks the thumbnails shown on outfit cards in the wardrobe. ## Item names `config/names.lua`. Optional display names per item key. The `male` / `female` tables win over `shared`: ```lua Config.ItemNames = { shared = { ["c:11:15"] = "No Top", ["c:3:15"] = "Bare Arms", ["c:5:0"] = "No Bag", ["c:9:0"] = "No Armor", ["c:10:0"] = "No Decal", ["c:7:0"] = "Nothing", ["c:1:0"] = "No Mask", }, male = { ["c:8:15"] = "No Undershirt", ["c:11:0"] = "V Neck Sweater", -- ... }, female = { ... }, } ``` Items without a name use `Config.NameFallback = "{category} #{drawable}"` (in `config/config.lua`), which gives `Top #12`, `Hat #3`... For big packs, you can also ship names as JSON in `html/assets/images/names.json` (`{ "shared": { ... }, "male": { ... }, "female": { ... } }`). It is loaded once on start and wins over `Config.ItemNames`. ## Compatibility (clipping rules) `config/compatibility.lua` keeps tops, arms and undershirts from clipping. ```lua Config.CompatibilityMode = "recommended" Config.Compatibility = { male = { tops = { [15] = { pin = { torso = 15, undershirts = 15 } }, -- no top -> bare arms, no undershirt [252] = { pin = { torso = 15 } }, }, undershirts = { [15] = {}, }, }, female = { tops = { [15] = { pin = { torso = 15, undershirts = 14 } }, }, }, } ``` | Mode | What happens | | ------------------------- | ------------------------------------------------------------------------------------------------------------- | | `"recommended"` (default) | Pinned slots are applied automatically (arms follow the top). Clashing items stay in the list but are dimmed. | | `"strict"` | Same pins, and clashing items are removed from the list. | | `"free"` | Nothing is applied automatically; every item is listed. | Rules are keyed by gender, then by the category being browsed, then by drawable: | Rule field | What it does | | ----------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | | `pin = { torso = 4 }` | Slots set automatically when this item is selected. When a later choice has no pin, the slot goes back to what it was. | | `hide = { undershirts = { 5, 6, { from = 20, to = 24 } } }` | Items of another category that clash with this one while it is worn. | | `texturePin = true` | Pinned slots follow the colour (texture) of the selected item. | Example: a male jacket (top 31) whose sleeves need arms 4, whose colour carries over, and that clips through undershirts 5, 6 and 20 to 24: ```lua male = { tops = { [31] = { pin = { torso = 4 }, texturePin = true, hide = { undershirts = { 5, 6, { from = 20, to = 24 } } } }, }, }, ``` ## Body hotspots `config/hotspots.lua`. Small circles drawn over the ped in the APPAREL section. Clicking one opens its category. | Hotspot | Opens | | ------- | ------------ | | Head | Hats | | Face | Masks | | Neck | Neckwear | | Torso | Tops | | Arms | Torso / Arms | | Wrist | Watches | | Waist | Bottoms | | Feet | Footwear | Each entry has `id`, `bones` (one or more skeleton bone names), an optional `offset`, the `category` it opens and a `label`. A hotspot whose category the current shop doesn't sell is not shown. `Config.HotspotSettings` tunes the refresh rate (`intervalMs = 66`), the fade when a bone faces away (`fadeStart` / `fadeEnd`), the screen margin (`edgePadding`) and which sections show hotspots (`sections = { apparel = true }`). ## Thumbnails `config/config.lua`: ```lua Config.Thumbnails = { basePath = "assets/images", pattern = "components/{gender}/{id}/{collection}/{local}", propPattern = "props/{gender}/{id}/{collection}/{local}", hairPattern = "hair/{gender}/{collection}/{local}", -- HAIR section grid (component 2) texturePattern = nil, extension = "webp", altExtension = "png", -- tried when the first extension fails to load customPattern = nil, customPropPattern = nil, } Config.ThumbnailMap = { command = "clothingmap", ace = "chapo.clothing.thumbnails", } ``` The script ships **4,778 WebP thumbnails** for base-game and Rockstar DLC clothing, using the **pack layout**: each image is stored by clothing collection and its index inside that collection (`components/male/11/_base/15.webp`). The game reports each item's collection at runtime, so the images stay on the right items whatever add-on clothing your server streams. Items without an image (decals, add-on packs) show a category placeholder. | Option | What it does | | ----------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | | `basePath` | Folder relative to `html/`. | | `pattern` / `propPattern` / `hairPattern` | Path of each image, without extension. Tokens: `{gender}`, `{id}`, `{collection}`, `{local}`, `{drawable}`, `{texture}`, `{category}`, `{slug}`, `{model}`. | | `texturePattern` | Optional per-texture images for the STYLES tab. | | `extension` / `altExtension` | Extension tried first, then the fallback. Only WebP is served from `assets/images` by default. | | `customPattern` / `customPropPattern` | Images for custom (non-freemode) peds, for example `"peds/{model}/components/{id}/{drawable}"`. Unset = placeholders. | | `Config.ThumbnailMap` | The `/clothingmap` admin tool, allowed for the `chapo.clothing.thumbnails` ace or anyone with the `command` ace. | To add images for your own add-on clothing, follow [Add-on thumbnails](/visionstore-docs/scripts/advanced-clothing/guides/addon-thumbnails.md). ## Colour filter `config/colors.lua` holds the settings of the colour filter and its in-game indexing tool: ```lua Config.Colors = { enabled = true, command = 'clothingcolors', ace = 'chapo.clothing.colors', screenshotResource = 'screencapture', -- also supports screenshot-basic settleMs = 350, -- increase for slow texture streaming captureTimeoutMs = 15000, batchSize = 12, -- saved to disk before the next batch -- thresholds, studio position and baseline drawables follow } ``` `enabled = false` hides the filter and disables the tool. How to build the colour index: [Colour filter](/visionstore-docs/scripts/advanced-clothing/guides/colour-filter.md). --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://visionstore.gitbook.io/visionstore-docs/scripts/advanced-clothing/configuration/clothing-catalog.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.