Utiliser une base d'image pour des inventaires comme esx_inventoryhud

Bonjour à tous.

Petit tuto pour vous annoncer que ça y’est, j’ai terminé mon idée d’avoir une base d’images externe à esx_inventoryhud pour pouvoir partager ce petit système à tout ceux qui en ont marre de :

  1. Chercher des images sur le net pour leurs items
  2. Oublier d’ajouter la nouvelle image à fxmanifest.lua
  3. Ceux qui utilisent des images moches :kissing:

Déjà avant de commencer les manipulations, sachez que toutes mes images d’items proviennent de moi mais aussi du web (certaines images plus qualitatives viennent de Disc_inventory ou même de leak de NoPixel, oui le leak c’est mal on sait, mais c’est que des images donc…)

Voici le lien que nous allons utiliser : CDN Altered City

C’est en tout pas moins de :exclamation:1102 images:exclamation: qui sont stockées ici, donc autant d’items possibles.

Alors oui, il y a des doublons, des items qui auront sans doute le même nom mais certaines images dont le nom (en tant qu’item) peuvent être identiques mais dont l’apparrence sera différente d’un png à l’autre et ce, afin de proposer plusieurs choix (et aussi parce que la flemme de trier)

Nous voici donc partis sur le tuto !

Sommaire 📚

Pré-requis ✔️

Édition des fichiers nécessaires 🖥️

Rendez-vous dans :

esx_inventoryhud/html/js/inventory.js

Une fois dans ce fichier, cherchez la ligne contenant le code suivant (normalement ligne 64) :

$(this).css('background-image', 'url(\'img/items/' + itemData.name + '.png\'');

Et modifiez la en :

$(this).css('background-image', 'url(\'https://cdn.altered-city.fr/esx_inventoryhud/' + itemData.name + '.png\'');

Ensuite, toujours dans le même fichier, cherchez la ligne contenant le code suivant (normalement ligne 118-119) :

$("#playerInventory").append('<div class="slot" style="background-color: ' + bgColor + ';"><div id="item-' + index + '" class="item" style = "background-image: url(\'img/items/' + item.name + '.png\')">' +
        '<div class="item-count">' + count + '</div> <div class="item-name">' + item.label + '</div> </div ><div class="item-name-bg"></div></div>');

Et modifiez la avec ce code-ci :

$("#playerInventory").append('<div class="slot"><div id="item-' + index + '" class="item" style = "background-image: url(\'https://cdn.altered-city.fr/esx_inventoryhud/' + item.name + '.png\')">' +
        '<div class="item-count">' + count + '</div> <div class="item-name">' + item.label + '</div> </div ><div class="item-name-bg"></div></div>');

ET C’EST TOUT !

Concrètement, qu’est-ce que cela apporte ?

  • Fini d’oublier d’ajouter une image dans fxmanifest.lua et chercher pendant 15 minutes pourquoi elle ne s’affiche pas
  • Une ressource plus légère et donc moins de fichiers à load pour vos joueurs vu qu’au lieu de tout télécharger depuis le serveur, les images proviendront d’ailleurs
  • Une source d’image qualitative et quasi complète afin de répondre à tous les besoins d’items pour votre serveur

SQL pour les items 📝

Et oui, je ne suis pas radin, je me suis dit que j’allais sur mon temps libre (j’ai trop de temps libre), créer un SQL permettant d’ajouter basiquement un item pour chaque image présente dans ce dossier.

Quand je dis « basiquement », comprenez bien que tout ce que vous aurez c’est :

  • Le nom de l’image liée à l’item
  • Un nom d’item en français
  • Chaque item pèsera 1g (version esx_legacy) (si vous utilisez limit au lieu de weight, il faudra modifier ce fichier)

:warning: Attention cependant, ESX n’a, à ce jour, normalement toujours pas été modifié de ce côté. Ajouter autant d’item dans la base de données pourrait provoquer des instabilités notables sur votre système! :warning:

Voici le lien de DL : CLIQUE MOI

Voilà, tutoriel court et facile mais j’espère qu’il vous plaira ! Un système d’upload était prévu à l’origine pour cette galerie mais comme j’ai un doute sur les intentions de cette belle communauté qu’est celle de FiveM, je préfère me charger moi-même de l’upload des futures images :slight_smile: N’hésitez donc pas à passer sur le Discord de FiveM France pour suggérer quelques images manquantes selon vous ou même à les poster à la suite de ce tuto mais je me réserve le droit d’ajouter ou non votre image sur mon site :slight_smile: