Tiles

The tiles system in 5s_skinmenu enables displaying clothing and character model thumbnails in the user interface.

Overview

Tiles are small images (thumbnails) representing various clothing elements and character models. They are used in the menu interface to visually represent available options.

Requirements

• fivem-greenscreener - Script for automatic screenshot generation

• XnResize or similar mass image processing program

• WebP format - Required tile file format

• Resolution: 128x128 or 256x256 pixels (recommended)

Installing fivem-greenscreener

1. Download the fivem-greenscreener script (provided with 5s_skinmenu)

2. Place it in your server's resources folder

3. Add ensure fivem-greenscreener to server.cfg

4. Start the server

Generating Tiles

Step 1: Starting the Process

1. Join the server with fivem-greenscreener installed

2. Execute the command: /screenshotclothes

3. Note: The process may take several hours depending on the number of clothing items

Step 2: Waiting for Completion

• The script will automatically cycle through all available clothing

• Screenshots will be saved to the appropriate folder

• You'll receive a notification when complete

Processing Screenshots

Required Processing Parameters

• Format: WebP

• Quality: Lossless

• Resolution: 128x128 or 256x256 pixels

• Filename: Preserve original filenames

Recommended Programs

XnResize (Recommended)

1. Launch XnResize

2. Add all generated screenshots

3. Action:

   • Enable Resize and disable Rotate

   • Presets: Custom

   • Mode: Fit

   • Width: 128 or 256 (make sure to select pixels in the dropdown menu as the metric)

   • Height: 128 or 256

   • Keep ratio: Enabled

   • Use gamma correction: Disabled

   • Resample: Hanning

   • Enlarge/Reduce: Always

4. Output options:

   • If an output file already exists: Replace

   • Keep folder structure: Enabled

   • Keep parent folder: Disabled

   • Keep original date/time attributes: Enabled

   • Preserve Metadata: Disabled

   • Preserve color profile: Disabled

5. Format settings:

   • Format: WEBP - WebP

   • Quality: Lossless

   • Compression method: 4

   • Filter strength: 0

   • Filter sharpness: 0

   • Use sharp (and slow) RGB->YUV conversion: Disabled

6. Select proper output directory

7. Click Convert

Adding Tiles

Folder Structure

tiles/
├── neutral_model_0_1.webp     # Character models
├── neutral_model_0_2.webp
├── component_0_0_0.webp       # Clothing components
├── component_1_0_0.webp
├── prop_0_0_0.webp           # Accessories
└── ...

Moving Files

1. After processing all screenshots

2. Move all .webp files to the tiles/ folder

3. Ensure filenames remain unchanged

Neutral Tiles

What are Neutral Tiles?

Neutral tiles are photos of peds (NPCs) that fivem-greenscreener doesn't support automatically. They must be added manually.

Default Neutral Tiles

In the tiles/ folder you'll find files with the neutral_ prefix:

• neutral_model_0_1.webp

• neutral_model_0_2.webp

• neutral_model_0_3.webp

• ... etc.

Adding New Ped Models

Step 1: Check data/pedModels.lua

PedModels = {
    [1] = "mp_m_freemode_01",
    [2] = "mp_f_freemode_01", 
    [3] = "a_m_m_afriamer_01",
    -- ...
    [14] = "u_m_m_filmdirector",  -- Example
    -- ...
}

Step 2: Create Corresponding Tile

For model at index 14 (u_m_m_filmdirector):

• Filename: neutral_model_0_14.webp

• Format: 128x128 or 256x256 WebP

• Quality: Lossless

Step 3: Add to tiles/ Folder

Place the file at tiles/neutral_model_0_14.webp

Creating Neutral Tiles

1. Manually in-game:

   • Spawn the appropriate ped

   • Take a screenshot

   • Crop and resize to required format

2. Downloading from internet:

   • Download the NPC image from the internet

   • Ensure resolution and format are correct (see above for formatting)

   • Rename the tile using the convention (examples above)

   • Place the tile in the tiles/ directory.

Naming Structure

Clothing Components

component_{componentId}_{drawableId}.webp

Examples:

• component_0_5_2.webp - Face (component 0), drawable 5

• component_11_25_0.webp - Hoodie (component 11), drawable 25

Accessories (Props)

prop_{propId}_{drawableId}.webp

Examples:

• prop_0_10_0.webp - Hat (prop 0), drawable 10

• prop_1_5_2.webp - Glasses (prop 1), drawable 5

Character Models

neutral_model_0_{modelIndex}.webp

Examples:

• neutral_model_0_1.webp - Model at index 1 in PedModels

• neutral_model_0_14.webp - Model at index 14 in PedModels

Finalization

Server Restart

IMPORTANT: After adding all tiles, you must restart the server twice:

1. First restart: Loads new tile files

2. Second restart: Generates and updates the data/tiles.json file

Checking tiles.json

After two restarts, check the data/tiles.json file:

{
    "components": {
        "0": { "max": 45 },
        "1": { "max": 156 },
        // ... other components
    },
    "props": {
        "0": { "max": 142 },
        "1": { "max": 35 },
        // ... other props
    },
    "models": {
        "max": 30
    }
}

This file contains calculated tile limits needed for proper interface display.

Troubleshooting

Tiles Not Displaying

1. Check file formats:

   • Are all files .webp?

   • Is quality lossless?

2. Check filenames:

   • Do names follow the convention?

   • Are there no errors in numbering?

3. Check tiles.json:

   • Was the file generated?

   • Does it contain correct limits?

Console Errors

[ERROR] Missing tile: component_1_50_0.webp

Solution: Add the missing tile or reduce limits in code.

Slow Loading

1. Reduce tile resolution to 128x128

2. Increase WebP compression (while maintaining decent quality)

3. Optimize TileLoadingThreads in configServer.lua

Incorrect Model Tiles

1. Check indexing in data/pedModels.lua

2. Ensure filename matches the index

3. Verify the model exists in game

Optimization Tips

File Sizes

• 128x128: ~2-5 KB per tile (faster loading)

• 256x256: ~5-15 KB per tile (better quality)

Quality vs. Size

Lossless WebP: Best quality, larger size
Quality 90-95: Good quality, smaller size  
Quality 80-90: Acceptable quality, much smaller size