JOE Tattoo Shop

A comprehensive and immersive tattoo shop script for FiveM servers, supporting both ESX and QBCore frameworks. This script provides a realistic tattoo shop experience with an interactive UI, multiple tattoo collections, and business management features.

📋 Description

JOE Tattoo Shop is a feature-rich tattoo system that allows players to visit tattoo shops across Los Santos, browse through hundreds of tattoo designs, purchase tattoos, and remove existing ones. The script includes a beautiful HTML/CSS/JavaScript UI, dynamic camera system, realistic animations, and full support for both ESX and QBCore frameworks.

✨ Features

Core Features

• Multi-Framework Support: Fully compatible with ESX and QBCore
• Multiple Tattoo Collections: Includes 12+ tattoo collections with hundreds of designs:
  • MP Business Overlays
  • MP Hipster Overlays
  • MP Biker Overlays
  • MP Airraces Overlays
  • MP Beach Overlays
  • MP Christmas2 Overlays
  • MP Gunrunning Overlays
  • MP Import/Export Overlays
  • MP Lowrider Overlays
  • MP Lowrider2 Overlays
  • Custom JOE Overlays (20+ unique face tattoos)
  • Multiplayer Overlays (Hair overlays)
• Interactive UI: Modern, responsive HTML/CSS/JavaScript interface
• Dynamic Camera System: Automatic camera positioning based on tattoo placement
• Realistic Animations: Players lie down on tattoo chairs with proper animations
• Tattoo Removal: Ability to remove tattoos for a fee
• Persistent Storage: All tattoos are saved to the database and persist across sessions
• Multiple Shop Locations: 4 pre-configured tattoo shop locations across Los Santos
• Business Mode: Optional job-based system where employees can manage customers
• NPC Support: Optional NPC tattoo artists for added realism
• Customizable Pricing: Individual pricing for each tattoo and removal costs
• Multi-Language Support: Built-in translation system (English, Polish, and easily expandable)

Advanced Features

• Smart Camera Positioning: Camera automatically adjusts based on tattoo location (front/back)
• Clothing Management: Automatically removes upper clothing to show tattoos during selection
• Real-time Preview: See tattoos on your character before purchasing
• Category System: Organized tattoo browsing by collection
• Visual Markers: Clear markers showing available/busy chairs
• Blip System: Map blips for easy location finding
• TextUI Integration: Optional TextUI support for better interaction prompts
• Version Check System: Built-in version checking functionality

🎮 Framework Support

ESX

• Compatible with ESX Legacy and older ESX versions
• Supports esx_skin and fivem-appearance for ESX
• Full integration with ESX player data and money system

QBCore

• Full QBCore compatibility
• Supports qb-clothing and fivem-appearance for QBCore
• Integrated with QBCore player data and money system

📦 Requirements

Dependencies

• oxmysql (for database operations)
• ESX or QBCore framework
• esx_skin / qb-clothing / fivem-appearance (for clothing management)

Database

• MySQL database with the appropriate table structure
• SQL files provided for both ESX and QBCore

🚀 Installation

1. Download the resource

   # Place the resource in your resources folder
   resources/[scripts]/JOE_tattooshop

2. Database Setup

   • For ESX: Run [ESX] joe_tattooshop.sql in your database
   • For QBCore: Run [QB] joe_tattooshop.sql in your database

3. Configure the Script

   • Open config.lua
   • Set Config.Core to "ESX" or "QBCore"
   • Configure Config.CoreExport() function
   • Set Config.SkinMenu to match your clothing script
   • Adjust shop locations, prices, and other settings as needed

4. Add to server.cfg

   ensure JOE_tattooshop

5. Restart your server

⚙️ Configuration

Basic Configuration

Config.Core = "QBCore" -- or "ESX"
Config.SkinMenu = "qb-clothing" -- or "fivem-appearance"
Config.Lang = "EN" -- Language selection

Shop Configuration

Each shop can be configured with:

• Position: Blip and shop coordinates
• Chairs: Multiple tattoo chairs per shop
• Business Mode: Enable/disable job requirement
• Owner Job: Required job for business mode
• NPC Model: Optional NPC tattoo artist
• Marker Colors: Customizable marker colors

