====== Généralités ======
//Guide écrit par Rium en 2010//
\\
===== Mettre sa propre image d'avatar =====


Vous pouvez utiliser une des images qui sont à votre disposition pour représenter votre personnage, mais il est sûrement plus sympa d'en mettre une plus personnelle.

Pour cela, lorsque vous cliquez sur l'icône "miroir" afin de modifier votre description, vous avez la possibilité de cocher "j'utilise ma propre image!" et d'uploader l'image de votre choix (elle doit faire moins de 100 Ko). Vous utiliserez ensuite le mot clé %image% à l'endroit où vous le souhaitez dans votre description pour que l'image uploadée apparaisse.

===== Que puis-je faire d'autre pour personnaliser ma description ? =====


Les descriptions supportent le code HTML, ce qui vous autorise à l'aménager à votre goût.

Voici une liste non exhaustive des balises que vous pourriez utiliser :

<code>

<strong>votre texte en gras</strong>
<em>votre texte en italique</em>
<span style="color: blue">votre texte en bleu</span>
<p style="background-color:white">le fond de votre texte en blanc</p>
<p style="font-family:Helvetica">Ce texte est écrit en Helvetica</p>
etc....
</code>

Je vous invite à chercher sur Google, ou tout autre site (par exemple https://www.w3schools.com/html/), les balises HTML qui existent, et comment bien les utiliser.

===== Trouver une image pour son personnage ======
//La suite du guide a été écrite par Azaenor en 2023//

==== Faire soi-même ====
Rien de tel, si on a un peu de talent, que de dessiner soi-même son personnage (sur papier ou en digital). Le résultat dépendra de votre habileté, mais est "gratuit".

==== Graphiste et illustrateur/illustratrice ====
Très bonne solution, possible de demander exactement ce que l'on veut, par contre cela coute évidemment et c'est normal. Vous pouvez passer soit par un contact direct de quelqu'un qui travaille dans votre région, soit passer par des sites de mise en relation d'artistes avec des acheteurs. Par exemple https://www.fiverr.com/ en cherchant par exemple "character design". Coté prix, ça peut aller d'une vingtaine d'euros à plusieurs centaines en fonction du service

==== Le web ====
Peut être le plus simple, la recherche Google. Cette solution ne permet généralement pas d'avoir une image parfaite de votre PJ, mais une approche en cherchant un peu. D'expérience, les recherches en anglais donnent de meilleurs résultats et les mots clefs type sont par exemple "DnD character" ou encore "medieval fantasy character". À cela, il vous faudra évidemment ajouter quelques précisions complémentaires (race, classe, etc). Une bonne source d'image est par exemple https://www.pinterest.fr/ sur lequel on retrouve un très grand nombre d'illustrations de personnages pour des JDRs.

==== "Software" ====
Ici, je veux parler de programme ou application de character design. Il en existe pas mal, tous plus ou moins payant. Les résultats peuvent être plus ou moins bons, mais c'est souvent très limité dans le style. Pour n'en citer qu'un https://www.heroforge.com/ vous permet de faire gratuitement des personnages, mais il faudra payer pour avoir une version haute définition.

==== IA ====
Le petit nouveau des solutions pour faire l'image de son personnage. Ici, on joue avec des IA génératrices d'images comme par exemple https://www.midjourney.com/ à qui on demande de faire du character design. La plupart des IA ont un nombre de générations gratuit, soit par compte, soit par jour. Après ça devient payant. Si je parle de Midjourney, que je connais, vous avez droit à 25 générations gratuites limité au bon vouloir de l'utilisation des serveurs (utilisation gratuite uniquement quand les serveurs ne sont pas trop occupés avec les gens qui payent). Si vous avez une idée précise en tête et que vous n'êtes pas connaisseur de ce genre d'outil et de son fonctionnement, il vous faudra plus de 25 générations pour arriver à vos fins. J'ai fait une mini stat sur mes dernières générations (alors que je maitrise correctement l'outil) je suis environ entre 15-20 générations pour avoir une image qui me plait et qui correspond à ce que j'ai en tête. Donc, on passe vite par la case portefeuille pour avoir quelque chose qui nous plait. En effet, plus ce que vous voulez obtenir est précise, plus ça sera compliqué pour l'IA de le réaliser. Si vous voulez juste un elfe mâle avec des cheveux blancs et vêtu en vert, quelques générations suffiront. Par contre, si vous voulez un elfe mâle avec des cheveux blancs et vêtu en vert, un pantalon noir, une ceinture dorée, un arc, un carquois en cuir, des yeux bleus, etc, là, ça sera plus compliqué parce que les IA ne prennent en compte qu'un nombre limité de requêtes. Et même après de nombreuses générations, il est parfois nécessaire de passer par la case Photoshop, Paint.net ou autre pour affiner le résultat.

Voilà un résumé rapide. Pour avoir les meilleurs résultats et plus cohérent avec votre personnage, je vous conseille de passer par des artistes ou par vous si vous en êtes un.

En second choix, la recherche d'images existantes sur le web. Ça peut être relativement long pour trouver la perle, mais il y a tellement de chose existante qu'on finit presque toujours par trouver.

Si vous avez du temps et que l'IA ne vous fait pas peur, je vous le conseille en troisième choix. Ça peut prendre du temps, ça coute un peu et le résultat n'est que rarement exactement ce que vous voulez malgré des qualités d'images impressionnantes. Par contre, je ne parle pas ici de "pour ou contre les IA" et le vol du travail des artistes. C'est un autre sujet, mais dont il faut être conscient.

Et en dernier, je mettrais tout ce qui est logiciel ou application. Je trouve perso que les résultats sont un peu pauvres visuellement. Par contre, c'est pratique et relativement simple d'usage. C'est un peu le jeu de "on habille une poupée". 

===== Stocker ses images =====
Odyssée ne permet pas de stocker des photos autres que celle que vous pouvez ajouter sur la partie droite de la modification de fiche.

Donc dans le cas où vous voulez faire une fiche perso plus complexe en ajoutant plusieurs images par exemple, il y a diverses solutions/situations.

    - Votre image vient du web, dans ce cas pas besoins de stockage particulier, plus qu'à faire référence à l'URL de l'image dans votre code HTML de la fiche perso
    - Vous avez créé une image par X technique exposée précédemment. Dans ce cas, il vous faut trouver un moyen d'héberger sur le web votre image pour en récupérer son URL afin de l'ajouter dans le code de la fiche perso. Voici quelques outils :

==== Discord ====
https://discord.com/, et oui en plus de rejoindre le discord du jeu, vous pouvez aussi vous créer votre propre serveur discord gratuitement et y stocker vos illustrations en les ajoutant dans un canal. Attention, il s'agit bien de mettre votre image sur VOTRE serveur et non celui du jeu (il est interdit de donner votre image sur notre discord, car il s'agit d'une information RP). Une fois fait plus qu'à clic droit sur l'image et copier le lien. ATTENTION, il semblerait que Discord désactive et modifie les liens des images au bout d'un certain temps. Pensez donc à vérifier régulièrement que vos liens fonctionnement toujours si vous utilisez cette option.

==== Flikr ====
https://www.flickr.com/, site d'artiste, principalement photographes. Il est donc possible d'y mettre vos images et d'en retirer un lien utilisable.
       
==== Pinterest ====
https://www.pinterest.fr/, réseau social qui permet de publier des images.
==== Autres ====
https://imgur.com/, https://www.zupimages.net/, etc, sites d'hébergement d'image gratuit ou non mais sans grandes certitudes de pérennité du stockage. Il existe de nombreux sites de ce genre

Quel que soit le stockage choisi, attention au droit d'auteur si vous n'avez pas fait vous-même l'image.

De manière générale, je vous conseille de jouer sur la redondance des supports pour vos images. Il n'est pas rare que pour limiter les tailles des serveurs, certains services retirent des images périodiquement et ça serait dommage de perdre la vôtre. Pour ça, je vous conseille de stocker vos images sur plusieurs solutions précédemment présentées, mais aussi de manière hors web. Par exemple sur un disque dur, une clef USB ou même par mail ou cloud privé. Ça évitera la mauvaise surprise en cas de disparition. 

===== Ajout de son =====

Le but est d'ajouter une musique ou un son d'ambiance à votre description. Ici, il faudra que votre son soit disponible en mp3. via un lien URL. Ce n'est par exemple pas le cas d'une vidéo youtube, mais par exemple un son qui vient d'une bibliothèque de son (comme https://lasonotheque.org/), ou même d'un son que vous avez hébergé à l'instar de ce que j'ai décrit pour les images. En effet, il est possible d'envoyer un son sur VOTRE discord (max. 25 Mo) et d'en récupérer le lien.

<code>

<head>
    <title>Lecture de son MP3 avec barre de lecture personnalisée</title>
    <style>
        /* Personnalisation de la couleur du lecteur audio */
        audio {
            background-color: rgba(0, 0, 0, 0.0); /* Couleur de fond avec une opacité de 0.5 */
            color: white; /* Couleur du texte */
            border: 3px solid rgba(0, 0, 0, 0.3); /* Bordure avec une opacité de 0.8 */
            border-radius: 50px; /* Coins arrondis */
            width: 250px; /* Largeur du lecteur audio */
            height: 25px; /* Hauteur du lecteur audio */
        }
        
        /* Personnalisation des contrôles audio */
        audio::-webkit-media-controls-panel {
            background-color: rgba(0, 0, 0, 0.1); /* Couleur de fond des contrôles avec une opacité de 0.2 */
            border-radius: 10px; /* Coins arrondis */
            padding: 5px; /* Espacement intérieur */
        }
    </style>
</head>
<body>
    <!-- Balise audio pour la lecture du son -->
    <audio controls>
        <source src="https://lasonotheque.org/UPLOAD/mp3/1445.mp3" type="audio/mpeg">
        Votre navigateur ne prend pas en charge l'élément audio.
    </audio>
</body>
</code>

Ce qui pourrait donner quelque chose comme ça:
\\

<code>

<!DOCTYPE html>
<html>
<head>
  <style>
    /* Styles pour les conteneurs */

    /* Style pour le conteneur extérieur */
    .outer-container {
      width: 92vw; /* Ajustement de la largeur selon écran */
      max-width: 1200px; /* Largeur maximale */
      max-height: 1200px; /* Hauteur maximale */
      min-width: 600px; /* Largeur minimale */
      min-height: 400px; /* Hauteur minimale */
      height: auto; /* Ajustment de la hauteur automatique */
      display: flex; /* Active le modèle de disposition flexbox */
      flex-direction: column; /* Disposition verticale des containers */
      align-items: center; /* alignement du conteneur extérieur */
      justify-content: flex-start; /* alignement du contenu */
      border: 3px solid rgba(255, 255, 255, 1.0); /* Ajoute le cadre */
      border-radius: 5px; /* Ajoute les coins arrondis */
      box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Ajoute l'ombre */
      padding: 20px; /* Espacement interne */
      background-image: url("https://miro.medium.com/v2/resize:fit:1100/format:webp/1*AtkkTkSLk6Jd0nwVqifzeQ.jpeg"); /* URL de l'image de fond */
      background-size: cover; /* Type de remplissage du fond d'écran */
      margin-top: 0px; /* Déplace le conteneur vers le haut */
    }
    
    /* Style pour le conteneur central */
    .middle-container {
      width: 100%; /* Occupe toute la largeur disponible */
      min-width: 600px; /* Largeur minimale */
      background-color: rgba(255, 255, 255, 0.0); /* Couleur de l'arrière fond du conteneur central */
      padding: 20px; /* Espacement interne */
      display: flex; /* Active le modèle de disposition flexbox */
      align-items: center; /* Centrage vertical */
      justify-content: center; /* Centrage vertical */
    }
    
    /* Style pour le premier conteneur interne 1 */
    .inner-container1 {
      background-color: rgba(255, 255, 255, 0.0); /* Couleur de l'arrière fond du conteneur interne 1 */
      padding: 10px; /* Espacement interne */
      flex-grow: 4; /* Capacité de croissance d'un flex item */
      flex-basis: 40%; /* Spécifier la taille initiale d'un flex item */
      margin-right: 5px; /* Marge droite */
      display: flex; /* Active le modèle de disposition flexbox */
      align-items: center; /* Centrage vertical */
      justify-content: center; /* Centrage horizontal */
    }
    
    /* Style pour le deuxième conteneur interne 2 */
    .inner-container2 {
      background-color: rgba(255, 255, 255, 0.0); /* Couleur de l'arrière fond du conteneur interne 2 */
      padding: 10px; /* Espacement interne */
      flex-grow: 6; /* Capacité de croissance d'un flex item */
      flex-basis: 60%; /* Spécifier la taille initiale d'un flex item */
      margin-left: 15px; /* Marge gauche */
      margin-right: 5px; /* Marge droite */
      text-align: justify; /* Mise en forme du texte */
      border: 3px solid rgba(255, 255, 255, 1.0); /* Ajoute le cadre */
      border-radius: 50px; /* Ajoute les coins arrondis */
      box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Ajoute l'ombre */
      background-color: rgba(80, 60, 10, 0.6); /* Ajoute un fond transparent */
    }
    
    /* Style pour l'image dans le premier conteneur interne */
    .inner-container1 img {
      width: 100%; /* Largeur de l'image dans le container */
      border: 3px solid rgba(255, 255, 255, 1.0); /* Ajoute le cadre */
      box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Ajoute l'ombre */
      border-radius: 250px; /* Rayon des angles */
    }
    
    /* Style pour le nom du personnage */
    h1 {
      color: rgba(255, 255, 255, 1.0); /* Couleur du nom */
      text-shadow: 3px 3px 4px rgba(0, 0, 0, 0.9); /* Ajoute une ombre */
      text-align: center; /* Mise en forme du texte */
      font-size: 60px; /* Changer la taille de la police */
      font-family: "Georgia", sans-serif; /* Utilisation de la police "Cardinal" */
      font-weight: bold; /* Met en gras */
      margin-bottom: 10px; /* Marge haute */
      margin-down: 10px; /* Marge basse */
    }
    
    /* Style pour la "race" */
    h2 {
      color: rgba(255, 255, 255, 1.0); /* Couleur du nom */
      text-align: center; /* Mise en forme du texte */
      font-size: 24px; /* Change la taille de la police */
      font-family: "Georgia", serif; /* Utilisation de la police "Georgia" */
      margin-top: -5px; /* Marge haute */
      margin-bottom: -5px; /* Marge basse */
      margin-left: 15px; /* Marge gauche */
      margin-right: 15px; /* Marge droite */
      line-height: 1; /* Interligne réduit */
    }
    
    /* Style pour les paragraphes */
    p {
      color: rgba(255, 255, 255, 1.0); /* Couleur du texte */
      font-size: 16px; /* Taille de la police en pixels */
      font-family: "Georgia", serif; /* Utilisation de la police "Georgia" */
      margin-left: 15px; /* Marge gauche */
      margin-right: 15px; /* Marge droite */
    }
  </style>
</head>
<body>
  <div class="outer-container">
    <!-- Début du conteneur extérieur -->
    <!-- Nom du personnage -->
    <h1>Nom du personnage</h1>
    <div class="middle-container">
      <!-- Début du conteneur central -->
      <div class="inner-container1">
        <!-- Début du premier conteneur interne -->
        <!-- URL de l'image de profil -->
        <img src="https://www.worldanvil.com/uploads/images/4b92257c13ca71c6095e8234afabdc81.jpg" alt="Image du personnage">
      </div>
      <!-- Fin du premier conteneur interne -->
      
      <div class="inner-container2">
        <!-- Début du deuxième conteneur interne -->
        <h2>- Race -</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed commodo est vitae congue lobortis. Vestibulum venenatis, enim nec mollis varius, velit nunc eleifend justo, vel bibendum mi elit ac risus. </p><p>Cras viverra dapibus diam, nec egestas leo pretium at. Phasellus iaculis congue odio non sagittis. Quisque fringilla quam quis lorem vulputate, id rhoncus quam tristique. Aliquam erat volutpat. </p><p>Fusce at leo in arcu aliquet posuere vel at arcu. Proin eleifend nisl in risus sagittis sagittis. Nullam volutpat euismod tortor, vitae feugiat neque vulputate vel. Sed ultricies diam vitae metus ullamcorper malesuada. </p><p>Duis consequat massa sit amet nunc finibus, sed laoreet felis congue. Pellentesque nec nulla ac metus iaculis interdum. Cras efficitur risus quis erat sollicitudin, vel tempor ligula fringilla. </p>
      </div>
      <!-- Fin du deuxième conteneur interne -->
    </div>
    <!-- Fin du conteneur central -->
    <head>
    <title>Lecture de son MP3 avec barre de lecture personnalisée</title>
    <style>
        /* Personnalisation de la couleur du lecteur audio */
        audio {
            background-color: rgba(0, 0, 0, 0.0); /* Couleur de fond avec une opacité de 0.5 */
            color: white; /* Couleur du texte */
            border: 3px solid rgba(0, 0, 0, 0.3); /* Bordure avec une opacité de 0.8 */
            border-radius: 50px; /* Coins arrondis */
            width: 250px; /* Largeur du lecteur audio */
            height: 25px; /* Hauteur du lecteur audio */
        }
        
        /* Personnalisation des contrôles audio */
        audio::-webkit-media-controls-panel {
            background-color: rgba(0, 0, 0, 0.1); /* Couleur de fond des contrôles avec une opacité de 0.2 */
            border-radius: 10px; /* Coins arrondis */
            padding: 5px; /* Espacement intérieur */
        }
    </style>
</head>
<body>
    <!-- Balise audio pour la lecture du son -->
    <audio controls>
        <source src="https://lasonotheque.org/UPLOAD/mp3/1445.mp3" type="audio/mpeg">
        Votre navigateur ne prend pas en charge l'élément audio.
    </audio>
</body>
  </div>
  <!-- Fin du conteneur extérieur -->
</body>
</html>
</code>

Évidement, il est possible de le mettre ailleurs dans la fiche au besoin.
Quoi qu'il en soit, c'est une technique simple sur ça mise en place, peut-être moins pour trouver un fichier .mp3 en ligne.

{{:faq:exemple_avec_lecteur_audio.png?400|}}

====== Exemples de code ======