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

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

4. Execute the command: /screenshotped all (if you modified the ped list, make sure it's the same in fivem-greenscreener\client.lua, lines 4-35)

Step 2: Waiting for Completion

• The script will automatically cycle through all available clothing

• Screenshots will be saved to fivem-greenscreener\images\clothing

• You'll receive a notification when complete

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

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?

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.

Incorrect Model Tiles

1. Check indexing in data/pedModels.lua

2. Ensure filename matches the index

3. Verify the model exists in game