Ci-dessous, les différences entre deux révisions de la page.
Prochaine révision | Révision précédente | ||
fr:tutorial:tutorial01 [2016/08/31 10:48] Nicolas Ronvel créée |
fr:tutorial:tutorial01 [2018/06/06 10:13] Nicolas Ronvel [Code complet du Template] |
||
---|---|---|---|
Ligne 1: | Ligne 1: | ||
- | FIXME **Cette page n'est pas encore traduite entièrement. Merci de terminer la traduction**\\ //(supprimez ce paragraphe une fois la traduction terminée)// | ||
- | |||
<WRAP center round tip 60%> | <WRAP center round tip 60%> | ||
**Attention** - Tout en suivant ce tutorial, il se pourrait que vos modifications de template ne soient parfois pas prises en compte. Dans ce cas, commencez par vérifier l'intégrité de votre code de template, au format JSON, avec par exemple un outil comme [[http://jsonlint.com/|Json Validator]]. Peut-être qu'un caractère spécial est manquant ou en trop ? Cet outil vous aidera à trouver ce genre d'erreur. | **Attention** - Tout en suivant ce tutorial, il se pourrait que vos modifications de template ne soient parfois pas prises en compte. Dans ce cas, commencez par vérifier l'intégrité de votre code de template, au format JSON, avec par exemple un outil comme [[http://jsonlint.com/|Json Validator]]. Peut-être qu'un caractère spécial est manquant ou en trop ? Cet outil vous aidera à trouver ce genre d'erreur. | ||
Ligne 9: | Ligne 7: | ||
====== Tutoriel - Et si on partait de rien ? ====== | ====== Tutoriel - Et si on partait de rien ? ====== | ||
- | Welcome to this first tutorial for Geckos, which will explain, step by step, how to create a simple template. The card that we'll create through this process is a card for the Blood Bowl Starplayers. You can then have your own Star Players cards, or have the classic ones with your minis photos on it. | + | Bienvenue dans ce premier tutoriel pour Geckos, qui vous expliquera comment créer un template simple, étape après étape. La carte qui servira de support sera une carte pour les Champions de Blood Bowl. Ainsi, à l'issue de ce tutoriel, vous pourrez créer les cartes de vos propres champions, ou illustrer les champions existants avec vos propres photos. |
{{:tutorial:01_nobbla_original.jpg?500|Nobbla, Classic Chainsaw Player}} | {{:tutorial:01_nobbla_original.jpg?500|Nobbla, Classic Chainsaw Player}} | ||
- | ===== A Blank Template ===== | + | ===== Un template vierge ===== |
- | Let's start with a "blank" template. We need a simple text file, that will be filled with a json object. Just call it ''myTemplate.json'', and open it (with atom.io, notepad++ or another text editor of your choice). | + | Commençons par un template "vierge". Pour cela, nous avons besoin d'un fichier texte basique, dans lequel nous écrirons du code JSON. Appelons-le ''monTemplate.json'', et ouvrons-le (avec atom.io, notepad++ ou tout autre éditeur de texte de votre choix). |
- | We'll start with the required fields. We need to set a ''styles'' array, that will contain our ''style'' object, with required properties. Our first field will be the one we'll use to store/set the name of our Star Players : | + | Commençons par les champs obligatoires. Tout d'abord, il nous faut un tableau nommé ''styles'', qui contiendra notre objet ''style''. Dans cet objet, nous rajoutons un champ éditable qui nous servira à stocker/utiliser le nom de nos champions : |
<code javascript template-skeleton.json> | <code javascript template-skeleton.json> | ||
Ligne 23: | Ligne 21: | ||
"styles": [ | "styles": [ | ||
{ | { | ||
+ | "key": "default", | ||
+ | "name": "Default", | ||
"fields": [ | "fields": [ | ||
{ "name": "name", "label": "Name", "default": "Nobbla " } | { "name": "name", "label": "Name", "default": "Nobbla " } | ||
Ligne 33: | Ligne 33: | ||
"canvasHeight": 750 | "canvasHeight": 750 | ||
} | } | ||
- | ] | + | ], |
+ | "description": | ||
+ | { | ||
+ | "description": "Template for Blood Bowl's Starplayers, with the V3 design", | ||
+ | "title":"Blood Bowl Classic Starplayer", | ||
+ | "credits": "by Nicolas Ronvel", | ||
+ | "key": "bb-starplayers-v3", | ||
+ | "url": "https://github.com/Gulix/geckos/" | ||
+ | } | ||
} | } | ||
</code> | </code> | ||
- | So, this is our starting point. Let's put that template in the Geckos. Open up the [[http://gulix.github.io/geckos|demo page]], display the **Template** pane, activate the [[..:manual:template_modes|Edition Mode]] and paste the above code in the template area. Click the button with the cogs (//Apply template to cards//)to validate the changes. | + | Ceci est donc notre point de départ. Essayons-le dans Geckos. Ouvrons la [[http://gulix.github.io/geckos|page de démo]], sélectionnons l'onglet **Template**, activons le [[..:manual:template_modes|mode d'édition]] puis copions le code ci-dessus dans la zone dédiée. Il faut ensuite cliquer sur le bouton avec les engrenages (//Apply template to cards//) pour valider les changements. |
{{:en:tutorial:01_ui01.png?200|}} | {{:en:tutorial:01_ui01.png?200|}} | ||
- | Go back to the **Card** pane, the existing card should be selected. It's been updated but its old name (//Captain Wolf//) has been kept. It's because the default template and the one you created share the same field : ''name''. The existing card has been updated to your new template, but the data has stayed the same. | + | Passons sur l'onglet **Card**, où la carte déjà existante doit être sélectionnée. Elle a été mise à jour avec notre template, mais son ancien nom (//Captain Wolf//) a été conservé. Quand on met à jour un template et que des champs partagent le même ''name'', comme c'est le cas ici avec le champ ''name'', leur valeur est conservée. |
- | //Create// a new card by clicking on the plus button. Nobbla is now in the list ! It's the default value we set in the field ''name'' for our template. If you set another value to this ''default'' property, any new card you'll add will have that new name. | + | //Créons// une nouvelle carte en cliquant sur le bouton Plus. Nobbla fait maintenant partie de la liste ! Il s'agit de la valeur par défaut pour le champ ''name'', définie dans le template. Si vous modifiez la propriété ''default'', puis appliquez ces modifications au template, vos nouvelles cartes utiliseront votre nouvelle valeur par défaut à la place. |
{{:en:tutorial:01_ui02.png?200|}} | {{:en:tutorial:01_ui02.png?200|}} | ||
- | ===== A Background and a Name ===== | + | ===== L'importance du fond ===== |
- | Right now, our card is a big red rectangle. That's because our ''canvasFields'' section is empty. Using FabricJS (and its [[http://fabricjs.com/kitchensink|kitchensink]]), we could build the items of the card : stars, boxes, ... But that will be for another card and another tutorial. | + | Actuellement, notre carte n'est rien d'autre qu'un gros rectangle rouge. C'est parce que la section ''canvasFields'' du template est vide. C'est cette section qui va //dessiner// la carte. Via FabricJS (et son [[http://fabricjs.com/kitchensink|bac à sable]]), on pourrait construire les éléments à afficher sur la carte : étoiles, cadres, ... Mais tout ça sera pour une autre carte, et un autre tutorial. |
- | Instead, I've got a card background set in a JPG file. We'll set it as the background of our card. Here's [[:en:tutorial:01_blankcard.jpg|the image file]] we'll use. | + | Au lieu de ça, j'ai créé une image de fond pour la carte sous la forme d'un fichier JPG. Nous l'utiliserons comme fond, et vous pouvez le voir et le télécharger {{:en:tutorial:01_blankcard.jpg?linkonly|par là}}. |
- | If the file was hosted on a Web Server, we could use its URL to use it. The 'src' property of the related image field on the canvas (canvas is where the card is drawn) will look like this : | + | Si on héberge le fichier sur un serveur Web, on peut alors utiliser l'URL correspondante pour l'utiliser. La propriété 'src' du champ image du canvas (l'objet html canvas est la zone de dessin de la carte) ressemblera alors à ça : |
<code javascript> | <code javascript> | ||
Ligne 61: | Ligne 69: | ||
</code> | </code> | ||
- | That'll work just fine, but what if the distant webserver is down ? Or if the image on the server gets deleted ? Then, our template becomes useless. And that's not good. This solution is a good one when you host yourself the images, and know that they're persistent. In that cas, you could even update the image without needing to update the template code. If you host {{geckos}} on the same server that your images, it's a good method. | + | Cela fonctionne bien, mais que se passe-t-il si le serveur distant est arrêté ? Ou si l'image est détruite ou déplacée sur le serveur ? Alors, notre template devient obsolète et inutilisable. Et ce n'est pas souhaitable. Cette solution est surtout utile quand vous hébergez vous-même le fichier image, et maîtrisez sa persistance. Dans ce cas d'utilisation, vous pourriez même mettre à jour l'image sans toucher au template, et celui-ci serait mis à jour également. Si vous hébergez **Geckos** sur le même serveur que vos images, cette solution est une très bonne solution. |
- | But there's also a way to //embed// images into a template. It uses [[https://en.wikipedia.org/wiki/Data_URI_scheme|DataUrl]]. The goal here is to //translate// a file into a string of characters, that the browser will be able to //translate back// into the original file. | + | Mais il est également possible //d'attacher// des images à un template. Pour cela, on utilise des [[https://en.wikipedia.org/wiki/Data_URI_scheme|DataUrl]]. L'objectif ici est de //traduire// un fichier en une chaîne de caractères, que le navigateur internet saura //re-traduire// pour obtenir le fichier original. |
- | To achieve this, you can use a [[http://dataurl.net/#dataurlmaker|DataUrl Maker]]. This online tool lets you drop a file on it to get the corresponding DataUrl. That string you'll get will replace the url of the file. It will increase the size of your template greatly, but your template will be self-contained : | + | On utilisera pour y arriver un [[http://dataurl.net/#dataurlmaker|DataUrl Maker]]. Cet outil en-ligne vous permet de déposer un fichier pour en obtenir la DataUrl correspondante. Cette chaîne de caractères remplace l'URL classique du fichier. Cela augmente considérablement la taille de votre template, mais celui-ci y gagne en indépendance : |
<code javascript> | <code javascript> | ||
Ligne 73: | Ligne 81: | ||
</code> | </code> | ||
- | Paste this new code section in place of the old ''canvasFields'' section of your template. Then apply the modifications. | + | Remplaçons la précédente section ''canvasFields'' de notre template par le code ci-dessus. Puis appliquer les modifications. |
{{:en:tutorial:01_ui01.png?200|}} | {{:en:tutorial:01_ui01.png?200|}} | ||
- | We now have the background of our card, but we want to be able to edit it. We already have an [[..:template:styles#editable_fields|editable field]], the one we use for the variable ''name''. Let's work with it. As this is an [[..:template:input_text|Input Text Field]], it generates a variable we can use with the string ''$name'' or ''$name$''. | + | Le fond de notre carte est maintenant défini, mais nous souhaitons pouvoir y modifier des informations. Nous disposons déjà d'un [[..:template:styles#editable_fields|champ éditable]], celui rattaché à la variable ''name''. Utilisons-le. Comme il s'agit d'un [[..:template:input_text|Champ de Texte]], il génère une variable que nous pouvons utiliser avec la chaîne ''$name'' ou ''$name$''. |
- | Let's add a **textbox** element on the card, between the top stars. Why not a **text** element ? Because the textbox element will allow us more flexibility, with the alignment and the wrapping. Add this code to the ''canvasFields'' section, separated from the background image definition with a comma. | + | Ajoutons un élément de type **textbox** sur la carte, entre les étoiles du haut. Pourquoi pas un élément **text** ? Et bien, parce que la textbox offre plus de flexibilité, avec la gestion de l'alignement et du bornage. On ajout donc ce code dans la section ''canvasFields'', séparé de la définition de l'image de fond par une virgule. |
<code javascript> | <code javascript> | ||
Ligne 88: | Ligne 96: | ||
</code> | </code> | ||
- | As you can see, it's pretty straightforward: we add a ''textbox'', at the position ''{91, 11}'', with a width of 351 pixels, and the text alignment is set to ''center''. This renders our card name correctly, thanks to the variable **$name**, who gets the value set in the corresponding field. But right now the text is poorly rendered. The [[http://fabricjs.com/docs/fabric.Textbox.html|FabricJS documentation]] lists many properties we can use for a ''textbox'' item. Let's use some of them ! | + | On peut remarquer que c'est assez simple : on ajoute une ''textbox'', à la position ''{91, 11}'', avec une largeur (//width//) de 351 pixels, et l'alignement du texte est centré. Enfin, on utilise la variable ''$name'' pour récupérer le nom de notre carte, qui est ensuite affiché sur la carte. Mais tout ça est un peu moche. La [[http://fabricjs.com/docs/fabric.Textbox.html|documentation de FabricJS]] liste plusieurs propriétés que l'on peut utiliser pour une ''textbox''. Voyons ce qu'on peut faire ! |
<code javascript> | <code javascript> | ||
Ligne 94: | Ligne 102: | ||
</code> | </code> | ||
- | We've just added three properties : | + | Nous avons donc ajouté trois propriétés : |
- | * **fill** sets the color of the text. It accepts any color in the form of a RGB hexadecimal value. | + | * **fill** indique la couleur du texte. On y renseigne une valeur héxadécimale correspondant à une couleur RGB. |
- | * **fontFamily** indicates which font will be used. It will use the fonts installed on the user computer, so make sure it's a common font (or [[..:template:custom-fonts|use a Custom Font]]). | + | * **fontFamily** indique la police utilisée. Cela utilisera les polices installées sur le poste de l'utilisateur, aussi assurez-vous qu'il s'agit d'une police fréquemment pré-installée (ou utilisez [[..:template:custom-fonts|une Police personnalisée]]). |
- | * **fontWeight** can accept numeric values (400, 600, 800, ...) or text values ("bold", "normal", ...). It defines the boldness of the text. | + | * **fontWeight** peut utiliser une valeur numérique (400, 600, 800, ...) ou du texte ("bold", "normal", ...). Cela sert à définir si on veut du texte normal ou en gras. |
- | We've not added a property to set the **fontSize**. It exists, and is set by default to 40 (see [[http://fabricjs.com/docs/fabric.Textbox.html#fontSize|FabricJS documentation]]), and this size is well suited for our needs. But let's set it to 38 to see it in effect. Our whole ''canvasFields'' section now looks like this (I've reduced the DataUrl for the code to be easier to read, consider to restore it if you're testing it) : | + | Notez que nous n'avons pas ajouté de propriété ''fontSize'' pour gérer la taille de la police. Elle existe, et possède une valeur par défaut à 40 (voir [[http://fabricjs.com/docs/fabric.Textbox.html#fontSize|la documentation de FabricJS]]), et cela nous convient très bien. Pas besoin de surcharger un template quand la valeur par défaut suffit. Modifions-la quand même à 38 pour la voir en action. Notre section ''canvasFields'' ressemble maintenant à ça (la DataUrl a cependant été tronquée pour que ce soit plus facile à lire, pensez à la restaurer si vous testez ce bout de code) : |
<code javascript> | <code javascript> | ||
Ligne 109: | Ligne 117: | ||
</code> | </code> | ||
- | Our card now displays the name of our Star Player ! If you change it in the editable field on the left part, it changes as well on the card image (as soon as you leave the field). Great ! Let's add some more fields ! | + | Notre carte affiche maintenant le nom de notre Champion ! Si vous le modifiez dans le champ sur la gauche, il sera également modifié sur l'image générée pour la carte (il faut quitter le focus du champ pour cela). Super ! Occupons-nous des autres champs ! |
- | {{:en:tutorial:01_ui03.png?400|What it should look like}} | + | {{:en:tutorial:01_ui03.png?400|Ca devrait ressembler à ça}} |
- | ===== Making a choice ===== | + | ===== Un choix à faire ===== |
- | Before considering adding some more **editable fields** on our template, let's complete the layout of the card. The different boxes which will contain the editable values have no text to describe them. We will add them by adding some **textbox** elements to the ''canvasFields'' section. | + | Avant de penser à rajouter d'autres **champs éditables** dans notre template, complétons le fond de la carte. Les différents cadres sur la droite, qui vont contenir les valeurs éditables, n'ont pas de texte pour les décrire. Nous allons les ajouter via des **textbox** dans la section ''canvasFields''. |
- | Those elements will not be linked to a variable, so why don't we put them on the background image ? | + | Ces éléments ne seront liés à aucune variable, pourquoi ne pas les avoir inclus dans l'image de fond directement ? |
- | What if we want to make our template accessible to other languages ? We'll just have to change the value of those fields instead of having to edit the image, and get the new and long //DataUrl// for the background image. So, **textbox** elements it is ! | + | Et si on souhaite traduire notre template dans d'autres langues ? Nous aurons juste à modifier le contenu de ces textbox, au lieu de modifier l'image, récupérer sa nouvelle DataUrl, et recopier celle-ci. Une bonne raison pour utiliser cette méthode ! |
<code javascript> | <code javascript> | ||
Ligne 132: | Ligne 140: | ||
</code> | </code> | ||
- | I've repeated the **$name** field to show you what part of the template I've modified. Don't repeat it. To know how to set the coordinates of a field, open up your background image in an image editor, like [[http://www.getpaint.net/index.html|Paint.NET]]. Then select the area where you want to put your field. The coordinates of your selection are usually shown on the bottom info bar of the editor. | + | La textbox utilisant **$name** a été reprise dans le code exemple pour montrer à quel niveau du code ajouter les nouveaux éléments. Ne la recopiez pas ! |
- | You can see that no ''height'' is set for the TextBoxes. They will auto-adjust their height, depending on how much text they got. | + | Pour connaître les coordonnées où placer un élément, ouvrez votre image de fond dans un éditeur tel que [[http://www.getpaint.net/index.html|Paint.NET]]. Puis sélectionnez la zone où vous souhaitez placer votre champ. Les coordonnées de votre sélection apparaitront normalement dans une barre d'informations en bas du logiciel. |
- | Now, let's think of our 4 fields for the player's attributes : **Movement**, **Strength**, **Agility** & **Armour**. We could use a **text input** field, but then the user could put an Agility value of "XX", which is meaningless. We'll opt instead for a [[..:template:choice_input|dropdown menu]], with only the existing and accepted values proposed. | + | Remarquez qu'il n'y pas de hauteur (''height'') de définie pour les TextBox. C'est parce qu'elles s'ajustent automatiquement en fonction de la quantité de texte fournie. |
- | First, go back to the ''fields'' section of the template. Add four **options fields**. For each, we define the options that the user will be able to select. Each option has a value and a text. The text is (for now) only used as a way to display the options. | + | Maintenant, réfléchissons à notre 4 champs pour les attributs des Champions : **Movement**, **Strength**, **Agility** & **Armour** (nous utiliserons les termes en anglais pour coller avec l'article original et le code original, en version anglaise). On pourrait utiliser un **champ de texte**, mais cela permettrait aux utilisateurs de mettre, par exemple, une Agility à "XX", ce qui est incohérent. Plutôt que cette voie, nous allons partir sur [[..:template:choice_input|listes déroulantes]], qui ne proposeront que des valeurs acceptables. |
+ | |||
+ | Revenons à la section ''fields'' du template. Ajoutons-y 4 **champs d'options**. Pour chacun d'eux, nous y définissons les options accessibles par l'utilisateur. Chaque option a une valeur et un texte. Le texte est utilisé pour afficher les options et récupérer leur contenu. | ||
<code javascript> | <code javascript> | ||
Ligne 190: | Ligne 200: | ||
</code> | </code> | ||
- | Edit your template code, apply the modifications, and let's see what changed on our card. On the left part, under the previous **Name** field, 4 new fields appears : that's our **options** fields ! | + | Modifiez en conséquence le code de votre template, appliquez ces modifications dans l'éditeur, et voyons ce que cela a changé sur notre carte. Dans la partie à gauche, sous le champ **Name**, on trouve maintenant notre 4 champs d'options ! |
- | {{:en:tutorial:01_ui04.png?500|Our new fields}} | + | {{:en:tutorial:01_ui04.png?500|Nos champs d'options !}} |
- | Now, like we did previously, we'll add four new **Textboxes** in our ''canvasFields'' section. Those elements will have a **text** property set with the variables that are generated by our options. We'll use for that the text of the ''value'' property, accessible via the variable ''$myVariable''. See the [[..:template:choice_input|documentation]] for more informations on variables generated by those fields. | + | Comme précédemment, nous allons ajouter 4 **Textboxes** dans la section ''canvasFields''. Ces éléments renseigneront leur propriété ''text'' avec les variables générées par les listes déroulantes. Nous utiliserons le texte de la propriété ''value'', accessible via la variable ''$myVariable''. Consultez la [[..:template:choice_input|documentation]] pour plus d'informations sur les variables générées par ces champs. |
- | We use again **textboxes**, with an adjustment of the color and the size. Here is the added code, the first line being one already existing for you to know where to paste this code : | + | Nos **textbox** vont être ajustées au niveau de la taille et de la couleur. Voici le code à ajouter, la première ligne existant déjà et servant de point de repère : |
<code javascript> | <code javascript> | ||
Ligne 206: | Ligne 216: | ||
</code> | </code> | ||
- | We've now got an editable card, and when we change the value of one of our fields (Strength to 5, for example), it is reflected on the image. But some fields are still missing. Now, let's illustrate our card ! | + | Notre carte est maintenant éditable, et chaque fois qu'une valeur change, l'image générée change en conséquence. Il est temps de passer à l'illustration ! |
+ | ===== Photo d'identité ===== | ||
- | ===== Mug Shot ===== | + | Notre Champion a besoin d'une photo / illustration pour être correctement identifié. Pour cela, nous utiliserons un [[..:template:image_input|Champ Image]]. Ce type de champ permet à l'utilisateur de charger une image pour chaque carte, image qui sera ensuite utilisée dans l'image de la carte. |
- | Our Star Player need a photo / illustration to be correctly identified. For this purpose, we'll use an [[..:template:image_input|Image field]]. This type of field allows the user to load an image for each card, image that can then be used on the card. | + | Actuellement, le **Champ Image** est plutôt basique. [[https://github.com/Gulix/geckos/issues/37|Des évolutions sont programmées]]. En attendant le développement de celles-ci, l'utilisateur doit s'assurer que le ratio de l'image qu'il charge correspond au ratio du cadre dans lequel on va l'utiliser. Sinon, l'image sera étirée. |
- | Right now, the **Image input** control is pretty basic. But it's [[https://github.com/Gulix/geckos/issues/37|planned to evolve]]. Until completion of this Issue, the user has to ensure his image file corresponds, in ratio, to the image frame on the card. Or the image will be stretched. | + | Pour ajouter un **Champ Image**, ajoutons juste cette ligne à la section ''fields'' du template : |
- | + | ||
- | To add the **Image input** field, just add this line to the ''fields'' part of the template : | + | |
<code javascript> | <code javascript> | ||
Ligne 220: | Ligne 229: | ||
</code> | </code> | ||
- | This field will generate a **$portray** variable, which will contain the image in the form of a DataUrl (remember ?). Just what we need to add an image to our canvas : | + | Ce champ génèrera une variable **$portray**, qui contiendra l'image sous forme de DataUrl (ça ne vous rappelle rien ?). Juste ce dont on a besoin pour notre canvas : |
<code javascript> | <code javascript> | ||
Ligne 226: | Ligne 235: | ||
</code> | </code> | ||
- | Apply those modifications to your template, and then, look ... | + | Modifiez votre template, appliquez les modifications, et admirez ! |
- | {{:en:tutorial:01_ui05.png?500|Nobbla's Mug Shot}} | + | {{:en:tutorial:01_ui05.png?500|Nobbla en chair et en os !}} |
- | ===== Do you have the skills ? ===== | + | ===== Bilan de compétences ===== |
- | Three fields are still missing. Let's start with the easier one. | + | Trois champs manquent encore à l'appel. Commençons avec le plus aisé. |
- | ==== Cost ==== | + | ==== Coût ==== |
- | Each Star Player requires a certain amount of Gold Pieces to be recruited. Let's add an input field that will appear in the bottom of the card. The editable field : | + | Chaque Champion nécessite un certain montant de Pièces d'Or pour être recruté. Ajoutons un champ de texte pour renseigner cette valeur, qui apparaîtra en bas de la carte. |
+ | |||
+ | Dans la partie ''fields'' : | ||
<code javascript> | <code javascript> | ||
Ligne 242: | Ligne 253: | ||
</code> | </code> | ||
- | And the canvas field : | + | Dans la partie ''canvasFields'' : |
<code javascript> | <code javascript> | ||
Ligne 248: | Ligne 259: | ||
</code> | </code> | ||
- | One new thing here is the use of the ''fontStyle'' property in the canvas field. It sets the text to italic. Pretty easy to understand. | + | Première nouveauté, l'utilisation de ''fontStyle'' pour indiquer que le texte sera affiché en italique. Rien de bien compliqué là-dedans. |
- | The other thing is the use of an [[en:template:advanced_string_variables|Advanced String Variable]] with ''$cost$ GP''. It helps us build a more intelligent string, by always adding GP (Gold Pieces) to the cost string the user will use. Of course, it could cause some issues (a Free star player ?). But, again with a translated template in mind, we could easily change this value on the template. Or change the currency (SP for Silver Pieces ?). | + | Autre nouveauté, l'utilisation d'une [[en:template:advanced_string_variables|Variable de chaîne Avancée]] avec ''$cost$ GP''. Cela permet de construire une chaîne plus intelligente, en ajoutant GP (pour Gold Pieces) après le coût indiqué par l'utilisateur. Bien sûr, cela peut entraîner quelques soucis (un Champion gratuit ?). Mais dans le cadre d'une traduction de template, cette valeur sera modifiée facilement. |
- | ==== Multilines ==== | + | ==== A la ligne ==== |
- | The next input field will be a new one : the [[..:template:multiline_text_input|Multiline Text Input]] field. It works like the classic **Text input** field, but allows the user to add line-breaks. We'll add two fields : | + | Nos prochains champs vont utiliser un nouveau type de champ : le [[..:template:multiline_text_input|Champ de texte multiligne]]. Cela fonctionne comme un **Champ Texte** classique, mais l'utilisateur peut y saisir des sauts de ligne. Ajoutons deux champs à notre section ''fields'' du template : |
<code javascript> | <code javascript> | ||
Ligne 261: | Ligne 272: | ||
</code> | </code> | ||
- | We now add two more **textboxes** that will be linked to these two fields : | + | Puis ajoutons les deux **textbox** correspondantes dans ''canvasFields'' : |
<code javascript> | <code javascript> | ||
Ligne 268: | Ligne 279: | ||
</code> | </code> | ||
- | Those fields use an automatic wrapping method : lines that are too long are broken to be displayed on several lines. And the user can still control when the line-breaks occur by setting them himself. | + | Ces champs utilisent un bornage automatique. Si le texte venait à être trop long pour la largeur spécifiée, un saut à la ligne automatique est ajouté. Les sauts de lignes de l'utilisateur, saisis dans le champ éditable, sont évidemment pris en compte également. |
- | + | ===== Et, c'est tout ? ===== | |
- | ===== That's it ? ===== | + | |
- | For this tutorial, yes, that's it. You know have a functional template that allows you to get Star Player cards. Of course, with the help of this tutorial, I encourage you to create your own template for your own needs. I will soon open a place to share the templates, and the demo page will host various templates (when [[https://github.com/Gulix/geckos/issues/30|this issue]] is completed). | + | Pour ce tutoriel, oui, c'est tout. Vous disposez là d'un template fonctionnel pour vos cartes de Champions. Je vous encourage bien sûr à créer vos propres templates à l'aide de ce tutoriel et de cette base. Un espace de partage pour les templates est envisagé pour le futur, et la page de démo hébergera par défaut plusieurs templates ([[https://github.com/Gulix/geckos/issues/30|cette évolution]] doit d'abord être terminée). |
- | If you have any trouble with this tutorial or the software, feel free to ask me for help, via the creation of an [[https://github.com/Gulix/geckos/issues/new|Issue]], or via a message on a forum in which I'll participate. | + | Si vous avez un souci avec ce tutoriel, ou avec le logiciel, n'hésitez pas à demander de l'aide, via la création d'un [[https://github.com/Gulix/geckos/issues/new|ticket d'incident]], ou via un message sur un forum où Geckos est présenté. |
- | ===== Full code of the template ===== | + | ===== Code complet du Template ===== |
<code javascript template01-code.json> | <code javascript template01-code.json> | ||
Ligne 282: | Ligne 292: | ||
"styles": [ | "styles": [ | ||
{ | { | ||
+ | "key": "default", | ||
+ | "name": "Default", | ||
"fields": [ | "fields": [ | ||
{ "name": "name", "label": "Name", "default": "Nobbla" }, | { "name": "name", "label": "Name", "default": "Nobbla" }, | ||
Ligne 356: | Ligne 368: | ||
"canvasHeight": 750 | "canvasHeight": 750 | ||
} | } | ||
- | ] | + | ], |
+ | "description": | ||
+ | { | ||
+ | "description": "Template for Blood Bowl's Starplayers, with the V3 design", | ||
+ | "title":"Blood Bowl Classic Starplayer", | ||
+ | "credits": "by Nicolas Ronvel", | ||
+ | "key": "bb-starplayers-v3", | ||
+ | "url": "https://github.com/Gulix/geckos/" | ||
+ | } | ||
} | } | ||
</code> | </code> |