Outils pour utilisateurs
fr:tutorial:tutorial01
Différences
Ci-dessous, les différences entre deux révisions de la page.
| Les deux révisions précédentes Révision précédente Prochaine révision | Révision précédente | ||
|
fr:tutorial:tutorial01 [2016/08/31 13:20] Nicolas Ronvel [Un choix à faire] |
fr:tutorial:tutorial01 [2018/06/06 10:13] (Version actuelle) 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 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> | ||
| Ligne 209: | Ligne 217: | ||
| 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 ! | 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 ! | ||
| - | ===== Mug Shot ===== | + | ===== Photo d'identité ===== |
| - | 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. | + | 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. |
| - | 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. | + | 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. |
| - | To add the **Image input** field, just add this line to the ''fields'' part of the template : | + | Pour ajouter un **Champ Image**, ajoutons juste cette ligne à la section ''fields'' du template : |
| <code javascript> | <code javascript> | ||
| Ligne 221: | 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 227: | 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 243: | Ligne 253: | ||
| </code> | </code> | ||
| - | And the canvas field : | + | Dans la partie ''canvasFields'' : |
| <code javascript> | <code javascript> | ||
| Ligne 249: | 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 262: | 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 269: | 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 ? ===== | + | 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). |
| - | 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). | + | 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é. |
| - | 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. | + | ===== Code complet du Template ===== |
| - | + | ||
| - | ===== Full code of the template ===== | + | |
| <code javascript template01-code.json> | <code javascript template01-code.json> | ||
| Ligne 283: | Ligne 292: | ||
| "styles": [ | "styles": [ | ||
| { | { | ||
| + | "key": "default", | ||
| + | "name": "Default", | ||
| "fields": [ | "fields": [ | ||
| { "name": "name", "label": "Name", "default": "Nobbla" }, | { "name": "name", "label": "Name", "default": "Nobbla" }, | ||
| Ligne 357: | 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> | ||
fr/tutorial/tutorial01.1472642418.txt.gz · Dernière modification: 2016/08/31 13:20 par Nicolas Ronvel
Outils de la page
Sauf mention contraire, le contenu de ce wiki est placé sous les termes de la licence suivante : CC Attribution-Share Alike 4.0 International