Pricing

Each tattoo has:

• Price: Cost to purchase the tattoo
• Remove Price: Cost to remove the tattoo (typically higher)

Camera System

The script includes automatic camera positioning:

• Front Animations: For tattoos on front-facing body parts
• Back Animations: For tattoos on back-facing body parts
• Custom Camera Angles: Each tattoo has optimized camera positions

🎯 Usage

For Players

1. Find a Tattoo Shop: Look for the tattoo shop blip on your map
2. Approach a Chair: Walk to an available tattoo chair (marked with a red marker)
3. Press E: Sit down on the chair
4. Browse Tattoos: Use the UI to browse different tattoo collections
5. Preview: Click on tattoos to see them on your character
6. Purchase: Click "Buy" to purchase a tattoo (requires sufficient funds)
7. Remove: Click "Remove" to remove an existing tattoo (costs removal fee)
8. Exit: Press X or close the UI to leave

For Business Owners (Business Mode)

1. Set Job: Configure business = true and set ownerJob in config
2. Approach Busy Chair: When a customer is on a chair, approach it
3. Press E: Open the tattoo menu for the customer
4. Manage Customer: Apply or remove tattoos for the customer
5. Customer View: Customer sees their character being tattooed in real-time

📁 File Structure

JOE_tattooshop/
├── client/
│   └── client.lua          # Client-side logic
├── server/
│   ├── server.lua          # Server-side logic
│   └── version_check.lua    # Version checking
├── meta/
│   ├── joe_overlays.xml    # Custom tattoo overlays
│   └── shop_tattoo.meta    # Tattoo shop metadata
├── stream/
│   └── *.ytd               # Tattoo texture files
├── html/                   # UI files (HTML/CSS/JS)
├── config.lua              # Main configuration file
├── fxmanifest.lua          # Resource manifest
├── translation.js          # Translation file
├── [ESX] joe_tattooshop.sql
└── [QB] joe_tattooshop.sql

🎨 Customization

Adding Custom Tattoos

1. Add your tattoo texture files to the stream/ folder
2. Update meta/joe_overlays.xml with your tattoo definitions
3. Add entries to Config.TattooList in config.lua
4. Configure camera positions and animations for each tattoo

Custom Shop Locations

Add new shops in Config.Tattooshops:

{
    business = false,
    ownerJob = "",
    pedModel = nil,
    pedHeadingToChair = 197.46,
    pedHeadingToChairBack = 22.31,
    position = vector3(x, y, z),
    tattooPedSpawnPos = vector4(x, y, z, heading),
    Chairs = {
        [1] = {
            position = vector3(x, y, z),
            tattooerPos = vector4(x, y, z, heading),
            chair_coord = vector4(x, y, z, heading),
            busy = false,
        },
    }
}

Translation

Add new languages in Config.Translate:

Config.Translate = {
    ["YOUR_LANG"] = {
        ["tattoo_blip"] = "Translation",
        ["take_a_sit"] = "Translation",
        -- ... etc
    }
}

🔧 Troubleshooting

Tattoos Not Showing

• Ensure your clothing script is compatible
• Check that tattoos are being saved to the database
• Verify the tattoo collection files are loaded

UI Not Opening

• Check browser console for JavaScript errors
• Ensure html/ui.html exists and is properly formatted
• Verify NUI focus is being set correctly

Database Issues

• Run the appropriate SQL file for your framework
• Check that the tattoos column exists in your database
• Verify MySQL connection is working

📝 Credits

• Author: JOE STUDIOS
• Version: 1.0.3
• Framework: FiveM

📄 License

This resource is protected by escrow. The following files are accessible:

• config.lua
• client/client.lua
• server/server.lua
• server/version_check.lua

🤝 Support

For support, bug reports, or feature requests, please contact the author or visit the resource page.

📌 Notes

• This script uses Lua 5.4
• Requires FiveM server with proper MySQL setup
• Some features may require additional dependencies
• Custom tattoo collections require proper texture files and metadata

---

Enjoy your new tattoo shop system! 🎨